@kris701/ez-ui 1.3.19 → 1.4.1

package/fesm2022/kris701-ez-ui.mjs

@@ -6889,6 +6889,7 @@ class EzUISideBarItem {
 						tuiAsideItem
 						tuiChevron
 						type="button"
+						(click)="item.expanded = !item.expanded;onItemClick.emit()"
 					>
 						{{item.label}}
 
@@ -6931,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}}
 
@@ -7030,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;
@@ -7042,17 +7045,83 @@ 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) {
+                    if (value == "")
+                        open.push(index + "");
+                    else
+                        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) {
@@ -7077,7 +7146,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);
@@ -7093,12 +7162,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>
@@ -7106,34 +7175,30 @@ 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>
 		}
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i4$2.TuiAsideComponent, selector: "aside[tuiNavigationAside]", inputs: ["tuiNavigationAside"] }, { kind: "component", type: EzUISideBarItem, selector: "ezui-sidebar-item", inputs: ["item"], outputs: ["onItemClick"] }] });
+    `, isInline: true, styles: ["::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:4rem!important}::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:6rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i4$2.TuiAsideComponent, selector: "aside[tuiNavigationAside]", inputs: ["tuiNavigationAside"] }, { kind: "component", type: EzUISideBarItem, selector: "ezui-sidebar-item", inputs: ["item"], outputs: ["onItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBar, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ezui-sidebar',
-                    standalone: true,
-                    imports: [CommonModule, TuiNavigation, EzUISideBarItem],
-                    template: `
+            args: [{ selector: 'ezui-sidebar', standalone: true, imports: [CommonModule, TuiNavigation, EzUISideBarItem], template: `
 		@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>
@@ -7141,18 +7206,17 @@ 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>
 		}
-    `
-                }]
+    `, styles: ["::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:4rem!important}::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:6rem!important}\n"] }]
         }], ctorParameters: () => [{ type: EzUILayoutService }, { type: i2$2.Router }], propDecorators: { sidebarItems: [{
                 type: Input
             }], sidebarFooterItems: [{