@kris701/ez-ui 1.1.0 → 1.1.2

package/fesm2022/kris701-ez-ui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, Output, Input, Component, ViewChild, ContentChild, Directive } from '@angular/core';
+import { EventEmitter, signal, Output, Input, Component, ViewChild, ContentChild, Directive, inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$3 from '@taiga-ui/addon-mobile';
 import { TuiDropdownSheet } from '@taiga-ui/addon-mobile';
 import { TuiDay, TuiTime } from '@taiga-ui/cdk/date-time';
 import * as i3$1 from '@taiga-ui/core';
-import { TuiInput, TuiButton, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiIcon, TuiHint, TuiLoader } from '@taiga-ui/core';
+import { TuiInput, TuiButton, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiIcon, TuiHint, TuiLoader, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
 import * as i4$1 from '@taiga-ui/kit';
 import { TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiBadge, TuiStatus, TuiDataListWrapper, TuiButtonSelect, TuiBadgeNotification, TuiStringifyContentPipe, TuiBadgedContent, TUI_CONFIRM } from '@taiga-ui/kit';
 import * as i2 from '@taiga-ui/core/components/label';
@@ -21,10 +21,12 @@ import * as i7 from '@taiga-ui/cdk/directives/item';
 import * as i3$2 from '@taiga-ui/addon-table';
 import { TuiTablePagination, TuiTable } from '@taiga-ui/addon-table';
 import * as i4$2 from '@taiga-ui/layout';
-import { TuiBlockStatus } from '@taiga-ui/layout';
+import { TuiBlockStatus, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 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';
 
 class EzUIDateInput {
     icon = '';
@@ -41,7 +43,7 @@ class EzUIDateInput {
     ngOnChanges(changes) {
         if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
             this.value = changes['value'].currentValue;
-            this.internalValue.set(this.toTuiDate(this.value));
+            this.internalValue.set(this.toTuiDate(this.toDateOrNull(this.value)));
         }
     }
     updateValue() {
@@ -61,13 +63,18 @@ class EzUIDateInput {
         }
         return null;
     }
+    toDateOrNull(value) {
+        if (value)
+            return new Date(value);
+        return null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIDateInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIDateInput, isStandalone: true, selector: "ezui-dateinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
 		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet>
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDate(min)" [max]="toTuiDate(max)"/>
+			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDate(toDateOrNull(min))" [max]="toTuiDate(toDateOrNull(max))"/>
 			<tui-calendar *tuiDropdown />
 		</tui-textfield>
     `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i4$1.TuiInputDateDirective, selector: "input[tuiInputDate]", inputs: ["max", "min"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiDropdownSheet, selector: "[tuiDropdownSheet]", inputs: ["tuiDropdownSheet"] }] });
@@ -84,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDate(min)" [max]="toTuiDate(max)"/>
+			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDate(toDateOrNull(min))" [max]="toTuiDate(toDateOrNull(max))"/>
 			<tui-calendar *tuiDropdown />
 		</tui-textfield>
     ` }]
@@ -124,7 +131,7 @@ class EzUIDateTimeInput {
     ngOnChanges(changes) {
         if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
             this.value = changes['value'].currentValue;
-            this.internalValue.set(this.toTuiDateTime(this.value));
+            this.internalValue.set(this.toTuiDateTime(this.toDateOrNull(this.value)));
             const internal = this.internalValue();
             if (!internal || !internal[1])
                 this.showDate.set(true);
@@ -184,13 +191,18 @@ class EzUIDateTimeInput {
             this.updateValue();
         }
     }
+    toDateOrNull(value) {
+        if (value)
+            return new Date(value);
+        return null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIDateTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIDateTimeInput, isStandalone: true, selector: "ezui-datetimeinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
 		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet>>
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputDateTime [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDateTime(min)" [max]="toTuiDateTime(max)"/>
+			<input tuiInputDateTime [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDateTime(toDateOrNull(min))" [max]="toTuiDateTime(toDateOrNull(max))"/>
 			<section *tuiDropdown class="datetime-dropdown">
 				@let internal = internalValue();
 				@if(showDate()){
@@ -236,7 +248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputDateTime [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDateTime(min)" [max]="toTuiDateTime(max)"/>
+			<input tuiInputDateTime [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDateTime(toDateOrNull(min))" [max]="toTuiDateTime(toDateOrNull(max))"/>
 			<section *tuiDropdown class="datetime-dropdown">
 				@let internal = internalValue();
 				@if(showDate()){
@@ -4592,11 +4604,374 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             type: Directive
         }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
+class EzUISideBarItem {
+    item;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUISideBarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUISideBarItem, isStandalone: true, selector: "ezui-sidebar-item", inputs: { item: "item" }, ngImport: i0, template: `
+		@if(item && item.visible){
+			@if(item.items && item.items.length > 0){
+				<tui-aside-group [(open)]="item.expanded">
+					<button
+						[iconStart]="item.icon"
+						tuiAsideItem
+						tuiChevron
+						type="button"
+					>
+						{{item.label}}
+
+						<ng-template>
+							@for(subitem of item.items; track subitem){
+								<ezui-sidebar-item [item]="subitem"/>
+							}
+						</ng-template>
+					</button>
+				</tui-aside-group>
+			}
+			@else {
+				<button
+					[iconStart]="item.icon"
+					tuiAsideItem
+					type="button"
+					[routerLinkActiveOptions]="{ exact:true }"
+					[routerLink]="item.routerLink"
+					[queryParams]="item.queryParams"
+					(click)="item.command && item.command()"
+				>
+					{{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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUISideBarItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ezui-sidebar-item',
+                    standalone: true,
+                    imports: [CommonModule, RouterLink, TuiNavigation, TuiAsideGroupComponent, TuiChevron],
+                    template: `
+		@if(item && item.visible){
+			@if(item.items && item.items.length > 0){
+				<tui-aside-group [(open)]="item.expanded">
+					<button
+						[iconStart]="item.icon"
+						tuiAsideItem
+						tuiChevron
+						type="button"
+					>
+						{{item.label}}
+
+						<ng-template>
+							@for(subitem of item.items; track subitem){
+								<ezui-sidebar-item [item]="subitem"/>
+							}
+						</ng-template>
+					</button>
+				</tui-aside-group>
+			}
+			@else {
+				<button
+					[iconStart]="item.icon"
+					tuiAsideItem
+					type="button"
+					[routerLinkActiveOptions]="{ exact:true }"
+					[routerLink]="item.routerLink"
+					[queryParams]="item.queryParams"
+					(click)="item.command && item.command()"
+				>
+					{{item.label}}
+				</button>
+			}
+		}
+    `
+                }]
+        }], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class EzUILayoutService {
+    darkMode = inject(TUI_DARK_MODE);
+    isDarkMode = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDarkMode" }] : /* istanbul ignore next */ []));
+    isDesktop = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []));
+    isMenuExpanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMenuExpanded" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const existing = localStorage.getItem("state");
+        if (existing) {
+            var state = JSON.parse(existing);
+            this.isDarkMode.set(state.isDarkMode);
+            this.isDesktop.set(state.isDesktop);
+            this.isMenuExpanded.set(state.isMenuExpanded);
+        }
+        let isDesktop = this.isDesktop();
+        let isMenuExpanded = this.isMenuExpanded();
+        isDesktop = window.innerWidth > 991;
+        if (isMenuExpanded) {
+            if (!isDesktop)
+                isMenuExpanded = false;
+        }
+        this.isDesktop.set(isDesktop);
+        this.isMenuExpanded.set(isMenuExpanded);
+        this.darkMode.update((dark) => this.isDarkMode());
+    }
+    ToggleDarkMode() {
+        let isDarkMode = this.isDarkMode();
+        this.darkMode.update((dark) => !isDarkMode);
+        isDarkMode = !isDarkMode;
+        this.isDarkMode.set(isDarkMode);
+        this.saveState();
+    }
+    ToggleMenu() {
+        let isMenuExpanded = this.isMenuExpanded();
+        isMenuExpanded = !isMenuExpanded;
+        this.isMenuExpanded.set(isMenuExpanded);
+        this.saveState();
+    }
+    SetMenu(to) {
+        let isMenuExpanded = this.isMenuExpanded();
+        isMenuExpanded = to;
+        this.isMenuExpanded.set(isMenuExpanded);
+        this.saveState();
+    }
+    saveState() {
+        localStorage.setItem("state", JSON.stringify({
+            isDarkMode: this.isDarkMode(),
+            isDesktop: this.isDesktop(),
+            isMenuExpanded: this.isMenuExpanded(),
+        }));
+    }
+}
+
+class EzUISideBar {
+    layoutService;
+    layout;
+    router;
+    haveMoved = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "haveMoved" }] : /* istanbul ignore next */ []));
+    constructor(layoutService, layout, router) {
+        this.layoutService = layoutService;
+        this.layout = layout;
+        this.router = router;
+        router.events.subscribe((val) => {
+            if (val instanceof NavigationEnd)
+                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());
+    }
+    hideEmptySections(menu) {
+        menu.forEach((x) => {
+            if (x.items) {
+                this.hideEmptySections(x.items);
+                if (x.items.every((x) => x.visible == false)) {
+                    x.visible = false;
+                }
+                ;
+            }
+        });
+    }
+    setActiveRoute(menu, parent = null) {
+        menu.forEach((x) => {
+            if (x.routerLink) {
+                if (x.routerLink == this.router.routerState.snapshot.url) {
+                    x.expanded = true;
+                    if (parent)
+                        parent.expanded = true;
+                }
+            }
+            if (x.items)
+                this.setActiveRoute(x.items, x);
+        });
+    }
+    gotoFirstPage(menu) {
+        var first = menu.find((x) => x.visible == true);
+        if (first) {
+            if (first.items) {
+                this.gotoFirstPage(first.items);
+            }
+            else {
+                this.haveMoved.set(true);
+                this.router.navigate([first.routerLink]);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", 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.0.7", type: EzUISideBar, isStandalone: true, selector: "ezui-sidebar", ngImport: i0, template: `
+	    <aside
+	        style="height:100%"
+			tuitheme=""
+	        [tuiNavigationAside]="layoutService.isMenuExpanded()"
+	    >
+			@for(item of layout.sidebarItems(); track item){
+				<ezui-sidebar-item [item]="item"/>
+			}
+
+			<footer>
+				@for(item of layout.sidebarFooterItems(); 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUISideBar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ezui-sidebar',
+                    standalone: true,
+                    imports: [CommonModule, TuiNavigation, EzUISideBarItem],
+                    template: `
+	    <aside
+	        style="height:100%"
+			tuitheme=""
+	        [tuiNavigationAside]="layoutService.isMenuExpanded()"
+	    >
+			@for(item of layout.sidebarItems(); track item){
+				<ezui-sidebar-item [item]="item"/>
+			}
+
+			<footer>
+				@for(item of layout.sidebarFooterItems(); track item){
+					<ezui-sidebar-item [item]="item"/>
+				}
+			</footer>
+	    </aside>
+    `
+                }]
+        }], ctorParameters: () => [{ type: EzUILayoutService }, { type: EzUILayout }, { type: i3$4.Router }] });
+
+class EzUITopBar {
+    layoutService;
+    layout;
+    constructor(layoutService, layout) {
+        this.layoutService = layoutService;
+        this.layout = layout;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITopBar, deps: [{ token: EzUILayoutService }, { token: EzUILayout }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: EzUITopBar, isStandalone: true, selector: "ezui-topbar", ngImport: i0, template: `
+	<header tuiNavigationHeader tuitheme="">
+		<button
+			type="button"
+			tuiIconButton
+			[iconStart]="layoutService.isMenuExpanded() ? '@tui.chevron-left' : '@tui.chevron-right'"
+			(click)="layoutService.ToggleMenu()"
+		>
+		</button>
+		<span tuiNavigationLogo>
+			<ng-container [ngTemplateOutlet]="layout.topbarlogo"></ng-container>
+		</span>
+		<hr />
+		<button
+			[iconStart]="layoutService.isDarkMode() ? 'moon' : 'sun'"
+			tuiIconButton
+			type="button"
+			(click)="layoutService.ToggleDarkMode()"
+		>
+		</button>
+
+		<ng-container [ngTemplateOutlet]="layout.topbarright"></ng-container>
+	</header>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.TuiHeaderComponent, selector: "header[tuiNavigationHeader]" }, { kind: "component", type: i4$2.TuiLogoComponent, selector: "[tuiNavigationLogo]" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITopBar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ezui-topbar',
+                    standalone: true,
+                    imports: [CommonModule, TuiNavigation, TuiButton],
+                    template: `
+	<header tuiNavigationHeader tuitheme="">
+		<button
+			type="button"
+			tuiIconButton
+			[iconStart]="layoutService.isMenuExpanded() ? '@tui.chevron-left' : '@tui.chevron-right'"
+			(click)="layoutService.ToggleMenu()"
+		>
+		</button>
+		<span tuiNavigationLogo>
+			<ng-container [ngTemplateOutlet]="layout.topbarlogo"></ng-container>
+		</span>
+		<hr />
+		<button
+			[iconStart]="layoutService.isDarkMode() ? 'moon' : 'sun'"
+			tuiIconButton
+			type="button"
+			(click)="layoutService.ToggleDarkMode()"
+		>
+		</button>
+
+		<ng-container [ngTemplateOutlet]="layout.topbarright"></ng-container>
+	</header>
+    `
+                }]
+        }], ctorParameters: () => [{ type: EzUILayoutService }, { type: EzUILayout }] });
+
+class EzUILayout {
+    sidebarItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarItems" }] : /* istanbul ignore next */ []));
+    sidebarFooterItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarFooterItems" }] : /* istanbul ignore next */ []));
+    topbarright;
+    topbarlogo;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUILayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", 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 }], ngImport: i0, template: `
+	<tui-root class="rootContainer">
+		<div class="layout-wrapper">
+			<ezui-topbar></ezui-topbar>
+			<div class="layout-wrapper-split">
+				<ezui-sidebar></ezui-sidebar>
+				<div class="layout-main-container">
+					<tui-scrollbar class="layout-main">
+						<router-outlet></router-outlet>
+					</tui-scrollbar>
+				</div>
+			</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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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>
+			<div class="layout-wrapper-split">
+				<ezui-sidebar></ezui-sidebar>
+				<div class="layout-main-container">
+					<tui-scrollbar class="layout-main">
+						<router-outlet></router-outlet>
+					</tui-scrollbar>
+				</div>
+			</div>
+		</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: [{
+                type: Input
+            }], sidebarFooterItems: [{
+                type: Input
+            }], topbarright: [{
+                type: ContentChild,
+                args: ['topbarright', { static: false }]
+            }], topbarlogo: [{
+                type: ContentChild,
+                args: ['topbarlogo', { static: false }]
+            }] } });
+
 // Components
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseCRUDInterface, BaseListInterface, EzUIDateInput, EzUIDateTimeInput, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUITTableSortableColumn, EzUITable, EzUITableDateFilter, EzUITableFilterService, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
+export { BaseCRUDInterface, BaseListInterface, EzUIDateInput, EzUIDateTimeInput, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUITTableSortableColumn, EzUITable, EzUITableDateFilter, EzUITableFilterService, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map