@kris701/ez-ui 1.3.11 → 1.3.13

package/fesm2022/kris701-ez-ui.mjs

@@ -476,6 +476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class EzUIFileInput {
     files = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    filesChange = new EventEmitter();
     disabled = false;
     accept = "*/*";
     clear() {
@@ -486,6 +487,7 @@ class EzUIFileInput {
             this.files.set([files]);
         else
             this.files.set(files);
+        this.filesChange.emit(this.files());
     }
     removeFile(file) {
         const files = this.files();
@@ -496,7 +498,7 @@ class EzUIFileInput {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIFileInput, isStandalone: true, selector: "ezui-fileinput", inputs: { disabled: "disabled", accept: "accept" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIFileInput, isStandalone: true, selector: "ezui-fileinput", inputs: { disabled: "disabled", accept: "accept" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: `
 		<label tuiInputFiles>
 			<input
 				#validator="tuiInputFilesValidator"
@@ -547,7 +549,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 		</tui-files>
 	`
                 }]
-        }], propDecorators: { disabled: [{
+        }], propDecorators: { filesChange: [{
+                type: Output
+            }], disabled: [{
                 type: Input
             }], accept: [{
                 type: Input
@@ -2481,143 +2485,21 @@ class EzUIMenuBarSubDataList {
     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
-					class="subdatalistitem"
-					tuiOption
-					tuiChevron
-					[iconStart]="item.icon"
-					[disabled]="item.disabled"
-					[tuiDropdown]="dropdownContent"
-					[(tuiDropdownOpen)]="item.expanded"
-					tuiDropdownLimitWidth="fixed"
-					tuiDropdownSided="true"
-					[style]="item.style"
-				>
-					@if(menuItemTemplate){
-						<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
-					}
-					@else {
-						{{item.label}}
-					}
-				</button>
-
-				<ng-template #dropdownContent>
-					<tui-data-list
-						class="subdatalist"
-						[subdatalist]="item.items">
-					</tui-data-list>
-				</ng-template>
-			}
-			@else {
-				<button
-					class="subdatalistitem"
-					tuiOption
-					[iconStart]="item.icon"
-					[disabled]="item.disabled"
-					(click)="item.command()"
-					[style]="item.style"
-				>
-					@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: ["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
-                    ], template: `
-		@for(item of subdatalist; 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(menuItemTemplate){
-						<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
-					}
-					@else {
-						{{item.label}}
-					}
-				</button>
-
-				<ng-template #dropdownContent>
-					<tui-data-list
-						class="subdatalist"
-						[subdatalist]="item.items">
-					</tui-data-list>
-				</ng-template>
-			}
-			@else {
-				<button
-					class="subdatalistitem"
-					tuiOption
-					[iconStart]="item.icon"
-					[disabled]="item.disabled"
-					(click)="item.command()"
-					[style]="item.style"
-				>
-					@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: { menuItemTemplate: [{
-                type: Input
-            }], subdatalist: [{
-                type: Input
-            }] } });
-class EzUIMenuBar {
-    itemTemplate;
-    menuItemTemplate;
-    items = [];
-    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: `
-		<div tuiGroup class="group" [collapsed]="true">
-			@for(item of items; track $index){
-				@if(item.items){
+				@if(!item.hidden){
 					<button
-						tuiButton
+						class="subdatalistitem"
+						tuiOption
 						tuiChevron
-						size="s"
-						appearance="outline"
-						type="button"
 						[iconStart]="item.icon"
 						[disabled]="item.disabled"
 						[tuiDropdown]="dropdownContent"
 						[(tuiDropdownOpen)]="item.expanded"
-						tuiDropdownLimitWidth="fixed"
+						tuiDropdownLimitWidth="auto"
+						tuiDropdownSided="true"
 						[style]="item.style"
 					>
-						@if(itemTemplate){
-							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						@if(menuItemTemplate){
+							<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
 						}
 						@else {
 							{{item.label}}
@@ -2627,24 +2509,23 @@ class EzUIMenuBar {
 					<ng-template #dropdownContent>
 						<tui-data-list
 							class="subdatalist"
-							[subdatalist]="item.items"
-							[menuItemTemplate]="menuItemTemplate">
+							[subdatalist]="item.items">
 						</tui-data-list>
 					</ng-template>
 				}
-				@else {
+			}
+			@else {
+				@if(!item.hidden){
 					<button
-						appearance="outline"
-						size="s"
-						tuiButton
-						type="button"
+						class="subdatalistitem"
+						tuiOption
 						[iconStart]="item.icon"
 						[disabled]="item.disabled"
-						(click)="item.command()"
+						(click)="item.command(item)"
 						[style]="item.style"
 					>
-						@if(itemTemplate){
-							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						@if(menuItemTemplate){
+							<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
 						}
 						@else {
 							{{item.label}}
@@ -2652,38 +2533,34 @@ class EzUIMenuBar {
 					</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: 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"] }] });
+		}
+    `, 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"] }, { 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: EzUIMenuBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBarSubDataList, decorators: [{
             type: Component,
-            args: [{ selector: 'ezui-menubar', standalone: true, imports: [
-                        FormsModule,
+            args: [{ selector: 'tui-data-list[subdatalist]', standalone: true, imports: [
                         CommonModule,
-                        TuiGroup,
-                        TuiButton,
                         TuiDropdown,
-                        TuiChevron,
-                        EzUIMenuBarSubDataList
+                        TuiOption,
+                        TuiChevron
                     ], template: `
-		<div tuiGroup class="group" [collapsed]="true">
-			@for(item of items; track $index){
-				@if(item.items){
+		@for(item of subdatalist; track $index){
+			@if(item.items){
+				@if(!item.hidden){
 					<button
-						tuiButton
+						class="subdatalistitem"
+						tuiOption
 						tuiChevron
-						size="s"
-						appearance="outline"
-						type="button"
 						[iconStart]="item.icon"
 						[disabled]="item.disabled"
 						[tuiDropdown]="dropdownContent"
 						[(tuiDropdownOpen)]="item.expanded"
-						tuiDropdownLimitWidth="fixed"
+						tuiDropdownLimitWidth="auto"
+						tuiDropdownSided="true"
 						[style]="item.style"
 					>
-						@if(itemTemplate){
-							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						@if(menuItemTemplate){
+							<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
 						}
 						@else {
 							{{item.label}}
@@ -2693,24 +2570,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					<ng-template #dropdownContent>
 						<tui-data-list
 							class="subdatalist"
-							[subdatalist]="item.items"
-							[menuItemTemplate]="menuItemTemplate">
+							[subdatalist]="item.items">
 						</tui-data-list>
 					</ng-template>
 				}
-				@else {
+			}
+			@else {
+				@if(!item.hidden){
 					<button
-						appearance="outline"
-						size="s"
-						tuiButton
-						type="button"
+						class="subdatalistitem"
+						tuiOption
 						[iconStart]="item.icon"
 						[disabled]="item.disabled"
-						(click)="item.command()"
+						(click)="item.command(item)"
 						[style]="item.style"
 					>
-						@if(itemTemplate){
-							<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
+						@if(menuItemTemplate){
+							<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item  }"></ng-container>
 						}
 						@else {
 							{{item.label}}
@@ -2718,8 +2594,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 					</button>
 				}
 			}
+		}
+    `, styles: [".subdatalist{display:flex;flex-direction:column;padding:10px}.subdatalistitem{padding:0 10px!important}\n"] }]
+        }], propDecorators: { menuItemTemplate: [{
+                type: Input
+            }], subdatalist: [{
+                type: Input
+            }] } });
+class EzUIMenuBar {
+    itemTemplate;
+    menuItemTemplate;
+    items = [];
+    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: `
+		<div tuiGroup class="group" [collapsed]="true">
+			@for(item of items; track $index){
+				@if(item.items){
+					@if(!item.hidden){
+						<button
+							tuiButton
+							tuiChevron
+							size="s"
+							appearance="outline"
+							type="button"
+							[iconStart]="item.icon"
+							[disabled]="item.disabled"
+							[tuiDropdown]="dropdownContent"
+							[(tuiDropdownOpen)]="item.expanded"
+							tuiDropdownLimitWidth="auto"
+							[style]="item.style"
+						>
+							@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"
+								[menuItemTemplate]="menuItemTemplate">
+							</tui-data-list>
+						</ng-template>
+					}
+				}
+				@else {
+					@if(!item.hidden){
+						<button
+							appearance="outline"
+							size="s"
+							tuiButton
+							type="button"
+							[iconStart]="item.icon"
+							[disabled]="item.disabled"
+							(click)="item.command(item)"
+							[style]="item.style"
+						>
+							@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;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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ezui-menubar', standalone: true, imports: [
+                        FormsModule,
+                        CommonModule,
+                        TuiGroup,
+                        TuiButton,
+                        TuiDropdown,
+                        TuiChevron,
+                        EzUIMenuBarSubDataList
+                    ], template: `
+		<div tuiGroup class="group" [collapsed]="true">
+			@for(item of items; track $index){
+				@if(item.items){
+					@if(!item.hidden){
+						<button
+							tuiButton
+							tuiChevron
+							size="s"
+							appearance="outline"
+							type="button"
+							[iconStart]="item.icon"
+							[disabled]="item.disabled"
+							[tuiDropdown]="dropdownContent"
+							[(tuiDropdownOpen)]="item.expanded"
+							tuiDropdownLimitWidth="auto"
+							[style]="item.style"
+						>
+							@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"
+								[menuItemTemplate]="menuItemTemplate">
+							</tui-data-list>
+						</ng-template>
+					}
+				}
+				@else {
+					@if(!item.hidden){
+						<button
+							appearance="outline"
+							size="s"
+							tuiButton
+							type="button"
+							[iconStart]="item.icon"
+							[disabled]="item.disabled"
+							(click)="item.command(item)"
+							[style]="item.style"
+						>
+							@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"] }]
+    `, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column;padding:10px}\n"] }]
         }], propDecorators: { itemTemplate: [{
                 type: ContentChild,
                 args: ['itemTemplate', { static: false }]
@@ -2743,19 +2763,26 @@ class EzUIMarkdownEditor {
     isFirst = true;
     isEditing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+    additionalMenuBarItemsRoot = {
+        icon: 'plus',
+        items: [],
+        hidden: true,
+        style: 'border-bottom-right-radius: 0px !important;border-top-right-radius: 0px !important;'
+    };
+    additionalMenuBarItems = [];
     items = signal([
         {
             icon: 'save',
-            command: async () => await this.toggleEdit(true),
+            command: async (e) => await this.toggleEdit(true),
             style: 'border-bottom-left-radius: 0px !important;'
         },
         {
             icon: 'x',
-            command: async () => await this.toggleEdit(false)
+            command: async (e) => await this.toggleEdit(false)
         },
         {
             label: 'B',
-            command: async () => {
+            command: async (e) => {
                 if (this.editor) {
                     const editor = this.editor.nativeElement;
                     const start = editor.selectionStart;
@@ -2768,7 +2795,7 @@ class EzUIMarkdownEditor {
         },
         {
             label: 'I',
-            command: async () => {
+            command: async (e) => {
                 if (this.editor) {
                     const editor = this.editor.nativeElement;
                     const start = editor.selectionStart;
@@ -2784,7 +2811,7 @@ class EzUIMarkdownEditor {
             items: [
                 {
                     label: 'H1',
-                    command: async () => {
+                    command: async (e) => {
                         if (this.editor) {
                             const editor = this.editor.nativeElement;
                             const start = editor.selectionStart;
@@ -2797,7 +2824,7 @@ class EzUIMarkdownEditor {
                 },
                 {
                     label: 'H2',
-                    command: async () => {
+                    command: async (e) => {
                         if (this.editor) {
                             const editor = this.editor.nativeElement;
                             const start = editor.selectionStart;
@@ -2810,7 +2837,7 @@ class EzUIMarkdownEditor {
                 },
                 {
                     label: 'H3',
-                    command: async () => {
+                    command: async (e) => {
                         if (this.editor) {
                             const editor = this.editor.nativeElement;
                             const start = editor.selectionStart;
@@ -2825,7 +2852,7 @@ class EzUIMarkdownEditor {
         },
         {
             icon: 'link',
-            command: async () => {
+            command: async (e) => {
                 if (this.editor) {
                     const editor = this.editor.nativeElement;
                     const start = editor.selectionStart;
@@ -2838,13 +2865,14 @@ class EzUIMarkdownEditor {
         },
         {
             icon: 'image',
-            command: async () => {
+            command: async (e) => {
                 if (this.editor) {
                     this.fileUpload?.nativeElement.click();
                 }
             },
             style: 'border-bottom-right-radius: 0px !important;border-top-right-radius: 0px !important;'
         },
+        this.additionalMenuBarItemsRoot,
     ], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     async onFileSelected(event) {
@@ -2904,6 +2932,15 @@ class EzUIMarkdownEditor {
                 }
             }
         }
+        if (changes['additionalMenuBarItems']) {
+            if (changes['additionalMenuBarItems'].currentValue != changes['additionalMenuBarItems'].previousValue) {
+                this.additionalMenuBarItemsRoot.items = this.additionalMenuBarItems;
+                this.additionalMenuBarItemsRoot.hidden =
+                    this.additionalMenuBarItems.length == 0 ||
+                        this.additionalMenuBarItems.filter(x => !x.hidden).length == 0;
+                console.log(this.items());
+            }
+        }
     }
     async formatPreview() {
         if (this.preview) {
@@ -2925,7 +2962,7 @@ class EzUIMarkdownEditor {
         setTimeout(async () => await this.formatPreview(), 500);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMarkdownEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMarkdownEditor, isStandalone: true, selector: "ezui-markdowneditor", inputs: { disabled: "disabled", slim: "slim", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "flex w-full" }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMarkdownEditor, isStandalone: true, selector: "ezui-markdowneditor", inputs: { disabled: "disabled", slim: "slim", value: "value", additionalMenuBarItems: "additionalMenuBarItems" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "flex w-full" }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		@if(isEditing() && !disabled){
 			<div class="editor-container">
 				<div class="editor">
@@ -3047,6 +3084,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], additionalMenuBarItems: [{
+                type: Input
             }] } });
 
 class EzUIMultiSelect {
@@ -3476,52 +3515,56 @@ class EzUIPopoutMenuSubDataList {
     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>
+				@if(!item.hidden){
+					<button
+						class="subdatalistitem"
+						tuiOption
+						tuiChevron
+						[iconStart]="item.icon"
+						[disabled]="item.disabled"
+						[tuiDropdown]="dropdownContent"
+						[(tuiDropdownOpen)]="item.expanded"
+						tuiDropdownLimitWidth="auto"
+						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>
+					<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>
+				@if(!item.hidden){
+					<button
+						class="subdatalistitem"
+						tuiOption
+						[iconStart]="item.icon"
+						[disabled]="item.disabled"
+						(click)="item.command(item)"
+						[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"] }] });
@@ -3536,52 +3579,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     ], 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>
+				@if(!item.hidden){
+					<button
+						class="subdatalistitem"
+						tuiOption
+						tuiChevron
+						[iconStart]="item.icon"
+						[disabled]="item.disabled"
+						[tuiDropdown]="dropdownContent"
+						[(tuiDropdownOpen)]="item.expanded"
+						tuiDropdownLimitWidth="auto"
+						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>
+					<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>
+				@if(!item.hidden){
+					<button
+						class="subdatalistitem"
+						tuiOption
+						[iconStart]="item.icon"
+						[disabled]="item.disabled"
+						(click)="item.command(item)"
+						[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"] }]
@@ -3615,6 +3662,7 @@ class EzUIPopoutMenu {
 			[appearance]="appearance"
 			[tuiAppearanceState]="dropdownOpen() ? 'active' : null"
 			[tuiDropdown]="dropdownContent"
+			tuiDropdownLimitWidth="auto"
 			[(tuiDropdownOpen)]="dropdownOpen"
 			(click)="onMenuOpen.emit(dropdownOpen())"
 		>
@@ -3629,7 +3677,7 @@ class EzUIPopoutMenu {
 				</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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenu, decorators: [{
             type: Component,
@@ -3648,6 +3696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 			[appearance]="appearance"
 			[tuiAppearanceState]="dropdownOpen() ? 'active' : null"
 			[tuiDropdown]="dropdownContent"
+			tuiDropdownLimitWidth="auto"
 			[(tuiDropdownOpen)]="dropdownOpen"
 			(click)="onMenuOpen.emit(dropdownOpen())"
 		>
@@ -4295,16 +4344,18 @@ class EzUIShowMoreText {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIShowMoreText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: EzUIShowMoreText, isStandalone: true, selector: "ezui-showmoretext", inputs: { value: "value", maxCharacters: "maxCharacters" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIShowMoreText, isStandalone: true, selector: "ezui-showmoretext", inputs: { value: "value", maxCharacters: "maxCharacters" }, usesOnChanges: true, ngImport: i0, template: `
 		<tui-elastic-container>
 			<div [innerHTML]="current()"></div>
-			<button
-				tuiLink
-				type="button"
-				(click)="toggle()"
-			>
-				Show {{ current() === value ? 'less' : 'more' }}
-			</button>
+			@if(value.length > maxCharacters){
+				<button
+					tuiLink
+					type="button"
+					(click)="toggle()"
+				>
+					Show {{ current() === value ? 'less' : 'more' }}
+				</button>
+			}
 		</tui-elastic-container>
     `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }] });
 }
@@ -4318,13 +4369,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     ], template: `
 		<tui-elastic-container>
 			<div [innerHTML]="current()"></div>
-			<button
-				tuiLink
-				type="button"
-				(click)="toggle()"
-			>
-				Show {{ current() === value ? 'less' : 'more' }}
-			</button>
+			@if(value.length > maxCharacters){
+				<button
+					tuiLink
+					type="button"
+					(click)="toggle()"
+				>
+					Show {{ current() === value ? 'less' : 'more' }}
+				</button>
+			}
 		</tui-elastic-container>
     ` }]
         }], propDecorators: { value: [{