@kris701/ez-ui 1.2.9 → 1.2.11

package/fesm2022/kris701-ez-ui.mjs

@@ -5451,8 +5451,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 class EzUISideBarItem {
     item;
+    onItemClick = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISideBarItem, isStandalone: true, selector: "ezui-sidebar-item", inputs: { item: "item" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISideBarItem, isStandalone: true, selector: "ezui-sidebar-item", inputs: { item: "item" }, outputs: { onItemClick: "onItemClick" }, ngImport: i0, template: `
 		@if(item && item.visible){
 			@if(item.items && item.items.length > 0){
 				<tui-aside-group [(open)]="item.expanded">
@@ -5466,7 +5467,7 @@ class EzUISideBarItem {
 
 						<ng-template>
 							@for(subitem of item.items; track subitem){
-								<ezui-sidebar-item [item]="subitem"/>
+								<ezui-sidebar-item [item]="subitem" (onItemClick)="onItemClick.emit()"/>
 							}
 						</ng-template>
 					</button>
@@ -5480,13 +5481,13 @@ class EzUISideBarItem {
 					[routerLinkActiveOptions]="{ exact:true }"
 					[routerLink]="item.routerLink"
 					[queryParams]="item.queryParams"
-					(click)="item.command && item.command()"
+					(click)="item.command && item.command();onItemClick.emit()"
 				>
 					{{item.label}}
 				</button>
 			}
 		}
-    `, isInline: true, dependencies: [{ kind: "component", type: EzUISideBarItem, selector: "ezui-sidebar-item", inputs: ["item"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4$2.TuiAsideGroupComponent, selector: "tui-aside-group", inputs: ["open"], outputs: ["openChange"] }, { kind: "directive", type: i4$2.TuiAsideItemDirective, selector: "[tuiAsideItem]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: EzUISideBarItem, selector: "ezui-sidebar-item", inputs: ["item"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4$2.TuiAsideGroupComponent, selector: "tui-aside-group", inputs: ["open"], outputs: ["openChange"] }, { kind: "directive", type: i4$2.TuiAsideItemDirective, selector: "[tuiAsideItem]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBarItem, decorators: [{
             type: Component,
@@ -5508,7 +5509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 						<ng-template>
 							@for(subitem of item.items; track subitem){
-								<ezui-sidebar-item [item]="subitem"/>
+								<ezui-sidebar-item [item]="subitem" (onItemClick)="onItemClick.emit()"/>
 							}
 						</ng-template>
 					</button>
@@ -5522,7 +5523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					[routerLinkActiveOptions]="{ exact:true }"
 					[routerLink]="item.routerLink"
 					[queryParams]="item.queryParams"
-					(click)="item.command && item.command()"
+					(click)="item.command && item.command();onItemClick.emit()"
 				>
 					{{item.label}}
 				</button>
@@ -5532,6 +5533,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }], propDecorators: { item: [{
                 type: Input
+            }], onItemClick: [{
+                type: Output
             }] } });
 
 class EzUILayoutService {
@@ -5660,22 +5663,33 @@ class EzUISideBar {
     }
     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 sidebarItems(); track item){
-				<ezui-sidebar-item [item]="item"/>
-			}
-
-			<footer>
-				@for(item of sidebarFooterItems(); track item){
+		@if(layoutService.isDesktop()){
+			<aside style="height:100%" tuitheme="" [tuiNavigationAside]="layoutService.isMenuExpanded()">
+				@for(item of sidebarItems(); track item){
 					<ezui-sidebar-item [item]="item"/>
 				}
-			</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"] }] });
+
+				<footer>
+					@for(item of sidebarFooterItems(); track item){
+						<ezui-sidebar-item [item]="item"/>
+					}
+				</footer>
+			</aside>
+		}
+		@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)"/>
+				}
+
+				<footer>
+					@for(item of sidebarFooterItems(); track item){
+						<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false)"/>
+					}
+				</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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBar, decorators: [{
             type: Component,
@@ -5684,21 +5698,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     standalone: true,
                     imports: [CommonModule, TuiNavigation, EzUISideBarItem],
                     template: `
-	    <aside
-	        style="height:100%"
-			tuitheme=""
-	        [tuiNavigationAside]="layoutService.isMenuExpanded()"
-	    >
-			@for(item of sidebarItems(); track item){
-				<ezui-sidebar-item [item]="item"/>
-			}
-
-			<footer>
-				@for(item of sidebarFooterItems(); track item){
+		@if(layoutService.isDesktop()){
+			<aside style="height:100%" tuitheme="" [tuiNavigationAside]="layoutService.isMenuExpanded()">
+				@for(item of sidebarItems(); track item){
 					<ezui-sidebar-item [item]="item"/>
 				}
-			</footer>
-	    </aside>
+
+				<footer>
+					@for(item of sidebarFooterItems(); track item){
+						<ezui-sidebar-item [item]="item"/>
+					}
+				</footer>
+			</aside>
+		}
+		@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)"/>
+				}
+
+				<footer>
+					@for(item of sidebarFooterItems(); track item){
+						<ezui-sidebar-item [item]="item" (onItemClick)="layoutService.isMenuExpanded.set(false)"/>
+					}
+				</footer>
+			</aside>
+		}
     `
                 }]
         }], ctorParameters: () => [{ type: EzUILayoutService }, { type: i2$2.Router }], propDecorators: { sidebarItems: [{
@@ -5722,14 +5747,14 @@ class EzUITopBar {
 		<button
 			type="button"
 			tuiIconButton
-			[iconStart]="layoutService.isMenuExpanded() ? '@tui.chevron-left' : '@tui.chevron-right'"
+			[iconStart]="layoutService.isDesktop() ? (layoutService.isMenuExpanded() ? '@tui.chevron-left' : '@tui.chevron-right') : (layoutService.isMenuExpanded() ? '@tui.chevron-up' : '@tui.chevron-down')"
 			(click)="layoutService.ToggleMenu()"
 		>
 		</button>
 		<span tuiNavigationLogo>
 			<ng-container [ngTemplateOutlet]="layout.topbarlogo"></ng-container>
 		</span>
-		<hr />
+		<hr style="min-inline-size:0px"/>
 		<button
 			[iconStart]="layoutService.isDarkMode() ? 'moon' : 'sun'"
 			tuiIconButton
@@ -5753,14 +5778,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		<button
 			type="button"
 			tuiIconButton
-			[iconStart]="layoutService.isMenuExpanded() ? '@tui.chevron-left' : '@tui.chevron-right'"
+			[iconStart]="layoutService.isDesktop() ? (layoutService.isMenuExpanded() ? '@tui.chevron-left' : '@tui.chevron-right') : (layoutService.isMenuExpanded() ? '@tui.chevron-up' : '@tui.chevron-down')"
 			(click)="layoutService.ToggleMenu()"
 		>
 		</button>
 		<span tuiNavigationLogo>
 			<ng-container [ngTemplateOutlet]="layout.topbarlogo"></ng-container>
 		</span>
-		<hr />
+		<hr style="min-inline-size:0px"/>
 		<button
 			[iconStart]="layoutService.isDarkMode() ? 'moon' : 'sun'"
 			tuiIconButton
@@ -5776,6 +5801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }], ctorParameters: () => [{ type: EzUILayoutService }, { type: EzUILayout }] });
 
 class EzUILayout {
+    layoutService;
     sidebarItems = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sidebarItems" }] : /* istanbul ignore next */ []));
     sidebarFooterItems = signal([], /* @ts-ignore */
@@ -5788,14 +5814,24 @@ class EzUILayout {
     ...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
     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 });
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUILayout, deps: [{ token: EzUILayoutService }], 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", 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 #topbar></ezui-topbar>
 			<div class="layout-wrapper-split">
-				<ezui-sidebar [sidebarItems]="sidebarItems" [sidebarFooterItems]="sidebarFooterItems" [baseRoute]="baseRoute" #sidebar></ezui-sidebar>
-				<div class="layout-main-container">
+				<ezui-sidebar
+					#sidebar
+					[sidebarItems]="sidebarItems"
+					[sidebarFooterItems]="sidebarFooterItems"
+					[baseRoute]="baseRoute"
+					[style.width]="layoutService.isDesktop() ? '' : '0px'"></ezui-sidebar>
+				<div
+					class="layout-main-container"
+					[style.opacity]="layoutService.isDesktop() ? 1 : (layoutService.isMenuExpanded() ? 0.5 : 1)">
 					<tui-scrollbar class="layout-main">
 						<router-outlet></router-outlet>
 					</tui-scrollbar>
@@ -5812,8 +5848,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		<div class="layout-wrapper">
 			<ezui-topbar #topbar></ezui-topbar>
 			<div class="layout-wrapper-split">
-				<ezui-sidebar [sidebarItems]="sidebarItems" [sidebarFooterItems]="sidebarFooterItems" [baseRoute]="baseRoute" #sidebar></ezui-sidebar>
-				<div class="layout-main-container">
+				<ezui-sidebar
+					#sidebar
+					[sidebarItems]="sidebarItems"
+					[sidebarFooterItems]="sidebarFooterItems"
+					[baseRoute]="baseRoute"
+					[style.width]="layoutService.isDesktop() ? '' : '0px'"></ezui-sidebar>
+				<div
+					class="layout-main-container"
+					[style.opacity]="layoutService.isDesktop() ? 1 : (layoutService.isMenuExpanded() ? 0.5 : 1)">
 					<tui-scrollbar class="layout-main">
 						<router-outlet></router-outlet>
 					</tui-scrollbar>
@@ -5822,7 +5865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		</div>
 	</tui-root>
     `, 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"] }]
-        }], propDecorators: { sidebarItems: [{
+        }], ctorParameters: () => [{ type: EzUILayoutService }], propDecorators: { sidebarItems: [{
                 type: Input
             }], sidebarFooterItems: [{
                 type: Input