[sitecore-jss-angular] Implement Link-List SXA component

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

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html

@@ -0,0 +1,17 @@
+<div class="component link-list {{ styles }}" [attr.id]="id">
+  <div class="component-content">
+    <ng-container *ngIf="title; else defaultTitle">
+      <h3 *scText="title"></h3>
+    </ng-container>    
+    <ul>
+      <li *ngFor="let fieldLink of fieldLinks;index as i" [ngClass]="getFieldLinkClass(i)" >
+        <div class="field-link">
+          <a *scLink="fieldLink"></a>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <ng-template #defaultTitle>
+    <span class="is-empty-hint">Link list</span>
+  </ng-template>
+</div>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts

@@ -0,0 +1,37 @@
+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<SxaLinkListFields> implements OnInit {
+  title?: Field<string>;
+  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<string>;
+      datasource.children.results.forEach(item => {
+        if (item.field?.link)
+          this.fieldLinks.push(item.field.link as LinkField);
+      });
+    }
+    console.log(datasource);
+  }
+}

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<string> {}
 
 export interface TextField extends RenderingField<string> {}

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';

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<T = ComponentFields> {
   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;