@kris701/ez-ui 1.1.16 → 1.1.18

package/fesm2022/kris701-ez-ui.mjs

@@ -25,8 +25,8 @@ import { TuiBlockStatus, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui
 import { v4 } from 'uuid';
 import { firstValueFrom, switchMap } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
-import * as i3$4 from '@angular/router';
-import { RouterLink, NavigationEnd, RouterModule } from '@angular/router';
+import * as i2$2 from '@angular/router';
+import { RouterLink, RouterModule } from '@angular/router';
 
 class EzUIBooleanInput {
     icon = '';
@@ -5161,50 +5161,56 @@ class EzUILayoutService {
 
 class EzUISideBar {
     layoutService;
-    layout;
     router;
+    sidebarItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarItems" }] : /* istanbul ignore next */ []));
+    sidebarFooterItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarFooterItems" }] : /* istanbul ignore next */ []));
     haveMoved = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "haveMoved" }] : /* istanbul ignore next */ []));
-    constructor(layoutService, layout, router) {
+    baseRoute = signal("/", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseRoute" }] : /* istanbul ignore next */ []));
+    constructor(layoutService, router) {
         this.layoutService = layoutService;
-        this.layout = layout;
         this.router = router;
-        router.events.subscribe((val) => {
-            if (val instanceof NavigationEnd)
-                this.initialize();
-        });
+    }
+    ngOnInit() {
+        this.initialize();
     }
     initialize() {
-        this.hideEmptySections(this.layout.sidebarItems());
-        this.hideEmptySections(this.layout.sidebarFooterItems());
-        if (!this.haveMoved() && this.router.routerState.snapshot.url == '/')
-            this.gotoFirstPage(this.layout.sidebarItems());
-        this.setActiveRoute(this.layout.sidebarItems());
-        this.setActiveRoute(this.layout.sidebarFooterItems());
+        var sidebarItems = [...this.sidebarItems()];
+        var sidebarFooterItems = [...this.sidebarFooterItems()];
+        this.hideEmptySections(sidebarItems);
+        this.hideEmptySections(sidebarFooterItems);
+        if (!this.haveMoved() && this.router.routerState.snapshot.url == this.baseRoute())
+            this.gotoFirstPage(sidebarItems);
+        this.setActiveRoute(sidebarItems);
+        this.setActiveRoute(sidebarFooterItems);
+        this.sidebarItems.set(sidebarItems);
+        this.sidebarFooterItems.set(sidebarFooterItems);
     }
     hideEmptySections(menu) {
-        menu.forEach((x) => {
-            if (x.items) {
-                this.hideEmptySections(x.items);
-                if (x.items.every((x) => x.visible == false)) {
-                    x.visible = false;
+        for (let item of menu) {
+            if (item.items) {
+                this.hideEmptySections(item.items);
+                if (item.items.every((x) => x.visible == false)) {
+                    item.visible = false;
                 }
-                ;
             }
-        });
+        }
     }
     setActiveRoute(menu, parent = null) {
-        menu.forEach((x) => {
-            if (x.routerLink) {
-                if (x.routerLink == this.router.routerState.snapshot.url) {
-                    x.expanded = true;
+        for (let item of menu) {
+            if (item.routerLink) {
+                if (item.routerLink == this.router.routerState.snapshot.url) {
+                    item.expanded = true;
                     if (parent)
                         parent.expanded = true;
                 }
             }
-            if (x.items)
-                this.setActiveRoute(x.items, x);
-        });
+            if (item.items)
+                this.setActiveRoute(item.items, item);
+        }
     }
     gotoFirstPage(menu) {
         var first = menu.find((x) => x.visible == true);
@@ -5218,19 +5224,19 @@ class EzUISideBar {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBar, deps: [{ token: EzUILayoutService }, { token: EzUILayout }, { token: i3$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISideBar, isStandalone: true, selector: "ezui-sidebar", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBar, deps: [{ token: EzUILayoutService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISideBar, isStandalone: true, selector: "ezui-sidebar", inputs: { sidebarItems: "sidebarItems", sidebarFooterItems: "sidebarFooterItems", baseRoute: "baseRoute" }, ngImport: i0, template: `
 	    <aside
 	        style="height:100%"
 			tuitheme=""
 	        [tuiNavigationAside]="layoutService.isMenuExpanded()"
 	    >
-			@for(item of layout.sidebarItems(); track item){
+			@for(item of sidebarItems(); track item){
 				<ezui-sidebar-item [item]="item"/>
 			}
 
 			<footer>
-				@for(item of layout.sidebarFooterItems(); track item){
+				@for(item of sidebarFooterItems(); track item){
 					<ezui-sidebar-item [item]="item"/>
 				}
 			</footer>
@@ -5249,19 +5255,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 			tuitheme=""
 	        [tuiNavigationAside]="layoutService.isMenuExpanded()"
 	    >
-			@for(item of layout.sidebarItems(); track item){
+			@for(item of sidebarItems(); track item){
 				<ezui-sidebar-item [item]="item"/>
 			}
 
 			<footer>
-				@for(item of layout.sidebarFooterItems(); track item){
+				@for(item of sidebarFooterItems(); track item){
 					<ezui-sidebar-item [item]="item"/>
 				}
 			</footer>
 	    </aside>
     `
                 }]
-        }], ctorParameters: () => [{ type: EzUILayoutService }, { type: EzUILayout }, { type: i3$4.Router }] });
+        }], ctorParameters: () => [{ type: EzUILayoutService }, { type: i2$2.Router }], propDecorators: { sidebarItems: [{
+                type: Input
+            }], sidebarFooterItems: [{
+                type: Input
+            }], baseRoute: [{
+                type: Input
+            }] } });
 
 class EzUITopBar {
     layoutService;
@@ -5334,20 +5346,21 @@ class EzUILayout {
     ...(ngDevMode ? [{ debugName: "sidebarItems" }] : /* istanbul ignore next */ []));
     sidebarFooterItems = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sidebarFooterItems" }] : /* istanbul ignore next */ []));
+    baseRoute = signal("/", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseRoute" }] : /* istanbul ignore next */ []));
     topbarright;
     topbarlogo;
     sidebar = viewChild("sidebar", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
-    forceLoadSidebar() {
-        this.sidebar()?.initialize();
-    }
+    topbar = viewChild("topbar", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "topbar" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUILayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: EzUILayout, isStandalone: true, selector: "ezui-layout", inputs: { sidebarItems: "sidebarItems", sidebarFooterItems: "sidebarFooterItems" }, queries: [{ propertyName: "topbarright", first: true, predicate: ["topbarright"], descendants: true }, { propertyName: "topbarlogo", first: true, predicate: ["topbarlogo"], descendants: true }], viewQueries: [{ propertyName: "sidebar", first: true, predicate: ["sidebar"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: EzUILayout, isStandalone: true, selector: "ezui-layout", inputs: { sidebarItems: "sidebarItems", sidebarFooterItems: "sidebarFooterItems", baseRoute: "baseRoute" }, queries: [{ propertyName: "topbarright", first: true, predicate: ["topbarright"], descendants: true }, { propertyName: "topbarlogo", first: true, predicate: ["topbarlogo"], descendants: true }], viewQueries: [{ propertyName: "sidebar", first: true, predicate: ["sidebar"], descendants: true, isSignal: true }, { propertyName: "topbar", first: true, predicate: ["topbar"], descendants: true, isSignal: true }], ngImport: i0, template: `
 	<tui-root class="rootContainer">
 		<div class="layout-wrapper">
-			<ezui-topbar></ezui-topbar>
+			<ezui-topbar #topbar></ezui-topbar>
 			<div class="layout-wrapper-split">
-				<ezui-sidebar #sidebar></ezui-sidebar>
+				<ezui-sidebar [sidebarItems]="sidebarItems" [sidebarFooterItems]="sidebarFooterItems" [baseRoute]="baseRoute" #sidebar></ezui-sidebar>
 				<div class="layout-main-container">
 					<tui-scrollbar class="layout-main">
 						<router-outlet></router-outlet>
@@ -5356,16 +5369,16 @@ class EzUILayout {
 			</div>
 		</div>
 	</tui-root>
-    `, isInline: true, styles: ["::ng-deep .rootContainer .t-root-content{display:flex;height:100vh;width:100vw}.layout-wrapper{display:flex;flex-direction:column;height:100vh;min-height:100vh;max-height:100vh}.layout-wrapper-split{display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;max-width:100vw}.layout-main-container{display:flex;flex-direction:column;min-height:inherit;max-height:inherit;width:100%;justify-content:space-between;overflow:hidden}.layout-main{flex:1 1 auto;display:flex}::ng-deep .layout-main>.t-content{padding:1rem;display:flex;block-size:auto!important;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EzUITopBar, selector: "ezui-topbar" }, { kind: "component", type: EzUISideBar, selector: "ezui-sidebar" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: TuiRoot, selector: "tui-root" }] });
+    `, isInline: true, styles: ["::ng-deep .rootContainer .t-root-content{display:flex;height:100vh;width:100vw}.layout-wrapper{display:flex;flex-direction:column;height:100vh;min-height:100vh;max-height:100vh}.layout-wrapper-split{display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;max-width:100vw}.layout-main-container{display:flex;flex-direction:column;min-height:inherit;max-height:inherit;width:100%;justify-content:space-between;overflow:hidden}.layout-main{flex:1 1 auto;display:flex}::ng-deep .layout-main>.t-content{padding:1rem;display:flex;block-size:auto!important;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EzUITopBar, selector: "ezui-topbar" }, { kind: "component", type: EzUISideBar, selector: "ezui-sidebar", inputs: ["sidebarItems", "sidebarFooterItems", "baseRoute"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: TuiRoot, selector: "tui-root" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUILayout, decorators: [{
             type: Component,
             args: [{ selector: 'ezui-layout', standalone: true, imports: [CommonModule, RouterModule, EzUITopBar, EzUISideBar, TuiNavigation, TuiScrollbar, TuiRoot], template: `
 	<tui-root class="rootContainer">
 		<div class="layout-wrapper">
-			<ezui-topbar></ezui-topbar>
+			<ezui-topbar #topbar></ezui-topbar>
 			<div class="layout-wrapper-split">
-				<ezui-sidebar #sidebar></ezui-sidebar>
+				<ezui-sidebar [sidebarItems]="sidebarItems" [sidebarFooterItems]="sidebarFooterItems" [baseRoute]="baseRoute" #sidebar></ezui-sidebar>
 				<div class="layout-main-container">
 					<tui-scrollbar class="layout-main">
 						<router-outlet></router-outlet>
@@ -5379,13 +5392,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], sidebarFooterItems: [{
                 type: Input
+            }], baseRoute: [{
+                type: Input
             }], topbarright: [{
                 type: ContentChild,
                 args: ['topbarright', { static: false }]
             }], topbarlogo: [{
                 type: ContentChild,
                 args: ['topbarlogo', { static: false }]
-            }], sidebar: [{ type: i0.ViewChild, args: ["sidebar", { isSignal: true }] }] } });
+            }], sidebar: [{ type: i0.ViewChild, args: ["sidebar", { isSignal: true }] }], topbar: [{ type: i0.ViewChild, args: ["topbar", { isSignal: true }] }] } });
 
 // Components