From e694278159be742e2bc55cecede59a8df53cb4ff Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Tue, 20 Aug 2024 20:21:00 -0400
Subject: [PATCH 1/6] [sitecore-jss] Introduce extra types from Edge schema
 into models

(cherry picked from commit f09a6cdb997c1844960c8d300d9157a5c0880fae)
---
 packages/sitecore-jss/src/layout/content-styles.ts |  6 +++++-
 packages/sitecore-jss/src/layout/index.ts          |  1 +
 packages/sitecore-jss/src/layout/models.ts         | 14 ++++++++++++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/sitecore-jss/src/layout/content-styles.ts b/packages/sitecore-jss/src/layout/content-styles.ts
index 1dc84bb450..ece9a518a5 100644
--- a/packages/sitecore-jss/src/layout/content-styles.ts
+++ b/packages/sitecore-jss/src/layout/content-styles.ts
@@ -1,6 +1,7 @@
 import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
 import {
   ComponentRendering,
+  DatasourceField,
   Field,
   HtmlElementRendering,
   Item,
@@ -59,7 +60,10 @@ export const traversePlaceholder = (
   });
 };
 
-export const traverseField = (field: Field | Item | Item[] | undefined, config: Config) => {
+export const traverseField = (
+  field: Field | Item | Item[] | DatasourceField | undefined,
+  config: Config
+) => {
   if (!field || config.loadStyles) return;
 
   if ('editable' in field && field.editable) {
diff --git a/packages/sitecore-jss/src/layout/index.ts b/packages/sitecore-jss/src/layout/index.ts
index 9b4eb5cdad..dbcf3376e0 100644
--- a/packages/sitecore-jss/src/layout/index.ts
+++ b/packages/sitecore-jss/src/layout/index.ts
@@ -16,6 +16,7 @@ export {
   ComponentParams,
   EditMode,
   FieldMetadata,
+  DatasourceField,
 } from './models';
 
 export {
diff --git a/packages/sitecore-jss/src/layout/models.ts b/packages/sitecore-jss/src/layout/models.ts
index 3f60e02081..0871ff4407 100644
--- a/packages/sitecore-jss/src/layout/models.ts
+++ b/packages/sitecore-jss/src/layout/models.ts
@@ -76,11 +76,15 @@ export type PlaceholdersData<TYPEDNAME extends string = string> = {
   [P in TYPEDNAME]: Array<ComponentRendering | HtmlElementRendering>;
 };
 
+export interface DatasourceField {
+  datasource: Item;
+}
+
 /**
  * Content field data passed to a component
  */
 export interface ComponentFields {
-  [name: string]: Field | Item | Item[];
+  [name: string]: Field | Item | Item[] | DatasourceField;
 }
 
 /**
@@ -137,7 +141,7 @@ export interface FieldMetadata {
 }
 
 /**
- * Content data returned from Content Service
+ * Content data returned from Layout Service
  */
 export interface Item {
   name: string;
@@ -147,6 +151,12 @@ export interface Item {
   fields: {
     [name: string]: Field | Item | Item[] | undefined;
   };
+  field?: {
+    [name: string]: Field;
+  };
+  children?: {
+    results: Item[];
+  };
 }
 
 /**

From 16ce8d41b19c118538eb00b5a3e207184d02568b Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Tue, 20 Aug 2024 20:21:28 -0400
Subject: [PATCH 2/6] mid-way implementation

---
 .../link-list/link-list.component.html        | 17 ++++++++
 .../link-list/link-list.component.ts          | 39 +++++++++++++++++++
 .../sitecore-jss-angular/src/public_api.ts    |  1 +
 3 files changed, 57 insertions(+)
 create mode 100644 packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html
 create mode 100644 packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts

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..2c24269286
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html
@@ -0,0 +1,17 @@
+<div class="{{ 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>
\ 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..26df670ff3
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+import { Field, LinkField, DatasourceField } from '@sitecore-jss/sitecore-jss-angular';
+
+@Component({
+  selector: 'app-link-list',
+  templateUrl: './link-list.component.html',
+})
+export class LinkListComponent extends SxaComponent implements OnInit {
+  source: DatasourceField;
+  title?: Field<string>;
+  fieldLinks: LinkField[];
+  field: Field;
+
+  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 source = this.rendering.fields?.data as unknown;
+    const datasource = (source as DatasourceField).datasource;
+    this.title = datasource.field?.title as Field<string>;
+    this.fieldLinks = [];
+    datasource.children.results.forEach(item => {
+      if (item.field?.link)
+        this.fieldLinks.push(item.field.link as LinkField);
+    });
+    console.log(this.fieldLinks);
+  }
+}
diff --git a/packages/sitecore-jss-angular/src/public_api.ts b/packages/sitecore-jss-angular/src/public_api.ts
index da7ec5f344..1602c37e0b 100644
--- a/packages/sitecore-jss-angular/src/public_api.ts
+++ b/packages/sitecore-jss-angular/src/public_api.ts
@@ -57,6 +57,7 @@ export {
   ComponentParams,
   getContentStylesheetLink,
   EditMode,
+  DatasourceField,
 } from '@sitecore-jss/sitecore-jss/layout';
 export {
   RetryStrategy,

From e3bfb6b18506cffbe0af377bc4b00fb1cda875e8 Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 21 Aug 2024 15:15:40 -0400
Subject: [PATCH 3/6] rework implementation

---
 .../link-list/link-list.component.html        |  2 +-
 .../link-list/link-list.component.ts          | 26 +++++++++----------
 .../src/components/rendering-field.ts         | 19 ++++++++++++++
 .../sitecore-jss-angular/src/public_api.ts    |  2 +-
 .../sitecore-jss/src/layout/content-styles.ts |  6 +----
 packages/sitecore-jss/src/layout/index.ts     |  1 -
 packages/sitecore-jss/src/layout/models.ts    | 16 +++---------
 7 files changed, 37 insertions(+), 35 deletions(-)

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
index 2c24269286..73345c8ddb 100644
--- 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
@@ -1,4 +1,4 @@
-<div class="{{ styles }}" [attr.id]="id">
+<div class="component link-list {{ styles }}" [attr.id]="id">
   <div class="component-content">
     <ng-container *ngIf="title; else defaultTitle">
       <h3 *scText="title"></h3>
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
index 26df670ff3..397bbed858 100644
--- 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
@@ -1,16 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { SxaComponent } from '../sxa.component';
-import { Field, LinkField, DatasourceField } from '@sitecore-jss/sitecore-jss-angular';
+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 {
-  source: DatasourceField;
+export class LinkListComponent extends SxaComponent<SxaLinkListFields> implements OnInit {
   title?: Field<string>;
-  fieldLinks: LinkField[];
-  field: Field;
+  fieldLinks: LinkField[] = [];
 
   getFieldLinkClass(index: number): string {
     let className = `item${index}`;
@@ -26,14 +24,14 @@ export class LinkListComponent extends SxaComponent implements OnInit {
 
   ngOnInit() {
     super.ngOnInit();
-    const source = this.rendering.fields?.data as unknown;
-    const datasource = (source as DatasourceField).datasource;
-    this.title = datasource.field?.title as Field<string>;
-    this.fieldLinks = [];
-    datasource.children.results.forEach(item => {
-      if (item.field?.link)
-        this.fieldLinks.push(item.field.link as LinkField);
-    });
-    console.log(this.fieldLinks);
+    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);
   }
 }
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<string> {}
 
 export interface TextField extends RenderingField<string> {}
diff --git a/packages/sitecore-jss-angular/src/public_api.ts b/packages/sitecore-jss-angular/src/public_api.ts
index 1602c37e0b..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';
@@ -57,7 +58,6 @@ export {
   ComponentParams,
   getContentStylesheetLink,
   EditMode,
-  DatasourceField,
 } from '@sitecore-jss/sitecore-jss/layout';
 export {
   RetryStrategy,
diff --git a/packages/sitecore-jss/src/layout/content-styles.ts b/packages/sitecore-jss/src/layout/content-styles.ts
index ece9a518a5..1dc84bb450 100644
--- a/packages/sitecore-jss/src/layout/content-styles.ts
+++ b/packages/sitecore-jss/src/layout/content-styles.ts
@@ -1,7 +1,6 @@
 import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
 import {
   ComponentRendering,
-  DatasourceField,
   Field,
   HtmlElementRendering,
   Item,
@@ -60,10 +59,7 @@ export const traversePlaceholder = (
   });
 };
 
-export const traverseField = (
-  field: Field | Item | Item[] | DatasourceField | undefined,
-  config: Config
-) => {
+export const traverseField = (field: Field | Item | Item[] | undefined, config: Config) => {
   if (!field || config.loadStyles) return;
 
   if ('editable' in field && field.editable) {
diff --git a/packages/sitecore-jss/src/layout/index.ts b/packages/sitecore-jss/src/layout/index.ts
index dbcf3376e0..9b4eb5cdad 100644
--- a/packages/sitecore-jss/src/layout/index.ts
+++ b/packages/sitecore-jss/src/layout/index.ts
@@ -16,7 +16,6 @@ export {
   ComponentParams,
   EditMode,
   FieldMetadata,
-  DatasourceField,
 } from './models';
 
 export {
diff --git a/packages/sitecore-jss/src/layout/models.ts b/packages/sitecore-jss/src/layout/models.ts
index 0871ff4407..97adc1e5a2 100644
--- a/packages/sitecore-jss/src/layout/models.ts
+++ b/packages/sitecore-jss/src/layout/models.ts
@@ -76,15 +76,11 @@ export type PlaceholdersData<TYPEDNAME extends string = string> = {
   [P in TYPEDNAME]: Array<ComponentRendering | HtmlElementRendering>;
 };
 
-export interface DatasourceField {
-  datasource: Item;
-}
-
 /**
  * Content field data passed to a component
  */
 export interface ComponentFields {
-  [name: string]: Field | Item | Item[] | DatasourceField;
+  [name: string]: Field | Item | Item[];
 }
 
 /**
@@ -97,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;
 }
 
@@ -151,12 +147,6 @@ export interface Item {
   fields: {
     [name: string]: Field | Item | Item[] | undefined;
   };
-  field?: {
-    [name: string]: Field;
-  };
-  children?: {
-    results: Item[];
-  };
 }
 
 /**

From 826047df9aab4a9df06150e9d80299e96fe5a19d Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 21 Aug 2024 15:24:01 -0400
Subject: [PATCH 4/6] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

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

From f41874192f04e56cb6567d126f018968f8e7a7e4 Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Thu, 22 Aug 2024 08:46:40 -0400
Subject: [PATCH 5/6] make SXA base component generic

---
 .../angular-xmcloud/src/app/components/sxa.component.ts     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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<FieldType = ComponentFields> implements OnInit {
+  @Input() rendering: ComponentRendering<FieldType>;
 
   id?: string;
   styles?: string;

From 2d99d2f287432d760175c0fd09689da5f7f3db7a Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Thu, 22 Aug 2024 08:46:59 -0400
Subject: [PATCH 6/6] cleanup console.log

---
 .../src/app/components/link-list/link-list.component.ts          | 1 -
 1 file changed, 1 deletion(-)

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
index 397bbed858..b05924d97d 100644
--- 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
@@ -32,6 +32,5 @@ export class LinkListComponent extends SxaComponent<SxaLinkListFields> implement
           this.fieldLinks.push(item.field.link as LinkField);
       });
     }
-    console.log(datasource);
   }
 }