@kris701/ez-ui 1.3.3 → 1.3.5

package/fesm2022/kris701-ez-ui.mjs

@@ -111,6 +111,7 @@ class EzUIDateInput {
     valueChange = new EventEmitter();
     internalValue = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    showClear = true;
     ngOnChanges(changes) {
         if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
             this.value = changes['value'].currentValue;
@@ -140,8 +141,8 @@ class EzUIDateInput {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIDateInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDateInput, isStandalone: true, selector: "ezui-dateinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDateInput, isStandalone: true, selector: "ezui-dateinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", value: "value", showClear: "showClear" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -158,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiInputDate,
                         TuiDropdownSheet
                     ], template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet>
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -182,6 +183,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], showClear: [{
+                type: Input
             }] } });
 
 class EzUIDateTimeInput {
@@ -199,6 +202,7 @@ class EzUIDateTimeInput {
     valueChange = new EventEmitter();
     internalValue = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    showClear = true;
     ngOnChanges(changes) {
         if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
             this.value = changes['value'].currentValue;
@@ -268,8 +272,8 @@ class EzUIDateTimeInput {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIDateTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDateTimeInput, isStandalone: true, selector: "ezui-datetimeinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet>>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDateTimeInput, isStandalone: true, selector: "ezui-datetimeinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", value: "value", showClear: "showClear" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -315,7 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiButton,
                         TuiDropdownSheet
                     ], template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet>>
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" tuiDropdownSheet [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -367,6 +371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], showClear: [{
+                type: Input
             }] } });
 
 class EzUIDialog {
@@ -2295,14 +2301,15 @@ class EzUITextInput {
     disabled = false;
     value = "";
     valueChange = new EventEmitter();
+    showClear = true;
     ngOnChanges(changes) {
         if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
             this.value = changes['value'].currentValue;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITextInput, isStandalone: true, selector: "ezui-textinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITextInput, isStandalone: true, selector: "ezui-textinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value", showClear: "showClear" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -2317,7 +2324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         CommonModule,
                         TuiInput
                     ], template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -2336,6 +2343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], showClear: [{
+                type: Input
             }] } });
 
 class EzUIIconSelector {
@@ -2394,7 +2403,7 @@ class EzUIIconSelector {
 				}
 			</div>
 		</ng-template>
-    `, isInline: true, styles: [".dropdown-container{display:flex;flex-direction:column;padding:10px;min-width:10rem;gap:5px}.dropdown-container .icon-container{display:flex;flex-wrap:wrap;gap:5px;max-width:80vw;max-height:30vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: EzUITextInput, selector: "ezui-textinput", inputs: ["icon", "label", "size", "disabled", "value"], outputs: ["valueChange"] }] });
+    `, isInline: true, styles: [".dropdown-container{display:flex;flex-direction:column;padding:10px;min-width:10rem;gap:5px}.dropdown-container .icon-container{display:flex;flex-wrap:wrap;gap:5px;max-width:80vw;max-height:30vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: EzUITextInput, selector: "ezui-textinput", inputs: ["icon", "label", "size", "disabled", "value", "showClear"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIIconSelector, decorators: [{
             type: Component,
@@ -2991,6 +3000,7 @@ class EzUIMultiSelect {
     appearanceMap = {};
     enableSearch = false;
     searchValue = "";
+    showClear = true;
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
             this.selected = changes['selected'].currentValue;
@@ -3012,8 +3022,8 @@ 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" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
+    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", showClear: "showClear" }, 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" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3062,7 +3072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiAutoFocus,
                         TuiInput
                     ], template: `
-		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3118,6 +3128,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], enableSearch: [{
                 type: Input
+            }], showClear: [{
+                type: Input
             }] } });
 
 class EzUITreeMultiSelect {
@@ -3133,6 +3145,7 @@ class EzUITreeMultiSelect {
     enableSearch = false;
     searchValue = signal("", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+    showClear = true;
     map = new Map();
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
@@ -3183,8 +3196,8 @@ class EzUITreeMultiSelect {
         return expanded;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITreeMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITreeMultiSelect, isStandalone: true, selector: "ezui-treemultiselect", inputs: { icon: "icon", label: "label", size: "size", options: "options", disabled: "disabled", selected: "selected", 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">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITreeMultiSelect, isStandalone: true, selector: "ezui-treemultiselect", inputs: { icon: "icon", label: "label", size: "size", options: "options", disabled: "disabled", selected: "selected", enableSearch: "enableSearch", showClear: "showClear" }, 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" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3256,7 +3269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiButton,
                         TuiTree
                     ], template: `
-		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3326,6 +3339,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }], enableSearch: [{
                 type: Input
+            }], showClear: [{
+                type: Input
             }] } });
 
 class EzUINumberInput {
@@ -3338,14 +3353,15 @@ class EzUINumberInput {
     step = 0;
     value = "";
     valueChange = new EventEmitter();
+    showClear = true;
     ngOnChanges(changes) {
         if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
             this.value = changes['value'].currentValue;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUINumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUINumberInput, isStandalone: true, selector: "ezui-numberinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", step: "step", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUINumberInput, isStandalone: true, selector: "ezui-numberinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", min: "min", max: "max", step: "step", value: "value", showClear: "showClear" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3361,7 +3377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiInput,
                         TuiInputNumber
                     ], template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3386,6 +3402,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], showClear: [{
+                type: Input
+            }] } });
+
+class EzUIPopoutMenuSubDataList {
+    popsubdatalist = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenuSubDataList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIPopoutMenuSubDataList, isStandalone: true, selector: "tui-data-list[popsubdatalist]", inputs: { popsubdatalist: "popsubdatalist" }, ngImport: i0, template: `
+		@for(item of popsubdatalist; track $index){
+			@if(item.items){
+				<button
+					class="subdatalistitem"
+					tuiOption
+					tuiChevron
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					[tuiDropdown]="dropdownContent"
+					[(tuiDropdownOpen)]="item.expanded"
+					tuiDropdownLimitWidth="fixed"
+					tuiDropdownSided="true"
+					[style]="item.style"
+				>
+				{{item.label}}
+				</button>
+
+				<ng-template #dropdownContent>
+					<div class="popdropdown">
+						<tui-data-list
+							class="popsubdatalist"
+							[popsubdatalist]="item.items">
+						</tui-data-list>
+					</div>
+				</ng-template>
+			}
+			@else {
+				<button
+					class="subdatalistitem"
+					tuiOption
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					(click)="item.command()"
+					[style]="item.style"
+				>
+					{{item.label}}
+				</button>
+			}
+		}
+    `, isInline: true, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["popsubdatalist"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenuSubDataList, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-data-list[popsubdatalist]', standalone: true, imports: [
+                        TuiDropdown,
+                        TuiOption,
+                        TuiChevron
+                    ], template: `
+		@for(item of popsubdatalist; track $index){
+			@if(item.items){
+				<button
+					class="subdatalistitem"
+					tuiOption
+					tuiChevron
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					[tuiDropdown]="dropdownContent"
+					[(tuiDropdownOpen)]="item.expanded"
+					tuiDropdownLimitWidth="fixed"
+					tuiDropdownSided="true"
+					[style]="item.style"
+				>
+				{{item.label}}
+				</button>
+
+				<ng-template #dropdownContent>
+					<div class="popdropdown">
+						<tui-data-list
+							class="popsubdatalist"
+							[popsubdatalist]="item.items">
+						</tui-data-list>
+					</div>
+				</ng-template>
+			}
+			@else {
+				<button
+					class="subdatalistitem"
+					tuiOption
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					(click)="item.command()"
+					[style]="item.style"
+				>
+					{{item.label}}
+				</button>
+			}
+		}
+    `, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"] }]
+        }], propDecorators: { popsubdatalist: [{
+                type: Input
+            }] } });
+class EzUIPopoutMenu {
+    items = [];
+    dropdownOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
+    icon = 'plus';
+    label = '';
+    size = 'm';
+    appearance = 'flat';
+    ngOnChanges(changes) {
+        if (changes['items'] && changes['items'].currentValue != changes['items'].previousValue) {
+            this.items = changes['items'].currentValue;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: EzUIPopoutMenu, isStandalone: true, selector: "ezui-popoutmenu", inputs: { items: "items", icon: "icon", label: "label", size: "size", appearance: "appearance" }, usesOnChanges: true, ngImport: i0, template: `
+		<button
+			[iconStart]="icon"
+			tuiButton
+			type="button"
+			[size]="size"
+			[appearance]="appearance"
+			[tuiAppearanceState]="dropdownOpen() ? 'active' : null"
+			[tuiDropdown]="dropdownContent"
+			[(tuiDropdownOpen)]="dropdownOpen"
+		>
+			{{label}}
+			<ng-template #dropdownContent>
+				<div class="popdropdown">
+					<tui-data-list
+						class="popsubdatalist"
+						[popsubdatalist]="items">
+					</tui-data-list>
+				</div>
+			</ng-template>
+		</button>
+    `, isInline: true, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["popsubdatalist"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-popoutmenu', standalone: true, imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiButton,
+                        TuiDropdown,
+                        EzUIPopoutMenuSubDataList,
+                    ], template: `
+		<button
+			[iconStart]="icon"
+			tuiButton
+			type="button"
+			[size]="size"
+			[appearance]="appearance"
+			[tuiAppearanceState]="dropdownOpen() ? 'active' : null"
+			[tuiDropdown]="dropdownContent"
+			[(tuiDropdownOpen)]="dropdownOpen"
+		>
+			{{label}}
+			<ng-template #dropdownContent>
+				<div class="popdropdown">
+					<tui-data-list
+						class="popsubdatalist"
+						[popsubdatalist]="items">
+					</tui-data-list>
+				</div>
+			</ng-template>
+		</button>
+    `, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], appearance: [{
+                type: Input
             }] } });
 
 class EzUIPasswordInput {
@@ -3395,14 +3587,15 @@ class EzUIPasswordInput {
     disabled = false;
     value = "";
     valueChange = new EventEmitter();
+    showClear = true;
     ngOnChanges(changes) {
         if (changes['value'] && changes['value'].currentValue != changes['value'].previousValue) {
             this.value = changes['value'].currentValue;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPasswordInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIPasswordInput, isStandalone: true, selector: "ezui-passwordinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIPasswordInput, isStandalone: true, selector: "ezui-passwordinput", inputs: { icon: "icon", label: "label", size: "size", disabled: "disabled", value: "value", showClear: "showClear" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3420,7 +3613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiIcon,
                         TuiPassword
                     ], template: `
-		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3440,6 +3633,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], showClear: [{
+                type: Input
             }] } });
 
 class EzUISelect {
@@ -3457,6 +3652,7 @@ class EzUISelect {
     appearanceMap = {};
     enableSearch = false;
     searchValue = "";
+    showClear = true;
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
             this.selected = changes['selected'].currentValue;
@@ -3481,8 +3677,8 @@ 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" }, 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">
+    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", showClear: "showClear" }, 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" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3535,7 +3731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiChip,
                         TuiAutoFocus
                     ], template: `
-		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3601,6 +3797,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], enableSearch: [{
                 type: Input
+            }], showClear: [{
+                type: Input
             }] } });
 
 class EzUITreeSelect {
@@ -3617,6 +3815,7 @@ class EzUITreeSelect {
     enableSearch = false;
     searchValue = signal("", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+    showClear = true;
     map = new Map();
     ngOnChanges(changes) {
         if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue)
@@ -3665,8 +3864,8 @@ class EzUITreeSelect {
         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">
+    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", showClear: "showClear" }, 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" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3743,7 +3942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         TuiIcon,
                         TuiButton
                     ], template: `
-		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon">
+		<tui-textfield tuiChevron [content]="content" [tuiTextfieldSize]="size" [iconStart]="icon" [tuiTextfieldCleaner]="showClear">
 			@if(label != '' && size != 's'){
 				<label tuiLabel>{{label}}</label>
 			}
@@ -3824,6 +4023,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }], enableSearch: [{
                 type: Input
+            }], showClear: [{
+                type: Input
             }] } });
 
 class EzUIShowMoreText {
@@ -6749,5 +6950,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, EzUITreeMultiSelect, EzUITreeSelect, compressImage };
+export { BaseCRUDInterface, BaseListInterface, EzUIBooleanInput, EzUIDateInput, EzUIDateTimeInput, EzUIDialog, EzUIFileInput, EzUIFilterHelpers, EzUIIconSelector, EzUILayout, EzUILayoutService, EzUIMarkdownEditor, EzUIMenuBar, EzUIMenuBarSubDataList, EzUIMultiSelect, EzUINumberInput, EzUIPasswordInput, EzUIPopoutMenu, EzUIPopoutMenuSubDataList, EzUISelect, EzUIShowMoreText, EzUITTableSortableColumn, EzUITable, EzUITableBooleanFilter, EzUITableDateFilter, EzUITableDateTimeFilter, EzUITableFilterService, EzUITableNumberFilter, EzUITableSelectFilter, EzUITableTextFilter, EzUITextInput, EzUITreeMultiSelect, EzUITreeSelect, compressImage };
 //# sourceMappingURL=kris701-ez-ui.mjs.map