@kris701/ez-ui 1.0.10 → 1.1.1

package/fesm2022/kris701-ez-ui.mjs

@@ -1,12 +1,14 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, signal, 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, TuiOption, TuiDropdown, TuiGroup, TuiButton, 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, TuiFiles, TuiChevron, TuiTextarea, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiBadge, TuiStatus, TuiDataListWrapper, TuiButtonSelect, TuiBadgeNotification, TuiStringifyContentPipe, TuiBadgedContent, TuiInputDateTime, TUI_CONFIRM } 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';
 import * as i3 from '@taiga-ui/core/components/textfield';
 import * as i4 from '@taiga-ui/core/portals/dropdown';
@@ -19,11 +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$3 from '@taiga-ui/addon-mobile';
+import * as i3$4 from '@angular/router';
+import { RouterLink, NavigationEnd, RouterModule } from '@angular/router';
 
 class EzUIDateInput {
     icon = '';
@@ -35,43 +38,55 @@ class EzUIDateInput {
     TuiDay = TuiDay;
     value = new Date;
     valueChange = new EventEmitter();
-    internalValue = null;
+    internalValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
             this.value = changes['value'].currentValue;
-            this.value = new Date(this.value);
-            this.internalValue = TuiDay.fromUtcNativeDate(this.value);
+            this.internalValue.set(this.toTuiDate(this.value));
         }
     }
     updateValue() {
         if (this.internalValue) {
-            this.value = this.internalValue?.toUtcNativeDate();
+            this.value = this.fromTuiDate(this.internalValue());
             this.valueChange.emit(this.value);
         }
     }
+    toTuiDate(date) {
+        if (date)
+            return TuiDay.fromUtcNativeDate(date);
+        return null;
+    }
+    fromTuiDate(date) {
+        if (date) {
+            return date.toUtcNativeDate();
+        }
+        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">
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet>
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="min ? TuiDay.fromLocalNativeDate(min) : null" [max]="max ? TuiDay.fromLocalNativeDate(max) : null"/>
+			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDate(min)" [max]="toTuiDate(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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIDateInput, decorators: [{
             type: Component,
             args: [{ selector: 'ezui-dateinput', imports: [
                         FormsModule,
                         TuiInput,
-                        TuiInputDate
+                        TuiInputDate,
+                        TuiDropdownSheet
                     ], template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet>
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
-			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="min ? TuiDay.fromLocalNativeDate(min) : null" [max]="max ? TuiDay.fromLocalNativeDate(max) : null"/>
+			<input tuiInputDate [(ngModel)]="internalValue" (ngModelChange)="updateValue()" [disabled]="disabled" [min]="toTuiDate(min)" [max]="toTuiDate(max)"/>
 			<tui-calendar *tuiDropdown />
 		</tui-textfield>
     ` }]
@@ -93,6 +108,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Output
             }] } });
 
+class EzUIDateTimeInput {
+    icon = '';
+    label = '';
+    size = 'm';
+    disabled = false;
+    min = null;
+    max = null;
+    TuiDay = TuiDay;
+    TuiTime = TuiTime;
+    showDate = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDate" }] : /* istanbul ignore next */ []));
+    value = new Date();
+    valueChange = new EventEmitter();
+    internalValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+            this.internalValue.set(this.toTuiDateTime(this.value));
+            const internal = this.internalValue();
+            if (!internal || !internal[1])
+                this.showDate.set(true);
+        }
+    }
+    updateValue() {
+        if (this.internalValue) {
+            let internal = this.internalValue();
+            if (internal) {
+                if (!internal[1]) {
+                    internal[1] = new TuiTime(0, 0);
+                    this.internalValue.set(internal);
+                }
+                this.value = this.fromTuiDateTime(this.internalValue());
+            }
+            else {
+                this.value = null;
+            }
+            this.valueChange.emit(this.value);
+        }
+    }
+    toTuiDateTime(date) {
+        if (date)
+            return [TuiDay.fromUtcNativeDate(date), TuiTime.fromLocalNativeDate(date)];
+        return null;
+    }
+    fromTuiDateTime(date) {
+        if (date) {
+            let value = date[0].toUtcNativeDate();
+            const { hours = 0, minutes = 0 } = date?.[1] ?? {};
+            value.setHours(hours, minutes);
+            return value;
+        }
+        return null;
+    }
+    setHours(value) {
+        let internal = this.internalValue();
+        if (internal && internal[1]) {
+            if (value > 23)
+                value = 0;
+            if (value < 0)
+                value = 23;
+            internal[1] = new TuiTime(value, internal[1].minutes);
+            this.internalValue.set(internal);
+            this.updateValue();
+        }
+    }
+    setMinutes(value) {
+        let internal = this.internalValue();
+        if (internal && internal[1]) {
+            if (value > 59)
+                value = 0;
+            if (value < 0)
+                value = 59;
+            internal[1] = new TuiTime(internal[1].hours, value);
+            this.internalValue.set(internal);
+            this.updateValue();
+        }
+    }
+    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)"/>
+			<section *tuiDropdown class="datetime-dropdown">
+				@let internal = internalValue();
+				@if(showDate()){
+					@if(internal && internal[1]){
+						<button tuiButton iconStart="clock" (click)="showDate.set(false)" size="s">Set Time</button>
+					}
+
+					<tui-calendar/>
+				}
+				@else {
+					<button tuiButton iconStart="calendar" (click)="showDate.set(true)" size="s">Set Date</button>
+
+					@if(internal && internal[1]){
+						@let time = internal[1];
+						<div class="timeselector">
+							<div class="selector">
+								<button tuiButton (click)="setHours(time.hours + 1)" iconStart="plus" size="l"></button>
+								<span>{{time.hours}}</span>
+								<button tuiButton (click)="setHours(time.hours - 1)" iconStart="minus" size="l"></button>
+							</div>
+							<div class="selector">
+								<button tuiButton (click)="setMinutes(time.minutes + 1)" iconStart="plus" size="l"></button>
+								<span>{{time.minutes}}</span>
+								<button tuiButton (click)="setMinutes(time.minutes - 1)" iconStart="minus" size="l"></button>
+							</div>
+						</div>
+					}
+				}
+			</section>
+		</tui-textfield>
+    `, isInline: true, styles: [".datetime-dropdown{display:flex;flex-direction:column}.datetime-dropdown .timeselector{inline-size:12rem;display:flex;gap:10px;margin-top:10px;align-self:center}.datetime-dropdown .timeselector .selector{display:flex;flex-direction:column;align-self:center;width:100%}.datetime-dropdown .timeselector .selector span{text-align:center;font-size:40px}\n"], 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.TuiInputDateTimeDirective, selector: "input[tuiInputDateTime]", inputs: ["timeMode", "min", "max"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiDropdownSheet, selector: "[tuiDropdownSheet]", inputs: ["tuiDropdownSheet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIDateTimeInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-datetimeinput', imports: [
+                        FormsModule,
+                        TuiInput,
+                        TuiInputDateTime,
+                        TuiButton,
+                        TuiDropdownSheet
+                    ], 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)"/>
+			<section *tuiDropdown class="datetime-dropdown">
+				@let internal = internalValue();
+				@if(showDate()){
+					@if(internal && internal[1]){
+						<button tuiButton iconStart="clock" (click)="showDate.set(false)" size="s">Set Time</button>
+					}
+
+					<tui-calendar/>
+				}
+				@else {
+					<button tuiButton iconStart="calendar" (click)="showDate.set(true)" size="s">Set Date</button>
+
+					@if(internal && internal[1]){
+						@let time = internal[1];
+						<div class="timeselector">
+							<div class="selector">
+								<button tuiButton (click)="setHours(time.hours + 1)" iconStart="plus" size="l"></button>
+								<span>{{time.hours}}</span>
+								<button tuiButton (click)="setHours(time.hours - 1)" iconStart="minus" size="l"></button>
+							</div>
+							<div class="selector">
+								<button tuiButton (click)="setMinutes(time.minutes + 1)" iconStart="plus" size="l"></button>
+								<span>{{time.minutes}}</span>
+								<button tuiButton (click)="setMinutes(time.minutes - 1)" iconStart="minus" size="l"></button>
+							</div>
+						</div>
+					}
+				}
+			</section>
+		</tui-textfield>
+    `, styles: [".datetime-dropdown{display:flex;flex-direction:column}.datetime-dropdown .timeselector{inline-size:12rem;display:flex;gap:10px;margin-top:10px;align-self:center}.datetime-dropdown .timeselector .selector{display:flex;flex-direction:column;align-self:center;width:100%}.datetime-dropdown .timeselector .selector span{text-align:center;font-size:40px}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 class EzUIFileInput {
     files = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
@@ -165,6 +360,1911 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }] });
 
+const lucideicons = [
+    'a-arrow-down',
+    'a-arrow-up',
+    'a-large-small',
+    'accessibility',
+    'activity',
+    'ad',
+    'air-vent',
+    'airplay',
+    'alarm-clock-check',
+    'alarm-clock-minus',
+    'alarm-clock-off',
+    'alarm-clock-plus',
+    'alarm-clock',
+    'alarm-smoke',
+    'album',
+    'align-center-horizontal',
+    'align-center-vertical',
+    'align-end-horizontal',
+    'align-end-vertical',
+    'align-horizontal-distribute-center',
+    'align-horizontal-distribute-end',
+    'align-horizontal-distribute-start',
+    'align-horizontal-justify-center',
+    'align-horizontal-justify-end',
+    'align-horizontal-justify-start',
+    'align-horizontal-space-around',
+    'align-horizontal-space-between',
+    'align-start-horizontal',
+    'align-start-vertical',
+    'align-vertical-distribute-center',
+    'align-vertical-distribute-end',
+    'align-vertical-distribute-start',
+    'align-vertical-justify-center',
+    'align-vertical-justify-end',
+    'align-vertical-justify-start',
+    'align-vertical-space-around',
+    'align-vertical-space-between',
+    'ambulance',
+    'ampersand',
+    'ampersands',
+    'amphora',
+    'anchor',
+    'angry',
+    'annoyed',
+    'antenna',
+    'anvil',
+    'aperture',
+    'app-window-mac',
+    'app-window',
+    'apple',
+    'archive-restore',
+    'archive-x',
+    'archive',
+    'armchair',
+    'arrow-big-down-dash',
+    'arrow-big-down',
+    'arrow-big-left-dash',
+    'arrow-big-left',
+    'arrow-big-right-dash',
+    'arrow-big-right',
+    'arrow-big-up-dash',
+    'arrow-big-up',
+    'arrow-down-0-1',
+    'arrow-down-1-0',
+    'arrow-down-a-z',
+    'arrow-down-from-line',
+    'arrow-down-left',
+    'arrow-down-narrow-wide',
+    'arrow-down-right',
+    'arrow-down-to-dot',
+    'arrow-down-to-line',
+    'arrow-down-up',
+    'arrow-down-wide-narrow',
+    'arrow-down-z-a',
+    'arrow-down',
+    'arrow-left-from-line',
+    'arrow-left-right',
+    'arrow-left-to-line',
+    'arrow-left',
+    'arrow-right-from-line',
+    'arrow-right-left',
+    'arrow-right-to-line',
+    'arrow-right',
+    'arrow-up-0-1',
+    'arrow-up-1-0',
+    'arrow-up-a-z',
+    'arrow-up-down',
+    'arrow-up-from-dot',
+    'arrow-up-from-line',
+    'arrow-up-left',
+    'arrow-up-narrow-wide',
+    'arrow-up-right',
+    'arrow-up-to-line',
+    'arrow-up-wide-narrow',
+    'arrow-up-z-a',
+    'arrow-up',
+    'arrows-up-from-line',
+    'asterisk',
+    'astroid',
+    'at-sign',
+    'atom',
+    'audio-lines',
+    'audio-waveform',
+    'award',
+    'axe',
+    'axis-3d',
+    'baby',
+    'backpack',
+    'badge-alert',
+    'badge-cent',
+    'badge-check',
+    'badge-dollar-sign',
+    'badge-euro',
+    'badge-indian-rupee',
+    'badge-info',
+    'badge-japanese-yen',
+    'badge-minus',
+    'badge-percent',
+    'badge-plus',
+    'badge-pound-sterling',
+    'badge-question-mark',
+    'badge-russian-ruble',
+    'badge-swiss-franc',
+    'badge-turkish-lira',
+    'badge-x',
+    'badge',
+    'baggage-claim',
+    'balloon',
+    'ban',
+    'banana',
+    'bandage',
+    'banknote-arrow-down',
+    'banknote-arrow-up',
+    'banknote-check',
+    'banknote-x',
+    'banknote',
+    'barcode',
+    'barrel',
+    'baseline',
+    'bath',
+    'battery-charging',
+    'battery-full',
+    'battery-low',
+    'battery-medium',
+    'battery-plus',
+    'battery-warning',
+    'battery',
+    'beaker',
+    'bean-off',
+    'bean',
+    'bed-double',
+    'bed-single',
+    'bed',
+    'beef-off',
+    'beef',
+    'beer-off',
+    'beer',
+    'bell-check',
+    'bell-dot',
+    'bell-electric',
+    'bell-minus',
+    'bell-off',
+    'bell-plus',
+    'bell-ring',
+    'bell',
+    'between-horizontal-end',
+    'between-horizontal-start',
+    'between-vertical-end',
+    'between-vertical-start',
+    'biceps-flexed',
+    'bike',
+    'binary',
+    'binoculars',
+    'biohazard',
+    'bird',
+    'birdhouse',
+    'bitcoin',
+    'blend',
+    'blender',
+    'blinds',
+    'blocks',
+    'bluetooth-connected',
+    'bluetooth-off',
+    'bluetooth-searching',
+    'bluetooth',
+    'bold',
+    'bolt',
+    'bomb',
+    'bone-fracture',
+    'bone',
+    'book-a',
+    'book-alert',
+    'book-audio',
+    'book-check',
+    'book-copy',
+    'book-dashed',
+    'book-down',
+    'book-headphones',
+    'book-heart',
+    'book-image',
+    'book-key',
+    'book-lock',
+    'book-marked',
+    'book-minus',
+    'book-open-check',
+    'book-open-text',
+    'book-open',
+    'book-plus',
+    'book-search',
+    'book-text',
+    'book-type',
+    'book-up-2',
+    'book-up',
+    'book-user',
+    'book-x',
+    'book',
+    'bookmark-check',
+    'bookmark-minus',
+    'bookmark-off',
+    'bookmark-plus',
+    'bookmark-x',
+    'bookmark',
+    'boom-box',
+    'bot-message-square',
+    'bot-off',
+    'bot',
+    'bottle-wine',
+    'bow-arrow',
+    'box',
+    'boxes',
+    'braces',
+    'brackets',
+    'brain-circuit',
+    'brain-cog',
+    'brain',
+    'brick-wall-fire',
+    'brick-wall-shield',
+    'brick-wall',
+    'briefcase-business',
+    'briefcase-conveyor-belt',
+    'briefcase-medical',
+    'briefcase',
+    'bring-to-front',
+    'broccoli',
+    'brush-cleaning',
+    'brush',
+    'bubbles',
+    'bug-off',
+    'bug-play',
+    'bug',
+    'building-2',
+    'building',
+    'bus-front',
+    'bus',
+    'cable-car',
+    'cable',
+    'cake-slice',
+    'cake',
+    'calculator',
+    'calendar-1',
+    'calendar-arrow-down',
+    'calendar-arrow-up',
+    'calendar-check-2',
+    'calendar-check',
+    'calendar-clock',
+    'calendar-cog',
+    'calendar-days',
+    'calendar-fold',
+    'calendar-heart',
+    'calendar-minus-2',
+    'calendar-minus',
+    'calendar-off',
+    'calendar-plus-2',
+    'calendar-plus',
+    'calendar-range',
+    'calendar-search',
+    'calendar-sync',
+    'calendar-x-2',
+    'calendar-x',
+    'calendar',
+    'calendars',
+    'camera-off',
+    'camera',
+    'candy-cane',
+    'candy-off',
+    'candy',
+    'cannabis-off',
+    'cannabis',
+    'captions-off',
+    'captions',
+    'car-front',
+    'car-taxi-front',
+    'car',
+    'caravan',
+    'card-sim',
+    'carrot',
+    'case-lower',
+    'case-sensitive',
+    'case-upper',
+    'cassette-tape',
+    'cast',
+    'castle',
+    'cat',
+    'cctv-off',
+    'cctv',
+    'chart-area',
+    'chart-bar-big',
+    'chart-bar-decreasing',
+    'chart-bar-increasing',
+    'chart-bar-stacked',
+    'chart-bar',
+    'chart-candlestick',
+    'chart-column-big',
+    'chart-column-decreasing',
+    'chart-column-increasing',
+    'chart-column-stacked',
+    'chart-column',
+    'chart-gantt',
+    'chart-line',
+    'chart-network',
+    'chart-no-axes-column-decreasing',
+    'chart-no-axes-column-increasing',
+    'chart-no-axes-column',
+    'chart-no-axes-combined',
+    'chart-no-axes-gantt',
+    'chart-pie',
+    'chart-scatter',
+    'chart-spline',
+    'check-check',
+    'check-line',
+    'check',
+    'chef-hat',
+    'cherry',
+    'chess-bishop',
+    'chess-king',
+    'chess-knight',
+    'chess-pawn',
+    'chess-queen',
+    'chess-rook',
+    'chevron-down',
+    'chevron-first',
+    'chevron-last',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'chevrons-down-up',
+    'chevrons-down',
+    'chevrons-left-right-ellipsis',
+    'chevrons-left-right',
+    'chevrons-left',
+    'chevrons-right-left',
+    'chevrons-right',
+    'chevrons-up-down',
+    'chevrons-up',
+    'church',
+    'cigarette-off',
+    'cigarette',
+    'circle-alert',
+    'circle-arrow-down',
+    'circle-arrow-left',
+    'circle-arrow-out-down-left',
+    'circle-arrow-out-down-right',
+    'circle-arrow-out-up-left',
+    'circle-arrow-out-up-right',
+    'circle-arrow-right',
+    'circle-arrow-up',
+    'circle-check-big',
+    'circle-check',
+    'circle-chevron-down',
+    'circle-chevron-left',
+    'circle-chevron-right',
+    'circle-chevron-up',
+    'circle-dashed',
+    'circle-divide',
+    'circle-dollar-sign',
+    'circle-dot-dashed',
+    'circle-dot',
+    'circle-ellipsis',
+    'circle-equal',
+    'circle-euro',
+    'circle-fading-arrow-up',
+    'circle-fading-plus',
+    'circle-gauge',
+    'circle-minus',
+    'circle-off',
+    'circle-parking-off',
+    'circle-parking',
+    'circle-pause',
+    'circle-percent',
+    'circle-pile',
+    'circle-play',
+    'circle-plus',
+    'circle-pound-sterling',
+    'circle-power',
+    'circle-question-mark',
+    'circle-slash-2',
+    'circle-slash',
+    'circle-small',
+    'circle-star',
+    'circle-stop',
+    'circle-user-round',
+    'circle-user',
+    'circle-x',
+    'circle',
+    'circuit-board',
+    'citrus',
+    'clapperboard',
+    'clipboard-check',
+    'clipboard-clock',
+    'clipboard-copy',
+    'clipboard-list',
+    'clipboard-minus',
+    'clipboard-paste',
+    'clipboard-pen-line',
+    'clipboard-pen',
+    'clipboard-plus',
+    'clipboard-type',
+    'clipboard-x',
+    'clipboard',
+    'clock-1',
+    'clock-10',
+    'clock-11',
+    'clock-12',
+    'clock-2',
+    'clock-3',
+    'clock-4',
+    'clock-5',
+    'clock-6',
+    'clock-7',
+    'clock-8',
+    'clock-9',
+    'clock-alert',
+    'clock-arrow-down',
+    'clock-arrow-left',
+    'clock-arrow-right',
+    'clock-arrow-up',
+    'clock-check',
+    'clock-fading',
+    'clock-plus',
+    'clock',
+    'closed-caption',
+    'cloud-alert',
+    'cloud-backup',
+    'cloud-check',
+    'cloud-cog',
+    'cloud-download',
+    'cloud-drizzle',
+    'cloud-fog',
+    'cloud-hail',
+    'cloud-lightning',
+    'cloud-moon-rain',
+    'cloud-moon',
+    'cloud-off',
+    'cloud-rain-wind',
+    'cloud-rain',
+    'cloud-snow',
+    'cloud-sun-rain',
+    'cloud-sun',
+    'cloud-sync',
+    'cloud-upload',
+    'cloud',
+    'cloudy',
+    'clover',
+    'club',
+    'code-xml',
+    'code',
+    'coffee',
+    'cog',
+    'coins',
+    'columns-2',
+    'columns-3-cog',
+    'columns-3',
+    'columns-4',
+    'combine',
+    'command',
+    'compass',
+    'component',
+    'computer',
+    'concierge-bell',
+    'cone',
+    'construction',
+    'contact-round',
+    'contact',
+    'container',
+    'contrast',
+    'cookie',
+    'cooking-pot',
+    'copy-check',
+    'copy-minus',
+    'copy-plus',
+    'copy-slash',
+    'copy-x',
+    'copy',
+    'copyleft',
+    'copyright',
+    'corner-down-left',
+    'corner-down-right',
+    'corner-left-down',
+    'corner-left-up',
+    'corner-right-down',
+    'corner-right-up',
+    'corner-up-left',
+    'corner-up-right',
+    'cpu',
+    'creative-commons',
+    'credit-card',
+    'croissant',
+    'crop',
+    'cross',
+    'crosshair',
+    'crown',
+    'cuboid',
+    'cup-soda',
+    'currency',
+    'cylinder',
+    'dam',
+    'database-arrow-down',
+    'database-arrow-up',
+    'database-backup',
+    'database-check',
+    'database-minus',
+    'database-plus',
+    'database-search',
+    'database-x',
+    'database-zap',
+    'database',
+    'decimals-arrow-left',
+    'decimals-arrow-right',
+    'delete',
+    'dessert',
+    'diameter',
+    'diamond-minus',
+    'diamond-percent',
+    'diamond-plus',
+    'diamond',
+    'dice-1',
+    'dice-2',
+    'dice-3',
+    'dice-4',
+    'dice-5',
+    'dice-6',
+    'dices',
+    'diff',
+    'disc-2',
+    'disc-3',
+    'disc-album',
+    'disc',
+    'divide',
+    'dna-off',
+    'dna',
+    'dock',
+    'dog',
+    'dollar-sign',
+    'donut',
+    'door-closed-locked',
+    'door-closed',
+    'door-open',
+    'dot',
+    'download',
+    'drafting-compass',
+    'drama',
+    'drill',
+    'drone',
+    'droplet-off',
+    'droplet',
+    'droplets',
+    'drum',
+    'drumstick',
+    'dumbbell',
+    'ear-off',
+    'ear',
+    'earth-lock',
+    'earth',
+    'eclipse',
+    'egg-fried',
+    'egg-off',
+    'egg',
+    'ellipse',
+    'ellipsis-vertical',
+    'ellipsis',
+    'equal-approximately',
+    'equal-not',
+    'equal',
+    'eraser',
+    'ethernet-port',
+    'euro',
+    'ev-charger',
+    'expand',
+    'external-link',
+    'eye-closed',
+    'eye-dashed',
+    'eye-off',
+    'eye',
+    'factory',
+    'fan',
+    'fast-forward',
+    'feather',
+    'fence',
+    'ferris-wheel',
+    'file-archive',
+    'file-axis-3d',
+    'file-badge',
+    'file-box',
+    'file-braces-corner',
+    'file-braces',
+    'file-chart-column-increasing',
+    'file-chart-column',
+    'file-chart-line',
+    'file-chart-pie',
+    'file-check-corner',
+    'file-check',
+    'file-clock',
+    'file-code-corner',
+    'file-code',
+    'file-cog',
+    'file-diff',
+    'file-digit',
+    'file-down',
+    'file-exclamation-point',
+    'file-headphone',
+    'file-heart',
+    'file-image',
+    'file-input',
+    'file-key',
+    'file-lock',
+    'file-minus-corner',
+    'file-minus',
+    'file-music',
+    'file-output',
+    'file-pen-line',
+    'file-pen',
+    'file-play',
+    'file-plus-corner',
+    'file-plus',
+    'file-question-mark',
+    'file-scan',
+    'file-search-corner',
+    'file-search',
+    'file-signal',
+    'file-sliders',
+    'file-spreadsheet',
+    'file-stack',
+    'file-symlink',
+    'file-terminal',
+    'file-text',
+    'file-type-corner',
+    'file-type',
+    'file-up',
+    'file-user',
+    'file-video-camera',
+    'file-volume',
+    'file-x-corner',
+    'file-x',
+    'file',
+    'files',
+    'film',
+    'fingerprint-pattern',
+    'fire-extinguisher',
+    'fish-off',
+    'fish-symbol',
+    'fish',
+    'fishing-hook',
+    'fishing-rod',
+    'flag-off',
+    'flag-triangle-left',
+    'flag-triangle-right',
+    'flag',
+    'flame-kindling',
+    'flame',
+    'flashlight-off',
+    'flashlight',
+    'flask-conical-off',
+    'flask-conical',
+    'flask-round',
+    'flip-horizontal-2',
+    'flip-vertical-2',
+    'flower-2',
+    'flower',
+    'focus',
+    'fold-horizontal',
+    'fold-vertical',
+    'folder-archive',
+    'folder-bookmark',
+    'folder-check',
+    'folder-clock',
+    'folder-closed',
+    'folder-code',
+    'folder-cog',
+    'folder-dot',
+    'folder-down',
+    'folder-git-2',
+    'folder-git',
+    'folder-heart',
+    'folder-input',
+    'folder-kanban',
+    'folder-key',
+    'folder-lock',
+    'folder-minus',
+    'folder-open-dot',
+    'folder-open',
+    'folder-output',
+    'folder-pen',
+    'folder-plus',
+    'folder-root',
+    'folder-search-2',
+    'folder-search',
+    'folder-symlink',
+    'folder-sync',
+    'folder-tree',
+    'folder-up',
+    'folder-x',
+    'folder',
+    'folders',
+    'footprints',
+    'forklift',
+    'form',
+    'forward',
+    'frame',
+    'frown',
+    'fuel',
+    'fullscreen',
+    'funnel-plus',
+    'funnel-x',
+    'funnel',
+    'gallery-horizontal-end',
+    'gallery-horizontal',
+    'gallery-thumbnails',
+    'gallery-vertical-end',
+    'gallery-vertical',
+    'gamepad-2',
+    'gamepad-directional',
+    'gamepad',
+    'gauge',
+    'gavel',
+    'gem',
+    'georgian-lari',
+    'ghost',
+    'gift',
+    'git-branch-minus',
+    'git-branch-plus',
+    'git-branch',
+    'git-commit-horizontal',
+    'git-commit-vertical',
+    'git-compare-arrows',
+    'git-compare',
+    'git-fork',
+    'git-graph',
+    'git-merge-conflict',
+    'git-merge',
+    'git-pull-request-arrow',
+    'git-pull-request-closed',
+    'git-pull-request-create-arrow',
+    'git-pull-request-create',
+    'git-pull-request-draft',
+    'git-pull-request',
+    'glass-water',
+    'glasses',
+    'globe-check',
+    'globe-lock',
+    'globe-off',
+    'globe-x',
+    'globe',
+    'goal',
+    'gpu',
+    'graduation-cap',
+    'grape',
+    'grid-2x2-check',
+    'grid-2x2-plus',
+    'grid-2x2-x',
+    'grid-2x2',
+    'grid-3x2',
+    'grid-3x3',
+    'grip-horizontal',
+    'grip-vertical',
+    'grip',
+    'group',
+    'guitar',
+    'ham',
+    'hamburger',
+    'hammer',
+    'hand-coins',
+    'hand-fist',
+    'hand-grab',
+    'hand-heart',
+    'hand-helping',
+    'hand-metal',
+    'hand-platter',
+    'hand',
+    'handbag',
+    'handshake',
+    'hard-drive-download',
+    'hard-drive-upload',
+    'hard-drive',
+    'hard-hat',
+    'hash',
+    'hat-glasses',
+    'haze',
+    'hd',
+    'hdmi-port',
+    'heading-1',
+    'heading-2',
+    'heading-3',
+    'heading-4',
+    'heading-5',
+    'heading-6',
+    'heading',
+    'headphone-off',
+    'headphones',
+    'headset',
+    'heart-crack',
+    'heart-handshake',
+    'heart-minus',
+    'heart-off',
+    'heart-plus',
+    'heart-pulse',
+    'heart-x',
+    'heart',
+    'heater',
+    'helicopter',
+    'hexagon',
+    'highlighter',
+    'history',
+    'hop-off',
+    'hop',
+    'hospital',
+    'hotel',
+    'hourglass',
+    'house-heart',
+    'house-plug',
+    'house-plus',
+    'house-wifi',
+    'house',
+    'ice-cream-bowl',
+    'ice-cream-cone',
+    'id-card-lanyard',
+    'id-card',
+    'image-down',
+    'image-minus',
+    'image-off',
+    'image-play',
+    'image-plus',
+    'image-up',
+    'image-upscale',
+    'image',
+    'images',
+    'import',
+    'inbox',
+    'indian-rupee',
+    'infinity',
+    'info',
+    'inspection-panel',
+    'italic',
+    'iteration-ccw',
+    'iteration-cw',
+    'japanese-yen',
+    'joystick',
+    'kanban',
+    'kayak',
+    'key-round',
+    'key-square',
+    'key',
+    'keyboard-music',
+    'keyboard-off',
+    'keyboard',
+    'lamp-ceiling',
+    'lamp-desk',
+    'lamp-floor',
+    'lamp-wall-down',
+    'lamp-wall-up',
+    'lamp',
+    'land-plot',
+    'landmark',
+    'languages',
+    'laptop-minimal-check',
+    'laptop-minimal',
+    'laptop',
+    'lasso-select',
+    'lasso',
+    'laugh',
+    'layers-2',
+    'layers-minus',
+    'layers-plus',
+    'layers',
+    'layout-dashboard',
+    'layout-grid',
+    'layout-list',
+    'layout-panel-left',
+    'layout-panel-top',
+    'layout-template',
+    'leaf',
+    'leafy-green',
+    'lectern',
+    'lens-concave',
+    'lens-convex',
+    'library-big',
+    'library',
+    'life-buoy',
+    'ligature',
+    'lightbulb-off',
+    'lightbulb',
+    'line-dot-right-horizontal',
+    'line-squiggle',
+    'line-style',
+    'link-2-off',
+    'link-2',
+    'link',
+    'list-check',
+    'list-checks',
+    'list-chevrons-down-up',
+    'list-chevrons-up-down',
+    'list-collapse',
+    'list-end',
+    'list-filter-plus',
+    'list-filter',
+    'list-indent-decrease',
+    'list-indent-increase',
+    'list-minus',
+    'list-music',
+    'list-ordered',
+    'list-plus',
+    'list-restart',
+    'list-sort-ascending',
+    'list-sort-descending',
+    'list-start',
+    'list-todo',
+    'list-tree',
+    'list-video',
+    'list-x',
+    'list',
+    'loader-circle',
+    'loader-pinwheel',
+    'loader',
+    'locate-fixed',
+    'locate-off',
+    'locate',
+    'lock-keyhole-open',
+    'lock-keyhole',
+    'lock-open',
+    'lock',
+    'log-in',
+    'log-out',
+    'logs',
+    'lollipop',
+    'luggage',
+    'magnet',
+    'mail-check',
+    'mail-minus',
+    'mail-open',
+    'mail-plus',
+    'mail-question-mark',
+    'mail-search',
+    'mail-warning',
+    'mail-x',
+    'mail',
+    'mailbox',
+    'mails',
+    'map-minus',
+    'map-pin-check-inside',
+    'map-pin-check',
+    'map-pin-house',
+    'map-pin-minus-inside',
+    'map-pin-minus',
+    'map-pin-off',
+    'map-pin-pen',
+    'map-pin-plus-inside',
+    'map-pin-plus',
+    'map-pin-search',
+    'map-pin-x-inside',
+    'map-pin-x',
+    'map-pin',
+    'map-pinned',
+    'map-plus',
+    'map',
+    'mars-stroke',
+    'mars',
+    'martini',
+    'maximize-2',
+    'maximize',
+    'medal',
+    'megaphone-off',
+    'megaphone',
+    'meh',
+    'memory-stick',
+    'menu',
+    'merge',
+    'message-circle-check',
+    'message-circle-code',
+    'message-circle-dashed',
+    'message-circle-heart',
+    'message-circle-more',
+    'message-circle-off',
+    'message-circle-plus',
+    'message-circle-question-mark',
+    'message-circle-reply',
+    'message-circle-warning',
+    'message-circle-x',
+    'message-circle',
+    'message-square-check',
+    'message-square-code',
+    'message-square-dashed',
+    'message-square-diff',
+    'message-square-dot',
+    'message-square-heart',
+    'message-square-lock',
+    'message-square-more',
+    'message-square-off',
+    'message-square-plus',
+    'message-square-quote',
+    'message-square-reply',
+    'message-square-share',
+    'message-square-text',
+    'message-square-warning',
+    'message-square-x',
+    'message-square',
+    'messages-square',
+    'metronome',
+    'mic-off',
+    'mic-vocal',
+    'mic',
+    'microchip',
+    'microscope',
+    'microwave',
+    'milestone',
+    'milk-off',
+    'milk',
+    'minimize-2',
+    'minimize',
+    'minus',
+    'mirror-rectangular',
+    'mirror-round',
+    'monitor-check',
+    'monitor-cloud',
+    'monitor-cog',
+    'monitor-dot',
+    'monitor-down',
+    'monitor-off',
+    'monitor-pause',
+    'monitor-play',
+    'monitor-smartphone',
+    'monitor-speaker',
+    'monitor-stop',
+    'monitor-up',
+    'monitor-x',
+    'monitor',
+    'moon-star',
+    'moon',
+    'motorbike',
+    'mountain-snow',
+    'mountain',
+    'mouse-left',
+    'mouse-off',
+    'mouse-pointer-2-off',
+    'mouse-pointer-2',
+    'mouse-pointer-ban',
+    'mouse-pointer-click',
+    'mouse-pointer',
+    'mouse-right',
+    'mouse',
+    'move-3d',
+    'move-diagonal-2',
+    'move-diagonal',
+    'move-down-left',
+    'move-down-right',
+    'move-down',
+    'move-horizontal',
+    'move-left',
+    'move-right',
+    'move-up-left',
+    'move-up-right',
+    'move-up',
+    'move-vertical',
+    'move',
+    'music-2',
+    'music-3',
+    'music-4',
+    'music',
+    'navigation-2-off',
+    'navigation-2',
+    'navigation-off',
+    'navigation',
+    'network',
+    'newspaper',
+    'nfc',
+    'non-binary',
+    'notebook-pen',
+    'notebook-tabs',
+    'notebook-text',
+    'notebook',
+    'notepad-text-dashed',
+    'notepad-text',
+    'nut-off',
+    'nut',
+    'octagon-alert',
+    'octagon-minus',
+    'octagon-pause',
+    'octagon-x',
+    'octagon',
+    'omega',
+    'option',
+    'orbit',
+    'origami',
+    'package-2',
+    'package-check',
+    'package-minus',
+    'package-open',
+    'package-plus',
+    'package-search',
+    'package-x',
+    'package',
+    'paint-bucket',
+    'paint-roller',
+    'paintbrush-vertical',
+    'paintbrush',
+    'palette',
+    'panda',
+    'panel-bottom-close',
+    'panel-bottom-dashed',
+    'panel-bottom-open',
+    'panel-bottom',
+    'panel-left-close',
+    'panel-left-dashed',
+    'panel-left-open',
+    'panel-left-right-dashed',
+    'panel-left',
+    'panel-right-close',
+    'panel-right-dashed',
+    'panel-right-open',
+    'panel-right',
+    'panel-top-bottom-dashed',
+    'panel-top-close',
+    'panel-top-dashed',
+    'panel-top-open',
+    'panel-top',
+    'panels-left-bottom',
+    'panels-right-bottom',
+    'panels-top-left',
+    'paper-bag',
+    'paperclip',
+    'parasol',
+    'parentheses',
+    'parking-meter',
+    'party-popper',
+    'pause',
+    'paw-print',
+    'pc-case',
+    'pen-line',
+    'pen-off',
+    'pen-tool',
+    'pen',
+    'pencil-line',
+    'pencil-off',
+    'pencil-ruler',
+    'pencil-sparkles',
+    'pencil',
+    'pentagon',
+    'percent',
+    'person-standing',
+    'phi',
+    'philippine-peso',
+    'phone-call',
+    'phone-forwarded',
+    'phone-incoming',
+    'phone-missed',
+    'phone-off',
+    'phone-outgoing',
+    'phone',
+    'pi',
+    'piano',
+    'pickaxe',
+    'picture-in-picture-2',
+    'picture-in-picture',
+    'piggy-bank',
+    'pilcrow-left',
+    'pilcrow-right',
+    'pilcrow',
+    'pill-bottle',
+    'pill',
+    'pin-off',
+    'pin',
+    'pipette',
+    'pizza',
+    'plane-landing',
+    'plane-takeoff',
+    'plane',
+    'play-off',
+    'play',
+    'plug-2',
+    'plug-zap',
+    'plug',
+    'plus',
+    'pocket-knife',
+    'podcast',
+    'podium',
+    'pointer-off',
+    'pointer',
+    'popcorn',
+    'popsicle',
+    'pound-sterling',
+    'power-off',
+    'power',
+    'presentation',
+    'printer-check',
+    'printer-x',
+    'printer',
+    'projector',
+    'proportions',
+    'puzzle',
+    'pyramid',
+    'qr-code',
+    'quote',
+    'rabbit',
+    'radar',
+    'radiation',
+    'radical',
+    'radio-off',
+    'radio-receiver',
+    'radio-tower',
+    'radio',
+    'radius',
+    'rainbow',
+    'rat',
+    'ratio',
+    'receipt-cent',
+    'receipt-euro',
+    'receipt-indian-rupee',
+    'receipt-japanese-yen',
+    'receipt-pound-sterling',
+    'receipt-russian-ruble',
+    'receipt-swiss-franc',
+    'receipt-text',
+    'receipt-turkish-lira',
+    'receipt',
+    'rectangle-circle',
+    'rectangle-ellipsis',
+    'rectangle-goggles',
+    'rectangle-horizontal',
+    'rectangle-vertical',
+    'recycle',
+    'redo-2',
+    'redo-dot',
+    'redo',
+    'refresh-ccw-dot',
+    'refresh-ccw',
+    'refresh-cw-off',
+    'refresh-cw',
+    'refrigerator',
+    'regex',
+    'remove-formatting',
+    'repeat-1',
+    'repeat-2',
+    'repeat-off',
+    'repeat',
+    'replace-all',
+    'replace',
+    'reply-all',
+    'reply',
+    'rewind',
+    'ribbon',
+    'road',
+    'rocket',
+    'rocking-chair',
+    'roller-coaster',
+    'rose',
+    'rotate-3d',
+    'rotate-ccw-key',
+    'rotate-ccw-square',
+    'rotate-ccw',
+    'rotate-cw-square',
+    'rotate-cw',
+    'route-off',
+    'route',
+    'router',
+    'rows-2',
+    'rows-3',
+    'rows-4',
+    'rss',
+    'ruler-dimension-line',
+    'ruler',
+    'russian-ruble',
+    'sailboat',
+    'salad',
+    'sandwich',
+    'satellite-dish',
+    'satellite',
+    'saudi-riyal',
+    'save-all',
+    'save-check',
+    'save-off',
+    'save-pen',
+    'save-plus',
+    'save',
+    'scale-3d',
+    'scale',
+    'scaling',
+    'scan-barcode',
+    'scan-box',
+    'scan-eye',
+    'scan-face',
+    'scan-heart',
+    'scan-line',
+    'scan-qr-code',
+    'scan-search',
+    'scan-text',
+    'scan',
+    'school',
+    'scissors-line-dashed',
+    'scissors',
+    'scooter',
+    'screen-share-off',
+    'screen-share',
+    'scroll-text',
+    'scroll',
+    'search-alert',
+    'search-check',
+    'search-code',
+    'search-slash',
+    'search-x',
+    'search',
+    'section',
+    'send-horizontal',
+    'send-to-back',
+    'send',
+    'separator-horizontal',
+    'separator-vertical',
+    'server-cog',
+    'server-crash',
+    'server-off',
+    'server',
+    'settings-2',
+    'settings',
+    'shapes',
+    'share-2',
+    'share',
+    'sheet',
+    'shell',
+    'shelving-unit',
+    'shield-alert',
+    'shield-ban',
+    'shield-check',
+    'shield-cog-corner',
+    'shield-cog',
+    'shield-ellipsis',
+    'shield-half',
+    'shield-minus',
+    'shield-off',
+    'shield-plus',
+    'shield-question-mark',
+    'shield-user',
+    'shield-x',
+    'shield',
+    'ship-wheel',
+    'ship',
+    'shirt',
+    'shopping-bag',
+    'shopping-basket',
+    'shopping-cart',
+    'shovel',
+    'shower-head',
+    'shredder',
+    'shrimp',
+    'shrink',
+    'shrub',
+    'shuffle',
+    'sigma',
+    'signal-high',
+    'signal-low',
+    'signal-medium',
+    'signal-zero',
+    'signal',
+    'signature',
+    'signpost-big',
+    'signpost',
+    'siren',
+    'skip-back',
+    'skip-forward',
+    'skull',
+    'slash',
+    'slice',
+    'sliders-horizontal',
+    'sliders-vertical',
+    'smartphone-charging',
+    'smartphone-nfc',
+    'smartphone',
+    'smile-plus',
+    'smile',
+    'snail',
+    'snowflake',
+    'soap-dispenser-droplet',
+    'sofa',
+    'solar-panel',
+    'soup',
+    'space',
+    'spade',
+    'sparkle',
+    'sparkles',
+    'speaker',
+    'speech',
+    'spell-check-2',
+    'spell-check',
+    'spline-pointer',
+    'spline',
+    'split',
+    'spool',
+    'sport-shoe',
+    'spotlight',
+    'spray-can',
+    'sprout',
+    'square-activity',
+    'square-arrow-down-left',
+    'square-arrow-down-right',
+    'square-arrow-down',
+    'square-arrow-left',
+    'square-arrow-out-down-left',
+    'square-arrow-out-down-right',
+    'square-arrow-out-up-left',
+    'square-arrow-out-up-right',
+    'square-arrow-right-enter',
+    'square-arrow-right-exit',
+    'square-arrow-right',
+    'square-arrow-up-left',
+    'square-arrow-up-right',
+    'square-arrow-up',
+    'square-asterisk',
+    'square-bottom-dashed-scissors',
+    'square-centerline-dashed-horizontal',
+    'square-centerline-dashed-vertical',
+    'square-chart-gantt',
+    'square-check-big',
+    'square-check',
+    'square-chevron-down',
+    'square-chevron-left',
+    'square-chevron-right',
+    'square-chevron-up',
+    'square-code',
+    'square-dashed-bottom-code',
+    'square-dashed-bottom',
+    'square-dashed-kanban',
+    'square-dashed-mouse-pointer',
+    'square-dashed-text',
+    'square-dashed-top-solid',
+    'square-dashed',
+    'square-divide',
+    'square-dot',
+    'square-equal',
+    'square-function',
+    'square-kanban',
+    'square-library',
+    'square-m',
+    'square-menu',
+    'square-minus',
+    'square-mouse-pointer',
+    'square-parking-off',
+    'square-parking',
+    'square-pause',
+    'square-pen',
+    'square-percent',
+    'square-pi',
+    'square-pilcrow',
+    'square-play',
+    'square-plus',
+    'square-power',
+    'square-radical',
+    'square-round-corner',
+    'square-scissors',
+    'square-sigma',
+    'square-slash',
+    'square-split-horizontal',
+    'square-split-vertical',
+    'square-square',
+    'square-stack',
+    'square-star',
+    'square-stop',
+    'square-terminal',
+    'square-user-round',
+    'square-user',
+    'square-x',
+    'square',
+    'squares-exclude',
+    'squares-intersect',
+    'squares-subtract',
+    'squares-unite',
+    'squircle-dashed',
+    'squircle',
+    'squirrel',
+    'stamp',
+    'star-check',
+    'star-half',
+    'star-minus',
+    'star-off',
+    'star-plus',
+    'star-x',
+    'star',
+    'step-back',
+    'step-forward',
+    'stethoscope',
+    'sticker',
+    'sticky-note-check',
+    'sticky-note-minus',
+    'sticky-note-off',
+    'sticky-note-plus',
+    'sticky-note-x',
+    'sticky-note',
+    'sticky-notes',
+    'stone',
+    'store',
+    'stretch-horizontal',
+    'stretch-vertical',
+    'strikethrough',
+    'subscript',
+    'summary',
+    'sun-dim',
+    'sun-medium',
+    'sun-moon',
+    'sun-snow',
+    'sun',
+    'sunrise',
+    'sunset',
+    'superscript',
+    'swatch-book',
+    'swiss-franc',
+    'switch-camera',
+    'sword',
+    'swords',
+    'syringe',
+    'table-2',
+    'table-cells-merge',
+    'table-cells-split',
+    'table-columns-split',
+    'table-of-contents',
+    'table-properties',
+    'table-rows-split',
+    'table',
+    'tablet-smartphone',
+    'tablet',
+    'tablets',
+    'tag-plus',
+    'tag-x',
+    'tag',
+    'tags',
+    'tally-1',
+    'tally-2',
+    'tally-3',
+    'tally-4',
+    'tally-5',
+    'tangent',
+    'target',
+    'telescope',
+    'tent-tree',
+    'tent',
+    'terminal',
+    'test-tube-diagonal',
+    'test-tube',
+    'test-tubes',
+    'text-align-center',
+    'text-align-end',
+    'text-align-justify',
+    'text-align-start',
+    'text-cursor-input',
+    'text-cursor',
+    'text-initial',
+    'text-quote',
+    'text-search',
+    'text-wrap',
+    'theater',
+    'thermometer-snowflake',
+    'thermometer-sun',
+    'thermometer',
+    'thumbs-down',
+    'thumbs-up',
+    'ticket-check',
+    'ticket-minus',
+    'ticket-percent',
+    'ticket-plus',
+    'ticket-slash',
+    'ticket-x',
+    'ticket',
+    'tickets-plane',
+    'tickets',
+    'timeline',
+    'timer-off',
+    'timer-reset',
+    'timer',
+    'toggle-left',
+    'toggle-right',
+    'toilet',
+    'tool-case',
+    'toolbox',
+    'tornado',
+    'torus',
+    'touchpad-off',
+    'touchpad',
+    'towel-rack',
+    'tower-control',
+    'toy-brick',
+    'tractor',
+    'traffic-cone',
+    'train-front-tunnel',
+    'train-front',
+    'train-track',
+    'tram-front',
+    'transgender',
+    'trash-2',
+    'trash',
+    'tree-deciduous',
+    'tree-palm',
+    'tree-pine',
+    'trees',
+    'trending-down',
+    'trending-up-down',
+    'trending-up',
+    'triangle-alert',
+    'triangle-dashed',
+    'triangle-right',
+    'triangle',
+    'trophy',
+    'truck-electric',
+    'truck',
+    'turkish-lira',
+    'turntable',
+    'turtle',
+    'tv-minimal-play',
+    'tv-minimal',
+    'tv',
+    'type-outline',
+    'type',
+    'umbrella-off',
+    'umbrella',
+    'underline',
+    'undo-2',
+    'undo-dot',
+    'undo',
+    'unfold-horizontal',
+    'unfold-vertical',
+    'ungroup',
+    'university',
+    'unlink-2',
+    'unlink',
+    'unplug',
+    'upload',
+    'usb',
+    'user-check',
+    'user-cog',
+    'user-key',
+    'user-lock',
+    'user-minus',
+    'user-pen',
+    'user-plus',
+    'user-round-arrow-left',
+    'user-round-check',
+    'user-round-cog',
+    'user-round-key',
+    'user-round-minus',
+    'user-round-pen',
+    'user-round-plus',
+    'user-round-search',
+    'user-round-x',
+    'user-round',
+    'user-search',
+    'user-star',
+    'user-x',
+    'user',
+    'users-round',
+    'users',
+    'utensils-crossed',
+    'utensils',
+    'utility-pole',
+    'van',
+    'variable',
+    'vault',
+    'vector-square',
+    'vegan',
+    'venetian-mask',
+    'venus-and-mars',
+    'venus',
+    'vibrate-off',
+    'vibrate',
+    'video-off',
+    'video',
+    'videotape',
+    'view',
+    'voicemail',
+    'volleyball',
+    'volume-1',
+    'volume-2',
+    'volume-off',
+    'volume-x',
+    'volume',
+    'vote',
+    'wallet-cards',
+    'wallet-minimal',
+    'wallet',
+    'wallpaper',
+    'wand-sparkles',
+    'wand',
+    'warehouse',
+    'washing-machine',
+    'watch',
+    'waves-arrow-down',
+    'waves-arrow-up',
+    'waves-horizontal',
+    'waves-ladder',
+    'waves-vertical',
+    'waypoints',
+    'webcam-off',
+    'webcam',
+    'webhook-off',
+    'webhook',
+    'weight-tilde',
+    'weight',
+    'wheat-off',
+    'wheat',
+    'whole-word',
+    'wifi-cog',
+    'wifi-high',
+    'wifi-low',
+    'wifi-off',
+    'wifi-pen',
+    'wifi-sync',
+    'wifi-zero',
+    'wifi',
+    'wind-arrow-down',
+    'wind',
+    'wine-off',
+    'wine',
+    'workflow',
+    'worm',
+    'wrench-off',
+    'wrench',
+    'x-line-top',
+    'x',
+    'zap-off',
+    'zap',
+    'zodiac-aquarius',
+    'zodiac-aries',
+    'zodiac-cancer',
+    'zodiac-capricorn',
+    'zodiac-gemini',
+    'zodiac-leo',
+    'zodiac-libra',
+    'zodiac-ophiuchus',
+    'zodiac-pisces',
+    'zodiac-sagittarius',
+    'zodiac-scorpio',
+    'zodiac-taurus',
+    'zodiac-virgo',
+    'zoom-in',
+    'zoom-out',
+];
+
+class EzUITextInput {
+    icon = '';
+    label = '';
+    size = 'm';
+    disabled = false;
+    value = "";
+    valueChange = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
+            this.value = changes['value'].currentValue;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITextInput, isStandalone: true, selector: "ezui-textinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
+		</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: "ngmodule", type: CommonModule }, { 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: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITextInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-textinput', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiInput
+                    ], template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiInput [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
+		</tui-textfield>
+    ` }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class EzUIIconSelector {
+    currentOptions = [];
+    disabled = false;
+    size = 'm';
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    selected = 'circle';
+    selectedChange = new EventEmitter();
+    lucideicons = lucideicons;
+    constructor() {
+        this.currentOptions = [...lucideicons];
+    }
+    ngOnChanges(changes) {
+        if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
+            this.selected = changes['selected'].currentValue;
+        }
+    }
+    doSearch(text) {
+        if (text)
+            this.currentOptions = [...lucideicons.filter((x) => x.indexOf(text) != -1)];
+        else
+            this.currentOptions = [...lucideicons];
+    }
+    setIcon(value) {
+        this.selected = value;
+        this.selectedChange.emit(this.selected);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIIconSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUIIconSelector, isStandalone: true, selector: "ezui-iconselector", inputs: { disabled: "disabled", size: "size", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<button
+			tuiButton
+			[iconStart]="selected"
+			[size]="size"
+			[tuiAppearanceState]="open() ? 'active' : null"
+			[tuiDropdown]="dropdown"
+			[(tuiDropdownOpen)]="open"
+			[disabled]="disabled"
+		></button>
+
+		<ng-template #dropdown let-close>
+			<div class="dropdown-container">
+				<ezui-textinput #sch icon="search" label="Search" size="s" (valueChange)="doSearch(sch.value)"/>
+				@if (currentOptions.length > 0) {
+					<div class="icon-container">
+						@for (icon of currentOptions.slice(0,100); track icon) {
+							<button tuiButton [iconStart]="icon" size="s" appearance="flat" [tuiAppearanceFocus]='selected == icon ? true : null' (click)="setIcon(icon); close();currentOptions = [...lucideicons]"></button>
+						}
+						@if(currentOptions.length > 100){
+							<p style="opacity:0.5;margin:0px;text-align:center;align-self:center">{{currentOptions.length - 100}} more icons...</p>
+						}
+					</div>
+				} @else {
+					<p>No icons match your search!</p>
+				}
+			</div>
+		</ng-template>
+    `, isInline: true, styles: [".dropdown-container{display:flex;flex-direction:column;padding:10px;min-width:10rem;gap:5px}.dropdown-container .icon-container{display:flex;flex-wrap:wrap;gap:5px;max-width:80vw;max-height:30vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: EzUITextInput, selector: "ezui-textinput", inputs: ["icon", "label", "size", "disabled", "value"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIIconSelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-iconselector', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiButton,
+                        TuiDropdown,
+                        EzUITextInput
+                    ], template: `
+		<button
+			tuiButton
+			[iconStart]="selected"
+			[size]="size"
+			[tuiAppearanceState]="open() ? 'active' : null"
+			[tuiDropdown]="dropdown"
+			[(tuiDropdownOpen)]="open"
+			[disabled]="disabled"
+		></button>
+
+		<ng-template #dropdown let-close>
+			<div class="dropdown-container">
+				<ezui-textinput #sch icon="search" label="Search" size="s" (valueChange)="doSearch(sch.value)"/>
+				@if (currentOptions.length > 0) {
+					<div class="icon-container">
+						@for (icon of currentOptions.slice(0,100); track icon) {
+							<button tuiButton [iconStart]="icon" size="s" appearance="flat" [tuiAppearanceFocus]='selected == icon ? true : null' (click)="setIcon(icon); close();currentOptions = [...lucideicons]"></button>
+						}
+						@if(currentOptions.length > 100){
+							<p style="opacity:0.5;margin:0px;text-align:center;align-self:center">{{currentOptions.length - 100}} more icons...</p>
+						}
+					</div>
+				} @else {
+					<p>No icons match your search!</p>
+				}
+			</div>
+		</ng-template>
+    `, styles: [".dropdown-container{display:flex;flex-direction:column;padding:10px;min-width:10rem;gap:5px}.dropdown-container .icon-container{display:flex;flex-wrap:wrap;gap:5px;max-width:80vw;max-height:30vh}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
 const compressImage = async (file, quality, maxHeight, maxWidth, convertSize) => {
     return await new Promise((resolve, reject) => {
         new Compressor(file, {
@@ -185,6 +2285,7 @@ class EzUIMenuBarSubDataList {
 		@for(item of subdatalist; track $index){
 			@if(item.items){
 				<button
+					class="subdatalistitem"
 					tuiOption
 					tuiChevron
 					[iconStart]="item.icon"
@@ -207,6 +2308,7 @@ class EzUIMenuBarSubDataList {
 			}
 			@else {
 				<button
+					class="subdatalistitem"
 					tuiOption
 					[iconStart]="item.icon"
 					[disabled]="item.disabled"
@@ -217,7 +2319,7 @@ class EzUIMenuBarSubDataList {
 				</button>
 			}
 		}
-    `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["subdatalist"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
+    `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["subdatalist"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUIMenuBarSubDataList, decorators: [{
             type: Component,
@@ -229,6 +2331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 		@for(item of subdatalist; track $index){
 			@if(item.items){
 				<button
+					class="subdatalistitem"
 					tuiOption
 					tuiChevron
 					[iconStart]="item.icon"
@@ -251,6 +2354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 			}
 			@else {
 				<button
+					class="subdatalistitem"
 					tuiOption
 					[iconStart]="item.icon"
 					[disabled]="item.disabled"
@@ -261,7 +2365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 				</button>
 			}
 		}
-    `, styles: [".subdatalist{display:flex;flex-direction:column}\n"] }]
+    `, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"] }]
         }], propDecorators: { subdatalist: [{
                 type: Input
             }] } });
@@ -2263,56 +4367,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Input
             }] } });
 
-class EzUITextInput {
-    icon = '';
-    label = '';
-    size = 'm';
-    disabled = false;
-    value = "";
-    valueChange = new EventEmitter();
-    ngOnChanges(changes) {
-        if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
-            this.value = changes['value'].currentValue;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EzUITextInput, isStandalone: true, selector: "ezui-textinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
-			@if(label){
-				<label tuiLabel>{{label}}</label>
-			}
-			<input tuiInput [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
-		</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: "ngmodule", type: CommonModule }, { 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: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EzUITextInput, decorators: [{
-            type: Component,
-            args: [{ selector: 'ezui-textinput', imports: [
-                        FormsModule,
-                        CommonModule,
-                        TuiInput
-                    ], template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
-			@if(label){
-				<label tuiLabel>{{label}}</label>
-			}
-			<input tuiInput [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled"/>
-		</tui-textfield>
-    ` }]
-        }], propDecorators: { icon: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
 class BaseCRUDInterface {
     http;
     messageService;
@@ -2540,11 +4594,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, EzUIFileInput, EzUIFilterHelpers, 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