@kris701/ez-ui 1.2.18 → 1.2.20

package/fesm2022/kris701-ez-ui.mjs

@@ -6,21 +6,21 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@taiga-ui/core';
 import { TuiIcon, TuiInput, TuiButton, TuiTitle, TuiLoader, TuiDialog, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiLink, TuiHint, TuiCheckbox, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
-import * as i4$1 from '@taiga-ui/kit';
-import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiChip, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiSelect, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, tuiCreateDefaultDayRangePeriods, TuiButtonSelect, TuiInputDateDirective, TuiCalendarRange, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
+import * as i4 from '@taiga-ui/kit';
+import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiChip, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiSelect, TuiTree, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, tuiCreateDefaultDayRangePeriods, TuiButtonSelect, TuiInputDateDirective, TuiCalendarRange, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
 import * as i3$3 from '@taiga-ui/addon-mobile';
 import { TuiDropdownSheet } from '@taiga-ui/addon-mobile';
 import { TuiDay, TuiTime, TuiDayRange } from '@taiga-ui/cdk/date-time';
 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';
-import * as i6 from '@taiga-ui/core/components/calendar';
-import * as i4$2 from '@taiga-ui/layout';
+import * as i6 from '@taiga-ui/core/portals/dropdown';
+import * as i6$1 from '@taiga-ui/core/components/calendar';
+import * as i4$1 from '@taiga-ui/layout';
 import { TuiHeader, TuiElasticContainer, TuiBlockStatus, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 import { marked } from 'marked';
 import Compressor from 'compressorjs';
 import { TuiAutoFocus } from '@taiga-ui/cdk';
-import * as i7 from '@taiga-ui/cdk/directives/item';
+import * as i8 from '@taiga-ui/cdk/directives/item';
 import * as i3$2 from '@taiga-ui/addon-table';
 import { TuiTablePagination, TuiTable } from '@taiga-ui/addon-table';
 import { v4 } from 'uuid';
@@ -148,7 +148,7 @@ class EzUIDateInput {
 			<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", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { 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]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiDropdownSheet, selector: "[tuiDropdownSheet]", inputs: ["tuiDropdownSheet"] }] });
+    `, 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", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i4.TuiInputDateDirective, selector: "input[tuiInputDate]", inputs: ["max", "min"] }, { kind: "component", type: i6$1.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", 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.1.0", ngImport: i0, type: EzUIDateInput, decorators: [{
             type: Component,
@@ -304,7 +304,7 @@ class EzUIDateTimeInput {
 				}
 			</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", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { 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]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiDropdownSheet, selector: "[tuiDropdownSheet]", inputs: ["tuiDropdownSheet"] }] });
+    `, 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", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i4.TuiInputDateTimeDirective, selector: "input[tuiInputDateTime]", inputs: ["timeMode", "min", "max"] }, { kind: "component", type: i6$1.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiDropdownSheet, selector: "[tuiDropdownSheet]", inputs: ["tuiDropdownSheet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIDateTimeInput, decorators: [{
             type: Component,
@@ -507,7 +507,7 @@ class EzUIFileInput {
 				/>
 			}
 		</tui-files>
-	`, isInline: true, 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: "component", type: i4$1.TuiFile, selector: "tui-file,a[tuiFile],button[tuiFile]", inputs: ["file", "state", "size", "showDelete", "showSize", "leftContent"], outputs: ["remove"] }, { kind: "component", type: i4$1.TuiInputFiles, selector: "label[tuiInputFiles]", inputs: ["tuiInputFiles"] }, { kind: "component", type: i4$1.TuiFilesComponent, selector: "tui-files", inputs: ["max", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i4$1.TuiInputFilesDirective, selector: "input[tuiInputFiles]", outputs: ["reject"] }] });
+	`, isInline: true, 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: "component", type: i4.TuiFile, selector: "tui-file,a[tuiFile],button[tuiFile]", inputs: ["file", "state", "size", "showDelete", "showSize", "leftContent"], outputs: ["remove"] }, { kind: "component", type: i4.TuiInputFiles, selector: "label[tuiInputFiles]", inputs: ["tuiInputFiles"] }, { kind: "component", type: i4.TuiFilesComponent, selector: "tui-files", inputs: ["max", "expanded"], outputs: ["expandedChange"] }, { kind: "directive", type: i4.TuiInputFilesDirective, selector: "input[tuiInputFiles]", outputs: ["reject"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIFileInput, decorators: [{
             type: Component,
@@ -2888,7 +2888,7 @@ class EzUIMarkdownEditor {
 				</tui-scrollbar>
 			</div>
 		}
-    `, isInline: true, styles: [".editor-container{display:flex;flex-direction:row;width:100%;outline:.125rem solid var(--tui-background-accent-1);border-radius:var(--tui-radius-l)}.editor-container .editor{display:flex;flex-direction:column;width:100%}.editor-container .editor .editor-field{block-size:100%;border-radius:0px 0px 0px var(--tui-radius-l)}.preview-container{width:100%;border-radius:0px var(--tui-radius-l) var(--tui-radius-l) 0px;transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-container ::ng-deep tui-scrollbar{height:100%}.preview-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-container .preview{padding:10px}.preview-readonly-container{width:100%;border-radius:var(--tui-radius-l);transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-readonly-container .edit-button{position:absolute;z-index:999}.preview-readonly-container ::ng-deep tui-scrollbar{height:100%}.preview-readonly-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-readonly-container .preview{padding:10px}\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.TuiTextareaComponent, selector: "textarea[tuiTextarea]", inputs: ["min", "max", "content"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: EzUIMenuBar, selector: "ezui-menubar", inputs: ["items"] }] });
+    `, isInline: true, styles: [".editor-container{display:flex;flex-direction:row;width:100%;outline:.125rem solid var(--tui-background-accent-1);border-radius:var(--tui-radius-l)}.editor-container .editor{display:flex;flex-direction:column;width:100%}.editor-container .editor .editor-field{block-size:100%;border-radius:0px 0px 0px var(--tui-radius-l)}.preview-container{width:100%;border-radius:0px var(--tui-radius-l) var(--tui-radius-l) 0px;transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-container ::ng-deep tui-scrollbar{height:100%}.preview-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-container .preview{padding:10px}.preview-readonly-container{width:100%;border-radius:var(--tui-radius-l);transition-property:box-shadow,background-color,outline-color,border-color,color;transition-duration:calc(var(--tui-duration) / 2);transition-timing-function:var(--tui-curve-productive-standard);--t-shadow: 0 .125rem .1875rem rgba(0, 0, 0, .1);background-color:var(--tui-background-base);color:var(--tui-text-tertiary);box-shadow:var(--t-shadow);outline:1px solid var(--tui-border-normal);outline-offset:-1px;border-width:0;block-size:100%}.preview-readonly-container .edit-button{position:absolute;z-index:999}.preview-readonly-container ::ng-deep tui-scrollbar{height:100%}.preview-readonly-container ::ng-deep .t-content{display:flex;block-size:auto!important}.preview-readonly-container .preview{padding:10px}\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.TuiTextareaComponent, selector: "textarea[tuiTextarea]", inputs: ["min", "max", "content"] }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: EzUIMenuBar, selector: "ezui-menubar", inputs: ["items"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMarkdownEditor, decorators: [{
             type: Component,
@@ -2949,6 +2949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }] } });
 
 class EzUIMultiSelect {
+    itemTemplate;
     icon = '';
     label = '';
     size = 'm';
@@ -2982,7 +2983,7 @@ class EzUIMultiSelect {
         return item[this.optionValue];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMultiSelect, isStandalone: true, selector: "ezui-multiselect", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected", appearanceMap: "appearanceMap", enableSearch: "enableSearch" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMultiSelect, isStandalone: true, selector: "ezui-multiselect", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected", appearanceMap: "appearanceMap", enableSearch: "enableSearch" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
@@ -3002,13 +3003,18 @@ class EzUIMultiSelect {
 					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))){
 						@let value = getOptionValue(item);
 						<button tuiOption [value]="value" >
-							<span tuiChip size="xs" [appearance]="appearanceMap[value] ? appearanceMap[value] : 'neutral'">{{label}}</span>
+							@if(itemTemplate){
+								<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+							}
+							@else {
+								<span tuiChip size="xs" [appearance]="appearanceMap[value] ? appearanceMap[value] : 'neutral'">{{label}}</span>
+							}
 						</button>
 					}
 				}
 			</tui-data-list>
 		</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: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i7.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i3$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i4$1.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i4$1.TuiInputChipComponent, selector: "tui-input-chip", inputs: ["editable"] }, { kind: "directive", type: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }] });
+    `, 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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i8.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i3$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i4.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i4.TuiInputChipComponent, selector: "tui-input-chip", inputs: ["editable"] }, { kind: "directive", type: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMultiSelect, decorators: [{
             type: Component,
@@ -3047,14 +3053,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))){
 						@let value = getOptionValue(item);
 						<button tuiOption [value]="value" >
-							<span tuiChip size="xs" [appearance]="appearanceMap[value] ? appearanceMap[value] : 'neutral'">{{label}}</span>
+							@if(itemTemplate){
+								<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+							}
+							@else {
+								<span tuiChip size="xs" [appearance]="appearanceMap[value] ? appearanceMap[value] : 'neutral'">{{label}}</span>
+							}
 						</button>
 					}
 				}
 			</tui-data-list>
 		</tui-textfield>
     ` }]
-        }], propDecorators: { icon: [{
+        }], propDecorators: { itemTemplate: [{
+                type: ContentChild,
+                args: ['itemTemplate', { static: false }]
+            }], icon: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -3100,7 +3114,7 @@ class EzUINumberInput {
 			}
 			<input tuiInputNumber [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled" [min]="min" [max]="max"/>
 		</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", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }] });
+    `, 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", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUINumberInput, decorators: [{
             type: Component,
@@ -3190,6 +3204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }] } });
 
 class EzUISelect {
+    selectedTemplate;
+    itemTemplate;
     icon = '';
     label = '';
     size = 'm';
@@ -3207,6 +3223,9 @@ class EzUISelect {
             this.selected = changes['selected'].currentValue;
         }
     }
+    getSelectedItem(value) {
+        return this.options.find((item) => this.getOptionValue(item) === value);
+    }
     stringify = (value) => this.getOptionLabel(this.options.find((item) => this.getOptionValue(item) === value));
     getOptionLabel(item) {
         if (!item)
@@ -3223,7 +3242,7 @@ class EzUISelect {
         return item[this.optionValue];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISelect, isStandalone: true, selector: "ezui-select", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected", appearanceMap: "appearanceMap", enableSearch: "enableSearch" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISelect, isStandalone: true, selector: "ezui-select", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected", appearanceMap: "appearanceMap", enableSearch: "enableSearch" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "selectedTemplate", first: true, predicate: ["selectedTemplate"], descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
@@ -3237,10 +3256,16 @@ class EzUISelect {
 				}
 				@for (item of options; track getOptionValue(item)) {
 					@let label = getOptionLabel(item);
-					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))){
+					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))) {
+
 						@let value = getOptionValue(item);
 						<button tuiOption [value]="value" >
+						@if(itemTemplate){
+							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						}
+						@else {
 							<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
+						}
 						</button>
 					}
 				}
@@ -3248,9 +3273,14 @@ class EzUISelect {
 		</tui-textfield>
 
 		<ng-template #content>
-			<span tuiChip [size]="label != '' ? 'xxs' : 'xs'" [appearance]="appearanceMap[selected]">{{stringify(selected)}}</span>
+			@if(selectedTemplate){
+				<ng-container [ngTemplateOutlet]="selectedTemplate" [ngTemplateOutletContext]="{ $implicit: getSelectedItem(selected)  }"></ng-container>
+			}
+			@else {
+				<span tuiChip [size]="label != '' ? 'xxs' : 'xs'" [appearance]="appearanceMap[selected]">{{stringify(selected)}}</span>
+			}
 		</ng-template>
-    `, 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: i4$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }] });
+    `, 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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISelect, decorators: [{
             type: Component,
@@ -3279,10 +3309,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 				}
 				@for (item of options; track getOptionValue(item)) {
 					@let label = getOptionLabel(item);
-					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))){
+					@if(!enableSearch || (searchValue == '' || label.includes(searchValue))) {
+
 						@let value = getOptionValue(item);
 						<button tuiOption [value]="value" >
+						@if(itemTemplate){
+							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						}
+						@else {
 							<span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
+						}
 						</button>
 					}
 				}
@@ -3290,10 +3326,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		</tui-textfield>
 
 		<ng-template #content>
-			<span tuiChip [size]="label != '' ? 'xxs' : 'xs'" [appearance]="appearanceMap[selected]">{{stringify(selected)}}</span>
+			@if(selectedTemplate){
+				<ng-container [ngTemplateOutlet]="selectedTemplate" [ngTemplateOutletContext]="{ $implicit: getSelectedItem(selected)  }"></ng-container>
+			}
+			@else {
+				<span tuiChip [size]="label != '' ? 'xxs' : 'xs'" [appearance]="appearanceMap[selected]">{{stringify(selected)}}</span>
+			}
 		</ng-template>
     ` }]
-        }], propDecorators: { icon: [{
+        }], propDecorators: { selectedTemplate: [{
+                type: ContentChild,
+                args: ['selectedTemplate', { static: false }]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: ['itemTemplate', { static: false }]
+            }], icon: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -3317,6 +3364,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }] } });
 
+class EzUITreeSelect {
+    selectedTemplate;
+    itemTemplate;
+    handler = (item) => item.children || [];
+    icon = '';
+    label = '';
+    size = 'm';
+    options = [];
+    disabled = false;
+    selected = undefined;
+    selectedChange = new EventEmitter();
+    enableSearch = false;
+    searchValue = signal("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+    map = new Map();
+    ngOnChanges(changes) {
+        if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue)
+            this.selected = changes['selected'].currentValue;
+    }
+    expandAll() {
+        for (let option of this.options)
+            this.expandAllRec(option);
+    }
+    expandAllRec(from) {
+        this.map.set(from, true);
+        if (from.children && from.children.length > 0)
+            for (let child of from.children)
+                this.expandAllRec(child);
+    }
+    collapseAll() {
+        for (let option of this.options)
+            this.collapseAllRec(option);
+    }
+    collapseAllRec(from) {
+        this.map.set(from, false);
+        if (from.children && from.children.length > 0)
+            for (let child of from.children)
+                this.collapseAllRec(child);
+    }
+    searchChange() {
+        let newMap = new Map();
+        for (let option of this.options)
+            this.expandSearchRec(option, newMap);
+        this.map = newMap;
+    }
+    expandSearchRec(from, newMap) {
+        let expanded = false;
+        if (from.label.includes(this.searchValue())) {
+            newMap.set(from, true);
+            expanded = true;
+        }
+        if (from.children && from.children.length > 0) {
+            for (let child of from.children) {
+                if (this.expandSearchRec(child, newMap))
+                    expanded = true;
+            }
+            if (expanded)
+                newMap.set(from, true);
+        }
+        return expanded;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITreeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITreeSelect, isStandalone: true, selector: "ezui-treeselect", inputs: { icon: "icon", label: "label", size: "size", options: "options", disabled: "disabled", selected: "selected", enableSearch: "enableSearch" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "selectedTemplate", first: true, predicate: ["selectedTemplate"], descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label != '' && size != 's'){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiSelect [(ngModel)]="selected" [placeholder]="size == 's' ? label : ''" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
+			<tui-data-list *tuiDropdown >
+				@if(enableSearch){
+					<tui-textfield tuiTextfieldSize="s" iconStart="search" style="margin-bottom:5px">
+						<input tuiInput tuiAutoFocus #field [(ngModel)]="searchValue" (click)="field.focus()" (ngModelChange)="searchChange()"/>
+					</tui-textfield>
+				}
+
+				<div class="toolbar">
+					<button tuiButton size="xs" appearance="flat" (click)="expandAll()">Expand All</button>
+					<button tuiButton size="xs" appearance="flat" (click)="collapseAll()">Collapse All</button>
+				</div>
+
+				@for(root of options; track root){
+					<tui-tree
+						[childrenHandler]="handler"
+						[content]="treeContent"
+						[tuiTreeController]="false"
+						[value]="root"
+						[map]="map"
+					/>
+				}
+			</tui-data-list>
+		</tui-textfield>
+
+		<ng-template #treeContent let-node="node" let-value>
+			<div class="wrapper">
+				<button
+					tuiOption
+					[value]="value"
+					[disabled]="value.selectable === false"
+					[style.opacity]="!enableSearch || (searchValue() == '' || value.label.includes(searchValue())) ? (value.selectable === false ? 0.5 : 1) : 0.2"
+				>
+					@if(itemTemplate){
+						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value  }"></ng-container>
+					}
+					@else {
+						@if (value.icon) {
+							<tui-icon class="t-icon" [icon]="value.icon"/>
+						}
+						{{ value.label }}
+					}
+				</button>
+			</div>
+		</ng-template>
+
+		<ng-template #content>
+			@if(selectedTemplate){
+				<ng-container [ngTemplateOutlet]="selectedTemplate" [ngTemplateOutletContext]="{ $implicit: selected  }"></ng-container>
+			}
+			@else if(selected){
+				<span tuiChip [size]="label != '' ? 'xxs' : 'xs'">{{selected.label}}</span>
+			}
+		</ng-template>
+    `, isInline: true, styles: [".toolbar{display:flex;flex-direction:row;gap:5px}.wrapper{display:flex;align-items:center;width:100%}.wrapper button{width:100%}.t-icon:before{font-size:1rem}\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i4.TuiTreeComponent, selector: "tui-tree", inputs: ["value", "trackBy", "content"] }, { kind: "directive", type: i4.TuiTreeChildren, selector: "tui-tree[childrenHandler]", inputs: ["childrenHandler"] }, { kind: "directive", type: i4.TuiTreeControllerDirective, selector: "[tuiTreeController][map]", inputs: ["tuiTreeController", "map"], outputs: ["toggled"], exportAs: ["tuiTreeController"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITreeSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-treeselect', imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiSelect,
+                        TuiDataList,
+                        TuiTextfield,
+                        TuiDropdown,
+                        TuiChevron,
+                        TuiInput,
+                        TuiChip,
+                        TuiAutoFocus,
+                        TuiTree,
+                        TuiIcon,
+                        TuiButton
+                    ], template: `
+		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon">
+			@if(label != '' && size != 's'){
+				<label tuiLabel>{{label}}</label>
+			}
+			<input tuiSelect [(ngModel)]="selected" [placeholder]="size == 's' ? label : ''" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
+			<tui-data-list *tuiDropdown >
+				@if(enableSearch){
+					<tui-textfield tuiTextfieldSize="s" iconStart="search" style="margin-bottom:5px">
+						<input tuiInput tuiAutoFocus #field [(ngModel)]="searchValue" (click)="field.focus()" (ngModelChange)="searchChange()"/>
+					</tui-textfield>
+				}
+
+				<div class="toolbar">
+					<button tuiButton size="xs" appearance="flat" (click)="expandAll()">Expand All</button>
+					<button tuiButton size="xs" appearance="flat" (click)="collapseAll()">Collapse All</button>
+				</div>
+
+				@for(root of options; track root){
+					<tui-tree
+						[childrenHandler]="handler"
+						[content]="treeContent"
+						[tuiTreeController]="false"
+						[value]="root"
+						[map]="map"
+					/>
+				}
+			</tui-data-list>
+		</tui-textfield>
+
+		<ng-template #treeContent let-node="node" let-value>
+			<div class="wrapper">
+				<button
+					tuiOption
+					[value]="value"
+					[disabled]="value.selectable === false"
+					[style.opacity]="!enableSearch || (searchValue() == '' || value.label.includes(searchValue())) ? (value.selectable === false ? 0.5 : 1) : 0.2"
+				>
+					@if(itemTemplate){
+						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: value  }"></ng-container>
+					}
+					@else {
+						@if (value.icon) {
+							<tui-icon class="t-icon" [icon]="value.icon"/>
+						}
+						{{ value.label }}
+					}
+				</button>
+			</div>
+		</ng-template>
+
+		<ng-template #content>
+			@if(selectedTemplate){
+				<ng-container [ngTemplateOutlet]="selectedTemplate" [ngTemplateOutletContext]="{ $implicit: selected  }"></ng-container>
+			}
+			@else if(selected){
+				<span tuiChip [size]="label != '' ? 'xxs' : 'xs'">{{selected.label}}</span>
+			}
+		</ng-template>
+    `, styles: [".toolbar{display:flex;flex-direction:row;gap:5px}.wrapper{display:flex;align-items:center;width:100%}.wrapper button{width:100%}.t-icon:before{font-size:1rem}\n"] }]
+        }], propDecorators: { selectedTemplate: [{
+                type: ContentChild,
+                args: ['selectedTemplate', { static: false }]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: ['itemTemplate', { static: false }]
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], enableSearch: [{
+                type: Input
+            }] } });
+
 class EzUIShowMoreText {
     value = "";
     valueSmall = "";
@@ -3978,7 +4248,7 @@ class EzUITable {
 				}
 			</tui-loader>
 		</div>
-    `, isInline: true, styles: [".ezui-table{border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);display:flex;height:100%;width:100%;overflow:hidden}.ezui-table ::ng-deep tui-loader{height:100%;width:100%}.ezui-table ::ng-deep tui-loader>.t-content{display:flex;flex-direction:column}.ezui-table ::ng-deep tui-scrollbar{flex-grow:1}.ezui-table ::ng-deep tui-scrollbar>.t-content{display:flex;gap:10px;width:0px}.ezui-table .ezui-table-header{background-color:var(--tui-background-base-alt);display:flex;flex-direction:row;gap:10px;padding:5px}.ezui-table .ezui-table-header .seperator{width:2px;background-color:var(--tui-border-normal)}.ezui-table .ezui-table-footer{display:flex;margin-top:.5rem;margin-bottom:.5rem;padding-left:2rem;padding-right:2rem}.ezui-table .ezui-table-footer tui-table-pagination{flex:1}.ezui-table ::ng-deep table{border-radius:var(--tui-radius-l)}.ezui-table ::ng-deep th{background-color:var(--tui-background-base-alt)!important}.ezui-table ::ng-deep .ezui-table-expander{padding:0}.ezui-table ::ng-deep .ezui-table-expander-button{width:100%!important;height:100%;border-radius:0}.ezui-table th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}.ezui-table .rowrlickable{cursor:pointer;background-color:var(--tui-background-base)}.ezui-table .rowrlickable ::ng-deep td[tuitd]{background-color:transparent!important}.ezui-table .rowrlickable:hover{background-color:var(--tui-background-neutral-1-hover)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.TuiTableDirective, selector: "table[tuiTable]", inputs: ["columns", "size", "direction", "sorter"], outputs: ["directionChange", "sorterChange", "sortChange"] }, { kind: "component", type: i3$2.TuiTableTbody, selector: "tbody[tuiTbody]", inputs: ["heading", "open"], outputs: ["openChange"] }, { kind: "component", type: i3$2.TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"], outputs: ["sorterChange"] }, { kind: "component", type: i3$2.TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }, { kind: "component", type: i3$2.TuiTableExpand, selector: "tui-table-expand, tbody[tuiTableExpand]", inputs: ["expanded"], outputs: ["expandedChange"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: TuiTablePagination, selector: "tui-table-pagination", inputs: ["items", "total", "page", "size"], outputs: ["pageChange", "sizeChange", "paginationChange"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: i4$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i4$2.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: EzUITablePresets, selector: "ezui-table-presets", inputs: ["storageKey"], outputs: ["onPresetChange"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }] });
+    `, isInline: true, styles: [".ezui-table{border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);display:flex;height:100%;width:100%;overflow:hidden}.ezui-table ::ng-deep tui-loader{height:100%;width:100%}.ezui-table ::ng-deep tui-loader>.t-content{display:flex;flex-direction:column}.ezui-table ::ng-deep tui-scrollbar{flex-grow:1}.ezui-table ::ng-deep tui-scrollbar>.t-content{display:flex;gap:10px;width:0px}.ezui-table .ezui-table-header{background-color:var(--tui-background-base-alt);display:flex;flex-direction:row;gap:10px;padding:5px}.ezui-table .ezui-table-header .seperator{width:2px;background-color:var(--tui-border-normal)}.ezui-table .ezui-table-footer{display:flex;margin-top:.5rem;margin-bottom:.5rem;padding-left:2rem;padding-right:2rem}.ezui-table .ezui-table-footer tui-table-pagination{flex:1}.ezui-table ::ng-deep table{border-radius:var(--tui-radius-l)}.ezui-table ::ng-deep th{background-color:var(--tui-background-base-alt)!important}.ezui-table ::ng-deep .ezui-table-expander{padding:0}.ezui-table ::ng-deep .ezui-table-expander-button{width:100%!important;height:100%;border-radius:0}.ezui-table th[tuiTh]{align-items:center}.ezui-table .forcefullsize{width:100%!important}.ezui-table tui-block-status{padding-top:20px;padding-bottom:20px}.ezui-table .rowrlickable{cursor:pointer;background-color:var(--tui-background-base)}.ezui-table .rowrlickable ::ng-deep td[tuitd]{background-color:transparent!important}.ezui-table .rowrlickable:hover{background-color:var(--tui-background-neutral-1-hover)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.TuiTableDirective, selector: "table[tuiTable]", inputs: ["columns", "size", "direction", "sorter"], outputs: ["directionChange", "sorterChange", "sortChange"] }, { kind: "component", type: i3$2.TuiTableTbody, selector: "tbody[tuiTbody]", inputs: ["heading", "open"], outputs: ["openChange"] }, { kind: "component", type: i3$2.TuiTableTh, selector: "th[tuiTh]", inputs: ["minWidth", "maxWidth", "sorter", "resizable", "sticky", "requiredSort"], outputs: ["sorterChange"] }, { kind: "component", type: i3$2.TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }, { kind: "component", type: i3$2.TuiTableExpand, selector: "tui-table-expand, tbody[tuiTableExpand]", inputs: ["expanded"], outputs: ["expandedChange"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: TuiTablePagination, selector: "tui-table-pagination", inputs: ["items", "total", "page", "size"], outputs: ["pageChange", "sizeChange", "paginationChange"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "component", type: i4$1.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i4$1.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: EzUITablePresets, selector: "ezui-table-presets", inputs: ["storageKey"], outputs: ["onPresetChange"] }, { kind: "directive", type: i3$1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITable, decorators: [{
             type: Component,
@@ -4242,7 +4512,7 @@ class EzUITableBooleanFilter {
 				</div>
 			</ng-template>
 		}
-    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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: 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: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "directive", type: TuiBlock, selector: "label[tuiBlock],input[tuiBlock]", inputs: ["tuiBlock"] }] });
+    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { 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: 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: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: TuiCheckbox, selector: "input[type=\"checkbox\"][tuiCheckbox]" }, { kind: "directive", type: TuiBlock, selector: "label[tuiBlock],input[tuiBlock]", inputs: ["tuiBlock"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableBooleanFilter, decorators: [{
             type: Component,
@@ -4476,7 +4746,7 @@ class EzUITableDateFilter {
 				</div>
 			</ng-template>
 		}
-    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiInputDateDirective, selector: "input[tuiInputDate]", inputs: ["max", "min"] }, { kind: "component", type: TuiCalendarRange, selector: "tui-calendar-range", inputs: ["minLength", "maxLength", "items", "listSize", "defaultViewedMonth", "markerHandler", "item"], outputs: ["itemChange"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "component", type: i6$1.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "directive", type: TuiInputDateDirective, selector: "input[tuiInputDate]", inputs: ["max", "min"] }, { kind: "component", type: TuiCalendarRange, selector: "tui-calendar-range", inputs: ["minLength", "maxLength", "items", "listSize", "defaultViewedMonth", "markerHandler", "item"], outputs: ["itemChange"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableDateFilter, decorators: [{
             type: Component,
@@ -4711,7 +4981,7 @@ class EzUITableDateTimeFilter {
 				</div>
 			</ng-template>
 		}
-    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i4$1.TuiInputDateTimeDirective, selector: "input[tuiInputDateTime]", inputs: ["timeMode", "min", "max"] }, { kind: "component", type: i6.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i4.TuiInputDateTimeDirective, selector: "input[tuiInputDateTime]", inputs: ["timeMode", "min", "max"] }, { kind: "component", type: i6$1.TuiCalendar, selector: "tui-calendar:not([new]):not([months])", inputs: ["minViewedMonth", "maxViewedMonth", "showAdjacent", "markerHandler", "initialView", "hoveredItem"], outputs: ["hoveredItemChange", "dayClick"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableDateTimeFilter, decorators: [{
             type: Component,
@@ -4933,7 +5203,7 @@ class EzUITableNumberFilter {
 				</div>
 			</ng-template>
 		}
-    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: i4$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: i4.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableNumberFilter, decorators: [{
             type: Component,
@@ -5179,7 +5449,7 @@ class EzUITableSelectFilter {
 				</div>
 			</ng-template>
 		}
-    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: i4$1.TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: ["label"] }, { kind: "directive", type: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: i4.TuiMultiSelectGroupComponent, selector: "tui-opt-group[tuiMultiSelectGroup]", inputs: ["label"] }, { kind: "directive", type: i4.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableSelectFilter, decorators: [{
             type: Component,
@@ -5421,7 +5691,7 @@ class EzUITableTextFilter {
 				</div>
 			</ng-template>
 		}
-    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4$1.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4$1.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
+    `, isInline: true, styles: [".filterPopContainer{display:flex;flex-direction:column;gap:10px;padding:10px;min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i4.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: TuiBadgeNotification, selector: "tui-badge-notification", inputs: ["size"] }, { kind: "directive", type: i4.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i4.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i3$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "pipe", type: TuiStringifyContentPipe, name: "tuiStringifyContent" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITableTextFilter, decorators: [{
             type: Component,
@@ -5842,7 +6112,7 @@ class EzUISideBarItem {
 				</button>
 			}
 		}
-    `, isInline: true, dependencies: [{ kind: "component", type: EzUISideBarItem, selector: "ezui-sidebar-item", inputs: ["item"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4$2.TuiAsideGroupComponent, selector: "tui-aside-group", inputs: ["open"], outputs: ["openChange"] }, { kind: "directive", type: i4$2.TuiAsideItemDirective, selector: "[tuiAsideItem]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: EzUISideBarItem, selector: "ezui-sidebar-item", inputs: ["item"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4$1.TuiAsideGroupComponent, selector: "tui-aside-group", inputs: ["open"], outputs: ["openChange"] }, { kind: "directive", type: i4$1.TuiAsideItemDirective, selector: "[tuiAsideItem]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBarItem, decorators: [{
             type: Component,
@@ -6044,7 +6314,7 @@ class EzUISideBar {
 				</footer>
 			</aside>
 		}
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i4$2.TuiAsideComponent, selector: "aside[tuiNavigationAside]", inputs: ["tuiNavigationAside"] }, { kind: "component", type: EzUISideBarItem, selector: "ezui-sidebar-item", inputs: ["item"], outputs: ["onItemClick"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i4$1.TuiAsideComponent, selector: "aside[tuiNavigationAside]", inputs: ["tuiNavigationAside"] }, { kind: "component", type: EzUISideBarItem, selector: "ezui-sidebar-item", inputs: ["item"], outputs: ["onItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBar, decorators: [{
             type: Component,
@@ -6120,7 +6390,7 @@ class EzUITopBar {
 
 		<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],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.TuiHeaderComponent, selector: "header[tuiNavigationHeader]" }, { kind: "component", type: i4$1.TuiLogoComponent, selector: "[tuiNavigationLogo]" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITopBar, decorators: [{
             type: Component,
@@ -6240,5 +6510,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIDialog, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableDateTimeFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, compressImage };
+export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIDialog, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableDateTimeFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, EzUITreeSelect, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map