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

package/fesm2020/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/'
 };
@@ -1881,22 +1881,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: [{
@@ -1918,20 +1916,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>
     `
                 }]
@@ -2218,8 +2214,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;
+        }
     }
 }
 
@@ -2590,8 +2594,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;
+        }
     }
 }
 
@@ -3067,6 +3079,7 @@ class EditorComponent {
         if (this.resizable) {
             this.normalizeSize();
         }
+        this.toolbar.onResize();
     }
     ngOnChanges(changes) {
         if (changes['value'] && this.view) {
@@ -3639,7 +3652,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: [{
@@ -4680,22 +4693,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: [{
@@ -4717,20 +4729,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>
     `
                 }]
@@ -4905,22 +4916,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: [{
@@ -4942,20 +4952,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>
     `
                 }]
@@ -5113,10 +5122,10 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
     focus() {
         this.tabindex = 0;
         if (this.overflows) {
-            this.colorPickerButton.nativeElement.focus();
+            this.colorPickerButton?.nativeElement.focus();
         }
         else {
-            !this.colorPicker.isOpen && this.colorPicker.focus();
+            !this.colorPicker.isOpen && this.colorPicker?.focus();
         }
     }
     /**
@@ -5126,6 +5135,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: `
@@ -5149,22 +5164,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: [{
@@ -5191,20 +5205,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>
     `
                 }]
@@ -5230,13 +5243,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';
@@ -5393,21 +5406,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: [{
@@ -5428,16 +5443,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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-editor",
-  "version": "11.0.0-develop.101",
+  "version": "11.0.0-develop.103",
   "description": "Kendo UI Editor for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,17 +23,17 @@
     "@progress/kendo-drawing": "^1.5.12",
     "@progress/kendo-editor-common": "1.9.3",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "11.0.0-develop.101",
-    "@progress/kendo-angular-common": "11.0.0-develop.101",
-    "@progress/kendo-angular-dialog": "11.0.0-develop.101",
-    "@progress/kendo-angular-dropdowns": "11.0.0-develop.101",
-    "@progress/kendo-angular-inputs": "11.0.0-develop.101",
-    "@progress/kendo-angular-intl": "11.0.0-develop.101",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.101",
-    "@progress/kendo-angular-layout": "11.0.0-develop.101",
-    "@progress/kendo-angular-popup": "11.0.0-develop.101",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.101",
-    "@progress/kendo-angular-toolbar": "11.0.0-develop.101",
+    "@progress/kendo-angular-buttons": "11.0.0-develop.103",
+    "@progress/kendo-angular-common": "11.0.0-develop.103",
+    "@progress/kendo-angular-dialog": "11.0.0-develop.103",
+    "@progress/kendo-angular-dropdowns": "11.0.0-develop.103",
+    "@progress/kendo-angular-inputs": "11.0.0-develop.103",
+    "@progress/kendo-angular-intl": "11.0.0-develop.103",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.103",
+    "@progress/kendo-angular-layout": "11.0.0-develop.103",
+    "@progress/kendo-angular-popup": "11.0.0-develop.103",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.103",
+    "@progress/kendo-angular-toolbar": "11.0.0-develop.103",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {

package/tools/colorpicker/editor-colorpicker.component.d.ts

@@ -108,6 +108,10 @@ export declare class EditorColorPickerComponent extends ToolBarToolComponent {
      * @hidden
      */
     handleKey(): boolean;
+    /**
+     * @hidden
+     */
+    getIconClasses(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorColorPickerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EditorColorPickerComponent, "kendo-toolbar-colorpicker", never, { "value": "value"; "icon": "icon"; "paletteSettings": "paletteSettings"; "editorCommand": "editorCommand"; "disabled": "disabled"; "views": "views"; "view": "view"; }, {}, never, never>;
 }