@kris701/ez-ui 1.3.18 → 1.4.0

package/fesm2022/kris701-ez-ui.mjs

@@ -378,6 +378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class EzUIDialog {
     layoutService;
+    header;
     content;
     size = 'm';
     title = '';
@@ -393,11 +394,16 @@ class EzUIDialog {
         this.layoutService = layoutService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIDialog, deps: [{ token: EzUILayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDialog, isStandalone: true, selector: "ezui-dialog", inputs: { size: "size", title: "title", isLoading: "isLoading", showDialog: "showDialog", showSave: "showSave", showDelete: "showDelete" }, outputs: { onSaveItem: "onSaveItem", onDeleteItem: "onDeleteItem" }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDialog, isStandalone: true, selector: "ezui-dialog", inputs: { size: "size", title: "title", isLoading: "isLoading", showDialog: "showDialog", showSave: "showSave", showDelete: "showDelete" }, outputs: { onSaveItem: "onSaveItem", onDeleteItem: "onDeleteItem" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
 		<ng-template let-id="id" [tuiDialogOptions]="{size: size, appearance: layoutService.isDesktop() ? 'taiga compact' : 'fullscreen'}" [(tuiDialog)]="showDialog">
 			<header tuiHeader>
 				<hgroup tuiTitle>
+				@if(header){
+					<ng-container [ngTemplateOutlet]="header"></ng-container>
+				}
+				@else {
 					<h2 [id]="id">{{title}}</h2>
+				}
 				</hgroup>
 			</header>
 
@@ -432,7 +438,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		<ng-template let-id="id" [tuiDialogOptions]="{size: size, appearance: layoutService.isDesktop() ? 'taiga compact' : 'fullscreen'}" [(tuiDialog)]="showDialog">
 			<header tuiHeader>
 				<hgroup tuiTitle>
+				@if(header){
+					<ng-container [ngTemplateOutlet]="header"></ng-container>
+				}
+				@else {
 					<h2 [id]="id">{{title}}</h2>
+				}
 				</hgroup>
 			</header>
 
@@ -452,7 +463,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 			}
 		</ng-template>
     `, styles: [".dialog-footer{display:flex!important;flex-direction:row!important;gap:5px!important;margin-top:auto!important;margin-block-start:auto!important}\n"] }]
-        }], ctorParameters: () => [{ type: EzUILayoutService }], propDecorators: { content: [{
+        }], ctorParameters: () => [{ type: EzUILayoutService }], propDecorators: { header: [{
+                type: ContentChild,
+                args: ['header', { static: false }]
+            }], content: [{
                 type: ContentChild,
                 args: ['content', { static: false }]
             }], size: [{
@@ -6875,6 +6889,7 @@ class EzUISideBarItem {
 						tuiAsideItem
 						tuiChevron
 						type="button"
+						(click)="item.expanded = !item.expanded;onItemClick.emit()"
 					>
 						{{item.label}}
 
@@ -6917,6 +6932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						tuiAsideItem
 						tuiChevron
 						type="button"
+						(click)="item.expanded = !item.expanded;onItemClick.emit()"
 					>
 						{{item.label}}
 
@@ -7016,6 +7032,7 @@ class EzUISideBar {
     ...(ngDevMode ? [{ debugName: "haveMoved" }] : /* istanbul ignore next */ []));
     baseRoute = signal("/", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "baseRoute" }] : /* istanbul ignore next */ []));
+    openStateKey = "ezui-sidebar-state";
     constructor(layoutService, router) {
         this.layoutService = layoutService;
         this.router = router;
@@ -7028,17 +7045,79 @@ class EzUISideBar {
         this.initialize();
     }
     initialize() {
-        var sidebarItems = [...this.sidebarItems()];
-        var sidebarFooterItems = [...this.sidebarFooterItems()];
+        let sidebarItems = [...this.sidebarItems()];
+        let 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);
+        let stateStr = localStorage.getItem(this.openStateKey);
+        if (stateStr) {
+            let state = JSON.parse(stateStr);
+            this.setOpenStates(sidebarItems, state.sidebar);
+            this.setOpenStates(sidebarFooterItems, state.footer);
+        }
         this.sidebarItems.set(sidebarItems);
         this.sidebarFooterItems.set(sidebarFooterItems);
     }
+    saveState() {
+        let state = {
+            sidebar: this.getOpenStates(this.sidebarItems()),
+            footer: this.getOpenStates(this.sidebarFooterItems())
+        };
+        console.log(state);
+        localStorage.setItem(this.openStateKey, JSON.stringify(state));
+    }
+    getOpenStates(from) {
+        let open = [];
+        let index = 0;
+        for (let item of from) {
+            let subOpen = this.getOpenStatesRec(item);
+            for (let value of subOpen) {
+                if (value == "")
+                    open.push(index + "");
+                else
+                    open.push(index + ";" + value);
+            }
+            index++;
+        }
+        return open;
+    }
+    getOpenStatesRec(from) {
+        let open = [];
+        if (from.items) {
+            if (from.expanded)
+                open.push("");
+            let index = 0;
+            for (let item of from.items) {
+                let subOpen = this.getOpenStatesRec(item);
+                for (let value of subOpen)
+                    open.push(index + ";" + value);
+                index++;
+            }
+        }
+        return open;
+    }
+    setOpenStates(from, state) {
+        let index = 0;
+        for (let item of from) {
+            this.setOpenStatesRec(item, index + "", state);
+            index++;
+        }
+    }
+    setOpenStatesRec(from, fromIndex, state) {
+        if (from.items) {
+            if (state.includes(fromIndex))
+                from.expanded = true;
+            let index = 0;
+            for (let item of from.items) {
+                this.setOpenStatesRec(item, fromIndex + ";" + index, state);
+                index++;
+            }
+        }
+    }
     hideEmptySections(menu) {
         for (let item of menu) {
             if (item.items) {
@@ -7063,7 +7142,7 @@ class EzUISideBar {
         }
     }
     gotoFirstPage(menu) {
-        var first = menu.find((x) => x.visible == true);
+        let first = menu.find((x) => x.visible == true);
         if (first) {
             if (first.items) {
                 this.gotoFirstPage(first.items);
@@ -7079,12 +7158,12 @@ class EzUISideBar {
 		@if(layoutService.isDesktop()){
 			<aside style="height:100%" tuitheme="" [tuiNavigationAside]="layoutService.isMenuExpanded()">
 				@for(item of sidebarItems(); track item){
-					<ezui-sidebar-item [item]="item"/>
+					<ezui-sidebar-item [item]="item" (onItemClick)="saveState()"/>
 				}
 
 				<footer>
 					@for(item of sidebarFooterItems(); track item){
-						<ezui-sidebar-item [item]="item"/>
+						<ezui-sidebar-item [item]="item" (onItemClick)="saveState()"/>
 					}
 				</footer>
 			</aside>
@@ -7092,12 +7171,12 @@ class EzUISideBar {
 		@else {
 			<aside style="height:100%" tuitheme="" [tuiNavigationAside]="true" [style.display]="layoutService.isMenuExpanded() ? '' : 'none'">
 				@for(item of sidebarItems(); track item){
-					<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false)"/>
+					<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false);saveState()"/>
 				}
 
 				<footer>
 					@for(item of sidebarFooterItems(); track item){
-						<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false)"/>
+						<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false);saveState()"/>
 					}
 				</footer>
 			</aside>
@@ -7114,12 +7193,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		@if(layoutService.isDesktop()){
 			<aside style="height:100%" tuitheme="" [tuiNavigationAside]="layoutService.isMenuExpanded()">
 				@for(item of sidebarItems(); track item){
-					<ezui-sidebar-item [item]="item"/>
+					<ezui-sidebar-item [item]="item" (onItemClick)="saveState()"/>
 				}
 
 				<footer>
 					@for(item of sidebarFooterItems(); track item){
-						<ezui-sidebar-item [item]="item"/>
+						<ezui-sidebar-item [item]="item" (onItemClick)="saveState()"/>
 					}
 				</footer>
 			</aside>
@@ -7127,12 +7206,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		@else {
 			<aside style="height:100%" tuitheme="" [tuiNavigationAside]="true" [style.display]="layoutService.isMenuExpanded() ? '' : 'none'">
 				@for(item of sidebarItems(); track item){
-					<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false)"/>
+					<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false);saveState()"/>
 				}
 
 				<footer>
 					@for(item of sidebarFooterItems(); track item){
-						<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false)"/>
+						<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false);saveState()"/>
 					}
 				</footer>
 			</aside>