Add paginator and data source functionality to angular-demo app

apps/angular-demo/package.json

@@ -52,6 +52,7 @@
     "@angular/forms": "^20.1.6",
     "@angular/platform-browser": "^20.1.6",
     "@angular/platform-browser-dynamic": "^20.1.6",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.10",
     "rxjs": "^7.8.2",
     "zone.js": "^0.15.1"
   },

apps/angular-demo/src/app/app.component.html

@@ -1,2 +1,11 @@
 <h1>Hello Angular Demo!</h1>
 <sl-button variant="info" size="lg">Button</sl-button>
+
+<ul>
+  <ng-template ngFor let-item [ngForOf]="quotes">
+    <li>{{item.quote}} - {{item.author}}
+  </ng-template>
+</ul>
+
+<sl-paginator [dataSource]="dataSource" 
+              (sl-page-change)="onPageChange()"></sl-paginator>

apps/angular-demo/src/app/app.component.ts

@@ -1,11 +1,54 @@
+import { NgFor } from '@angular/common';
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ButtonComponent } from '@sl-design-system/angular/button';
+import { PaginatorComponent } from '@sl-design-system/angular/paginator';
+import { FetchListDataSource, FetchListDataSourceError, ListDataSourceItem } from '@sl-design-system/data-source';
 
+ interface Quote {
+      id: string;
+      quote: string;
+      author: string;
+    }
+
+    interface QuotesResponse {
+      quotes: Quote[];
+      total: number;
+      skip: number;
+      limit: number;
+    }
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  imports: [ButtonComponent],
+  imports: [NgFor, ButtonComponent, PaginatorComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {}
+export class AppComponent {
+
+  dataSource!: FetchListDataSource<Quote>;
+  quotes?:Quote[];
+
+  ngOnInit(): void {
+    this.dataSource = new FetchListDataSource<Quote>({
+      pageSize: 10,
+      pagination: true,
+      fetchPage: async ({ page, pageSize }) => {
+        const response = await fetch(`https://dummyjson.com/quotes?skip=${page * pageSize}&limit=${pageSize}`);
+
+        if (response.ok) {
+          const { quotes, total } = (await response.json()) as QuotesResponse;
+          this.quotes = quotes;
+          return { items: quotes, totalItems: total };
+        } else {
+          throw new FetchListDataSourceError('Failed to fetch data', response);
+        }
+      }
+    });
+
+  }
+  onPageChange() {
+    setTimeout(() => {
+       this.quotes = [...this.dataSource.items.map((item: ListDataSourceItem) => item.id as Quote)];
+    }, 10);
+  }
+}

apps/angular-demo/src/app/app.module.ts

@@ -2,9 +2,11 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { ButtonComponent } from '@sl-design-system/angular/button';
+import { PaginatorComponent } from '@sl-design-system/angular/paginator';
+
 
 @NgModule({
   declarations: [],
-  imports: [AppComponent, BrowserModule, ButtonComponent],
+  imports: [AppComponent, BrowserModule, ButtonComponent, PaginatorComponent],
 })
 export class AppModule {}

apps/angular-demo/src/main.ts

@@ -4,6 +4,7 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { setup } from '@sl-design-system/sanoma-learning';
 import '@sl-design-system/button/register.js';
+import '@sl-design-system/paginator/register.js';
 
 bootstrapApplication(AppComponent);
 

apps/angular-demo/src/polyfills.ts

@@ -1 +1,2 @@
 import 'zone.js';
+import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';

package.json

@@ -74,9 +74,11 @@
     "@sl-design-system/angular": "^3.2.0",
     "@sl-design-system/button": "^1.2.4",
     "@sl-design-system/checkbox": "^2.1.4",
+    "@sl-design-system/data-source": "^0.2.0",
     "@sl-design-system/dialog": "^2.0.1",
     "@sl-design-system/form": "^1.2.4",
     "@sl-design-system/icon": "^1.2.1",
+    "@sl-design-system/paginator": "^0.2.0",
     "@sl-design-system/radio-group": "^1.1.4",
     "@sl-design-system/sanoma-learning": "^0.4.6",
     "@sl-design-system/select": "^2.0.4",