@kris701/ez-ui 1.3.4 → 1.3.5

package/fesm2022/kris701-ez-ui.mjs

@@ -3406,6 +3406,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 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 {
     icon = '';
     label = '';
@@ -6776,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