@progress/kendo-angular-editor 11.0.0-develop.101 → 11.0.0-develop.103

package/fesm2015/progress-kendo-angular-editor.mjs

@@ -35,7 +35,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673510696,
+    publishDate: 1673523577,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -1877,22 +1877,20 @@ EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </kendo-editor-format-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                #formatButton
+            <div #formatButton
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                type="button"
-                kendoButton
-                class="k-overflow-button"
-                [icon]="'apply-format'"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <span class="k-icon k-i-apply-format"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFormatComponent, decorators: [{
             type: Component,
             args: [{
@@ -1914,20 +1912,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-editor-format-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                #formatButton
-                [tabindex]="tabindex"
-                type="button"
-                kendoButton
-                class="k-overflow-button"
-                [icon]="'apply-format'"
-                [attr.title]="title"
-                [disabled]="disabled"
+            <div #formatButton
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <span class="k-icon k-i-apply-format"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
@@ -2216,8 +2212,16 @@ class EditorCommandButton extends EditorCommandBaseDirective {
         e.preventDefault();
     }
     onStateChange(toolBarState) {
-        this.button.selected = toolBarState[this.command].selected;
-        this.button.disabled = toolBarState[this.command].disabled;
+        if (this.button.overflows) {
+            setTimeout(() => {
+                this.button.selected = toolBarState[this.command].selected;
+                this.button.disabled = toolBarState[this.command].disabled;
+            });
+        }
+        else {
+            this.button.selected = toolBarState[this.command].selected;
+            this.button.disabled = toolBarState[this.command].disabled;
+        }
     }
 }
 
@@ -2588,8 +2592,16 @@ class EditorCommandDialog extends EditorCommandBaseDirective {
         this.editor.openDialog(this.dialog);
     }
     onStateChange(toolBarState) {
-        this.button.selected = toolBarState[this.command].selected;
-        this.button.disabled = toolBarState[this.command].disabled;
+        if (this.button.overflows) {
+            setTimeout(() => {
+                this.button.selected = toolBarState[this.command].selected;
+                this.button.disabled = toolBarState[this.command].disabled;
+            });
+        }
+        else {
+            this.button.selected = toolBarState[this.command].selected;
+            this.button.disabled = toolBarState[this.command].disabled;
+        }
     }
 }
 
@@ -3065,6 +3077,7 @@ class EditorComponent {
         if (this.resizable) {
             this.normalizeSize();
         }
+        this.toolbar.onResize();
     }
     ngOnChanges(changes) {
         if (changes['value'] && this.view) {
@@ -3637,7 +3650,7 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         </div>
 
         <ng-container #dialogsContainer></ng-container>
-    `, isInline: true, components: [{ type: i1$3.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i1$3.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i1$3.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }] });
+    `, isInline: true, components: [{ type: i1$3.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i1$3.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i1$3.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -4678,22 +4691,21 @@ EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </kendo-editor-fontsize-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #fontSizeButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #fontSizeButton
-                class="k-overflow-button"
-                [icon]="'font-size'"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <span class="k-icon k-i-font-size"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
             type: Component,
             args: [{
@@ -4715,20 +4727,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-editor-fontsize-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #fontSizeButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #fontSizeButton
-                class="k-overflow-button"
-                [icon]="'font-size'"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <span class="k-icon k-i-font-size"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
@@ -4903,22 +4914,21 @@ EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             </kendo-editor-fontfamily-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #fontFamilyButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #fontFamilyButton
-                class="k-overflow-button"
-                [icon]="'font-family'"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <span class="k-icon k-i-font-family"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
             type: Component,
             args: [{
@@ -4940,20 +4950,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-editor-fontfamily-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #fontFamilyButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #fontFamilyButton
-                class="k-overflow-button"
-                [icon]="'font-family'"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <span class="k-icon k-i-font-family"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
@@ -5109,12 +5118,13 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
      * @hidden
      */
     focus() {
+        var _a, _b;
         this.tabindex = 0;
         if (this.overflows) {
-            this.colorPickerButton.nativeElement.focus();
+            (_a = this.colorPickerButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
         }
         else {
-            !this.colorPicker.isOpen && this.colorPicker.focus();
+            !this.colorPicker.isOpen && ((_b = this.colorPicker) === null || _b === void 0 ? void 0 : _b.focus());
         }
     }
     /**
@@ -5124,6 +5134,12 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
         this.tabindex = -1;
         return false;
     }
+    /**
+     * @hidden
+     */
+    getIconClasses() {
+        return `k-icon k-i-${this.icon}`;
+    }
 }
 EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: EditorLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
 EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
@@ -5147,22 +5163,21 @@ EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             </kendo-colorpicker>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #colorPickerButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #colorPickerButton
-                class="k-overflow-button"
-                [icon]="icon"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <span *ngIf="icon" [ngClass]="getIconClasses()"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: i6.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -5189,20 +5204,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-colorpicker>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #colorPickerButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #colorPickerButton
-                class="k-overflow-button"
-                [icon]="icon"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <span *ngIf="icon" [ngClass]="getIconClasses()"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
@@ -5228,13 +5242,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['popupTemplate', { static: true }]
             }], element: [{
                 type: ViewChild,
-                args: ['colorpicker', { read: ElementRef, static: false }]
+                args: ['colorpicker', { read: ElementRef }]
             }], colorPicker: [{
                 type: ViewChild,
-                args: ['colorpicker', { read: ColorPickerComponent, static: false }]
+                args: ['colorpicker', { read: ColorPickerComponent }]
             }], colorPickerButton: [{
                 type: ViewChild,
-                args: ['colorPickerButton', { read: ElementRef, static: false }]
+                args: ['colorPickerButton', { read: ElementRef }]
             }] } });
 
 const popupWrapperWidth = '190px';
@@ -5391,21 +5405,23 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             ></button>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                kendoButton
-                #overflowElement
-                [attr.title]="title"
+            <div #overflowElement
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [attr.tabindex]="tabIndex"
-                icon="table-add"
-                [disabled]="disabled"
                 (click)="openDialog()">
-                {{ title }}
-            </button>
+                <span
+                    class="k-link k-menu-link">
+                    <span class="k-icon k-i-table-add"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
         <ng-template #popupGridTemplate>
             <kendo-popup-table-grid (cellClick)="onCellClick($event)" (tableWizardClick)="onTableWizardClick()"></kendo-popup-table-grid>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }] });
+    `, isInline: true, components: [{ type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorInsertTableButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -5426,16 +5442,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             ></button>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                kendoButton
-                #overflowElement
-                [attr.title]="title"
+            <div #overflowElement
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [attr.tabindex]="tabIndex"
-                icon="table-add"
-                [disabled]="disabled"
                 (click)="openDialog()">
-                {{ title }}
-            </button>
+                <span
+                    class="k-link k-menu-link">
+                    <span class="k-icon k-i-table-add"></span>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
         <ng-template #popupGridTemplate>
             <kendo-popup-table-grid (cellClick)="onCellClick($event)" (tableWizardClick)="onTableWizardClick()"></kendo-popup-table-grid>