feat(pagination): Demo add first pagination Ex (#40)

angular/demo/src/app/samples/pagination/custom.route.ts

@@ -0,0 +1,64 @@
+import {AgnosUIAngularModule} from '@agnos-ui/angular';
+import type {PaginationContext} from '@agnos-ui/angular';
+import {NgIf} from '@angular/common';
+import {Component} from '@angular/core';
+
+const FILTER_PAG_REGEX = /[^0-9]/g;
+
+@Component({
+	standalone: true,
+	imports: [AgnosUIAngularModule, NgIf],
+	template: `
+		<p>A pagination with customized links:</p>
+		<nav au-pagination [collectionSize]="70" [(page)]="customPage" ariaLabel="Page navigation with customized links">
+			<ng-template auPaginationPrevious>Prev</ng-template>
+			<ng-template auPaginationNext>Next</ng-template>
+			<ng-template auPaginationNumber let-displayedPage="displayedPage">{{ getPageSymbol(displayedPage) }}</ng-template>
+		</nav>
+		<hr />
+
+		<p>A pagination with customized pages:</p>
+		<nav au-pagination [collectionSize]="70" [(page)]="customPage" ariaLabel="Page navigation with customized pages">
+			<ng-template auPaginationPages let-widget="widget" let-state="state">
+				<li class="au-custom-pages-item" *ngIf="state.pages.length > 0">
+					<div class="mb-3 d-flex flex-nowrap px-2">
+						<label id="paginationInputLabel" for="paginationInput" class="col-form-label me-2 ms-1">Page</label>
+						<input
+							#i
+							type="text"
+							inputmode="numeric"
+							pattern="[0-9]*"
+							class="form-control custom-pages-input"
+							id="paginationInput"
+							[value]="state.page"
+							(keyup.enter)="handleTheChange(i, widget)"
+							(blur)="handleTheChange(i, widget)"
+							(input)="formatInput(i)"
+							aria-labelledby="paginationInputLabel paginationDescription"
+							style="width: 2.5rem"
+						/>
+						<span id="paginationDescription" class="col-form-label text-nowrap px-2"> of {{ state.pages.length }}</span>
+					</div>
+				</li>
+			</ng-template>
+		</nav>
+	`,
+})
+export default class PaginationComponent {
+	customPage = 4;
+
+	getPageSymbol(displayedPage: number) {
+		return ['A', 'B', 'C', 'D', 'E', 'F', 'G'][displayedPage - 1];
+	}
+
+	formatInput(input: HTMLInputElement) {
+		input.value = input.value.replace(FILTER_PAG_REGEX, '');
+	}
+
+	handleTheChange(input: HTMLInputElement, widget: PaginationContext['widget']) {
+		const value = input.value;
+		const intValue = parseInt(value);
+		widget.actions.select(intValue);
+		input.value = widget.stores.page$().toString();
+	}
+}

angular/demo/src/app/samples/pagination/default.route.ts

@@ -5,12 +5,24 @@ import {Component} from '@angular/core';
 	standalone: true,
 	imports: [AgnosUIAngularModule],
 	template: `
-		<au-pagination [(page)]="page" />
-		<div>
+		<h5>Default pagination:</h5>
+		<nav au-pagination [(page)]="page" [collectionSize]="70"></nav>
+
+		<h5>No direction links:</h5>
+		<nav au-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></nav>
+
+		<h5>With boundary links:</h5>
+		<nav au-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></nav>
+
+		<div class="mb-3">
 			Current page: <span id="defaultPage">{{ page }}</span>
 		</div>
+
+		<h5>Disabled pagination:</h5>
+		<nav au-pagination [collectionSize]="70" [(page)]="pageAlone" ariaLabel="Disabled pagination" [disabled]="true"></nav>
 	`,
 })
 export default class DefaultPaginationComponent {
 	page = 4;
+	pageAlone = 1;
 }

angular/demo/src/app/samples/pagination/playground.route.ts

@@ -10,7 +10,7 @@ const undefinedConfig = getUndefinedValues(getPaginationDefaultConfig());
 	standalone: true,
 	imports: [AgnosUIAngularModule],
 	providers: provideHashConfig('pagination'),
-	template: `<au-pagination #widget></au-pagination>`,
+	template: `<nav au-pagination #widget></nav>`,
 })
 export default class PlaygroundComponent {
 	@ViewChild('widget') widget: PaginationComponent;