@progress/kendo-angular-editor 13.0.0-develop.2 → 13.0.0-develop.20

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

@@ -16,13 +16,13 @@ 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 i3 from '@progress/kendo-angular-inputs';
+import { ColorPickerComponent, ColorPickerModule, NumericTextBoxModule, CheckBoxModule, TextBoxModule, TextAreaModule, FormFieldModule } 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$1 from '@progress/kendo-angular-buttons';
+import * as i4 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
-import * as i3 from '@progress/kendo-angular-label';
+import * as i4$1 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -40,8 +40,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846731,
-    version: '13.0.0-develop.2',
+    publishDate: 1685961229,
+    version: '13.0.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -710,11 +710,18 @@ SourceDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="data"
             [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 layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogUpdate') }}</button>
+            <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: 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"] }] });
+    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.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.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.12", ngImport: i0, type: SourceDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -730,9 +737,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [value]="data"
             [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 layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogUpdate') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
                 }]
@@ -818,46 +832,65 @@ ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertImage') }}
         </kendo-dialog-titlebar>
-        <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 class="k-form k-form-md k-form-vertical">
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="srcInput"
+                    [text]="textFor('imageWebAddress')"
+                ></kendo-label>
+                <kendo-textbox
+                    #srcInput
+                    [formControl]="src"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="altTextInput"
+                    [text]="textFor('imageAltText')"
+                ></kendo-label>
+                <kendo-textbox
+                    #altTextInput
+                    [formControl]="alt"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="widthInput"
+                    [text]="textFor('imageWidth')"
+                ></kendo-label>
+                <kendo-textbox
+                    #widthInput
+                    [formControl]="width"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    [for]="heightInput"
+                    [text]="textFor('imageHeight')"
+                    labelCssClass="k-form-label"
+                ></kendo-label>
+                <kendo-textbox
+                    #heightInput
+                    [formControl]="height"
+                ></kendo-textbox>
+            </kendo-formfield>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton [disabled]="imageData.invalid"
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [disabled]="imageData.invalid"
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogInsert') }}</button>
+            <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: 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"] }] });
+    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "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.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.12", ngImport: i0, type: ImageDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -865,44 +898,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertImage') }}
         </kendo-dialog-titlebar>
-        <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 class="k-form k-form-md k-form-vertical">
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="srcInput"
+                    [text]="textFor('imageWebAddress')"
+                ></kendo-label>
+                <kendo-textbox
+                    #srcInput
+                    [formControl]="src"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="altTextInput"
+                    [text]="textFor('imageAltText')"
+                ></kendo-label>
+                <kendo-textbox
+                    #altTextInput
+                    [formControl]="alt"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="widthInput"
+                    [text]="textFor('imageWidth')"
+                ></kendo-label>
+                <kendo-textbox
+                    #widthInput
+                    [formControl]="width"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    [for]="heightInput"
+                    [text]="textFor('imageHeight')"
+                    labelCssClass="k-form-label"
+                ></kendo-label>
+                <kendo-textbox
+                    #heightInput
+                    [formControl]="height"
+                ></kendo-textbox>
+            </kendo-formfield>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton [disabled]="imageData.invalid"
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [disabled]="imageData.invalid"
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogInsert') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
                 }]
@@ -1006,48 +1058,69 @@ FileLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ titleText }}
         </kendo-dialog-titlebar>
-        <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 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>
+        <form class="k-form k-form-md k-form-vertical" novalidate [formGroup]="linkForm">
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="hrefInput"
+                    [text]="textForWithPrefix('WebAddress')"
+                ></kendo-label>
+                <kendo-textbox
+                    #hrefInput
+                    formControlName="href"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="textInput"
+                    [text]="textForWithPrefix('Text')"
+                ></kendo-label>
+                <kendo-textbox
+                    #textInput
+                    formControlName="text"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="titleInput"
+                    [text]="textForWithPrefix('Title')"
+                ></kendo-label>
+                <kendo-textbox
+                    #titleInput
+                    formControlName="title"
+                ></kendo-textbox>
+            </kendo-formfield>
             <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>
+                <kendo-formfield>
+                    <ng-container>
+                        <span class="k-checkbox-wrap">
+                            <input
+                                id='k-target-blank'
+                                type='checkbox'
+                                kendoCheckBox
+                                formControlName="target"
+                            />
+                        </span>
+                        <label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label>
+                    </ng-container>
+                </kendo-formfield>
             </ng-container>
         </form>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton [disabled]="linkForm.invalid" (click)="onConfirmAction()" [primary]="true">
-                {{ textFor('dialogInsert') }}
-            </button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [disabled]="linkForm.invalid"
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogInsert') }}</button>
+            <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: 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"] }] });
+    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "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.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: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i4$1.LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileLinkDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -1055,46 +1128,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ titleText }}
         </kendo-dialog-titlebar>
-        <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 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>
+        <form class="k-form k-form-md k-form-vertical" novalidate [formGroup]="linkForm">
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="hrefInput"
+                    [text]="textForWithPrefix('WebAddress')"
+                ></kendo-label>
+                <kendo-textbox
+                    #hrefInput
+                    formControlName="href"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="textInput"
+                    [text]="textForWithPrefix('Text')"
+                ></kendo-label>
+                <kendo-textbox
+                    #textInput
+                    formControlName="text"
+                ></kendo-textbox>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label
+                    labelCssClass="k-form-label"
+                    [for]="titleInput"
+                    [text]="textForWithPrefix('Title')"
+                ></kendo-label>
+                <kendo-textbox
+                    #titleInput
+                    formControlName="title"
+                ></kendo-textbox>
+            </kendo-formfield>
             <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>
+                <kendo-formfield>
+                    <ng-container>
+                        <span class="k-checkbox-wrap">
+                            <input
+                                id='k-target-blank'
+                                type='checkbox'
+                                kendoCheckBox
+                                formControlName="target"
+                            />
+                        </span>
+                        <label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label>
+                    </ng-container>
+                </kendo-formfield>
             </ng-container>
         </form>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton [disabled]="linkForm.invalid" (click)="onConfirmAction()" [primary]="true">
-                {{ textFor('dialogInsert') }}
-            </button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [disabled]="linkForm.invalid"
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogInsert') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
                 }]
@@ -1717,12 +1811,18 @@ FormatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             >
             </kendo-editor-format-dropdownlist>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <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: 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"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormatDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -1740,10 +1840,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             >
             </kendo-editor-format-dropdownlist>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
                 }]
@@ -1918,7 +2024,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"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditorFormatComponent, decorators: [{
             type: Component,
             args: [{
@@ -2289,16 +2395,10 @@ class EditorCommandButton extends EditorCommandBaseDirective {
         e.preventDefault();
     }
     onStateChange(toolBarState) {
-        if (this.button.overflows) {
-            setTimeout(() => {
-                this.button.selected = toolBarState[this.command].selected;
-                this.button.disabled = toolBarState[this.command].disabled;
-            });
-        }
-        else {
+        this.providerService.editor.ngZone.onStable.pipe(take(1)).subscribe(() => {
             this.button.selected = toolBarState[this.command].selected;
             this.button.disabled = toolBarState[this.command].disabled;
-        }
+        });
     }
 }
 
@@ -2663,22 +2763,17 @@ class EditorCommandDialog extends EditorCommandBaseDirective {
         this.dialog = dialog;
         this.button = button;
         this.localization = localization;
+        this.providerService = providerService;
         this.toolsService = toolsService;
     }
     clickHandler() {
         this.editor.openDialog(this.dialog);
     }
     onStateChange(toolBarState) {
-        if (this.button.overflows) {
-            setTimeout(() => {
-                this.button.selected = toolBarState[this.command].selected;
-                this.button.disabled = toolBarState[this.command].disabled;
-            });
-        }
-        else {
+        this.providerService.editor.ngZone.onStable.pipe(take(1)).subscribe(() => {
             this.button.selected = toolBarState[this.command].selected;
             this.button.disabled = toolBarState[this.command].disabled;
-        }
+        });
     }
 }
 
@@ -2909,7 +3004,7 @@ class EditorComponent {
             return this.dispatchPasteEvent(dirtyHtml, clean);
         };
         this.transformPastedHTML = (html) => this.transformPastedContent(html);
-        this.transformPastedText = (html, plain) => this.transformPastedContent(html, plain);
+        this.transformPastedText = (html) => this.transformPastedContent(html, true);
         this.changeValue = (value) => {
             const prev = this._value;
             this._value = value;
@@ -3425,7 +3520,9 @@ class EditorComponent {
                 view: () => ({
                     update: editorView => {
                         if (!this.disabled) {
-                            this.stateChange.next(this.readonly ? disabledToolBarState : getToolbarState(editorView.state, { applyToWord: this.applyToWord }));
+                            this.ngZone.run(() => {
+                                this.stateChange.next(this.readonly ? disabledToolBarState : getToolbarState(editorView.state, { applyToWord: this.applyToWord }));
+                            });
                         }
                     }
                 })
@@ -3506,12 +3603,14 @@ class EditorComponent {
             }));
         }
         this.subs.add(this.stateChange.subscribe(() => {
-            if (this.userToolBarComponent) {
-                this.userToolBarComponent.cdr.detectChanges();
-            }
-            else {
-                this.cdr.detectChanges();
-            }
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                if (this.userToolBarComponent) {
+                    this.userToolBarComponent.cdr.detectChanges();
+                }
+                else {
+                    this.cdr.detectChanges();
+                }
+            });
         }));
         this.subs.add(this.valueModified.subscribe((value) => {
             this.onChangeCallback(value);
@@ -4090,12 +4189,18 @@ ColorPickerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             >
             </kendo-colorpicker>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <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: 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", "clearButtonClick", "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"] }] });
+    `, isInline: true, components: [{ type: i1$1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.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", "clearButtonClick", "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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4118,10 +4223,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             >
             </kendo-colorpicker>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
                 }]
@@ -4274,12 +4385,18 @@ FontFamilyDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             >
             </kendo-editor-fontfamily-dropdownlist>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <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: 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"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontFamilyDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4297,10 +4414,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             >
             </kendo-editor-fontfamily-dropdownlist>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
                 }]
@@ -4428,10 +4551,13 @@ InsertTableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <div [style.text-align]="'center'">
             <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+        <kendo-dialog-actions layout="start">
+            <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$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"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InsertTableDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4442,8 +4568,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <div [style.text-align]="'center'">
             <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
                 }]
@@ -4583,12 +4712,18 @@ FontSizeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             >
             </kendo-editor-fontsize-dropdownlist>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <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: 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"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontSizeDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4606,10 +4741,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             >
             </kendo-editor-fontsize-dropdownlist>
         </div>
-        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'start'">
-            <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
-            <button kendoButton
-                    (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogApply') }}</button>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `
                 }]
@@ -4797,7 +4938,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"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
             type: Component,
             args: [{
@@ -5025,7 +5166,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"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
             type: Component,
             args: [{
@@ -5286,7 +5427,7 @@ EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </span>
             </div>
         </ng-template>
-    `, 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", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i3.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", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -5543,7 +5684,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$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, 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: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditorInsertTableButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -6490,6 +6631,7 @@ EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         ToolBarModule,
         TextBoxModule,
         TextAreaModule,
+        FormFieldModule,
         LabelModule], exports: [EditorComponent, 
         //alignment
         EditorAlignLeftButtonDirective,
@@ -6573,6 +6715,7 @@ EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             ToolBarModule,
             TextBoxModule,
             TextAreaModule,
+            FormFieldModule,
             LabelModule
         ], ToolBarModule,
         ButtonModule,
@@ -6617,6 +6760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         ToolBarModule,
                         TextBoxModule,
                         TextAreaModule,
+                        FormFieldModule,
                         LabelModule
                     ]
                 }]