diff --git a/CHANGELOG.md b/CHANGELOG.md index ec68dce59f..a7cac7de5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ Our versioning strategy is as follows: * Richtext component ([#1864](https://github.com/Sitecore/jss/pull/1864)) * Container component ([#1872](https://github.com/Sitecore/jss/pull/1872)) * Angular SXA layout ([#1873](https://github.com/Sitecore/jss/pull/1873))([#1880](https://github.com/Sitecore/jss/pull/1880))([#1890](https://github.com/Sitecore/jss/pull/1890)) + * Link-List ([#1898](https://github.com/Sitecore/jss/pull/1898)) * Column-Splitter ([#1889](https://github.com/Sitecore/jss/pull/1889)) ### 🛠 Breaking Change diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html new file mode 100644 index 0000000000..73345c8ddb --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts new file mode 100644 index 0000000000..b05924d97d --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit } from '@angular/core'; +import { SxaComponent } from '../sxa.component'; +import { Field, LinkField, SxaLinkListFields } from '@sitecore-jss/sitecore-jss-angular'; + +@Component({ + selector: 'app-link-list', + templateUrl: './link-list.component.html', +}) +export class LinkListComponent extends SxaComponent implements OnInit { + title?: Field; + fieldLinks: LinkField[] = []; + + getFieldLinkClass(index: number): string { + let className = `item${index}`; + className += (index + 1) % 2 == 0 ? ' even' : ' odd'; + if (index === 0) { + className += ' first'; + } + if (index + 1 === this.fieldLinks.length) { + className += ' last'; + } + return className; + } + + ngOnInit() { + super.ngOnInit(); + const datasource = this.rendering.fields?.data?.datasource; + if (datasource) { + this.title = datasource.field?.title as Field; + datasource.children.results.forEach(item => { + if (item.field?.link) + this.fieldLinks.push(item.field.link as LinkField); + }); + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts index 8a0ab7c6b8..c01fad47e7 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts @@ -1,9 +1,9 @@ import { OnInit, Input, Directive } from '@angular/core'; -import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular'; +import { ComponentFields, ComponentRendering } from '@sitecore-jss/sitecore-jss-angular'; @Directive() -export abstract class SxaComponent implements OnInit { - @Input() rendering: ComponentRendering; +export abstract class SxaComponent implements OnInit { + @Input() rendering: ComponentRendering; id?: string; styles?: string; diff --git a/packages/sitecore-jss-angular/src/components/rendering-field.ts b/packages/sitecore-jss-angular/src/components/rendering-field.ts index f9f7d783f0..8fdc1807bf 100644 --- a/packages/sitecore-jss-angular/src/components/rendering-field.ts +++ b/packages/sitecore-jss-angular/src/components/rendering-field.ts @@ -44,6 +44,25 @@ export interface LinkField extends LinkFieldValue, RenderingField { editableLastPart?: string; } +interface LayoutServiceLinkField { + field: { + link: LinkField; + }; +} + +export interface SxaLinkListFields { + data: { + datasource: { + children: { + results: LayoutServiceLinkField[]; + }; + field: { + title: TextField; + }; + }; + }; +} + export interface RichTextField extends RenderingField {} export interface TextField extends RenderingField {} diff --git a/packages/sitecore-jss-angular/src/public_api.ts b/packages/sitecore-jss-angular/src/public_api.ts index da7ec5f344..0aff40dc54 100644 --- a/packages/sitecore-jss-angular/src/public_api.ts +++ b/packages/sitecore-jss-angular/src/public_api.ts @@ -30,6 +30,7 @@ export { RenderingField, RichTextField, TextField, + SxaLinkListFields, } from './components/rendering-field'; export { RichTextDirective } from './components/rich-text.directive'; export { TextDirective } from './components/text.directive'; diff --git a/packages/sitecore-jss/src/layout/models.ts b/packages/sitecore-jss/src/layout/models.ts index 3f60e02081..97adc1e5a2 100644 --- a/packages/sitecore-jss/src/layout/models.ts +++ b/packages/sitecore-jss/src/layout/models.ts @@ -93,12 +93,12 @@ export interface ComponentParams { /** * Definition of a component instance within a placeholder on a route */ -export interface ComponentRendering { +export interface ComponentRendering { componentName: string; dataSource?: string; uid?: string; placeholders?: PlaceholdersData; - fields?: ComponentFields; + fields?: T; params?: ComponentParams; } @@ -137,7 +137,7 @@ export interface FieldMetadata { } /** - * Content data returned from Content Service + * Content data returned from Layout Service */ export interface Item { name: string;