@progress/kendo-angular-editor 11.0.0-develop.99 → 11.0.0

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

@@ -3,8 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Optional, Component, Input, ViewChild, ElementRef, Directive, EventEmitter, Output, forwardRef, InjectionToken, isDevMode, ViewContainerRef, HostBinding, ContentChild, NgModule } from '@angular/core';
-import * as i4$1 from '@angular/forms';
+import { Injectable, Inject, Optional, Component, Input, ViewChild, Directive, EventEmitter, Output, forwardRef, ElementRef, InjectionToken, isDevMode, ViewContainerRef, HostBinding, ContentChild, NgModule } from '@angular/core';
+import * as i6 from '@angular/forms';
 import { FormControl, Validators, FormGroup, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Subject, BehaviorSubject, zip, fromEvent, interval } from 'rxjs';
 import { take, map, filter as filter$1, concatMap, takeUntil } from 'rxjs/operators';
@@ -16,16 +16,21 @@ import { isDocumentAvailable, guid, hasObservers, KendoInput, Keys } from '@prog
 import { marks as marks$1, nodes as nodes$1, Schema, createTable, insertNode, alignBlocks, alignRemoveRules, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, selectAll, isAligned, alignCenterRules, alignJustifyRules, alignLeftRules, alignRightRules, formatBlockElements, getHtml, indent, insertImage, toggleOrderedList, toggleUnorderedList, outdent, redo, setHtml, undo, blockquote, addColumnBefore, addColumnAfter, addRowBefore, addRowAfter, deleteRow, deleteColumn, mergeCells, splitCell, deleteTable, hasMark, activeNode, canIndentAsListItem, canBeIndented, indentRules, hasNode, canOutdentAsListItem, outdentRules, isIndented, getActiveMarks, expandSelection, getSelectionText as getSelectionText$1, getNodeFromSelection, getMark, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr, pasteCleanup, parseContent, AllSelection, TextSelection, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, tableResizing, tableEditing, caretColor, placeholder, EditorState, EditorView } from '@progress/kendo-editor-common';
 export { Decoration, DecorationSet, EditorState, EditorView, InputRule, Mark, MarkType, Node, NodeType, Plugin, PluginKey, Schema, Transaction, baseKeymap, dropCursor, gapCursor, history, inputRules, keymap, tableNodes, textblockTypeInputRule, wrappingInputRule } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
+import * as i4 from '@progress/kendo-angular-inputs';
+import { ColorPickerComponent, ColorPickerModule, NumericTextBoxModule, CheckBoxModule, TextBoxModule, TextAreaModule } from '@progress/kendo-angular-inputs';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
-import * as i4 from '@progress/kendo-angular-buttons';
+import * as i4$1 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
-import * as i3 from '@angular/common';
+import * as i3 from '@progress/kendo-angular-label';
+import { LabelModule } from '@progress/kendo-angular-label';
+import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i6 from '@progress/kendo-angular-inputs';
-import { ColorPickerComponent, ColorPickerModule, NumericTextBoxModule, CheckBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i1$2 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { applyFormatIcon, alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, dropletIcon, rightDoubleQuotesIcon, boldIcon, clearCssIcon, linkIcon, foregroundColorIcon, indentIcon, fileAddIcon, fileImageIcon, listOrderedIcon, listUnorderedIcon, italicIcon, outdentIcon, printIcon, redoIcon, selectAllIcon, strikethroughIcon, subscriptIcon, supscriptIcon, underlineIcon, undoIcon, unlinkIcon, codeSnippetIcon, tableAddIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, cellsMergeIcon, cellSplitHorizontallyIcon, tableDeleteIcon, tableWizardIcon, fontSizeIcon, fontFamilyIcon } from '@progress/kendo-svg-icons';
+import * as i6$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i2 from '@progress/kendo-angular-popup';
 
 /**
@@ -35,8 +40,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673467013,
-    version: '',
+    publishDate: 1674032463,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -664,7 +669,7 @@ class SourceDialogComponent extends DialogContentBase {
     }
     ngAfterViewInit() {
         Promise.resolve(null).then(() => {
-            this.textarea.nativeElement.focus();
+            this.textarea.focus();
         });
     }
     onCancelAction() {
@@ -676,7 +681,7 @@ class SourceDialogComponent extends DialogContentBase {
         this.editor.view.focus();
     }
     getData() {
-        return this.textarea.nativeElement.value;
+        return this.textarea.value;
     }
     setData() {
         this.data = this.indent(this.editor.getSource());
@@ -697,12 +702,12 @@ SourceDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('viewSource') }}
         </kendo-dialog-titlebar>
-        <textarea [value]="data" #textarea class="k-textarea k-editor-textarea" [style.height.%]="100"></textarea>
+        <kendo-textarea [value]="data" #textarea [style.height.%]="100"></kendo-textarea>
         <kendo-dialog-actions>
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogUpdate') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i4.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4$1.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SourceDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -710,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('viewSource') }}
         </kendo-dialog-titlebar>
-        <textarea [value]="data" #textarea class="k-textarea k-editor-textarea" [style.height.%]="100"></textarea>
+        <kendo-textarea [value]="data" #textarea [style.height.%]="100"></kendo-textarea>
         <kendo-dialog-actions>
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogUpdate') }}</button>
@@ -757,7 +762,7 @@ class ImageDialogComponent extends DialogContentBase {
     }
     ngAfterViewInit() {
         Promise.resolve(null).then(() => {
-            this.srcInput.nativeElement.focus();
+            this.srcInput.focus();
         });
     }
     onCancelAction() {
@@ -795,46 +800,50 @@ class ImageDialogComponent extends DialogContentBase {
     }
 }
 ImageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertImage') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content">
-                    <div class="k-edit-label">
-                        <label [for]="srcInputId">{{ textFor('imageWebAddress') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="srcInputId" #srcInput [formControl]="src" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="altTextInputId">{{ textFor('imageAltText') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="altTextInputId" [formControl]="alt" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="widthInputId">{{ textFor('imageWidth') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="widthInputId" [formControl]="width" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="heightInputId">{{ textFor('imageHeight') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="heightInputId" [formControl]="height" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
+        <div class="k-form k-form-md k-form-horizontal">
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="srcInput" [text]="textFor('imageWebAddress')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #srcInput [formControl]="src"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="altTextInput" [text]="textFor('imageAltText')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #altTextInput [formControl]="alt"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="widthInput" [text]="textFor('imageWidth')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #widthInput [formControl]="width"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="heightInput" [text]="textFor('imageHeight')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #heightInput [formControl]="height"></kendo-textbox>
                 </div>
             </div>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton [disabled]="imageData.invalid"
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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"] }], directives: [{ type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4$1.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"] }], directives: [{ type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -842,37 +851,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertImage') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content">
-                    <div class="k-edit-label">
-                        <label [for]="srcInputId">{{ textFor('imageWebAddress') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="srcInputId" #srcInput [formControl]="src" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="altTextInputId">{{ textFor('imageAltText') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="altTextInputId" [formControl]="alt" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="widthInputId">{{ textFor('imageWidth') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="widthInputId" [formControl]="width" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="heightInputId">{{ textFor('imageHeight') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="heightInputId" [formControl]="height" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
+        <div class="k-form k-form-md k-form-horizontal">
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="srcInput" [text]="textFor('imageWebAddress')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #srcInput [formControl]="src"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="altTextInput" [text]="textFor('imageAltText')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #altTextInput [formControl]="alt"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="widthInput" [text]="textFor('imageWidth')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #widthInput [formControl]="width"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="heightInput" [text]="textFor('imageHeight')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #heightInput [formControl]="height"></kendo-textbox>
                 </div>
             </div>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton [disabled]="imageData.invalid"
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
@@ -883,7 +896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], srcInput: [{
                 type: ViewChild,
-                args: ['srcInput', { read: ElementRef, static: true }]
+                args: ['srcInput']
             }] } });
 
 /**
@@ -902,7 +915,7 @@ class FileLinkDialogComponent extends DialogContentBase {
     }
     ngAfterViewInit() {
         Promise.resolve(null).then(() => {
-            this.hrefInput.nativeElement.focus();
+            this.hrefInput.focus();
         });
     }
     onCancelAction() {
@@ -975,52 +988,52 @@ class FileLinkDialogComponent extends DialogContentBase {
     }
 }
 FileLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileLinkDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FileLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileLinkDialogComponent, selector: "ng-component", inputs: { editor: "editor", command: "command" }, viewQueries: [{ propertyName: "hrefInput", first: true, predicate: ["hrefInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+FileLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileLinkDialogComponent, selector: "ng-component", inputs: { editor: "editor", command: "command" }, viewQueries: [{ propertyName: "hrefInput", first: true, predicate: ["hrefInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ titleText }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content">
-                    <form novalidate [formGroup]="linkForm">
-                        <div class="k-edit-label">
-                            <label (click)="hrefInput.focus()">{{ textForWithPrefix('WebAddress') }}</label>
-                        </div>
-                        <div class="k-edit-field">
-                            <input #hrefInput formControlName="href" type="text" class="k-textbox k-input k-rounded-md" />
-                        </div>
-
-                        <div class="k-edit-label">
-                            <label (click)="textInput.focus()">{{ textForWithPrefix('Text') }}</label>
-                        </div>
-                        <div class="k-edit-field">
-                            <input #textInput formControlName="text" type="text" class="k-textbox k-input k-rounded-md" />
-                        </div>
-
-                        <div class="k-edit-label">
-                            <label (click)="titleInput.focus()">{{ textForWithPrefix('Title') }}</label>
-                        </div>
-                        <div class="k-edit-field">
-                            <input #titleInput formControlName="title" type="text" class="k-textbox k-input k-rounded-md" />
-                        </div>
-                        <ng-container *ngIf="command === 'createLink'">
-                            <div class="k-edit-label"></div>
-                            <div class="k-edit-field">
-                                <input type="checkbox" id="k-target-blank" kendoCheckBox formControlName="target" />
-                                <label class="k-checkbox-label" for="k-target-blank">{{ textForWithPrefix('OpenInNewWindow') }}</label>
-                            </div>
-                        </ng-container>
-                    </form>
+        <form class="k-form k-form-md k-form-horizontal" novalidate [formGroup]="linkForm">
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="hrefInput" [text]="textForWithPrefix('WebAddress')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #hrefInput formControlName="href"></kendo-textbox>
                 </div>
             </div>
-        </div>
-        <kendo-dialog-actions>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="textInput" [text]="textForWithPrefix('Text')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #textInput formControlName="text"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="titleInput" [text]="textForWithPrefix('Title')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #titleInput formControlName="title"></kendo-textbox>
+                </div>
+            </div>
+            <ng-container *ngIf="command === 'createLink'">
+                <div class="k-form-field">
+                    <div class="k-form-label"></div>
+                    <div class="k-form-field-wrap">
+                        <input type="checkbox" id="k-target-blank" kendoCheckBox formControlName="target" />
+                        <label class="k-checkbox-label" for="k-target-blank" [style.display]="'inline'">{{ textForWithPrefix('OpenInNewWindow') }}</label>
+                    </div>
+                </div>
+            </ng-container>
+        </form>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton [disabled]="linkForm.invalid" (click)="onConfirmAction()" [primary]="true">
                 {{ textFor('dialogInsert') }}
             </button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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"] }], directives: [{ type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }] });
+    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4$1.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"] }], directives: [{ type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i3.LabelDirective, selector: "label[for]", inputs: ["for"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileLinkDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -1028,42 +1041,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ titleText }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content">
-                    <form novalidate [formGroup]="linkForm">
-                        <div class="k-edit-label">
-                            <label (click)="hrefInput.focus()">{{ textForWithPrefix('WebAddress') }}</label>
-                        </div>
-                        <div class="k-edit-field">
-                            <input #hrefInput formControlName="href" type="text" class="k-textbox k-input k-rounded-md" />
-                        </div>
-
-                        <div class="k-edit-label">
-                            <label (click)="textInput.focus()">{{ textForWithPrefix('Text') }}</label>
-                        </div>
-                        <div class="k-edit-field">
-                            <input #textInput formControlName="text" type="text" class="k-textbox k-input k-rounded-md" />
-                        </div>
-
-                        <div class="k-edit-label">
-                            <label (click)="titleInput.focus()">{{ textForWithPrefix('Title') }}</label>
-                        </div>
-                        <div class="k-edit-field">
-                            <input #titleInput formControlName="title" type="text" class="k-textbox k-input k-rounded-md" />
-                        </div>
-                        <ng-container *ngIf="command === 'createLink'">
-                            <div class="k-edit-label"></div>
-                            <div class="k-edit-field">
-                                <input type="checkbox" id="k-target-blank" kendoCheckBox formControlName="target" />
-                                <label class="k-checkbox-label" for="k-target-blank">{{ textForWithPrefix('OpenInNewWindow') }}</label>
-                            </div>
-                        </ng-container>
-                    </form>
+        <form class="k-form k-form-md k-form-horizontal" novalidate [formGroup]="linkForm">
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="hrefInput" [text]="textForWithPrefix('WebAddress')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #hrefInput formControlName="href"></kendo-textbox>
                 </div>
             </div>
-        </div>
-        <kendo-dialog-actions>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="textInput" [text]="textForWithPrefix('Text')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #textInput formControlName="text"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="titleInput" [text]="textForWithPrefix('Title')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #titleInput formControlName="title"></kendo-textbox>
+                </div>
+            </div>
+            <ng-container *ngIf="command === 'createLink'">
+                <div class="k-form-field">
+                    <div class="k-form-label"></div>
+                    <div class="k-form-field-wrap">
+                        <input type="checkbox" id="k-target-blank" kendoCheckBox formControlName="target" />
+                        <label class="k-checkbox-label" for="k-target-blank" [style.display]="'inline'">{{ textForWithPrefix('OpenInNewWindow') }}</label>
+                    </div>
+                </div>
+            </ng-container>
+        </form>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton [disabled]="linkForm.invalid" (click)="onConfirmAction()" [primary]="true">
                 {{ textFor('dialogInsert') }}
@@ -1077,7 +1090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], hrefInput: [{
                 type: ViewChild,
-                args: ['hrefInput', { read: ElementRef, static: true }]
+                args: ['hrefInput']
             }] } });
 
 /**
@@ -1411,15 +1424,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * @hidden
  */
 class EditorToolsService {
-    constructor() {
+    constructor(zone) {
+        this.zone = zone;
         this.needsCheck = new Subject();
     }
 }
-EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 EditorToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
 /**
  * @hidden
@@ -1557,7 +1571,7 @@ FormatDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </ng-container>
             </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { type: i1$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { type: i1$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormatDropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1679,26 +1693,22 @@ FormatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('format') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content" [style.text-align]="'center'">
-                    <kendo-editor-format-dropdownlist
-                        #formatDropDownList
-                        [defaultItem]="defaultItem"
-                        [data]="data"
-                        [(value)]="value"
-                        [itemDisabled]="itemDisabled"
-                    >
-                    </kendo-editor-format-dropdownlist>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-editor-format-dropdownlist
+                #formatDropDownList
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+            >
+            </kendo-editor-format-dropdownlist>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4$1.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormatDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -1706,21 +1716,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('format') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content" [style.text-align]="'center'">
-                    <kendo-editor-format-dropdownlist
-                        #formatDropDownList
-                        [defaultItem]="defaultItem"
-                        [data]="data"
-                        [(value)]="value"
-                        [itemDisabled]="itemDisabled"
-                    >
-                    </kendo-editor-format-dropdownlist>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-editor-format-dropdownlist
+                #formatDropDownList
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+            >
+            </kendo-editor-format-dropdownlist>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
@@ -1746,11 +1752,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * ```
  */
 class EditorFormatComponent extends ToolBarToolComponent {
-    constructor(dialogService, localization, providerService, toolsService) {
+    constructor(dialogService, localization, providerService, toolsService, renderer) {
         super();
         this.dialogService = dialogService;
         this.localization = localization;
         this.toolsService = toolsService;
+        this.renderer = renderer;
         this.disabled = false;
         this.tabindex = -1;
         /**
@@ -1766,6 +1773,7 @@ class EditorFormatComponent extends ToolBarToolComponent {
             { text: 'Heading 5', tag: 'h5' },
             { text: 'Heading 6', tag: 'h6' }
         ];
+        this.applyFormatSVGIcon = applyFormatIcon;
         this.editor = providerService.editor;
     }
     /**
@@ -1826,10 +1834,12 @@ class EditorFormatComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: FormatDialogComponent
+            content: FormatDialogComponent,
+            width: 400
         };
         this.editor.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         dialogContent.setData({
             editor: this.editor,
             data: this.data,
@@ -1864,7 +1874,7 @@ class EditorFormatComponent extends ToolBarToolComponent {
         return false;
     }
 }
-EditorFormatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFormatComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
+EditorFormatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFormatComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFormatComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "formatDropDownList", first: true, predicate: ["formatDropDownList"], descendants: true }, { propertyName: "formatButton", first: true, predicate: ["formatButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-editor-format-dropdownlist
@@ -1881,22 +1891,20 @@ EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </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">
+                    <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
+                    <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"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.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,24 +1926,22 @@ 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">
+                    <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -2146,6 +2152,50 @@ const commandIcons = {
     deleteTable: 'table-delete'
     // tableWizard: 'table-wizard'
 };
+/**
+ * @hidden
+ */
+const commandSVGIcons = {
+    alignCenter: alignCenterIcon,
+    alignJustify: alignJustifyIcon,
+    alignLeft: alignLeftIcon,
+    alignRight: alignRightIcon,
+    backColor: dropletIcon,
+    blockquote: rightDoubleQuotesIcon,
+    bold: boldIcon,
+    cleanFormatting: clearCssIcon,
+    createLink: linkIcon,
+    foreColor: foregroundColorIcon,
+    indent: indentIcon,
+    insertFile: fileAddIcon,
+    insertImage: fileImageIcon,
+    insertOrderedList: listOrderedIcon,
+    insertUnorderedList: listUnorderedIcon,
+    italic: italicIcon,
+    outdent: outdentIcon,
+    print: printIcon,
+    redo: redoIcon,
+    selectAll: selectAllIcon,
+    strikethrough: strikethroughIcon,
+    subscript: subscriptIcon,
+    superscript: supscriptIcon,
+    underline: underlineIcon,
+    undo: undoIcon,
+    unlink: unlinkIcon,
+    viewSource: codeSnippetIcon,
+    //table
+    insertTable: tableAddIcon,
+    addColumnBefore: tableColumnInsertLeftIcon,
+    addColumnAfter: tableColumnInsertRightIcon,
+    addRowBefore: tableRowInsertAboveIcon,
+    addRowAfter: tableRowInsertBelowIcon,
+    deleteRow: tableRowDeleteIcon,
+    deleteColumn: tableColumnDeleteIcon,
+    mergeCells: cellsMergeIcon,
+    splitCell: cellSplitHorizontallyIcon,
+    deleteTable: tableDeleteIcon
+    // tableWizard: 'table-wizard'
+};
 
 const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
 /**
@@ -2158,18 +2208,25 @@ class EditorCommandBaseDirective {
         this.localization = localization;
         this.toolsService = toolsService;
         this.editor = providerService.editor;
-        setTimeout(() => {
-            const text = this.localization.get(this.command);
-            if (text) {
-                this.button.showText = 'overflow';
-                this.button.showIcon = 'both';
-                this.button.text = text;
-            }
-            if (!this.button.toolbarOptions.icon) {
-                this.button.icon = commandIcons[this.command];
-            }
-            this.button.title = text;
-            this.toolsService.needsCheck.next();
+        this.toolsService.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const text = this.localization.get(this.command);
+                if (text) {
+                    this.button.showText = 'overflow';
+                    this.button.showIcon = 'both';
+                    this.button.text = text;
+                }
+                if (!this.button.toolbarOptions.icon) {
+                    this.button.icon = commandIcons[this.command];
+                }
+                if (!this.button.toolbarOptions.svgIcon) {
+                    this.button.svgIcon = commandSVGIcons[this.command];
+                }
+                this.button.title = text;
+                this.toolsService.zone.run(() => {
+                    this.toolsService.needsCheck.next();
+                });
+            });
         });
     }
     ngOnInit() {
@@ -2218,8 +2275,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 +2655,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;
+        }
     }
 }
 
@@ -2716,7 +2789,7 @@ const getPasteCleanupAttributes = (config) => {
  * Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}).
  */
 class EditorComponent {
-    constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService) {
+    constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService, renderer) {
         this.dialogService = dialogService;
         this.localization = localization;
         this.cdr = cdr;
@@ -2724,6 +2797,7 @@ class EditorComponent {
         this.element = element;
         this.providerService = providerService;
         this.toolsService = toolsService;
+        this.renderer = renderer;
         /**
          * If set to `false`, the Editor will run in style non-encapsulated mode. This means
          * that the styles of the page will be persisted in the Editor and its content will be affected by them.
@@ -3067,6 +3141,10 @@ class EditorComponent {
         if (this.resizable) {
             this.normalizeSize();
         }
+        if (this.userToolBarComponent) {
+            this.renderer.addClass(this.userToolBarComponent.element.nativeElement, 'k-editor-toolbar');
+        }
+        this.toolbar.onResize();
     }
     ngOnChanges(changes) {
         if (changes['value'] && this.view) {
@@ -3181,13 +3259,16 @@ class EditorComponent {
     openDialog(dialogName) {
         const editorDialogs = {
             createLink: {
-                content: FileLinkDialogComponent
+                content: FileLinkDialogComponent,
+                width: 400
             },
             insertFile: {
-                content: FileLinkDialogComponent
+                content: FileLinkDialogComponent,
+                width: 400
             },
             insertImage: {
-                content: ImageDialogComponent
+                content: ImageDialogComponent,
+                width: 400
             },
             viewSource: {
                 content: SourceDialogComponent,
@@ -3201,6 +3282,7 @@ class EditorComponent {
         const dialog = Object.assign({ appendTo: this.dialogContainer }, editorDialogs[dialogName]);
         this.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialog).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         if (dialogName === 'createLink' || dialogName === 'insertFile') {
             dialogContent.command = dialogName;
         }
@@ -3468,7 +3550,7 @@ class EditorComponent {
     }
     ;
 }
-EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, deps: [{ token: i1$1.DialogService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
+EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, deps: [{ token: i1$1.DialogService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorComponent, selector: "kendo-editor", inputs: { value: "value", disabled: "disabled", readonly: "readonly", iframe: "iframe", iframeCss: "iframeCss", applyToWord: "applyToWord", schema: "schema", plugins: "plugins", placeholder: "placeholder", preserveWhitespace: "preserveWhitespace", pasteCleanupSettings: "pasteCleanupSettings", resizable: "resizable" }, outputs: { valueChange: "valueChange", onFocus: "focus", paste: "paste", onBlur: "blur" }, host: { properties: { "class.k-editor": "this.hostClass", "class.k-editor-resizable": "this.resizableClass", "class.k-disabled": "this.isDisabled", "class.k-readonly": "this.isReadonly", "class.k-ie": "this.isIE", "attr.dir": "this.dir", "attr.ariaDisabled": "this.ariaDisabled", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
         EditorLocalizationService,
         ProviderService,
@@ -3606,7 +3688,13 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         >
         </ng-container>
         <ng-content select="kendo-toolbar"></ng-content>
-        <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
+        <kendo-toolbar
+            #defaultToolbar
+            *ngIf="!userToolBarElement"
+            class="k-editor-toolbar"
+            [overflow]="true"
+            [tabindex]="readonly ? -1 : 0"
+        >
             <kendo-toolbar-buttongroup>
                 <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                 <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
@@ -3639,7 +3727,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", "svgIcon", "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$1.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: [{
@@ -3782,7 +3870,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         >
         </ng-container>
         <ng-content select="kendo-toolbar"></ng-content>
-        <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
+        <kendo-toolbar
+            #defaultToolbar
+            *ngIf="!userToolBarElement"
+            class="k-editor-toolbar"
+            [overflow]="true"
+            [tabindex]="readonly ? -1 : 0"
+        >
             <kendo-toolbar-buttongroup>
                 <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                 <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
@@ -3817,7 +3911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-container #dialogsContainer></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: ProviderService }, { type: EditorToolsService }]; }, propDecorators: { value: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { value: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -3935,6 +4029,7 @@ class ColorPickerDialogComponent extends DialogContentBase {
     setData(args) {
         this.editor = args.editor;
         this.value = args.value;
+        this.svgIcon = args.svgIcon;
         this.editorCommand = args.editorCommand;
         this.paletteSettings = args.paletteSettings;
         this.icon = args.icon;
@@ -3949,29 +4044,26 @@ ColorPickerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor(editorCommand) }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content" [style.text-align]="'center'">
-                    <kendo-colorpicker
-                        #colorpicker
-                        [views]="views"
-                        [format]="'hex'"
-                        [attr.title]="title"
-                        [icon]="icon"
-                        [(value)]="value"
-                        [paletteSettings]="paletteSettings"
-                        (activeColorClick)="handleActiveColorClick($event)"
-                    >
-                    </kendo-colorpicker>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-colorpicker
+                #colorpicker
+                [views]="views"
+                [format]="'hex'"
+                [attr.title]="title"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                [(value)]="value"
+                [paletteSettings]="paletteSettings"
+                (activeColorClick)="handleActiveColorClick($event)"
+            >
+            </kendo-colorpicker>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { 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: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i4.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: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4$1.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -3979,24 +4071,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor(editorCommand) }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content" [style.text-align]="'center'">
-                    <kendo-colorpicker
-                        #colorpicker
-                        [views]="views"
-                        [format]="'hex'"
-                        [attr.title]="title"
-                        [icon]="icon"
-                        [(value)]="value"
-                        [paletteSettings]="paletteSettings"
-                        (activeColorClick)="handleActiveColorClick($event)"
-                    >
-                    </kendo-colorpicker>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-colorpicker
+                #colorpicker
+                [views]="views"
+                [format]="'hex'"
+                [attr.title]="title"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                [(value)]="value"
+                [paletteSettings]="paletteSettings"
+                (activeColorClick)="handleActiveColorClick($event)"
+            >
+            </kendo-colorpicker>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
@@ -4048,7 +4137,7 @@ FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </span>
             </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { type: i1$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i1$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { type: i1$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -4142,26 +4231,22 @@ FontFamilyDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('fontFamily') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content" [style.text-align]="'center'">
-                    <kendo-editor-fontfamily-dropdownlist
-                        #fontFamilyDropDownList
-                        [defaultItem]="defaultItem"
-                        [data]="data"
-                        [(value)]="value"
-                        [itemDisabled]="itemDisabled"
-                    >
-                    </kendo-editor-fontfamily-dropdownlist>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-editor-fontfamily-dropdownlist
+                #fontFamilyDropDownList
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+            >
+            </kendo-editor-fontfamily-dropdownlist>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4$1.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FontFamilyDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4169,21 +4254,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('fontFamily') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content" [style.text-align]="'center'">
-                    <kendo-editor-fontfamily-dropdownlist
-                        #fontFamilyDropDownList
-                        [defaultItem]="defaultItem"
-                        [data]="data"
-                        [(value)]="value"
-                        [itemDisabled]="itemDisabled"
-                    >
-                    </kendo-editor-fontfamily-dropdownlist>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-editor-fontfamily-dropdownlist
+                #fontFamilyDropDownList
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+            >
+            </kendo-editor-fontfamily-dropdownlist>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
@@ -4204,6 +4285,7 @@ class PopupTableGridComponent {
     constructor() {
         this.cellClick = new EventEmitter();
         this.tableWizardClick = new EventEmitter();
+        this.tableWizardIcon = tableWizardIcon;
         this.state = { rows: -1, cols: -1 };
         this.rows = 6;
         this.cols = 8;
@@ -4249,10 +4331,10 @@ PopupTableGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
-    `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopupTableGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -4269,7 +4351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
     `
@@ -4310,17 +4392,13 @@ InsertTableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertTable') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-ct-popup k-window-content" [style.text-align]="'center'">
-                    <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4$1.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InsertTableDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4328,14 +4406,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertTable') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-ct-popup k-window-content" [style.text-align]="'center'">
-                    <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
@@ -4466,26 +4540,22 @@ FontSizeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('fontSize') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content" [style.text-align]="'center'">
-                    <kendo-editor-fontsize-dropdownlist
-                        #fontSizeDropDownList
-                        [defaultItem]="defaultItem"
-                        [data]="data"
-                        [(value)]="value"
-                        [itemDisabled]="itemDisabled"
-                    >
-                    </kendo-editor-fontsize-dropdownlist>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-editor-fontsize-dropdownlist
+                #fontSizeDropDownList
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+            >
+            </kendo-editor-fontsize-dropdownlist>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { 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: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i1$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4$1.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FontSizeDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4493,21 +4563,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('fontSize') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content" [style.text-align]="'center'">
-                    <kendo-editor-fontsize-dropdownlist
-                        #fontSizeDropDownList
-                        [defaultItem]="defaultItem"
-                        [data]="data"
-                        [(value)]="value"
-                        [itemDisabled]="itemDisabled"
-                    >
-                    </kendo-editor-fontsize-dropdownlist>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-editor-fontsize-dropdownlist
+                #fontSizeDropDownList
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+            >
+            </kendo-editor-fontsize-dropdownlist>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
@@ -4535,17 +4601,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Use the FontSize tool to provide a custom list of font size options including any allowed units ([see example]({% slug toolbartools_editor %}#toc-dropdownlists)).
  */
 class EditorFontSizeComponent extends ToolBarToolComponent {
-    constructor(dialogService, localization, providerService, toolsService) {
+    constructor(dialogService, localization, providerService, toolsService, renderer) {
         super();
         this.dialogService = dialogService;
         this.localization = localization;
         this.toolsService = toolsService;
+        this.renderer = renderer;
         this.disabled = false;
         this.tabindex = -1;
         /**
          * Fires when the user updates the value of the drop-down list.
          */
         this.valueChange = new EventEmitter();
+        this.fontSizeSVGIcon = fontSizeIcon;
         this._data = [
             { text: '8px', size: '8px' },
             { text: '10px', size: '10px' },
@@ -4625,10 +4693,12 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: FontSizeDialogComponent
+            content: FontSizeDialogComponent,
+            width: 400
         };
         this.editor.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         dialogContent.setData({
             editor: this.editor,
             data: this.data,
@@ -4663,7 +4733,7 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
         return false;
     }
 }
-EditorFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontSizeComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
+EditorFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontSizeComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }], 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: ["element"], descendants: true }, { propertyName: "fontSizeDropDownList", first: true, predicate: ["element"], descendants: true, read: FontSizeDropDownListComponent }, { propertyName: "fontSizeButton", first: true, predicate: ["fontSizeButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-editor-fontsize-dropdownlist
@@ -4680,22 +4750,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">
+                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
+                    <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"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.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,24 +4786,23 @@ 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">
+                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -4755,6 +4823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['fontSizeButton', { read: ElementRef }]
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * A component which configures an existing `DropDownListComponent` as an Editor tool
  * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
@@ -4767,17 +4836,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * ```
  */
 class EditorFontFamilyComponent extends ToolBarToolComponent {
-    constructor(dialogService, localization, providerService, toolsService) {
+    constructor(dialogService, localization, providerService, toolsService, renderer) {
         super();
         this.dialogService = dialogService;
         this.localization = localization;
         this.toolsService = toolsService;
+        this.renderer = renderer;
         this.disabled = false;
         this.tabindex = -1;
         /**
          * Fires when the user updates the value of the drop-down list.
          */
         this.valueChange = new EventEmitter();
+        this.fontFamilySVGIcon = fontFamilyIcon;
         this._data = [
             { text: 'Arial', fontName: 'Arial,"Helvetica Neue",Helvetica,sans-serif' },
             { text: 'Courier New', fontName: '"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace' },
@@ -4850,10 +4921,12 @@ class EditorFontFamilyComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: FontFamilyDialogComponent
+            content: FontFamilyDialogComponent,
+            width: 400
         };
         this.editor.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         dialogContent.setData({
             editor: this.editor,
             data: this.data,
@@ -4888,7 +4961,7 @@ class EditorFontFamilyComponent extends ToolBarToolComponent {
         return false;
     }
 }
-EditorFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontFamilyComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
+EditorFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontFamilyComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }], 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: ["element"], descendants: true }, { propertyName: "fontFamilyDropDownList", first: true, predicate: ["element"], descendants: true, read: FontFamilyDropDownListComponent }, { propertyName: "fontFamilyButton", first: true, predicate: ["fontFamilyButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-editor-fontfamily-dropdownlist
@@ -4905,22 +4978,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">
+                    <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
+                    <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"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.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,24 +5014,23 @@ 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">
+                    <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -4980,18 +5051,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['fontFamilyButton', { read: ElementRef }]
             }] } });
 
-// eslint-disable no-forward-ref
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * A component which configures an existing ColorPickerComponent as a ToolBar tool.
  * To associate a `kendo-toolbar-colorpicker` with an Editor command that changes the
  * foreground or the background color of the text, use the `kendoEditorForeColor` or `kendoEditorBackColor` directive.
  */
 class EditorColorPickerComponent extends ToolBarToolComponent {
-    constructor(localization, dialogService, ngZone, providerService) {
+    constructor(localization, dialogService, ngZone, providerService, renderer) {
         super();
         this.localization = localization;
         this.dialogService = dialogService;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         this.tabindex = -1;
         /**
          * Specifies if the component should be disabled.
@@ -5087,10 +5159,12 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: ColorPickerDialogComponent
+            content: ColorPickerDialogComponent,
+            width: 400
         };
         this.editor.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         dialogContent.setData({
             editor: this.editor,
             value: this.value,
@@ -5098,6 +5172,7 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
             editorCommand: this.editorCommand,
             paletteSettings: this.paletteSettings,
             icon: this.icon,
+            svgIcon: this.svgIcon,
             views: this.views
         });
     }
@@ -5113,10 +5188,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();
         }
     }
     /**
@@ -5127,13 +5202,14 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
         return false;
     }
 }
-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: `
+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 }, { token: i0.Renderer2 }], 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", svgIcon: "svgIcon", 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: `
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #colorpicker
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [views]="views"
                 [format]="'hex'"
                 [value]="value"
@@ -5149,22 +5225,25 @@ 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">
+                    <kendo-icon-wrapper
+                        *ngIf="icon"
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
+                    <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: i4.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: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -5176,6 +5255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 #colorpicker
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [views]="views"
                 [format]="'hex'"
                 [value]="value"
@@ -5191,27 +5271,32 @@ 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">
+                    <kendo-icon-wrapper
+                        *ngIf="icon"
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: EditorLocalizationService }, { type: i1$1.DialogService }, { type: i0.NgZone }, { type: ProviderService }]; }, propDecorators: { value: [{
+        }], ctorParameters: function () { return [{ type: EditorLocalizationService }, { type: i1$1.DialogService }, { type: i0.NgZone }, { type: ProviderService }, { type: i0.Renderer2 }]; }, propDecorators: { value: [{
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], paletteSettings: [{
                 type: Input
             }], editorCommand: [{
@@ -5230,13 +5315,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';
@@ -5250,11 +5335,13 @@ const popupWrapperHeight = '164px'; // Set to '192px' when TableWizard button is
  * ```
  */
 class EditorInsertTableButtonComponent extends ToolBarToolComponent {
-    constructor(localization, popupService, dialogService, providerService) {
+    constructor(localization, popupService, dialogService, providerService, renderer) {
         super();
         this.localization = localization;
         this.popupService = popupService;
         this.dialogService = dialogService;
+        this.renderer = renderer;
+        this.addTableSVGIcon = tableAddIcon;
         this.open = false;
         this.buttonBlurred = new EventEmitter();
         this.cellClicked = new EventEmitter();
@@ -5296,10 +5383,12 @@ class EditorInsertTableButtonComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: InsertTableDialogComponent
+            content: InsertTableDialogComponent,
+            width: 400
         };
         this.editor.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         dialogContent.setData({
             editor: this.editor
         });
@@ -5377,7 +5466,7 @@ class EditorInsertTableButtonComponent extends ToolBarToolComponent {
         return (this.overflows ? this.overflowElement : this.element).nativeElement;
     }
 }
-EditorInsertTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorInsertTableButtonComponent, deps: [{ token: EditorLocalizationService }, { token: i2.PopupService }, { token: i1$1.DialogService }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+EditorInsertTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorInsertTableButtonComponent, deps: [{ token: EditorLocalizationService }, { token: i2.PopupService }, { token: i1$1.DialogService }, { token: ProviderService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorInsertTableButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef }, { propertyName: "overflowElement", first: true, predicate: ["overflowElement"], descendants: true, read: ElementRef }, { propertyName: "popupGridTemplate", first: true, predicate: ["popupGridTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
@@ -5387,27 +5476,30 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [attr.title]="title"
                 [attr.tabindex]="tabIndex"
                 icon="table-add"
+                [svgIcon]="addTableSVGIcon"
                 [disabled]="disabled"
                 (click)="toggle()"
                 (blur)="onBlur()"
             ></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">
+                    <kendo-icon-wrapper name="table-add" [svgIcon]="addTableSVGIcon"></kendo-icon-wrapper>
+                    <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$1.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: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }], directives: [{ type: i3$1.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: [{
@@ -5422,29 +5514,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [attr.title]="title"
                 [attr.tabindex]="tabIndex"
                 icon="table-add"
+                [svgIcon]="addTableSVGIcon"
                 [disabled]="disabled"
                 (click)="toggle()"
                 (blur)="onBlur()"
             ></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">
+                    <kendo-icon-wrapper name="table-add" [svgIcon]="addTableSVGIcon"></kendo-icon-wrapper>
+                    <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>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: EditorLocalizationService }, { type: i2.PopupService }, { type: i1$1.DialogService }, { type: ProviderService }]; }, propDecorators: { toolbarTemplate: [{
+        }], ctorParameters: function () { return [{ type: EditorLocalizationService }, { type: i2.PopupService }, { type: i1$1.DialogService }, { type: ProviderService }, { type: i0.Renderer2 }]; }, propDecorators: { toolbarTemplate: [{
                 type: ViewChild,
                 args: ['toolbarTemplate', { static: true }]
             }], popupTemplate: [{
@@ -5716,6 +5811,7 @@ class EditorForeColorDirective {
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.foreColor;
+        this.colorPicker.svgIcon = commandSVGIcons.foreColor;
         this.colorPicker.editorCommand = 'foreColor';
     }
 }
@@ -5737,6 +5833,7 @@ class EditorBackColorDirective {
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.backColor;
+        this.colorPicker.svgIcon = commandSVGIcons.backColor;
         this.colorPicker.editorCommand = 'backColor';
     }
 }
@@ -6345,8 +6442,11 @@ EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DropDownsModule,
         NumericTextBoxModule,
         CheckBoxModule,
+        IconsModule,
         ToolBarModule,
-        TextBoxModule], exports: [EditorComponent, 
+        TextBoxModule,
+        TextAreaModule,
+        LabelModule], exports: [EditorComponent, 
         //alignment
         EditorAlignLeftButtonDirective,
         EditorAlignCenterButtonDirective,
@@ -6425,8 +6525,11 @@ EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             DropDownsModule,
             NumericTextBoxModule,
             CheckBoxModule,
+            IconsModule,
             ToolBarModule,
-            TextBoxModule
+            TextBoxModule,
+            TextAreaModule,
+            LabelModule
         ], ToolBarModule,
         ButtonModule,
         FormsModule,
@@ -6466,8 +6569,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DropDownsModule,
                         NumericTextBoxModule,
                         CheckBoxModule,
+                        IconsModule,
                         ToolBarModule,
-                        TextBoxModule
+                        TextBoxModule,
+                        TextAreaModule,
+                        LabelModule
                     ]
                 }]
         }] });