@kris701/ez-ui 1.3.4 → 1.3.6

package/fesm2022/kris701-ez-ui.mjs

@@ -2466,9 +2466,10 @@ const compressImage = async (file, quality, maxHeight, maxWidth, convertSize) =>
 };
 
 class EzUIMenuBarSubDataList {
+    menuItemTemplate;
     subdatalist = [];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBarSubDataList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMenuBarSubDataList, isStandalone: true, selector: "tui-data-list[subdatalist]", inputs: { subdatalist: "subdatalist" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMenuBarSubDataList, isStandalone: true, selector: "tui-data-list[subdatalist]", inputs: { menuItemTemplate: "menuItemTemplate", subdatalist: "subdatalist" }, ngImport: i0, template: `
 		@for(item of subdatalist; track $index){
 			@if(item.items){
 				<button
@@ -2483,7 +2484,12 @@ class EzUIMenuBarSubDataList {
 					tuiDropdownSided="true"
 					[style]="item.style"
 				>
-				{{item.label}}
+					@if(menuItemTemplate){
+						<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+					}
+					@else {
+						{{item.label}}
+					}
 				</button>
 
 				<ng-template #dropdownContent>
@@ -2502,15 +2508,21 @@ class EzUIMenuBarSubDataList {
 					(click)="item.command()"
 					[style]="item.style"
 				>
-					{{item.label}}
+					@if(menuItemTemplate){
+						<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+					}
+					@else {
+						{{item.label}}
+					}
 				</button>
 			}
 		}
-    `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["subdatalist"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
+    `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["menuItemTemplate", "subdatalist"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: EzUIMenuBarSubDataList, decorators: [{
             type: Component,
             args: [{ selector: 'tui-data-list[subdatalist]', standalone: true, imports: [
+                        CommonModule,
                         TuiDropdown,
                         TuiOption,
                         TuiChevron
@@ -2529,7 +2541,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					tuiDropdownSided="true"
 					[style]="item.style"
 				>
-				{{item.label}}
+					@if(menuItemTemplate){
+						<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+					}
+					@else {
+						{{item.label}}
+					}
 				</button>
 
 				<ng-template #dropdownContent>
@@ -2548,15 +2565,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					(click)="item.command()"
 					[style]="item.style"
 				>
-					{{item.label}}
+					@if(menuItemTemplate){
+						<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+					}
+					@else {
+						{{item.label}}
+					}
 				</button>
 			}
 		}
     `, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"] }]
-        }], propDecorators: { subdatalist: [{
+        }], propDecorators: { menuItemTemplate: [{
+                type: Input
+            }], subdatalist: [{
                 type: Input
             }] } });
 class EzUIMenuBar {
+    itemTemplate;
+    menuItemTemplate;
     items = [];
     ngOnChanges(changes) {
         if (changes['items'] && changes['items'].currentValue != changes['items'].previousValue) {
@@ -2564,7 +2590,7 @@ class EzUIMenuBar {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMenuBar, isStandalone: true, selector: "ezui-menubar", inputs: { items: "items" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMenuBar, isStandalone: true, selector: "ezui-menubar", inputs: { items: "items" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "menuItemTemplate", first: true, predicate: ["menuItemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<div tuiGroup class="group" [collapsed]="true">
 			@for(item of items; track $index){
 				@if(item.items){
@@ -2581,13 +2607,19 @@ class EzUIMenuBar {
 						tuiDropdownLimitWidth="fixed"
 						[style]="item.style"
 					>
-						{{item.label}}
+						@if(itemTemplate){
+							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						}
+						@else {
+							{{item.label}}
+						}
 					</button>
 
 					<ng-template #dropdownContent>
 						<tui-data-list
 							class="subdatalist"
-							[subdatalist]="item.items">
+							[subdatalist]="item.items"
+							[menuItemTemplate]="menuItemTemplate">
 						</tui-data-list>
 					</ng-template>
 				}
@@ -2602,12 +2634,17 @@ class EzUIMenuBar {
 						(click)="item.command()"
 						[style]="item.style"
 					>
-						{{item.label}}
+						@if(itemTemplate){
+							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						}
+						@else {
+							{{item.label}}
+						}
 					</button>
 				}
 			}
 		</div>
-    `, isInline: true, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { 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: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["subdatalist"] }] });
+    `, isInline: true, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\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: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { 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: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["menuItemTemplate", "subdatalist"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, decorators: [{
             type: Component,
@@ -2636,13 +2673,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						tuiDropdownLimitWidth="fixed"
 						[style]="item.style"
 					>
-						{{item.label}}
+						@if(itemTemplate){
+							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						}
+						@else {
+							{{item.label}}
+						}
 					</button>
 
 					<ng-template #dropdownContent>
 						<tui-data-list
 							class="subdatalist"
-							[subdatalist]="item.items">
+							[subdatalist]="item.items"
+							[menuItemTemplate]="menuItemTemplate">
 						</tui-data-list>
 					</ng-template>
 				}
@@ -2657,13 +2700,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						(click)="item.command()"
 						[style]="item.style"
 					>
-						{{item.label}}
+						@if(itemTemplate){
+							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						}
+						@else {
+							{{item.label}}
+						}
 					</button>
 				}
 			}
 		</div>
     `, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\n"] }]
-        }], propDecorators: { items: [{
+        }], propDecorators: { itemTemplate: [{
+                type: ContentChild,
+                args: ['itemTemplate', { static: false }]
+            }], menuItemTemplate: [{
+                type: ContentChild,
+                args: ['menuItemTemplate', { static: false }]
+            }], items: [{
                 type: Input
             }] } });
 
@@ -3406,6 +3460,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }] } });
 
+class EzUIPopoutMenuSubDataList {
+    itemTemplate;
+    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: { itemTemplate: "itemTemplate", 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"
+				>
+					@if(itemTemplate){
+						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+					}
+					@else {
+						{{item.label}}
+					}
+				</button>
+
+				<ng-template #dropdownContent>
+					<div class="popdropdown">
+						<tui-data-list
+							class="popsubdatalist"
+							[popsubdatalist]="item.items"
+							[itemTemplate]="itemTemplate">
+						</tui-data-list>
+					</div>
+				</ng-template>
+			}
+			@else {
+				<button
+					class="subdatalistitem"
+					tuiOption
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					(click)="item.command()"
+					[style]="item.style"
+				>
+					@if(itemTemplate){
+						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+					}
+					@else {
+						{{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: ["itemTemplate", "popsubdatalist"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: [
+                        CommonModule,
+                        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"
+				>
+					@if(itemTemplate){
+						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+					}
+					@else {
+						{{item.label}}
+					}
+				</button>
+
+				<ng-template #dropdownContent>
+					<div class="popdropdown">
+						<tui-data-list
+							class="popsubdatalist"
+							[popsubdatalist]="item.items"
+							[itemTemplate]="itemTemplate">
+						</tui-data-list>
+					</div>
+				</ng-template>
+			}
+			@else {
+				<button
+					class="subdatalistitem"
+					tuiOption
+					[iconStart]="item.icon"
+					[disabled]="item.disabled"
+					(click)="item.command()"
+					[style]="item.style"
+				>
+					@if(itemTemplate){
+						<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+					}
+					@else {
+						{{item.label}}
+					}
+				</button>
+			}
+		}
+    `, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"] }]
+        }], propDecorators: { itemTemplate: [{
+                type: Input
+            }], popsubdatalist: [{
+                type: Input
+            }] } });
+class EzUIPopoutMenu {
+    itemTemplate;
+    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" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], 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"
+						[itemTemplate]="itemTemplate">
+					</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: ["itemTemplate", "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"
+						[itemTemplate]="itemTemplate">
+					</tui-data-list>
+				</div>
+			</ng-template>
+		</button>
+    `, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { itemTemplate: [{
+                type: ContentChild,
+                args: ['itemTemplate', { static: false }]
+            }], items: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }] } });
+
 class EzUIPasswordInput {
     icon = '';
     label = '';
@@ -6776,5 +7036,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