@m1z23r/ngx-ui 1.1.44 → 1.1.45
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.
|
@@ -3647,10 +3647,15 @@ class PaginationComponent {
|
|
|
3647
3647
|
maxPages = input(5, ...(ngDevMode ? [{ debugName: "maxPages" }] : []));
|
|
3648
3648
|
showFirstLast = input(true, ...(ngDevMode ? [{ debugName: "showFirstLast" }] : []));
|
|
3649
3649
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3650
|
+
pageSelect = input(false, ...(ngDevMode ? [{ debugName: "pageSelect" }] : []));
|
|
3650
3651
|
page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
|
|
3651
3652
|
totalPages = computed(() => {
|
|
3652
3653
|
return Math.max(1, Math.ceil(this.total() / this.pageSize()));
|
|
3653
3654
|
}, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
|
|
3655
|
+
pageOptions = computed(() => {
|
|
3656
|
+
const total = this.totalPages();
|
|
3657
|
+
return Array.from({ length: total }, (_, i) => i + 1);
|
|
3658
|
+
}, ...(ngDevMode ? [{ debugName: "pageOptions" }] : []));
|
|
3654
3659
|
paginationClasses = computed(() => {
|
|
3655
3660
|
return `ui-pagination--${this.size()}`;
|
|
3656
3661
|
}, ...(ngDevMode ? [{ debugName: "paginationClasses" }] : []));
|
|
@@ -3706,13 +3711,18 @@ class PaginationComponent {
|
|
|
3706
3711
|
this.page.set(newPage);
|
|
3707
3712
|
}
|
|
3708
3713
|
}
|
|
3714
|
+
onPageSelect(value) {
|
|
3715
|
+
if (value !== null) {
|
|
3716
|
+
this.goToPage(value);
|
|
3717
|
+
}
|
|
3718
|
+
}
|
|
3709
3719
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3710
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PaginationComponent, isStandalone: true, selector: "ui-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, ngImport: i0, template: "<nav class=\"ui-pagination\" [class]=\"paginationClasses()\" aria-label=\"Pagination\">\n @if (showFirstLast()) {\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === 1\"\n (click)=\"goToPage(1)\"\n aria-label=\"First page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"11 17 6 12 11 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"18 17 13 12 18 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === 1\"\n (click)=\"goToPage(page() - 1)\"\n aria-label=\"Previous page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"15 18 9 12 15 6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n @for (item of visiblePages(); track item.value) {\n
|
|
3720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PaginationComponent, isStandalone: true, selector: "ui-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, maxPages: { classPropertyName: "maxPages", publicName: "maxPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pageSelect: { classPropertyName: "pageSelect", publicName: "pageSelect", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, ngImport: i0, template: "<nav class=\"ui-pagination\" [class]=\"paginationClasses()\" aria-label=\"Pagination\">\n @if (showFirstLast()) {\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === 1\"\n (click)=\"goToPage(1)\"\n aria-label=\"First page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"11 17 6 12 11 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"18 17 13 12 18 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === 1\"\n (click)=\"goToPage(page() - 1)\"\n aria-label=\"Previous page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"15 18 9 12 15 6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n @if (pageSelect()) {\n <ui-select\n class=\"ui-pagination__select\"\n [searchable]=\"true\"\n [value]=\"page()\"\n (valueChange)=\"onPageSelect($any($event))\"\n [size]=\"size()\"\n [placeholder]=\"'Page...'\"\n >\n @for (p of pageOptions(); track p) {\n <ui-option [value]=\"p\">{{ p }}</ui-option>\n }\n </ui-select>\n } @else {\n @for (item of visiblePages(); track item.value) {\n @if (item.type === 'ellipsis') {\n <span class=\"ui-pagination__ellipsis\">...</span>\n } @else {\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--page\"\n [class.ui-pagination__btn--active]=\"item.value === page()\"\n [attr.aria-current]=\"item.value === page() ? 'page' : null\"\n (click)=\"goToPage(item.value)\"\n >\n {{ item.value }}\n </button>\n }\n }\n }\n\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === totalPages()\"\n (click)=\"goToPage(page() + 1)\"\n aria-label=\"Next page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"9 18 15 12 9 6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n @if (showFirstLast()) {\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === totalPages()\"\n (click)=\"goToPage(totalPages())\"\n aria-label=\"Last page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"13 17 18 12 13 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"6 17 11 12 6 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n</nav>\n", styles: [":host{display:block}.ui-pagination{display:flex;align-items:center;gap:var(--ui-spacing-xs)}.ui-pagination__btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-border);background-color:var(--ui-bg);color:var(--ui-text);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast)}.ui-pagination__btn:hover:not(:disabled){background-color:var(--ui-bg-secondary);border-color:var(--ui-border-hover)}.ui-pagination__btn:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-pagination__btn:disabled{opacity:.5;cursor:not-allowed}.ui-pagination__btn--active{background-color:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-primary-text)}.ui-pagination__btn--active:hover:not(:disabled){background-color:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}.ui-pagination__btn--nav svg{width:1em;height:1em}.ui-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--ui-text-muted);-webkit-user-select:none;user-select:none}.ui-pagination__select{min-width:80px;max-width:100px}.ui-pagination--sm .ui-pagination__btn{min-width:28px;height:28px;padding:0 var(--ui-spacing-xs);font-size:var(--ui-font-xs);border-radius:var(--ui-radius-sm)}.ui-pagination--sm .ui-pagination__ellipsis{min-width:28px;height:28px;font-size:var(--ui-font-xs)}.ui-pagination--md .ui-pagination__btn{min-width:36px;height:36px;padding:0 var(--ui-spacing-sm);font-size:var(--ui-font-sm);border-radius:var(--ui-radius-md)}.ui-pagination--md .ui-pagination__ellipsis{min-width:36px;height:36px;font-size:var(--ui-font-sm)}.ui-pagination--lg .ui-pagination__btn{min-width:44px;height:44px;padding:0 var(--ui-spacing-md);font-size:var(--ui-font-md);border-radius:var(--ui-radius-md)}.ui-pagination--lg .ui-pagination__ellipsis{min-width:44px;height:44px;font-size:var(--ui-font-md)}\n"], dependencies: [{ kind: "component", type: SelectComponent, selector: "ui-select", inputs: ["variant", "size", "placeholder", "label", "hint", "error", "disabled", "multiple", "searchable", "clearable", "creatable", "deletable", "selectable", "asyncSearch", "debounceTime", "minSearchLength", "initialLoad", "initialOptions", "defaultOptions", "cacheAsyncResults", "value"], outputs: ["valueChange", "opened", "closed", "created", "deleted"] }, { kind: "component", type: OptionComponent, selector: "ui-option", inputs: ["value", "disabled"], outputs: ["deleteClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3711
3721
|
}
|
|
3712
3722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
3713
3723
|
type: Component,
|
|
3714
|
-
args: [{ selector: 'ui-pagination', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ui-pagination\" [class]=\"paginationClasses()\" aria-label=\"Pagination\">\n @if (showFirstLast()) {\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === 1\"\n (click)=\"goToPage(1)\"\n aria-label=\"First page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"11 17 6 12 11 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"18 17 13 12 18 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === 1\"\n (click)=\"goToPage(page() - 1)\"\n aria-label=\"Previous page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"15 18 9 12 15 6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n @for (item of visiblePages(); track item.value) {\n
|
|
3715
|
-
}], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], maxPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPages", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
|
|
3724
|
+
args: [{ selector: 'ui-pagination', standalone: true, imports: [SelectComponent, OptionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ui-pagination\" [class]=\"paginationClasses()\" aria-label=\"Pagination\">\n @if (showFirstLast()) {\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === 1\"\n (click)=\"goToPage(1)\"\n aria-label=\"First page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"11 17 6 12 11 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"18 17 13 12 18 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === 1\"\n (click)=\"goToPage(page() - 1)\"\n aria-label=\"Previous page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"15 18 9 12 15 6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n @if (pageSelect()) {\n <ui-select\n class=\"ui-pagination__select\"\n [searchable]=\"true\"\n [value]=\"page()\"\n (valueChange)=\"onPageSelect($any($event))\"\n [size]=\"size()\"\n [placeholder]=\"'Page...'\"\n >\n @for (p of pageOptions(); track p) {\n <ui-option [value]=\"p\">{{ p }}</ui-option>\n }\n </ui-select>\n } @else {\n @for (item of visiblePages(); track item.value) {\n @if (item.type === 'ellipsis') {\n <span class=\"ui-pagination__ellipsis\">...</span>\n } @else {\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--page\"\n [class.ui-pagination__btn--active]=\"item.value === page()\"\n [attr.aria-current]=\"item.value === page() ? 'page' : null\"\n (click)=\"goToPage(item.value)\"\n >\n {{ item.value }}\n </button>\n }\n }\n }\n\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === totalPages()\"\n (click)=\"goToPage(page() + 1)\"\n aria-label=\"Next page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"9 18 15 12 9 6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n @if (showFirstLast()) {\n <button\n type=\"button\"\n class=\"ui-pagination__btn ui-pagination__btn--nav\"\n [disabled]=\"page() === totalPages()\"\n (click)=\"goToPage(totalPages())\"\n aria-label=\"Last page\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"13 17 18 12 13 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"6 17 11 12 6 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n</nav>\n", styles: [":host{display:block}.ui-pagination{display:flex;align-items:center;gap:var(--ui-spacing-xs)}.ui-pagination__btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-border);background-color:var(--ui-bg);color:var(--ui-text);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast)}.ui-pagination__btn:hover:not(:disabled){background-color:var(--ui-bg-secondary);border-color:var(--ui-border-hover)}.ui-pagination__btn:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-pagination__btn:disabled{opacity:.5;cursor:not-allowed}.ui-pagination__btn--active{background-color:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-primary-text)}.ui-pagination__btn--active:hover:not(:disabled){background-color:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}.ui-pagination__btn--nav svg{width:1em;height:1em}.ui-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--ui-text-muted);-webkit-user-select:none;user-select:none}.ui-pagination__select{min-width:80px;max-width:100px}.ui-pagination--sm .ui-pagination__btn{min-width:28px;height:28px;padding:0 var(--ui-spacing-xs);font-size:var(--ui-font-xs);border-radius:var(--ui-radius-sm)}.ui-pagination--sm .ui-pagination__ellipsis{min-width:28px;height:28px;font-size:var(--ui-font-xs)}.ui-pagination--md .ui-pagination__btn{min-width:36px;height:36px;padding:0 var(--ui-spacing-sm);font-size:var(--ui-font-sm);border-radius:var(--ui-radius-md)}.ui-pagination--md .ui-pagination__ellipsis{min-width:36px;height:36px;font-size:var(--ui-font-sm)}.ui-pagination--lg .ui-pagination__btn{min-width:44px;height:44px;padding:0 var(--ui-spacing-md);font-size:var(--ui-font-md);border-radius:var(--ui-radius-md)}.ui-pagination--lg .ui-pagination__ellipsis{min-width:44px;height:44px;font-size:var(--ui-font-md)}\n"] }]
|
|
3725
|
+
}], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], maxPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPages", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pageSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSelect", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
|
|
3716
3726
|
|
|
3717
3727
|
class FileSizePipe {
|
|
3718
3728
|
transform(bytes) {
|