6f0ab0cf5f
- Replace incorrect semantic token names with correct ones: • $semantic-border-width-thin → $semantic-border-width-1 • $semantic-color-border-default → $semantic-color-border-primary • $semantic-spacing-content-* → $semantic-spacing-component-* • $semantic-typography-body-* → $semantic-typography-font-size-* • $semantic-typography-caption-* → $semantic-typography-font-size-* • $semantic-motion-easing-standard → $semantic-easing-standard • $semantic-color-surface-tertiary → $semantic-color-surface-secondary • Various hover color tokens → base color tokens - Fix typography map usage errors: • Replace heading map tokens with individual size tokens • $semantic-typography-heading-h* → $semantic-typography-heading-h*-size - Update affected components: • tooltip, divider, progress-circle, range-slider components • Related demo components and SCSS files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
523 lines
16 KiB
TypeScript
523 lines
16 KiB
TypeScript
import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { PaginationComponent } from '../../../../../ui-essentials/src/lib/components/navigation/pagination/pagination.component';
|
|
|
|
@Component({
|
|
selector: 'ui-pagination-demo',
|
|
standalone: true,
|
|
imports: [CommonModule, PaginationComponent],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<div style="padding: 2rem;">
|
|
<h2>Pagination Component Showcase</h2>
|
|
|
|
<!-- Size Variants -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>Sizes</h3>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Small</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageSmall"
|
|
[totalPages]="totalPagesDemo"
|
|
size="sm"
|
|
(pageChange)="onPageChange($event, 'small')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Medium (Default)</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageMedium"
|
|
[totalPages]="totalPagesDemo"
|
|
size="md"
|
|
(pageChange)="onPageChange($event, 'medium')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Large</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageLarge"
|
|
[totalPages]="totalPagesDemo"
|
|
size="lg"
|
|
(pageChange)="onPageChange($event, 'large')">
|
|
</ui-pagination>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Alignment Variants -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>Alignment</h3>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Left Aligned</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageLeft"
|
|
[totalPages]="totalPagesDemo"
|
|
alignment="left"
|
|
(pageChange)="onPageChange($event, 'left')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Center Aligned (Default)</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageCenter"
|
|
[totalPages]="totalPagesDemo"
|
|
alignment="center"
|
|
(pageChange)="onPageChange($event, 'center')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Right Aligned</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageRight"
|
|
[totalPages]="totalPagesDemo"
|
|
alignment="right"
|
|
(pageChange)="onPageChange($event, 'right')">
|
|
</ui-pagination>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Page Info Variants -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>With Page Information</h3>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Basic Page Info</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageInfo"
|
|
[totalPages]="totalPagesDemo"
|
|
[showInfo]="true"
|
|
(pageChange)="onPageChange($event, 'info')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>With Items Count</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageItems"
|
|
[totalPages]="totalPagesItems"
|
|
[totalItems]="totalItemsDemo"
|
|
[itemsPerPage]="itemsPerPageDemo"
|
|
[showInfo]="true"
|
|
(pageChange)="onPageChange($event, 'items')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Without Info</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageNoInfo"
|
|
[totalPages]="totalPagesDemo"
|
|
[showInfo]="false"
|
|
(pageChange)="onPageChange($event, 'no-info')">
|
|
</ui-pagination>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Compact Variant -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>Compact Style</h3>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Compact Pagination</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageCompact"
|
|
[totalPages]="totalPagesDemo"
|
|
[compact]="true"
|
|
(pageChange)="onPageChange($event, 'compact')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Compact with Labels</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageCompactLabels"
|
|
[totalPages]="totalPagesDemo"
|
|
[compact]="true"
|
|
[showLabels]="true"
|
|
(pageChange)="onPageChange($event, 'compact-labels')">
|
|
</ui-pagination>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Different Page Counts -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>Different Page Counts</h3>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Few Pages (5 total)</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageFew"
|
|
[totalPages]="totalPagesFew"
|
|
(pageChange)="onPageChange($event, 'few')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Many Pages (50 total)</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageMany"
|
|
[totalPages]="totalPagesMany"
|
|
(pageChange)="onPageChange($event, 'many')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Limited Visible Pages (maxVisible=5)</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageLimited"
|
|
[totalPages]="totalPagesMany"
|
|
[maxVisible]="5"
|
|
(pageChange)="onPageChange($event, 'limited')">
|
|
</ui-pagination>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Labels and States -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>Labels and States</h3>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>With Navigation Labels</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageLabels"
|
|
[totalPages]="totalPagesDemo"
|
|
[showLabels]="true"
|
|
previousLabel="Back"
|
|
nextLabel="Forward"
|
|
(pageChange)="onPageChange($event, 'labels')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Custom ARIA Labels</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageAria"
|
|
[totalPages]="totalPagesDemo"
|
|
ariaLabel="Results pagination"
|
|
previousAriaLabel="Go to previous results page"
|
|
nextAriaLabel="Go to next results page"
|
|
(pageChange)="onPageChange($event, 'aria')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Disabled State</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageDisabled"
|
|
[totalPages]="totalPagesDemo"
|
|
[disabled]="true"
|
|
(pageChange)="onPageChange($event, 'disabled')">
|
|
</ui-pagination>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Example -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>Interactive Pagination</h3>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Controlled Pagination</h4>
|
|
<div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
|
|
<button
|
|
style="padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;"
|
|
(click)="goToFirstPage()">
|
|
First Page
|
|
</button>
|
|
<button
|
|
style="padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;"
|
|
(click)="goToLastPage()">
|
|
Last Page
|
|
</button>
|
|
<button
|
|
style="padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;"
|
|
(click)="jumpToMiddle()">
|
|
Jump to Middle
|
|
</button>
|
|
<button
|
|
style="padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;"
|
|
(click)="resetInteractive()">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
<ui-pagination
|
|
#interactivePagination
|
|
[currentPage]="currentPageInteractive"
|
|
[totalPages]="totalPagesInteractive"
|
|
[totalItems]="totalItemsInteractive()"
|
|
[itemsPerPage]="itemsPerPageDemo"
|
|
[showInfo]="true"
|
|
size="lg"
|
|
(pageChange)="onInteractivePageChange($event)">
|
|
</ui-pagination>
|
|
</div>
|
|
|
|
@if (lastPageChange) {
|
|
<div style="margin-top: 1rem; padding: 1rem; background: #e3f2fd; border-radius: 4px;">
|
|
<strong>Last page change:</strong> {{ lastPageChange }}
|
|
</div>
|
|
}
|
|
</section>
|
|
|
|
<!-- Usage Examples -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>Usage Examples</h3>
|
|
<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; border-left: 4px solid #007bff;">
|
|
<h4>Basic Pagination:</h4>
|
|
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code><ui-pagination
|
|
[currentPage]="currentPage"
|
|
[totalPages]="totalPages"
|
|
(pageChange)="onPageChange($event)">
|
|
</ui-pagination></code></pre>
|
|
|
|
<h4>With Item Information:</h4>
|
|
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code><ui-pagination
|
|
[currentPage]="currentPage"
|
|
[totalPages]="totalPages"
|
|
[totalItems]="totalItems"
|
|
[itemsPerPage]="itemsPerPage"
|
|
[showInfo]="true"
|
|
(pageChange)="onPageChange($event)">
|
|
</ui-pagination></code></pre>
|
|
|
|
<h4>Compact with Labels:</h4>
|
|
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code><ui-pagination
|
|
[currentPage]="currentPage"
|
|
[totalPages]="totalPages"
|
|
[compact]="true"
|
|
[showLabels]="true"
|
|
size="sm"
|
|
alignment="left"
|
|
previousLabel="Back"
|
|
nextLabel="Forward"
|
|
(pageChange)="onPageChange($event)">
|
|
</ui-pagination></code></pre>
|
|
|
|
<h4>Customized Pagination:</h4>
|
|
<pre style="background: #fff; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code><ui-pagination
|
|
[currentPage]="currentPage"
|
|
[totalPages]="totalPages"
|
|
[maxVisible]="5"
|
|
size="lg"
|
|
alignment="center"
|
|
ariaLabel="Search results pagination"
|
|
[showInfo]="true"
|
|
(pageChange)="handlePageChange($event)">
|
|
</ui-pagination></code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Edge Cases -->
|
|
<section style="margin-bottom: 3rem;">
|
|
<h3>Edge Cases</h3>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Single Page</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageOne"
|
|
[totalPages]="totalPagesOne"
|
|
(pageChange)="onPageChange($event, 'single')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Two Pages</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageTwo"
|
|
[totalPages]="totalPagesTwo"
|
|
(pageChange)="onPageChange($event, 'two')">
|
|
</ui-pagination>
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
<h4>Large Dataset (1000+ pages)</h4>
|
|
<ui-pagination
|
|
[currentPage]="currentPageLargeDataset"
|
|
[totalPages]="totalPagesLargeDataset"
|
|
[totalItems]="24934"
|
|
[itemsPerPage]="20"
|
|
[showInfo]="true"
|
|
[maxVisible]="7"
|
|
(pageChange)="onPageChange($event, 'large-dataset')">
|
|
</ui-pagination>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
`,
|
|
styles: [`
|
|
h2 {
|
|
color: hsl(279, 14%, 11%);
|
|
font-size: 2rem;
|
|
margin-bottom: 2rem;
|
|
border-bottom: 2px solid hsl(258, 100%, 47%);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
h3 {
|
|
color: hsl(279, 14%, 25%);
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h4 {
|
|
color: hsl(287, 12%, 35%);
|
|
font-size: 1.125rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
section {
|
|
border: 1px solid hsl(289, 14%, 90%);
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
background: hsl(286, 20%, 99%);
|
|
}
|
|
|
|
pre {
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
code {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: #d63384;
|
|
}
|
|
|
|
button:hover {
|
|
background: #f0f0f0 !important;
|
|
}
|
|
|
|
button:active {
|
|
background: #e0e0e0 !important;
|
|
}
|
|
`]
|
|
})
|
|
export class PaginationDemoComponent {
|
|
// Size variants
|
|
currentPageSmall = signal(2);
|
|
currentPageMedium = signal(3);
|
|
currentPageLarge = signal(4);
|
|
|
|
// Alignment variants
|
|
currentPageLeft = signal(1);
|
|
currentPageCenter = signal(5);
|
|
currentPageRight = signal(8);
|
|
|
|
// Info variants
|
|
currentPageInfo = signal(3);
|
|
currentPageItems = signal(2);
|
|
currentPageNoInfo = signal(6);
|
|
|
|
// Compact variants
|
|
currentPageCompact = signal(4);
|
|
currentPageCompactLabels = signal(2);
|
|
|
|
// Different counts
|
|
currentPageFew = signal(3);
|
|
currentPageMany = signal(25);
|
|
currentPageLimited = signal(15);
|
|
|
|
// Labels and states
|
|
currentPageLabels = signal(1);
|
|
currentPageAria = signal(1);
|
|
currentPageDisabled = signal(5);
|
|
|
|
// Interactive
|
|
currentPageInteractive = signal(1);
|
|
totalPagesInteractive = signal(20);
|
|
totalItemsInteractive = signal(387);
|
|
|
|
// Edge cases
|
|
currentPageTwo = signal(1);
|
|
currentPageLargeDataset = signal(234);
|
|
|
|
// Constants for edge cases
|
|
totalPagesOne = signal(1);
|
|
currentPageOne = signal(1);
|
|
totalPagesTwo = signal(2);
|
|
totalPagesLargeDataset = signal(1247);
|
|
|
|
// Demo data
|
|
totalPagesDemo = signal(12);
|
|
totalPagesFew = signal(5);
|
|
totalPagesMany = signal(50);
|
|
totalItemsDemo = 234;
|
|
itemsPerPageDemo = 20;
|
|
totalPagesItems = signal(Math.ceil(this.totalItemsDemo / this.itemsPerPageDemo));
|
|
|
|
// Interactive state
|
|
lastPageChange: string = '';
|
|
|
|
onPageChange(event: any, type: string): void {
|
|
this.lastPageChange = `${type}: Page ${event.previousPage} → ${event.page}`;
|
|
console.log(`Page changed in ${type}:`, event);
|
|
|
|
// Update the appropriate signal based on type
|
|
switch (type) {
|
|
case 'small':
|
|
this.currentPageSmall.set(event.page);
|
|
break;
|
|
case 'medium':
|
|
this.currentPageMedium.set(event.page);
|
|
break;
|
|
case 'large':
|
|
this.currentPageLarge.set(event.page);
|
|
break;
|
|
case 'left':
|
|
this.currentPageLeft.set(event.page);
|
|
break;
|
|
case 'center':
|
|
this.currentPageCenter.set(event.page);
|
|
break;
|
|
case 'right':
|
|
this.currentPageRight.set(event.page);
|
|
break;
|
|
case 'info':
|
|
this.currentPageInfo.set(event.page);
|
|
break;
|
|
case 'items':
|
|
this.currentPageItems.set(event.page);
|
|
break;
|
|
case 'no-info':
|
|
this.currentPageNoInfo.set(event.page);
|
|
break;
|
|
case 'compact':
|
|
this.currentPageCompact.set(event.page);
|
|
break;
|
|
case 'compact-labels':
|
|
this.currentPageCompactLabels.set(event.page);
|
|
break;
|
|
case 'few':
|
|
this.currentPageFew.set(event.page);
|
|
break;
|
|
case 'many':
|
|
this.currentPageMany.set(event.page);
|
|
break;
|
|
case 'limited':
|
|
this.currentPageLimited.set(event.page);
|
|
break;
|
|
case 'labels':
|
|
this.currentPageLabels.set(event.page);
|
|
break;
|
|
case 'aria':
|
|
this.currentPageAria.set(event.page);
|
|
break;
|
|
case 'two':
|
|
this.currentPageTwo.set(event.page);
|
|
break;
|
|
case 'large-dataset':
|
|
this.currentPageLargeDataset.set(event.page);
|
|
break;
|
|
}
|
|
}
|
|
|
|
onInteractivePageChange(event: any): void {
|
|
this.currentPageInteractive.set(event.page);
|
|
this.lastPageChange = `Interactive: Page ${event.previousPage} → ${event.page}`;
|
|
}
|
|
|
|
// Interactive controls
|
|
goToFirstPage(): void {
|
|
this.currentPageInteractive.set(1);
|
|
this.lastPageChange = 'Programmatically navigated to first page';
|
|
}
|
|
|
|
goToLastPage(): void {
|
|
this.currentPageInteractive.set(this.totalPagesInteractive());
|
|
this.lastPageChange = 'Programmatically navigated to last page';
|
|
}
|
|
|
|
jumpToMiddle(): void {
|
|
const middle = Math.ceil(this.totalPagesInteractive() / 2);
|
|
this.currentPageInteractive.set(middle);
|
|
this.lastPageChange = `Programmatically jumped to middle page (${middle})`;
|
|
}
|
|
|
|
resetInteractive(): void {
|
|
this.currentPageInteractive.set(1);
|
|
this.lastPageChange = 'Interactive pagination reset';
|
|
}
|
|
} |