@m1z23r/ngx-ui 1.1.43 → 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) {
|
|
@@ -5772,11 +5782,11 @@ class ShellComponent {
|
|
|
5772
5782
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
5773
5783
|
sidebarService = inject(SidebarService);
|
|
5774
5784
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5775
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ShellComponent, isStandalone: true, selector: "ui-shell", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ui-shell\"\n [class.ui-shell--header]=\"variant() === 'header'\"\n [class.ui-shell--sidebar-collapsed]=\"sidebarService.collapsed()\"\n [class.ui-shell--mobile]=\"sidebarService.isMobile()\"\n [class.ui-shell--mobile-open]=\"sidebarService.mobileOpen()\">\n <ng-content />\n @if (sidebarService.isMobile() && sidebarService.mobileOpen()) {\n <div class=\"ui-shell__backdrop\" (click)=\"sidebarService.closeMobile()\"></div>\n }\n</div>\n", styles: [":host{display:block;height:100vh;overflow:hidden}.ui-shell{display:grid;grid-template-areas:\"sidebar navbar\" \"sidebar content\" \"sidebar footer\";grid-template-columns:var(--ui-sidebar-width) 1fr;grid-template-rows:var(--ui-navbar-height) 1fr auto;height:100%;transition:grid-template-columns var(--ui-transition-normal)}.ui-shell--sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed-width) 1fr}.ui-shell--header{grid-template-areas:\"navbar navbar\" \"sidebar content\" \"footer footer\"}.ui-shell--mobile{grid-template-areas:\"navbar\" \"content\" \"footer\";grid-template-columns:1fr}.ui-shell__backdrop{position:fixed;inset:0;background-color:#00000080;z-index:40}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5785
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ShellComponent, isStandalone: true, selector: "ui-shell", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ui-shell\"\n [class.ui-shell--header]=\"variant() === 'header'\"\n [class.ui-shell--simple]=\"variant() === 'simple'\"\n [class.ui-shell--sidebar-collapsed]=\"sidebarService.collapsed()\"\n [class.ui-shell--mobile]=\"sidebarService.isMobile()\"\n [class.ui-shell--mobile-open]=\"sidebarService.mobileOpen()\">\n <ng-content />\n @if (sidebarService.isMobile() && sidebarService.mobileOpen()) {\n <div class=\"ui-shell__backdrop\" (click)=\"sidebarService.closeMobile()\"></div>\n }\n</div>\n", styles: [":host{display:block;height:100vh;overflow:hidden}.ui-shell{display:grid;grid-template-areas:\"sidebar navbar\" \"sidebar content\" \"sidebar footer\";grid-template-columns:var(--ui-sidebar-width) 1fr;grid-template-rows:var(--ui-navbar-height) 1fr auto;height:100%;transition:grid-template-columns var(--ui-transition-normal)}.ui-shell--sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed-width) 1fr}.ui-shell--header{grid-template-areas:\"navbar navbar\" \"sidebar content\" \"footer footer\"}.ui-shell--simple{grid-template-areas:\"sidebar content\";grid-template-rows:1fr}.ui-shell--mobile{grid-template-areas:\"navbar\" \"content\" \"footer\";grid-template-columns:1fr}.ui-shell--simple.ui-shell--mobile{grid-template-areas:\"content\";grid-template-rows:1fr}.ui-shell__backdrop{position:fixed;inset:0;background-color:#00000080;z-index:40}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5776
5786
|
}
|
|
5777
5787
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ShellComponent, decorators: [{
|
|
5778
5788
|
type: Component,
|
|
5779
|
-
args: [{ selector: 'ui-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-shell\"\n [class.ui-shell--header]=\"variant() === 'header'\"\n [class.ui-shell--sidebar-collapsed]=\"sidebarService.collapsed()\"\n [class.ui-shell--mobile]=\"sidebarService.isMobile()\"\n [class.ui-shell--mobile-open]=\"sidebarService.mobileOpen()\">\n <ng-content />\n @if (sidebarService.isMobile() && sidebarService.mobileOpen()) {\n <div class=\"ui-shell__backdrop\" (click)=\"sidebarService.closeMobile()\"></div>\n }\n</div>\n", styles: [":host{display:block;height:100vh;overflow:hidden}.ui-shell{display:grid;grid-template-areas:\"sidebar navbar\" \"sidebar content\" \"sidebar footer\";grid-template-columns:var(--ui-sidebar-width) 1fr;grid-template-rows:var(--ui-navbar-height) 1fr auto;height:100%;transition:grid-template-columns var(--ui-transition-normal)}.ui-shell--sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed-width) 1fr}.ui-shell--header{grid-template-areas:\"navbar navbar\" \"sidebar content\" \"footer footer\"}.ui-shell--mobile{grid-template-areas:\"navbar\" \"content\" \"footer\";grid-template-columns:1fr}.ui-shell__backdrop{position:fixed;inset:0;background-color:#00000080;z-index:40}\n"] }]
|
|
5789
|
+
args: [{ selector: 'ui-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-shell\"\n [class.ui-shell--header]=\"variant() === 'header'\"\n [class.ui-shell--simple]=\"variant() === 'simple'\"\n [class.ui-shell--sidebar-collapsed]=\"sidebarService.collapsed()\"\n [class.ui-shell--mobile]=\"sidebarService.isMobile()\"\n [class.ui-shell--mobile-open]=\"sidebarService.mobileOpen()\">\n <ng-content />\n @if (sidebarService.isMobile() && sidebarService.mobileOpen()) {\n <div class=\"ui-shell__backdrop\" (click)=\"sidebarService.closeMobile()\"></div>\n }\n</div>\n", styles: [":host{display:block;height:100vh;overflow:hidden}.ui-shell{display:grid;grid-template-areas:\"sidebar navbar\" \"sidebar content\" \"sidebar footer\";grid-template-columns:var(--ui-sidebar-width) 1fr;grid-template-rows:var(--ui-navbar-height) 1fr auto;height:100%;transition:grid-template-columns var(--ui-transition-normal)}.ui-shell--sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed-width) 1fr}.ui-shell--header{grid-template-areas:\"navbar navbar\" \"sidebar content\" \"footer footer\"}.ui-shell--simple{grid-template-areas:\"sidebar content\";grid-template-rows:1fr}.ui-shell--mobile{grid-template-areas:\"navbar\" \"content\" \"footer\";grid-template-columns:1fr}.ui-shell--simple.ui-shell--mobile{grid-template-areas:\"content\";grid-template-rows:1fr}.ui-shell__backdrop{position:fixed;inset:0;background-color:#00000080;z-index:40}\n"] }]
|
|
5780
5790
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
5781
5791
|
|
|
5782
5792
|
class NavbarComponent {
|