ps-helix 5.1.2 → 5.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/fesm2022/ps-helix.mjs +2 -2
- package/fesm2022/ps-helix.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A comprehensive Angular component library built with Angular 21+ featuring modern design patterns, accessibility-first development, and optimal developer experience.
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/ps-helix)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
[](https://angular.dev/)
|
|
8
8
|
[](https://www.typescriptlang.org/)
|
|
@@ -106,7 +106,7 @@ After installation, verify that ps-helix is in your `package.json`:
|
|
|
106
106
|
```json
|
|
107
107
|
{
|
|
108
108
|
"dependencies": {
|
|
109
|
-
"ps-helix": "^5.1.
|
|
109
|
+
"ps-helix": "^5.1.3"
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
```
|
|
@@ -1182,7 +1182,7 @@ Copyright (c) 2025 PACK Solutions
|
|
|
1182
1182
|
|
|
1183
1183
|
---
|
|
1184
1184
|
|
|
1185
|
-
**Version**: 5.1.
|
|
1185
|
+
**Version**: 5.1.3
|
|
1186
1186
|
**Built with**: Angular 21.0.3, TypeScript 5.9.0, Phosphor Icons 2.0.3
|
|
1187
1187
|
**Author**: Fabrice PEREZ | Product Designer at PACK Solutions
|
|
1188
1188
|
**Last Updated**: January 2026
|
package/fesm2022/ps-helix.mjs
CHANGED
|
@@ -2810,11 +2810,11 @@ class PshPaginationComponent {
|
|
|
2810
2810
|
}
|
|
2811
2811
|
}
|
|
2812
2812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2813
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshPaginationComponent, isStandalone: true, selector: "psh-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPrevNext: { classPropertyName: "showPrevNext", publicName: "showPrevNext", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showItemsPerPage: { classPropertyName: "showItemsPerPage", publicName: "showItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", totalPages: "totalPagesChange", itemsPerPage: "itemsPerPageChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", navigationError: "navigationError" }, ngImport: i0, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n [value]=\"itemsPerPage()\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PshPaginationComponent, isStandalone: true, selector: "psh-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showPrevNext: { classPropertyName: "showPrevNext", publicName: "showPrevNext", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showItemsPerPage: { classPropertyName: "showItemsPerPage", publicName: "showItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageOptions: { classPropertyName: "itemsPerPageOptions", publicName: "itemsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", totalPages: "totalPagesChange", itemsPerPage: "itemsPerPageChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", navigationError: "navigationError" }, ngImport: i0, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\" [selected]=\"option === itemsPerPage()\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2814
2814
|
}
|
|
2815
2815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PshPaginationComponent, decorators: [{
|
|
2816
2816
|
type: Component,
|
|
2817
|
-
args: [{ selector: 'psh-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n
|
|
2817
|
+
args: [{ selector: 'psh-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n class=\"pagination\"\n [class.small]=\"size() === 'small'\"\n [class.large]=\"size() === 'large'\"\n [class.outline]=\"variant() === 'outline'\"\n role=\"navigation\"\n [attr.id]=\"navigationId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-state]=\"state()\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (showItemsPerPage()) {\n <div class=\"items-per-page\">\n <label [attr.for]=\"navigationId() + '-items-select'\" class=\"items-per-page-label\">\n {{ itemsPerPageLabel() }}\n </label>\n <select\n [attr.id]=\"navigationId() + '-items-select'\"\n (change)=\"onItemsPerPageChange($event)\"\n [attr.aria-label]=\"itemsPerPageLabel()\"\n >\n @for (option of itemsPerPageOptions(); track option) {\n <option [value]=\"option\" [selected]=\"option === itemsPerPage()\">\n {{ option }} {{ itemsLabel() }}\n </option>\n }\n </select>\n </div>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isFirstPage()\"\n (click)=\"goToFirstPage()\"\n [attr.aria-label]=\"firstLabel()\"\n [disabled]=\"isFirstPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoPrevious()\"\n (click)=\"goToPreviousPage()\"\n [attr.aria-label]=\"previousLabel()\"\n [disabled]=\"!canGoPrevious()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @for (page of pages(); track page) {\n <button\n class=\"page-button\"\n [class.active]=\"page === currentPage()\"\n (click)=\"goToPage(page)\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"pageLabel() + ' ' + page\"\n type=\"button\"\n >\n {{ page }}\n </button>\n }\n\n @if (showPrevNext()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"!canGoNext()\"\n (click)=\"goToNextPage()\"\n [attr.aria-label]=\"nextLabel()\"\n [disabled]=\"!canGoNext()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n @if (showFirstLast()) {\n <button\n class=\"page-button\"\n [class.disabled]=\"isLastPage()\"\n (click)=\"goToLastPage()\"\n [attr.aria-label]=\"lastLabel()\"\n [disabled]=\"isLastPage()\"\n type=\"button\"\n >\n <i class=\"ph ph-caret-double-right\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ currentPageAnnouncement() }}\n </div>\n</nav>", styles: [".pagination{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--surface-card);width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}.pagination:focus-within{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.pagination.outline{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.items-per-page{display:flex;align-items:center;gap:var(--spacing-xs);margin-right:var(--spacing-md);flex-shrink:0}.items-per-page-label{font-size:var(--font-size-sm);color:var(--text-color-secondary);white-space:nowrap;flex-shrink:0}.items-per-page select{padding:var(--spacing-xs) var(--spacing-sm);border:var(--border-width-1) solid var(--surface-border);border-radius:var(--border-radius);background:var(--surface-card);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default)}.items-per-page select:hover{border-color:var(--primary-color)}.items-per-page select:focus-visible{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}.small .items-per-page select{padding:calc(var(--spacing-xs) * .75) var(--spacing-sm);font-size:var(--font-size-sm)}.large .items-per-page select{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-lg)}.page-button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-9);height:var(--size-9);padding:var(--spacing-xs);border:none;border-radius:var(--border-radius);background:var(--surface-ground);color:var(--text-color);font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-easing-default);flex-shrink:0}.page-button:focus-visible{outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);outline-offset:var(--focus-outline-offset)}.page-button:hover:not(.disabled):not(.active){background:var(--surface-hover)}.page-button.active{background:var(--primary-gradient);color:var(--primary-color-text)}.page-button.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.page-button i{font-size:var(--icon-size-sm)}.pagination.outline .page-button{background:transparent;border:var(--border-width-1) solid var(--surface-border)}.pagination.outline .page-button:hover:not(.disabled):not(.active){background:var(--surface-hover);border-color:var(--primary-color)}.pagination.outline .page-button.active{background:var(--primary-gradient);color:var(--primary-color-text);border-color:var(--primary-color)}.pagination.small .page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.pagination.small .page-button i{font-size:var(--icon-size-xs)}.pagination.large .page-button{min-width:var(--size-11);height:var(--size-11);font-size:var(--font-size-lg)}.pagination.large .page-button i{font-size:var(--icon-size-md)}@media(max-width:768px){.pagination{justify-content:center;gap:var(--spacing-2xs, 4px);padding:var(--spacing-sm)}.items-per-page{margin-right:0;margin-bottom:var(--spacing-sm);width:100%;justify-content:center;flex-wrap:wrap}.items-per-page-label{width:100%;text-align:center;margin-bottom:var(--spacing-xs)}.items-per-page select{width:auto;min-width:140px;max-width:180px}.page-button{min-width:var(--size-8);height:var(--size-8);font-size:var(--font-size-sm)}.page-button i{font-size:var(--icon-size-xs)}}@media(max-width:480px){.pagination{padding:var(--spacing-xs);gap:2px}.page-button{min-width:var(--size-7, 28px);height:var(--size-7, 28px);font-size:var(--font-size-xs);padding:2px}.page-button i{font-size:var(--icon-size-xs)}.items-per-page{margin-bottom:var(--spacing-xs)}.items-per-page-label{font-size:var(--font-size-xs)}.items-per-page select{font-size:var(--font-size-sm);padding:var(--spacing-xs)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"] }]
|
|
2818
2818
|
}], ctorParameters: () => [], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }, { type: i0.Output, args: ["totalPagesChange"] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }, { type: i0.Output, args: ["itemsPerPageChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], showPrevNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrevNext", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], showItemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemsPerPage", required: false }] }], itemsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageOptions", required: false }] }], firstLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], lastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLabel", required: false }] }], pageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLabel", required: false }] }], itemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLabel", required: false }] }], itemsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPageLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], itemsPerPageChange: [{ type: i0.Output, args: ["itemsPerPageChange"] }], navigationError: [{ type: i0.Output, args: ["navigationError"] }] } });
|
|
2819
2819
|
|
|
2820
2820
|
const PROGRESSBAR_CONFIG = new InjectionToken('PROGRESSBAR_CONFIG', {
|