@kris701/ez-ui 1.4.6 → 1.4.8

package/fesm2022/kris701-ez-ui.mjs

@@ -15,7 +15,7 @@ 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 i2$2 from '@taiga-ui/layout';
 import { TuiHeader, TuiBlockStatus, TuiElasticContainer, TuiNavigation, TuiAsideGroupComponent } from '@taiga-ui/layout';
 import { marked } from 'marked';
 import Compressor from 'compressorjs';
@@ -27,7 +27,7 @@ import { TuiTablePagination, TuiTable } from '@taiga-ui/addon-table';
 import { v4 } from 'uuid';
 import { firstValueFrom, switchMap } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
-import * as i2$2 from '@angular/router';
+import * as i2$3 from '@angular/router';
 import { RouterLink, NavigationEnd, RouterModule } from '@angular/router';
 
 class EzUIBooleanInput {
@@ -380,6 +380,7 @@ class EzUIDialog {
     layoutService;
     header;
     content;
+    footer;
     size = 'm';
     title = '';
     isLoading = signal(false, /* @ts-ignore */
@@ -394,7 +395,7 @@ class EzUIDialog {
         this.layoutService = layoutService;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIDialog, deps: [{ token: EzUILayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDialog, isStandalone: true, selector: "ezui-dialog", inputs: { size: "size", title: "title", isLoading: "isLoading", showDialog: "showDialog", showSave: "showSave", showDelete: "showDelete" }, outputs: { onSaveItem: "onSaveItem", onDeleteItem: "onDeleteItem" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIDialog, isStandalone: true, selector: "ezui-dialog", inputs: { size: "size", title: "title", isLoading: "isLoading", showDialog: "showDialog", showSave: "showSave", showDelete: "showDelete" }, outputs: { onSaveItem: "onSaveItem", onDeleteItem: "onDeleteItem" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: `
 		<ng-template let-id="id" [tuiDialogOptions]="{size: size, appearance: layoutService.isDesktop() ? 'taiga compact' : 'fullscreen'}" [(tuiDialog)]="showDialog">
 			<header tuiHeader>
 				<hgroup tuiTitle>
@@ -413,7 +414,7 @@ class EzUIDialog {
 				</tui-loader>
 			}
 
-			@if(!isLoading() && (showSave || showDelete)){
+			@if(!isLoading() && (showSave || showDelete || footer)){
 				<footer class="dialog-footer">
 					@if(showSave){
 						<button tuiButton iconStart="save" size="s" (click)="onSaveItem.emit()">Save</button>
@@ -421,6 +422,9 @@ class EzUIDialog {
 					@if(showDelete){
 						<button tuiButton iconStart="x" size="s" appearance="negative" (click)="onDeleteItem.emit()">Delete</button>
 					}
+					@if(footer){
+						<ng-container [ngTemplateOutlet]="footer"></ng-container>
+					}
 				</footer>
 			}
 		</ng-template>
@@ -455,7 +459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 				</tui-loader>
 			}
 
-			@if(!isLoading() && (showSave || showDelete)){
+			@if(!isLoading() && (showSave || showDelete || footer)){
 				<footer class="dialog-footer">
 					@if(showSave){
 						<button tuiButton iconStart="save" size="s" (click)="onSaveItem.emit()">Save</button>
@@ -463,6 +467,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					@if(showDelete){
 						<button tuiButton iconStart="x" size="s" appearance="negative" (click)="onDeleteItem.emit()">Delete</button>
 					}
+					@if(footer){
+						<ng-container [ngTemplateOutlet]="footer"></ng-container>
+					}
 				</footer>
 			}
 		</ng-template>
@@ -473,6 +480,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }], content: [{
                 type: ContentChild,
                 args: ['content', { static: false }]
+            }], footer: [{
+                type: ContentChild,
+                args: ['footer', { static: false }]
             }], size: [{
                 type: Input
             }], title: [{
@@ -2499,9 +2509,10 @@ const compressImage = async (file, quality, maxHeight, maxWidth, convertSize) =>
 class EzUIMenuBarSubDataList {
     menuItemTemplate;
     subdatalist = [];
+    sender;
     onItemClick = new EventEmitter();
     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: { menuItemTemplate: "menuItemTemplate", subdatalist: "subdatalist" }, outputs: { onItemClick: "onItemClick" }, 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", sender: "sender" }, outputs: { onItemClick: "onItemClick" }, ngImport: i0, template: `
 		@for(item of subdatalist; track $index){
 			@if(item.items){
 				@if(!item.hidden){
@@ -2529,7 +2540,8 @@ class EzUIMenuBarSubDataList {
 						<tui-data-list
 							class="subdatalist"
 							[subdatalist]="item.items"
-							(onItemClick)="onItemClick.emit()">
+							(onItemClick)="onItemClick.emit()"
+							[sender]="sender">
 						</tui-data-list>
 					</ng-template>
 				}
@@ -2541,7 +2553,7 @@ class EzUIMenuBarSubDataList {
 						tuiOption
 						[iconStart]="item.icon"
 						[disabled]="item.disabled"
-						(click)="item.command(item);onItemClick.emit()"
+						(click)="item.command(sender,item);onItemClick.emit()"
 						[style]="item.style"
 					>
 						@if(menuItemTemplate){
@@ -2554,7 +2566,7 @@ class EzUIMenuBarSubDataList {
 				}
 			}
 		}
-    `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column;padding:10px}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["menuItemTemplate", "subdatalist"], outputs: ["onItemClick"] }, { 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"] }] });
+    `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column;padding:10px}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["menuItemTemplate", "subdatalist", "sender"], outputs: ["onItemClick"] }, { 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,
@@ -2591,7 +2603,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						<tui-data-list
 							class="subdatalist"
 							[subdatalist]="item.items"
-							(onItemClick)="onItemClick.emit()">
+							(onItemClick)="onItemClick.emit()"
+							[sender]="sender">
 						</tui-data-list>
 					</ng-template>
 				}
@@ -2603,7 +2616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						tuiOption
 						[iconStart]="item.icon"
 						[disabled]="item.disabled"
-						(click)="item.command(item);onItemClick.emit()"
+						(click)="item.command(sender,item);onItemClick.emit()"
 						[style]="item.style"
 					>
 						@if(menuItemTemplate){
@@ -2621,6 +2634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], subdatalist: [{
                 type: Input
+            }], sender: [{
+                type: Input
             }], onItemClick: [{
                 type: Output
             }] } });
@@ -2628,13 +2643,14 @@ class EzUIMenuBar {
     itemTemplate;
     menuItemTemplate;
     items = [];
+    sender;
     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: 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" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "menuItemTemplate", first: true, predicate: ["menuItemTemplate"], descendants: true }], 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", sender: "sender" }, 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){
@@ -2665,7 +2681,8 @@ class EzUIMenuBar {
 								class="subdatalist"
 								[subdatalist]="item.items"
 								[menuItemTemplate]="menuItemTemplate"
-								(onItemClick)="item.expanded = false">
+								(onItemClick)="item.expanded = false"
+								[sender]="sender">
 							</tui-data-list>
 						</ng-template>
 					}
@@ -2679,7 +2696,7 @@ class EzUIMenuBar {
 							type="button"
 							[iconStart]="item.icon"
 							[disabled]="item.disabled"
-							(click)="item.command(item)"
+							(click)="item.command(sender,item)"
 							[style]="item.style"
 						>
 							@if(itemTemplate){
@@ -2693,7 +2710,7 @@ class EzUIMenuBar {
 				}
 			}
 		</div>
-    `, isInline: true, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column;padding:10px}\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"], outputs: ["onItemClick"] }] });
+    `, isInline: true, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column;padding:10px}\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", "sender"], outputs: ["onItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, decorators: [{
             type: Component,
@@ -2736,7 +2753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 								class="subdatalist"
 								[subdatalist]="item.items"
 								[menuItemTemplate]="menuItemTemplate"
-								(onItemClick)="item.expanded = false">
+								(onItemClick)="item.expanded = false"
+								[sender]="sender">
 							</tui-data-list>
 						</ng-template>
 					}
@@ -2750,7 +2768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 							type="button"
 							[iconStart]="item.icon"
 							[disabled]="item.disabled"
-							(click)="item.command(item)"
+							(click)="item.command(sender,item)"
 							[style]="item.style"
 						>
 							@if(itemTemplate){
@@ -2773,6 +2791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: ['menuItemTemplate', { static: false }]
             }], items: [{
                 type: Input
+            }], sender: [{
+                type: Input
             }] } });
 
 class EzUIMarkdownEditor {
@@ -2798,16 +2818,16 @@ class EzUIMarkdownEditor {
     items = signal([
         {
             icon: 'save',
-            command: async (e) => await this.toggleEdit(true),
+            command: async (s, i) => await this.toggleEdit(true),
             style: 'border-bottom-left-radius: 0px !important;'
         },
         {
             icon: 'x',
-            command: async (e) => await this.toggleEdit(false)
+            command: async (s, i) => await this.toggleEdit(false)
         },
         {
             label: 'B',
-            command: async (e) => {
+            command: async (s, i) => {
                 if (this.editor) {
                     const editor = this.editor.nativeElement;
                     const start = editor.selectionStart;
@@ -2820,7 +2840,7 @@ class EzUIMarkdownEditor {
         },
         {
             label: 'I',
-            command: async (e) => {
+            command: async (s, i) => {
                 if (this.editor) {
                     const editor = this.editor.nativeElement;
                     const start = editor.selectionStart;
@@ -2836,7 +2856,7 @@ class EzUIMarkdownEditor {
             items: [
                 {
                     label: 'H1',
-                    command: async (e) => {
+                    command: async (s, i) => {
                         if (this.editor) {
                             const editor = this.editor.nativeElement;
                             const start = editor.selectionStart;
@@ -2849,7 +2869,7 @@ class EzUIMarkdownEditor {
                 },
                 {
                     label: 'H2',
-                    command: async (e) => {
+                    command: async (s, i) => {
                         if (this.editor) {
                             const editor = this.editor.nativeElement;
                             const start = editor.selectionStart;
@@ -2862,7 +2882,7 @@ class EzUIMarkdownEditor {
                 },
                 {
                     label: 'H3',
-                    command: async (e) => {
+                    command: async (s, i) => {
                         if (this.editor) {
                             const editor = this.editor.nativeElement;
                             const start = editor.selectionStart;
@@ -2877,7 +2897,7 @@ class EzUIMarkdownEditor {
         },
         {
             icon: 'link',
-            command: async (e) => {
+            command: async (s, i) => {
                 if (this.editor) {
                     const editor = this.editor.nativeElement;
                     const start = editor.selectionStart;
@@ -2890,7 +2910,7 @@ class EzUIMarkdownEditor {
         },
         {
             icon: 'image',
-            command: async (e) => {
+            command: async (s, i) => {
                 if (this.editor) {
                     this.fileUpload?.nativeElement.click();
                 }
@@ -3035,7 +3055,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-container .preview ::ng-deep p{margin:0}.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}.preview-readonly-container .preview ::ng-deep p{margin:0}\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-container .preview ::ng-deep p{margin:0}.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}.preview-readonly-container .preview ::ng-deep p{margin:0}\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", "sender"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMarkdownEditor, decorators: [{
             type: Component,
@@ -3535,9 +3555,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class EzUIPopoutMenuSubDataList {
     itemTemplate;
     popsubdatalist = [];
+    sender;
     onItemClick = new EventEmitter();
     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" }, outputs: { onItemClick: "onItemClick" }, ngImport: i0, template: `
+    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", sender: "sender" }, outputs: { onItemClick: "onItemClick" }, ngImport: i0, template: `
 		@for(item of popsubdatalist; track $index){
 			@if(item.items){
 				@if(!item.hidden){
@@ -3567,7 +3588,8 @@ class EzUIPopoutMenuSubDataList {
 								class="popsubdatalist"
 								[popsubdatalist]="item.items"
 								[itemTemplate]="itemTemplate"
-								(onItemClick)="onItemClick.emit()">
+								(onItemClick)="onItemClick.emit()"
+								[sender]="sender">
 							</tui-data-list>
 						</div>
 					</ng-template>
@@ -3580,7 +3602,7 @@ class EzUIPopoutMenuSubDataList {
 						tuiOption
 						[iconStart]="item.icon"
 						[disabled]="item.disabled"
-						(click)="item.command(item);onItemClick.emit()"
+						(click)="item.command(sender, item);onItemClick.emit()"
 						[style]="item.style"
 					>
 						@if(itemTemplate){
@@ -3593,7 +3615,7 @@ class EzUIPopoutMenuSubDataList {
 				}
 			}
 		}
-    `, 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"], outputs: ["onItemClick"] }, { 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"] }] });
+    `, 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", "sender"], outputs: ["onItemClick"] }, { 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,
@@ -3632,7 +3654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 								class="popsubdatalist"
 								[popsubdatalist]="item.items"
 								[itemTemplate]="itemTemplate"
-								(onItemClick)="onItemClick.emit()">
+								(onItemClick)="onItemClick.emit()"
+								[sender]="sender">
 							</tui-data-list>
 						</div>
 					</ng-template>
@@ -3645,7 +3668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						tuiOption
 						[iconStart]="item.icon"
 						[disabled]="item.disabled"
-						(click)="item.command(item);onItemClick.emit()"
+						(click)="item.command(sender, item);onItemClick.emit()"
 						[style]="item.style"
 					>
 						@if(itemTemplate){
@@ -3663,12 +3686,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], popsubdatalist: [{
                 type: Input
+            }], sender: [{
+                type: Input
             }], onItemClick: [{
                 type: Output
             }] } });
 class EzUIPopoutMenu {
     itemTemplate;
     items = [];
+    sender;
     dropdownOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
     icon = 'plus';
@@ -3682,7 +3708,7 @@ class EzUIPopoutMenu {
         }
     }
     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" }, outputs: { onMenuOpen: "onMenuOpen" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: EzUIPopoutMenu, isStandalone: true, selector: "ezui-popoutmenu", inputs: { items: "items", sender: "sender", icon: "icon", label: "label", size: "size", appearance: "appearance" }, outputs: { onMenuOpen: "onMenuOpen" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<button
 			[iconStart]="icon"
 			tuiButton
@@ -3702,12 +3728,13 @@ class EzUIPopoutMenu {
 						class="popsubdatalist"
 						[popsubdatalist]="items"
 						[itemTemplate]="itemTemplate"
-						(onItemClick)="dropdownOpen.set(false)">
+						(onItemClick)="dropdownOpen.set(false)"
+						[sender]="sender">
 					</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.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: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["itemTemplate", "popsubdatalist"], outputs: ["onItemClick"] }] });
+    `, 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.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: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["itemTemplate", "popsubdatalist", "sender"], outputs: ["onItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenu, decorators: [{
             type: Component,
@@ -3737,7 +3764,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 						class="popsubdatalist"
 						[popsubdatalist]="items"
 						[itemTemplate]="itemTemplate"
-						(onItemClick)="dropdownOpen.set(false)">
+						(onItemClick)="dropdownOpen.set(false)"
+						[sender]="sender">
 					</tui-data-list>
 				</div>
 			</ng-template>
@@ -3748,6 +3776,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: ['itemTemplate', { static: false }]
             }], items: [{
                 type: Input
+            }], sender: [{
+                type: Input
             }], icon: [{
                 type: Input
             }], label: [{
@@ -3895,7 +3925,7 @@ class EzUIOrderList {
 				</div>
 			}
 		</div>
-    `, isInline: true, styles: [".orderlist-container{height:100%;background-color:var(--tui-background-base-alt);border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);padding:5px}.tile{background:var(--tui-background-base);border-radius:var(--tui-radius-l);border:1px solid var(--tui-border-normal);display:flex;flex-direction:row;gap:5px;padding:5px}.tile .handle{align-self:center;cursor:grab}.tile .content,.tile .button-container{align-self:center}.cdk-drag-disabled{opacity:.7;-webkit-user-select:none;user-select:none}.cdk-drag-disabled .handle{align-self:center;cursor:not-allowed}.cdk-drag-preview{display:flex;background:var(--tui-background-base);border-radius:var(--tui-radius-l);border:1px solid var(--tui-border-normal)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }] });
+    `, isInline: true, styles: [".orderlist-container{height:100%;background-color:var(--tui-background-base-alt);border:2px solid var(--tui-border-normal);border-radius:var(--tui-radius-l);padding:5px}.tile{background:var(--tui-background-base);border-radius:var(--tui-radius-l);border:1px solid var(--tui-border-normal);display:flex;flex-direction:row;gap:5px;padding:5px}.tile .handle{align-self:center;cursor:grab}.tile .content,.tile .button-container{align-self:center}.cdk-drag-disabled{opacity:.7;-webkit-user-select:none;user-select:none}.cdk-drag-disabled .handle{align-self:center;cursor:not-allowed}.cdk-drag-preview{display:flex;background:var(--tui-background-base);border-radius:var(--tui-radius-l);border:1px solid var(--tui-border-normal)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i2$2.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: EzUIOrderList, decorators: [{
             type: Component,
@@ -4805,6 +4835,7 @@ class EzUITable {
     tableHeader;
     tableRows;
     tableExpandedrow;
+    actionsHeader;
     presetHeader;
     disabled = false;
     isLoading = signal(false, /* @ts-ignore */
@@ -4824,6 +4855,8 @@ class EzUITable {
     ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
     storageKey = null;
     allowPresets = false;
+    showContextMenu = false;
+    contextMenuItems = [];
     constructor(filterService) {
         this.filterService = filterService;
     }
@@ -4917,7 +4950,7 @@ class EzUITable {
         this.applyFilter();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITable, deps: [{ token: EzUITableFilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITable, isStandalone: true, selector: "ezui-table", inputs: { disabled: "disabled", isLoading: "isLoading", showAdd: "showAdd", showRefresh: "showRefresh", showClearFilters: "showClearFilters", expandable: "expandable", clickable: "clickable", values: "values", storageKey: "storageKey", allowPresets: "allowPresets", pageSize: "pageSize" }, outputs: { onAddItem: "onAddItem", onLoadItems: "onLoadItems", onRowExpanded: "onRowExpanded", onRowClick: "onRowClick", onPresetChange: "onPresetChange" }, host: { classAttribute: "w-full h-full" }, queries: [{ propertyName: "tableHeader", first: true, predicate: ["tableHeader"], descendants: true }, { propertyName: "tableRows", first: true, predicate: ["tableRows"], descendants: true }, { propertyName: "tableExpandedrow", first: true, predicate: ["tableExpandedrow"], descendants: true }], viewQueries: [{ propertyName: "presetHeader", first: true, predicate: ["presetHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUITable, isStandalone: true, selector: "ezui-table", inputs: { disabled: "disabled", isLoading: "isLoading", showAdd: "showAdd", showRefresh: "showRefresh", showClearFilters: "showClearFilters", expandable: "expandable", clickable: "clickable", values: "values", storageKey: "storageKey", allowPresets: "allowPresets", showContextMenu: "showContextMenu", contextMenuItems: "contextMenuItems", pageSize: "pageSize" }, outputs: { onAddItem: "onAddItem", onLoadItems: "onLoadItems", onRowExpanded: "onRowExpanded", onRowClick: "onRowClick", onPresetChange: "onPresetChange" }, host: { classAttribute: "w-full h-full" }, queries: [{ propertyName: "tableHeader", first: true, predicate: ["tableHeader"], descendants: true }, { propertyName: "tableRows", first: true, predicate: ["tableRows"], descendants: true }, { propertyName: "tableExpandedrow", first: true, predicate: ["tableExpandedrow"], descendants: true }, { propertyName: "actionsHeader", first: true, predicate: ["actionsHeader"], descendants: true }], viewQueries: [{ propertyName: "presetHeader", first: true, predicate: ["presetHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<div class="ezui-table">
 			<tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
 				@if(values === null || values.length == 0){
@@ -4942,7 +4975,7 @@ class EzUITable {
 					}
 				}
 				@else {
-					@if(showAdd || showRefresh || showClearFilters){
+					@if(showAdd || showRefresh || showClearFilters || actionsHeader || allowPresets){
 						<div class="ezui-table-header">
 							@if(showRefresh){
 								<button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
@@ -4953,6 +4986,9 @@ class EzUITable {
 							@if(showClearFilters){
 								<button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
 							}
+							@if(actionsHeader){
+								<ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
+							}
 
 							@if(allowPresets){
 								<div class="seperator"></div>
@@ -4986,24 +5022,63 @@ class EzUITable {
 							@for (item of displayValues(); track page() * pageSize() + i; let i = $index){
 								@let fullIndex = page() * pageSize() + i;
 								<tbody tuiTbody>
-									<tr [class]="{'rowrlickable':clickable}" (click)="onRowClick.emit(item)">
-										@if(expandable){
-											<td tuiTd class="ezui-table-expander">
-												<button
-													class="ezui-table-expander-button"
-													appearance="flat-grayscale"
-													size="xs"
-													tuiIconButton
-													type="button"
-													[tuiChevron]="state[fullIndex] ?? false"
-													(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
-												>
-													Toggle
-												</button>
-											</td>
-										}
-										<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
-									</tr>
+									@if(showContextMenu) {
+										<tr
+											[class]="{'rowrlickable':clickable}"
+											(click)="onRowClick.emit(item)"
+											#contextDropdown="tuiDropdown"
+											tuiDropdownContext
+											[tuiDropdown]="contextMenu"
+										>
+											@if(expandable){
+												<td tuiTd class="ezui-table-expander">
+													<button
+														class="ezui-table-expander-button"
+														appearance="flat-grayscale"
+														size="xs"
+														tuiIconButton
+														type="button"
+														[tuiChevron]="state[fullIndex] ?? false"
+														(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
+													>
+														Toggle
+													</button>
+												</td>
+											}
+											<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+
+											<ng-template #contextMenu let-close>
+												<div class="popdropdown">
+													<tui-data-list
+														class="popsubdatalist"
+														[popsubdatalist]="contextMenuItems"
+														(onItemClick)="close()"
+														[sender]="item">
+													</tui-data-list>
+												</div>
+											</ng-template>
+										</tr>
+									}
+									@else {
+										<tr [class]="{'rowrlickable':clickable}" (click)="onRowClick.emit(item)">
+											@if(expandable){
+												<td tuiTd class="ezui-table-expander">
+													<button
+														class="ezui-table-expander-button"
+														appearance="flat-grayscale"
+														size="xs"
+														tuiIconButton
+														type="button"
+														[tuiChevron]="state[fullIndex] ?? false"
+														(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
+													>
+														Toggle
+													</button>
+												</td>
+											}
+											<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+										</tr>
+									}
 								</tbody>
 
 								<tbody tuiTableExpand [expanded]="state[fullIndex] ?? false">
@@ -5031,11 +5106,11 @@ 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}.popdropdown{margin:10px}.popsubdatalist{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: 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: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownContext, selector: "[tuiDropdownContext]" }, { 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: i2$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card", "size"] }, { kind: "directive", type: i2$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"] }, { kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["itemTemplate", "popsubdatalist", "sender"], outputs: ["onItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUITable, decorators: [{
             type: Component,
-            args: [{ selector: 'ezui-table', imports: [FormsModule, CommonModule, TuiTable, TuiScrollbar, TuiButton, TuiChevron, TuiDropdown, TuiDataListWrapper, TuiTablePagination, TuiLoader, TuiBlockStatus, TuiIcon, TuiInput, EzUITablePresets, TuiHint], template: `
+            args: [{ selector: 'ezui-table', imports: [FormsModule, CommonModule, TuiTable, TuiScrollbar, TuiButton, TuiChevron, TuiDropdown, TuiDataListWrapper, TuiTablePagination, TuiLoader, TuiBlockStatus, TuiIcon, TuiInput, EzUITablePresets, TuiHint, EzUIPopoutMenuSubDataList], template: `
 		<div class="ezui-table">
 			<tui-loader [inheritColor]="true" [overlay]="true" size="xxl" [loading]="isLoading()">
 				@if(values === null || values.length == 0){
@@ -5060,7 +5135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					}
 				}
 				@else {
-					@if(showAdd || showRefresh || showClearFilters){
+					@if(showAdd || showRefresh || showClearFilters || actionsHeader || allowPresets){
 						<div class="ezui-table-header">
 							@if(showRefresh){
 								<button tuiButton iconStart="rotate-cw" size="s" appearance="info" (click)="onLoadItems.emit()" tuiHint="Refresh the table"></button>
@@ -5071,6 +5146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 							@if(showClearFilters){
 								<button tuiButton iconStart="funnel-x" size="s" appearance="info" (click)="clearFilters()" tuiHint="Clear filters"></button>
 							}
+							@if(actionsHeader){
+								<ng-container [ngTemplateOutlet]="actionsHeader"></ng-container>
+							}
 
 							@if(allowPresets){
 								<div class="seperator"></div>
@@ -5104,24 +5182,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 							@for (item of displayValues(); track page() * pageSize() + i; let i = $index){
 								@let fullIndex = page() * pageSize() + i;
 								<tbody tuiTbody>
-									<tr [class]="{'rowrlickable':clickable}" (click)="onRowClick.emit(item)">
-										@if(expandable){
-											<td tuiTd class="ezui-table-expander">
-												<button
-													class="ezui-table-expander-button"
-													appearance="flat-grayscale"
-													size="xs"
-													tuiIconButton
-													type="button"
-													[tuiChevron]="state[fullIndex] ?? false"
-													(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
-												>
-													Toggle
-												</button>
-											</td>
-										}
-										<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
-									</tr>
+									@if(showContextMenu) {
+										<tr
+											[class]="{'rowrlickable':clickable}"
+											(click)="onRowClick.emit(item)"
+											#contextDropdown="tuiDropdown"
+											tuiDropdownContext
+											[tuiDropdown]="contextMenu"
+										>
+											@if(expandable){
+												<td tuiTd class="ezui-table-expander">
+													<button
+														class="ezui-table-expander-button"
+														appearance="flat-grayscale"
+														size="xs"
+														tuiIconButton
+														type="button"
+														[tuiChevron]="state[fullIndex] ?? false"
+														(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
+													>
+														Toggle
+													</button>
+												</td>
+											}
+											<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+
+											<ng-template #contextMenu let-close>
+												<div class="popdropdown">
+													<tui-data-list
+														class="popsubdatalist"
+														[popsubdatalist]="contextMenuItems"
+														(onItemClick)="close()"
+														[sender]="item">
+													</tui-data-list>
+												</div>
+											</ng-template>
+										</tr>
+									}
+									@else {
+										<tr [class]="{'rowrlickable':clickable}" (click)="onRowClick.emit(item)">
+											@if(expandable){
+												<td tuiTd class="ezui-table-expander">
+													<button
+														class="ezui-table-expander-button"
+														appearance="flat-grayscale"
+														size="xs"
+														tuiIconButton
+														type="button"
+														[tuiChevron]="state[fullIndex] ?? false"
+														(click)="state[fullIndex] = !state[fullIndex];onRowExpanded.emit(item)"
+													>
+														Toggle
+													</button>
+												</td>
+											}
+											<ng-container [ngTemplateOutlet]="tableRows" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+										</tr>
+									}
 								</tbody>
 
 								<tbody tuiTableExpand [expanded]="state[fullIndex] ?? false">
@@ -5151,7 +5268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		</div>
     `, host: {
                         class: 'w-full h-full'
-                    }, 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"] }]
+                    }, 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}.popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: EzUITableFilterService }], propDecorators: { tableHeader: [{
                 type: ContentChild,
                 args: ['tableHeader', { static: false }]
@@ -5161,6 +5278,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }], tableExpandedrow: [{
                 type: ContentChild,
                 args: ['tableExpandedrow', { static: false }]
+            }], actionsHeader: [{
+                type: ContentChild,
+                args: ['actionsHeader', { static: false }]
             }], presetHeader: [{
                 type: ViewChild,
                 args: ['presetHeader', { static: false }]
@@ -5184,6 +5304,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], allowPresets: [{
                 type: Input
+            }], showContextMenu: [{
+                type: Input
+            }], contextMenuItems: [{
+                type: Input
             }], onAddItem: [{
                 type: Output
             }], onLoadItems: [{
@@ -6926,7 +7050,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: i2$2.TuiAsideGroupComponent, selector: "tui-aside-group", inputs: ["open"], outputs: ["openChange"] }, { kind: "directive", type: i2$2.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,
@@ -7167,7 +7291,7 @@ class EzUISideBar {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBar, deps: [{ token: EzUILayoutService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISideBar, deps: [{ token: EzUILayoutService }, { token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISideBar, isStandalone: true, selector: "ezui-sidebar", inputs: { sidebarItems: "sidebarItems", sidebarFooterItems: "sidebarFooterItems", baseRoute: "baseRoute" }, ngImport: i0, template: `
 		@if(layoutService.isDesktop()){
 			<aside style="height:100%" tuitheme="" [tuiNavigationAside]="layoutService.isMenuExpanded()">
@@ -7195,7 +7319,7 @@ class EzUISideBar {
 				</footer>
 			</aside>
 		}
-    `, isInline: true, styles: ["::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:4rem!important}::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:6rem!important}\n"], 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, styles: ["::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:4rem!important}::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:6rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2$2.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,
@@ -7227,7 +7351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 			</aside>
 		}
     `, styles: ["::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:4rem!important}::ng-deep tui-aside-group tui-expand tui-aside-group tui-expand tui-aside-group tui-expand [tuiAsideItem]{padding-inline-start:6rem!important}\n"] }]
-        }], ctorParameters: () => [{ type: EzUILayoutService }, { type: i2$2.Router }], propDecorators: { sidebarItems: [{
+        }], ctorParameters: () => [{ type: EzUILayoutService }, { type: i2$3.Router }], propDecorators: { sidebarItems: [{
                 type: Input
             }], sidebarFooterItems: [{
                 type: Input
@@ -7266,7 +7390,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: i2$2.TuiHeaderComponent, selector: "header[tuiNavigationHeader]" }, { kind: "component", type: i2$2.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,
@@ -7340,7 +7464,7 @@ class EzUILayout {
 			</div>
 		</div>
 	</tui-root>
-    `, isInline: true, styles: ["::ng-deep .rootContainer .t-root-content{display:flex;height:100vh;width:100vw}.layout-wrapper{display:flex;flex-direction:column;height:100vh;min-height:100vh;max-height:100vh}.layout-wrapper-split{display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;max-width:100vw}.layout-main-container{display:flex;flex-direction:column;min-height:inherit;max-height:inherit;width:100%;justify-content:space-between;overflow:hidden}.layout-main{flex:1 1 auto;display:flex}::ng-deep .layout-main>.t-content{padding:1rem;display:flex;block-size:auto!important;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EzUITopBar, selector: "ezui-topbar" }, { kind: "component", type: EzUISideBar, selector: "ezui-sidebar", inputs: ["sidebarItems", "sidebarFooterItems", "baseRoute"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: TuiRoot, selector: "tui-root" }] });
+    `, isInline: true, styles: ["::ng-deep .rootContainer .t-root-content{display:flex;height:100vh;width:100vw}.layout-wrapper{display:flex;flex-direction:column;height:100vh;min-height:100vh;max-height:100vh}.layout-wrapper-split{display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;max-width:100vw}.layout-main-container{display:flex;flex-direction:column;min-height:inherit;max-height:inherit;width:100%;justify-content:space-between;overflow:hidden}.layout-main{flex:1 1 auto;display:flex}::ng-deep .layout-main>.t-content{padding:1rem;display:flex;block-size:auto!important;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: EzUITopBar, selector: "ezui-topbar" }, { kind: "component", type: EzUISideBar, selector: "ezui-sidebar", inputs: ["sidebarItems", "sidebarFooterItems", "baseRoute"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }, { kind: "component", type: TuiRoot, selector: "tui-root" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUILayout, decorators: [{
             type: Component,