@m1z23r/ngx-ui 1.1.3 → 1.1.5
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.
|
@@ -3474,14 +3474,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3474
3474
|
}] } });
|
|
3475
3475
|
|
|
3476
3476
|
class ShellComponent {
|
|
3477
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
3477
3478
|
sidebarService = inject(SidebarService);
|
|
3478
3479
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3479
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ShellComponent, isStandalone: true, selector: "ui-shell", ngImport: i0, template: "<div class=\"ui-shell\"\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--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 });
|
|
3480
|
+
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 });
|
|
3480
3481
|
}
|
|
3481
3482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ShellComponent, decorators: [{
|
|
3482
3483
|
type: Component,
|
|
3483
|
-
args: [{ selector: 'ui-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-shell\"\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--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"] }]
|
|
3484
|
-
}] });
|
|
3484
|
+
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"] }]
|
|
3485
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
3485
3486
|
|
|
3486
3487
|
class NavbarComponent {
|
|
3487
3488
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -3495,11 +3496,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3495
3496
|
class SidebarComponent {
|
|
3496
3497
|
sidebarService = inject(SidebarService);
|
|
3497
3498
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3498
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SidebarComponent, isStandalone: true, selector: "ui-sidebar", ngImport: i0, template: "<aside class=\"ui-sidebar\"\n [class.ui-sidebar--collapsed]=\"sidebarService.collapsed()\"\n [class.ui-sidebar--mobile]=\"sidebarService.isMobile()\"\n [class.ui-sidebar--mobile-open]=\"sidebarService.mobileOpen()\">\n <div class=\"ui-sidebar__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n <nav class=\"ui-sidebar__nav\">\n <ng-content />\n </nav>\n <div class=\"ui-sidebar__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</aside>\n", styles: [":host{display:block;grid-area:sidebar}.ui-sidebar{display:flex;flex-direction:column;width:var(--ui-sidebar-width);height:100%;background-color:var(--ui-bg);border-right:1px solid var(--ui-border);transition:width var(--ui-transition-normal),transform var(--ui-transition-normal);overflow:hidden}.ui-sidebar--collapsed{width:var(--ui-sidebar-collapsed-width)}.ui-sidebar__header{display:flex;align-items:center;height:var(--ui-navbar-height);padding:0 var(--ui-spacing-md);border-bottom:1px solid var(--ui-border);flex-shrink:0}.ui-sidebar__nav{flex:1;padding:var(--ui-spacing-sm);overflow-y:auto;overflow-x:hidden}.ui-sidebar__footer{padding:var(--ui-spacing-sm);border-top:1px solid var(--ui-border);flex-shrink:0}.ui-sidebar--collapsed .ui-sidebar__header,.ui-sidebar--collapsed .ui-sidebar__nav,.ui-sidebar--collapsed .ui-sidebar__footer{padding-inline:var(--ui-spacing-xs)}.ui-sidebar--mobile{position:fixed;top:0;left:0;height:100vh;z-index:50;transform:translate(-100%);box-shadow:var(--ui-shadow-lg)}.ui-sidebar--mobile.ui-sidebar--mobile-open{transform:translate(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3499
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SidebarComponent, isStandalone: true, selector: "ui-sidebar", ngImport: i0, template: "<aside class=\"ui-sidebar\"\n [class.ui-sidebar--collapsed]=\"sidebarService.collapsed()\"\n [class.ui-sidebar--mobile]=\"sidebarService.isMobile()\"\n [class.ui-sidebar--mobile-open]=\"sidebarService.mobileOpen()\">\n <div class=\"ui-sidebar__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n <nav class=\"ui-sidebar__nav\">\n <ng-content />\n </nav>\n <div class=\"ui-sidebar__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</aside>\n", styles: [":host{display:block;grid-area:sidebar}.ui-sidebar{display:flex;flex-direction:column;width:var(--ui-sidebar-width);height:100%;background-color:var(--ui-bg);border-right:1px solid var(--ui-border);transition:width var(--ui-transition-normal),transform var(--ui-transition-normal);overflow:hidden}.ui-sidebar--collapsed{width:var(--ui-sidebar-collapsed-width)}.ui-sidebar__header{display:flex;align-items:center;height:var(--ui-navbar-height);padding:0 var(--ui-spacing-md);border-bottom:1px solid var(--ui-border);flex-shrink:0}.ui-sidebar__header:not(:has(*)){display:none}.ui-sidebar__nav{flex:1;padding:var(--ui-spacing-sm);overflow-y:auto;overflow-x:hidden}.ui-sidebar__footer{padding:var(--ui-spacing-sm);border-top:1px solid var(--ui-border);flex-shrink:0}.ui-sidebar__footer:not(:has(*)){display:none}.ui-sidebar--collapsed .ui-sidebar__header,.ui-sidebar--collapsed .ui-sidebar__nav,.ui-sidebar--collapsed .ui-sidebar__footer{padding-inline:var(--ui-spacing-xs)}.ui-sidebar--mobile{position:fixed;top:0;left:0;height:100vh;z-index:50;transform:translate(-100%);box-shadow:var(--ui-shadow-lg)}.ui-sidebar--mobile.ui-sidebar--mobile-open{transform:translate(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3499
3500
|
}
|
|
3500
3501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
3501
3502
|
type: Component,
|
|
3502
|
-
args: [{ selector: 'ui-sidebar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"ui-sidebar\"\n [class.ui-sidebar--collapsed]=\"sidebarService.collapsed()\"\n [class.ui-sidebar--mobile]=\"sidebarService.isMobile()\"\n [class.ui-sidebar--mobile-open]=\"sidebarService.mobileOpen()\">\n <div class=\"ui-sidebar__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n <nav class=\"ui-sidebar__nav\">\n <ng-content />\n </nav>\n <div class=\"ui-sidebar__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</aside>\n", styles: [":host{display:block;grid-area:sidebar}.ui-sidebar{display:flex;flex-direction:column;width:var(--ui-sidebar-width);height:100%;background-color:var(--ui-bg);border-right:1px solid var(--ui-border);transition:width var(--ui-transition-normal),transform var(--ui-transition-normal);overflow:hidden}.ui-sidebar--collapsed{width:var(--ui-sidebar-collapsed-width)}.ui-sidebar__header{display:flex;align-items:center;height:var(--ui-navbar-height);padding:0 var(--ui-spacing-md);border-bottom:1px solid var(--ui-border);flex-shrink:0}.ui-sidebar__nav{flex:1;padding:var(--ui-spacing-sm);overflow-y:auto;overflow-x:hidden}.ui-sidebar__footer{padding:var(--ui-spacing-sm);border-top:1px solid var(--ui-border);flex-shrink:0}.ui-sidebar--collapsed .ui-sidebar__header,.ui-sidebar--collapsed .ui-sidebar__nav,.ui-sidebar--collapsed .ui-sidebar__footer{padding-inline:var(--ui-spacing-xs)}.ui-sidebar--mobile{position:fixed;top:0;left:0;height:100vh;z-index:50;transform:translate(-100%);box-shadow:var(--ui-shadow-lg)}.ui-sidebar--mobile.ui-sidebar--mobile-open{transform:translate(0)}\n"] }]
|
|
3503
|
+
args: [{ selector: 'ui-sidebar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"ui-sidebar\"\n [class.ui-sidebar--collapsed]=\"sidebarService.collapsed()\"\n [class.ui-sidebar--mobile]=\"sidebarService.isMobile()\"\n [class.ui-sidebar--mobile-open]=\"sidebarService.mobileOpen()\">\n <div class=\"ui-sidebar__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n <nav class=\"ui-sidebar__nav\">\n <ng-content />\n </nav>\n <div class=\"ui-sidebar__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</aside>\n", styles: [":host{display:block;grid-area:sidebar}.ui-sidebar{display:flex;flex-direction:column;width:var(--ui-sidebar-width);height:100%;background-color:var(--ui-bg);border-right:1px solid var(--ui-border);transition:width var(--ui-transition-normal),transform var(--ui-transition-normal);overflow:hidden}.ui-sidebar--collapsed{width:var(--ui-sidebar-collapsed-width)}.ui-sidebar__header{display:flex;align-items:center;height:var(--ui-navbar-height);padding:0 var(--ui-spacing-md);border-bottom:1px solid var(--ui-border);flex-shrink:0}.ui-sidebar__header:not(:has(*)){display:none}.ui-sidebar__nav{flex:1;padding:var(--ui-spacing-sm);overflow-y:auto;overflow-x:hidden}.ui-sidebar__footer{padding:var(--ui-spacing-sm);border-top:1px solid var(--ui-border);flex-shrink:0}.ui-sidebar__footer:not(:has(*)){display:none}.ui-sidebar--collapsed .ui-sidebar__header,.ui-sidebar--collapsed .ui-sidebar__nav,.ui-sidebar--collapsed .ui-sidebar__footer{padding-inline:var(--ui-spacing-xs)}.ui-sidebar--mobile{position:fixed;top:0;left:0;height:100vh;z-index:50;transform:translate(-100%);box-shadow:var(--ui-shadow-lg)}.ui-sidebar--mobile.ui-sidebar--mobile-open{transform:translate(0)}\n"] }]
|
|
3503
3504
|
}] });
|
|
3504
3505
|
|
|
3505
3506
|
class ContentComponent {
|
|
@@ -3513,11 +3514,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3513
3514
|
|
|
3514
3515
|
class FooterComponent {
|
|
3515
3516
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3516
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: FooterComponent, isStandalone: true, selector: "ui-footer", ngImport: i0, template: "<footer class=\"ui-footer\">\n <ng-content />\n</footer>\n", styles: [":host{display:block;grid-area:footer}.ui-footer{display:flex;align-items:center;justify-content:center;min-height:var(--ui-footer-height);padding:var(--ui-spacing-sm) var(--ui-spacing-md);background-color:var(--ui-bg);border-top:1px solid var(--ui-border);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3517
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: FooterComponent, isStandalone: true, selector: "ui-footer", ngImport: i0, template: "<footer class=\"ui-footer\">\n <ng-content />\n</footer>\n", styles: [":host{display:block;grid-area:footer}:host:not(:has(*)){display:none}.ui-footer{display:flex;align-items:center;justify-content:center;min-height:var(--ui-footer-height);padding:var(--ui-spacing-sm) var(--ui-spacing-md);background-color:var(--ui-bg);border-top:1px solid var(--ui-border);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3517
3518
|
}
|
|
3518
3519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FooterComponent, decorators: [{
|
|
3519
3520
|
type: Component,
|
|
3520
|
-
args: [{ selector: 'ui-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer class=\"ui-footer\">\n <ng-content />\n</footer>\n", styles: [":host{display:block;grid-area:footer}.ui-footer{display:flex;align-items:center;justify-content:center;min-height:var(--ui-footer-height);padding:var(--ui-spacing-sm) var(--ui-spacing-md);background-color:var(--ui-bg);border-top:1px solid var(--ui-border);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}\n"] }]
|
|
3521
|
+
args: [{ selector: 'ui-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer class=\"ui-footer\">\n <ng-content />\n</footer>\n", styles: [":host{display:block;grid-area:footer}:host:not(:has(*)){display:none}.ui-footer{display:flex;align-items:center;justify-content:center;min-height:var(--ui-footer-height);padding:var(--ui-spacing-sm) var(--ui-spacing-md);background-color:var(--ui-bg);border-top:1px solid var(--ui-border);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}\n"] }]
|
|
3521
3522
|
}] });
|
|
3522
3523
|
|
|
3523
3524
|
class SidebarToggleComponent {
|