@progress/kendo-angular-editor 11.0.0-develop.104 → 11.0.0-develop.106

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,14 +16,16 @@ 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 * as i2 from '@progress/kendo-angular-popup';
@@ -35,7 +37,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673525165,
+    publishDate: 1673542332,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -664,7 +666,7 @@ class SourceDialogComponent extends DialogContentBase {
     }
     ngAfterViewInit() {
         Promise.resolve(null).then(() => {
-            this.textarea.nativeElement.focus();
+            this.textarea.focus();
         });
     }
     onCancelAction() {
@@ -676,7 +678,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 +699,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 +712,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 +759,7 @@ class ImageDialogComponent extends DialogContentBase {
     }
     ngAfterViewInit() {
         Promise.resolve(null).then(() => {
-            this.srcInput.nativeElement.focus();
+            this.srcInput.focus();
         });
     }
     onCancelAction() {
@@ -795,46 +797,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 +848,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 +893,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 +912,7 @@ class FileLinkDialogComponent extends DialogContentBase {
     }
     ngAfterViewInit() {
         Promise.resolve(null).then(() => {
-            this.hrefInput.nativeElement.focus();
+            this.hrefInput.focus();
         });
     }
     onCancelAction() {
@@ -975,52 +985,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 +1038,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 +1087,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']
             }] } });
 
 /**
@@ -1557,7 +1567,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 +1689,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 +1712,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 +1748,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;
         /**
@@ -1826,10 +1829,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 +1869,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
@@ -1894,7 +1899,7 @@ EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], 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: [{
@@ -1931,7 +1936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </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
@@ -2728,7 +2733,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;
@@ -2736,6 +2741,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.
@@ -3079,6 +3085,9 @@ 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) {
@@ -3194,13 +3203,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,
@@ -3214,6 +3226,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;
         }
@@ -3481,7 +3494,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,
@@ -3619,7 +3632,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>
@@ -3652,7 +3671,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", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i1$3.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i1$3.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }] });
+    `, isInline: true, components: [{ type: i1$3.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i1$3.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i1$3.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { type: i3$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: [{
@@ -3795,7 +3814,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>
@@ -3830,7 +3855,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
@@ -3962,29 +3987,25 @@ 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"
+                [(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: [{
@@ -3992,24 +4013,20 @@ 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"
+                [(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>
@@ -4061,7 +4078,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: [{
@@ -4155,26 +4172,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: [{
@@ -4182,21 +4195,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>
@@ -4265,7 +4274,7 @@ PopupTableGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (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: [{
@@ -4323,17 +4332,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: [{
@@ -4341,14 +4346,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>
     `
@@ -4479,26 +4480,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: [{
@@ -4506,21 +4503,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>
@@ -4548,11 +4541,12 @@ 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;
         /**
@@ -4638,10 +4632,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,
@@ -4676,7 +4672,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
@@ -4707,7 +4703,7 @@ EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], 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: [{
@@ -4745,7 +4741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </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
@@ -4778,11 +4774,12 @@ 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;
         /**
@@ -4861,10 +4858,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,
@@ -4899,7 +4898,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
@@ -4930,7 +4929,7 @@ EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], 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: [{
@@ -4968,7 +4967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </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
@@ -4996,11 +4995,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * 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.
@@ -5096,10 +5096,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,
@@ -5142,7 +5144,7 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
         return `k-icon k-i-${this.icon}`;
     }
 }
-EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: EditorLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }, { token: ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+EditorColorPickerComponent.ɵ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", 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
@@ -5178,7 +5180,7 @@ EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </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"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, 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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -5221,7 +5223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </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
@@ -5263,11 +5265,12 @@ 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.open = false;
         this.buttonBlurred = new EventEmitter();
         this.cellClicked = new EventEmitter();
@@ -5309,10 +5312,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
         });
@@ -5390,7 +5395,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
@@ -5422,7 +5427,7 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         <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"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, 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: 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: [{
@@ -5461,7 +5466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </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: [{
@@ -6363,7 +6368,9 @@ EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         NumericTextBoxModule,
         CheckBoxModule,
         ToolBarModule,
-        TextBoxModule], exports: [EditorComponent, 
+        TextBoxModule,
+        TextAreaModule,
+        LabelModule], exports: [EditorComponent, 
         //alignment
         EditorAlignLeftButtonDirective,
         EditorAlignCenterButtonDirective,
@@ -6443,7 +6450,9 @@ EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             NumericTextBoxModule,
             CheckBoxModule,
             ToolBarModule,
-            TextBoxModule
+            TextBoxModule,
+            TextAreaModule,
+            LabelModule
         ], ToolBarModule,
         ButtonModule,
         FormsModule,
@@ -6484,7 +6493,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NumericTextBoxModule,
                         CheckBoxModule,
                         ToolBarModule,
-                        TextBoxModule
+                        TextBoxModule,
+                        TextAreaModule,
+                        LabelModule
                     ]
                 }]
         }] });