@progress/kendo-angular-editor 17.0.0-develop.9 → 17.0.1-develop.1

package/{fesm2020 → fesm2022}/progress-kendo-angular-editor.mjs

@@ -6,23 +6,23 @@ import * as i0 from '@angular/core';
 import { Injectable, Inject, Optional, Component, Input, ViewChild, InjectionToken, Directive, EventEmitter, Output, forwardRef, ElementRef, isDevMode, ViewContainerRef, HostBinding, ContentChild, NgModule } from '@angular/core';
 import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgStyle, NgFor } from '@angular/common';
 import * as i3 from '@angular/forms';
-import { FormControl, Validators, FormGroup, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormControl, Validators, FormGroup, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, BehaviorSubject, zip, fromEvent, interval } from 'rxjs';
 import { take, map, filter as filter$1, concatMap, takeUntil } from 'rxjs/operators';
 import * as i1$2 from '@progress/kendo-angular-toolbar';
-import { ToolBarToolComponent, ToolBarComponent, ToolBarButtonGroupComponent, ToolBarButtonComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
+import { ToolBarToolComponent, ToolBarComponent, ToolBarButtonGroupComponent, ToolBarButtonComponent, KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
 import * as i1$1 from '@progress/kendo-angular-dialog';
 import { DialogContentBase, DialogTitleBarComponent, DialogActionsComponent, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
 import { isDocumentAvailable, guid, shouldShowValidationUI, hasObservers, KendoInput, WatermarkOverlayComponent, isPresent as isPresent$1, Keys, ResizeBatchService } from '@progress/kendo-angular-common';
-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, cspFix, 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 { 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, TextSelection, parseContent, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, tableResizing, tableEditing, caretColor, cspFix, placeholder, EditorState, EditorView, pasteCleanup, AllSelection } from '@progress/kendo-editor-common';
+export { AllSelection, CellSelection, Decoration, DecorationSet, EditorState, EditorView, InputRule, Mark, MarkType, Node, NodeSelection, NodeType, Plugin, PluginKey, Schema, TextSelection, Transaction, baseKeymap, dropCursor, gapCursor, history, inputRules, keymap, tableNodes, textblockTypeInputRule, wrappingInputRule } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { TextAreaComponent, FormFieldComponent, TextBoxComponent, CheckBoxDirective, ColorPickerComponent } from '@progress/kendo-angular-inputs';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { LabelComponent, LabelDirective } from '@progress/kendo-angular-label';
-import { alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, dropletIcon, rightDoubleQuotesIcon, boldIcon, clearCssIcon, linkIcon, foregroundColorIcon, indentIcon, fileAddIcon, fileImageIcon, listOrderedIcon, listUnorderedIcon, italicIcon, outdentIcon, printIcon, redoIcon, selectAllIcon, strikethroughIcon, subscriptIcon, supscriptIcon, underlineIcon, undoIcon, unlinkIcon, codeSnippetIcon, tableAddIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, cellsMergeIcon, cellSplitHorizontallyIcon, tableDeleteIcon, applyFormatIcon, tableWizardIcon, fontSizeIcon, fontFamilyIcon } from '@progress/kendo-svg-icons';
+import { alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, dropletIcon, rightDoubleQuotesIcon, boldIcon, clearCssIcon, linkIcon, foregroundColorIcon, indentIcon, fileAddIcon, fileImageIcon, listOrderedIcon, listUnorderedIcon, italicIcon, outdentIcon, printIcon, redoIcon, selectAllIcon, strikethroughIcon, subscriptIcon, supscriptIcon, underlineIcon, undoIcon, unlinkIcon, codeSnippetIcon, tableAddIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, cellsMergeIcon, cellSplitHorizontallyIcon, tableDeleteIcon, applyFormatIcon, fontSizeIcon, fontFamilyIcon, tableWizardIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import { DropDownListComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
 import * as i2 from '@progress/kendo-angular-popup';
@@ -35,8 +35,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729174787,
-    version: '17.0.0-develop.9',
+    publishDate: 1731429951,
+    version: '17.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -653,10 +653,10 @@ class EditorLocalizationService extends LocalizationService {
     constructor(prefix, messageService, _rtl) {
         super(prefix, messageService, _rtl);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorLocalizationService });
 }
-EditorLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-EditorLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -674,11 +674,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class SourceDialogComponent extends DialogContentBase {
+    dialog;
+    localization;
+    editor;
+    textarea;
+    data = '';
     constructor(dialog, localization) {
         super(dialog);
         this.dialog = dialog;
         this.localization = localization;
-        this.data = '';
     }
     onCancelAction() {
         this.dialog.close();
@@ -704,9 +708,8 @@ class SourceDialogComponent extends DialogContentBase {
             .replace(/<br \/>/gi, '<br />\n')
             .replace(/\n$/, '');
     }
-}
-SourceDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SourceDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SourceDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SourceDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SourceDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SourceDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('viewSource') }}
         </kendo-dialog-titlebar>
@@ -730,7 +733,8 @@ SourceDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SourceDialogComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SourceDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -771,26 +775,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class ImageDialogComponent extends DialogContentBase {
+    dialog;
+    localization;
+    editor;
+    srcInput;
+    src = new FormControl('', Validators.required);
+    alt = new FormControl('');
+    width = new FormControl('', Validators.min(1));
+    height = new FormControl('', Validators.min(1));
+    data = {
+        alt: '',
+        height: '',
+        src: '',
+        width: ''
+    };
+    imageData = new FormGroup({
+        alt: this.alt,
+        height: this.height,
+        src: this.src,
+        width: this.width
+    });
+    srcInputId;
+    altTextInputId;
+    widthInputId;
+    heightInputId;
     constructor(dialog, localization) {
         super(dialog);
         this.dialog = dialog;
         this.localization = localization;
-        this.src = new FormControl('', Validators.required);
-        this.alt = new FormControl('');
-        this.width = new FormControl('', Validators.min(1));
-        this.height = new FormControl('', Validators.min(1));
-        this.data = {
-            alt: '',
-            height: '',
-            src: '',
-            width: ''
-        };
-        this.imageData = new FormGroup({
-            alt: this.alt,
-            height: this.height,
-            src: this.src,
-            width: this.width
-        });
     }
     ngOnInit() {
         this.srcInputId = `k-${guid()}`;
@@ -831,9 +843,8 @@ class ImageDialogComponent extends DialogContentBase {
     normalizeDimension(value) {
         return Number.isNaN(parseInt(value, 10)) || parseInt(value, 10) <= 0 ? '' : safeString(parseInt(value, 10));
     }
-}
-ImageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ImageDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ImageDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageDialogComponent, isStandalone: true, 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>
@@ -896,7 +907,8 @@ ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ImageDialogComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -976,15 +988,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FileLinkDialogComponent extends DialogContentBase {
+    dialog;
+    localization;
+    editor;
+    command;
+    hrefInput;
+    linkForm = new FormGroup({
+        'href': new FormControl('', Validators.required),
+        'text': new FormControl({ value: '', disabled: true }, Validators.required),
+        'title': new FormControl('')
+    });
     constructor(dialog, localization) {
         super(dialog);
         this.dialog = dialog;
         this.localization = localization;
-        this.linkForm = new FormGroup({
-            'href': new FormControl('', Validators.required),
-            'text': new FormControl({ value: '', disabled: true }, Validators.required),
-            'title': new FormControl('')
-        });
     }
     onCancelAction() {
         this.dialog.close();
@@ -1054,9 +1071,8 @@ class FileLinkDialogComponent extends DialogContentBase {
         }
         return linkData;
     }
-}
-FileLinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileLinkDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FileLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileLinkDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor", command: "command" }, viewQueries: [{ propertyName: "hrefInput", first: true, predicate: ["hrefInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileLinkDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileLinkDialogComponent, isStandalone: true, 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>
@@ -1123,7 +1139,8 @@ FileLinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileLinkDialogComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileLinkDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1525,10 +1542,11 @@ const EditorErrorMessages = {
  * @hidden
  */
 class ProviderService {
+    editor;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProviderService });
 }
-ProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProviderService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProviderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProviderService, decorators: [{
             type: Injectable
         }] });
 
@@ -1536,14 +1554,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class EditorToolsService {
+    zone;
+    needsCheck = new Subject();
     constructor(zone) {
         this.zone = zone;
-        this.needsCheck = new Subject();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorToolsService });
 }
-EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-EditorToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorToolsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorToolsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorToolsService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -1551,9 +1570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
+    prevented = false;
     /**
      * Prevents the default action for a specified event.
      * In this way, the source component suppresses the built-in behavior that follows the event.
@@ -1575,6 +1592,18 @@ class PreventableEvent {
  * The Editor [`paste`]({% slug api_editor_editorcomponent %}#toc-paste) event.
  */
 class EditorPasteEvent extends PreventableEvent {
+    /**
+     * The HTML content cleaned in accordance with the [`PasteCleanupSettings`]({% slug paste_cleanup %}).
+     */
+    cleanedHtml;
+    /**
+     * The raw pasted content.
+     */
+    originalHtml;
+    /**
+     * The original DOM event.
+     */
+    originalEvent;
     /**
      * Constructs the event arguments for the `paste` event.
      * @hidden
@@ -1681,6 +1710,12 @@ const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
  * @hidden
  */
 class EditorCommandBaseDirective {
+    command;
+    button;
+    localization;
+    toolsService;
+    subs;
+    editor;
     constructor(command, button, localization, providerService, toolsService) {
         this.command = command;
         this.button = button;
@@ -1721,10 +1756,10 @@ class EditorCommandBaseDirective {
     clickHandler() { }
     pointerdownHandler(_event) { }
     onStateChange(_toolBarState) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorCommandBaseDirective, deps: [{ token: MY_TOKEN }, { token: i1$2.ToolBarButtonComponent }, { token: i1.LocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorCommandBaseDirective, selector: "[kendoEditorCommandBase]", ngImport: i0 });
 }
-EditorCommandBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorCommandBaseDirective, deps: [{ token: MY_TOKEN }, { token: i1$2.ToolBarButtonComponent }, { token: i1.LocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorCommandBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorCommandBaseDirective, selector: "[kendoEditorCommandBase]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorCommandBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorCommandBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoEditorCommandBase]'
@@ -1738,6 +1773,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class EditorCommandDialog extends EditorCommandBaseDirective {
+    dialog;
+    button;
+    localization;
+    providerService;
+    toolsService;
     constructor(dialog, button, localization, providerService, toolsService) {
         super(dialog, button, localization, providerService, toolsService);
         this.dialog = dialog;
@@ -1771,10 +1811,10 @@ class EditorInsertImageButtonDirective extends EditorCommandDialog {
     constructor(button, localization, providerService, toolsService) {
         super('insertImage', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertImageButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorInsertImageButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorInsertImageButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertImageButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorInsertImageButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorInsertImageButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertImageButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertImageButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorInsertImageButton]',
@@ -1786,6 +1826,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class EditorCommandButton extends EditorCommandBaseDirective {
+    command;
+    button;
+    localization;
+    providerService;
+    toolsService;
     constructor(command, button, localization, providerService, toolsService) {
         super(command, button, localization, providerService, toolsService);
         this.command = command;
@@ -1824,10 +1869,10 @@ class EditorUnlinkButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('unlink', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorUnlinkButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorUnlinkButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorUnlinkButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorUnlinkButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorUnlinkButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorUnlinkButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorUnlinkButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorUnlinkButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorUnlinkButton]',
@@ -1850,10 +1895,10 @@ class EditorCreateLinkButtonDirective extends EditorCommandDialog {
     constructor(button, localization, providerService, toolsService) {
         super('createLink', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorCreateLinkButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorCreateLinkButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorCreateLinkButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorCreateLinkButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorCreateLinkButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorCreateLinkButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorCreateLinkButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorCreateLinkButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorCreateLinkButton]',
@@ -1876,10 +1921,10 @@ class EditorOutdentButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('outdent', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorOutdentButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorOutdentButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorOutdentButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorOutdentButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorOutdentButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorOutdentButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorOutdentButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorOutdentButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorOutdentButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorOutdentButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorOutdentButton]',
@@ -1902,10 +1947,10 @@ class EditorIndentButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('indent', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorIndentButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorIndentButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorIndentButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorIndentButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorIndentButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorIndentButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorIndentButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorIndentButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorIndentButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorIndentButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorIndentButton]',
@@ -1928,10 +1973,10 @@ class EditorInsertOrderedListButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('insertOrderedList', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertOrderedListButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorInsertOrderedListButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorInsertOrderedListButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertOrderedListButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorInsertOrderedListButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorInsertOrderedListButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertOrderedListButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertOrderedListButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorInsertOrderedListButton]',
@@ -1954,10 +1999,10 @@ class EditorInsertUnorderedListButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('insertUnorderedList', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertUnorderedListButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorInsertUnorderedListButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorInsertUnorderedListButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertUnorderedListButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorInsertUnorderedListButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorInsertUnorderedListButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertUnorderedListButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertUnorderedListButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorInsertUnorderedListButton]',
@@ -1980,10 +2025,10 @@ class EditorAlignJustifyButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('alignJustify', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAlignJustifyButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorAlignJustifyButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorAlignJustifyButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAlignJustifyButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorAlignJustifyButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorAlignJustifyButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAlignJustifyButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAlignJustifyButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorAlignJustifyButton]',
@@ -2006,10 +2051,10 @@ class EditorAlignRightButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('alignRight', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAlignRightButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorAlignRightButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorAlignRightButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAlignRightButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorAlignRightButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorAlignRightButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAlignRightButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAlignRightButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorAlignRightButton]',
@@ -2032,10 +2077,10 @@ class EditorAlignCenterButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('alignCenter', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAlignCenterButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorAlignCenterButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorAlignCenterButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAlignCenterButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorAlignCenterButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorAlignCenterButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAlignCenterButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAlignCenterButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorAlignCenterButton]',
@@ -2058,10 +2103,10 @@ class EditorAlignLeftButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('alignLeft', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAlignLeftButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorAlignLeftButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorAlignLeftButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAlignLeftButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorAlignLeftButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorAlignLeftButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAlignLeftButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAlignLeftButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorAlignLeftButton]',
@@ -2073,15 +2118,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DropDownToolDirective {
+    hostEl;
+    zone;
+    get hostElement() {
+        return this.hostEl.nativeElement;
+    }
     constructor(hostEl, zone) {
         this.hostEl = hostEl;
         this.zone = zone;
-        this.preventDefault = (event) => {
-            event.preventDefault();
-        };
-    }
-    get hostElement() {
-        return this.hostEl.nativeElement;
     }
     ngAfterViewInit() {
         this.zone.runOutsideAngular(() => {
@@ -2091,10 +2135,13 @@ class DropDownToolDirective {
     ngOnDestroy() {
         this.hostElement.removeEventListener('pointerdown', this.preventDefault);
     }
+    preventDefault = (event) => {
+        event.preventDefault();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownToolDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropDownToolDirective, isStandalone: true, selector: "[kendoEditorDropDownTool]", ngImport: i0 });
 }
-DropDownToolDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownToolDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-DropDownToolDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropDownToolDirective, isStandalone: true, selector: "[kendoEditorDropDownTool]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownToolDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownToolDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoEditorDropDownTool]',
@@ -2106,18 +2153,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FormatDropDownListComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
+    data;
+    value;
+    defaultItem;
+    itemDisabled;
+    title;
+    disabled;
+    tabindex;
+    valueChange = new EventEmitter();
+    element;
+    dropDownList;
     onValueChange(tag) {
         this.valueChange.emit(tag);
     }
     focus() {
         this.dropDownList.focus();
     }
-}
-FormatDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormatDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormatDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormatDropDownListComponent, isStandalone: true, selector: "kendo-editor-format-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormatDropDownListComponent, isStandalone: true, selector: "kendo-editor-format-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
         <kendo-dropdownlist
             #element
             kendoEditorDropDownTool
@@ -2169,7 +2222,8 @@ FormatDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             </ng-template>
         </kendo-dropdownlist>
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormatDropDownListComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatDropDownListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-editor-format-dropdownlist',
@@ -2256,11 +2310,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FormatDialogComponent extends DialogContentBase {
+    dialog;
+    localization;
+    editor;
+    formatDropDownList;
+    data = [];
+    defaultItem;
+    value;
+    itemDisabled;
     constructor(dialog, localization) {
         super(dialog);
         this.dialog = dialog;
         this.localization = localization;
-        this.data = [];
     }
     onCancelAction() {
         this.dialog.close();
@@ -2281,9 +2342,8 @@ class FormatDialogComponent extends DialogContentBase {
     textFor(key) {
         return this.localization.get(key);
     }
-}
-FormatDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormatDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FormatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FormatDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "formatDropDownList", first: true, predicate: ["formatDropDownList"], descendants: true, read: FormatDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormatDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "formatDropDownList", first: true, predicate: ["formatDropDownList"], descendants: true, read: FormatDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('format') }}
         </kendo-dialog-titlebar>
@@ -2309,7 +2369,8 @@ FormatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormatDialogComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2360,31 +2421,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class EditorFormatComponent extends ToolBarToolComponent {
-    constructor(dialogService, localization, providerService, toolsService, renderer) {
-        super();
-        this.dialogService = dialogService;
-        this.localization = localization;
-        this.toolsService = toolsService;
-        this.renderer = renderer;
-        this.disabled = false;
-        this.tabindex = -1;
-        /**
-         * Fires when the user updates the value of the drop-down list.
-         */
-        this.valueChange = new EventEmitter();
-        this._data = [
-            { text: 'Paragraph', tag: 'p' },
-            { text: 'Heading 1', tag: 'h1' },
-            { text: 'Heading 2', tag: 'h2' },
-            { text: 'Heading 3', tag: 'h3' },
-            { text: 'Heading 4', tag: 'h4' },
-            { text: 'Heading 5', tag: 'h5' },
-            { text: 'Heading 6', tag: 'h6' }
-        ];
-        this.applyFormatSVGIcon = applyFormatIcon;
-        this.editor = providerService.editor;
-        this.isBuiltInTool = true;
-    }
+    dialogService;
+    localization;
+    toolsService;
+    renderer;
+    value;
+    defaultItem;
+    itemDisabled;
+    disabled = false;
+    tabindex = -1;
     /**
      * Overrides the default format items list.
      */
@@ -2394,6 +2439,33 @@ class EditorFormatComponent extends ToolBarToolComponent {
     get data() {
         return this._data;
     }
+    /**
+     * Fires when the user updates the value of the drop-down list.
+     */
+    valueChange = new EventEmitter();
+    formatDropDownList;
+    formatButton;
+    subs;
+    _data = [
+        { text: 'Paragraph', tag: 'p' },
+        { text: 'Heading 1', tag: 'h1' },
+        { text: 'Heading 2', tag: 'h2' },
+        { text: 'Heading 3', tag: 'h3' },
+        { text: 'Heading 4', tag: 'h4' },
+        { text: 'Heading 5', tag: 'h5' },
+        { text: 'Heading 6', tag: 'h6' }
+    ];
+    applyFormatSVGIcon = applyFormatIcon;
+    editor;
+    constructor(dialogService, localization, providerService, toolsService, renderer) {
+        super();
+        this.dialogService = dialogService;
+        this.localization = localization;
+        this.toolsService = toolsService;
+        this.renderer = renderer;
+        this.editor = providerService.editor;
+        this.isBuiltInTool = true;
+    }
     ngOnInit() {
         this.itemDisabled = (itemArgs) => {
             if (!this.overflows && this.formatDropDownList && !this.formatDropDownList.dropDownList.isOpen) {
@@ -2483,9 +2555,8 @@ class EditorFormatComponent extends ToolBarToolComponent {
         this.tabindex = -1;
         return false;
     }
-}
-EditorFormatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: EditorFormatComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorFormatComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorFormatComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFormatComponent) }], viewQueries: [{ 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
                 #formatDropDownList
@@ -2515,7 +2586,8 @@ EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorFormatComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorFormatComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFormatComponent) }],
@@ -2557,12 +2629,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], formatDropDownList: [{
                 type: ViewChild,
                 args: ['formatDropDownList']
@@ -2586,10 +2652,10 @@ class EditorUnderlineButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('underline', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorUnderlineButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorUnderlineButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorUnderlineButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorUnderlineButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorUnderlineButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorUnderlineButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorUnderlineButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorUnderlineButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorUnderlineButton]',
@@ -2612,10 +2678,10 @@ class EditorItalicButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('italic', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorItalicButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorItalicButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorItalicButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorItalicButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorItalicButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorItalicButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorItalicButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorItalicButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorItalicButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorItalicButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorItalicButton]',
@@ -2638,10 +2704,10 @@ class EditorBoldButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('bold', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorBoldButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorBoldButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorBoldButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorBoldButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorBoldButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorBoldButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorBoldButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorBoldButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorBoldButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorBoldButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorBoldButton]',
@@ -2653,10 +2719,242 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class MessagesDirective extends ComponentMessages {
+    /* Section of Tools Messages */
+    /**
+     * The title of the tool that aligns text in the center.
+     */
+    alignCenter;
+    /**
+     * The title of the tool that justifies text both left and right.
+     */
+    alignJustify;
+    /**
+     * The title of the tool that aligns text on the left.
+     */
+    alignLeft;
+    /**
+     * The title of the tool that aligns text on the right.
+     */
+    alignRight;
+    /**
+     * The title of the tool that changes the text background color.
+     */
+    backColor;
+    /**
+     * The title of the tool that wraps an element in a blockquote.
+     */
+    blockquote;
+    /**
+     * The title of the tool that makes text bold.
+     */
+    bold;
+    /**
+     * The title of the Clean Formatting tool.
+     */
+    cleanFormatting;
+    /**
+     * The title of the tool that creates hyperlinks.
+     */
+    createLink;
+    /**
+     * The title of the tool that changes the text font.
+     */
+    fontFamily;
+    /**
+     * The title of the tool that changes the text size.
+     */
+    fontSize;
+    /**
+     * The title of the tool that changes the text color.
+     */
+    foreColor;
+    /**
+     * The title of the tool that lets users choose block formats.
+     */
+    format;
+    /**
+     * The title of the tool that indents the content.
+     */
+    indent;
+    /**
+     * The title of the tool that inserts links to files.
+     */
+    insertFile;
+    /**
+     * The title of the tool that inserts images.
+     */
+    insertImage;
+    /**
+     * The title of the tool that inserts an ordered list.
+     */
+    insertOrderedList;
+    /**
+     * The title of the tool that inserts an unordered list.
+     */
+    insertUnorderedList;
+    /**
+     * The title of the tool that makes text italicized.
+     */
+    italic;
+    /**
+     * The title of the tool that outdents the content.
+     */
+    outdent;
+    /**
+     * The title of the print tool.
+     */
+    print;
+    /**
+     * The title of the tool that redos the last action.
+     */
+    redo;
+    /**
+     * The title of the tool that selects all content.
+     */
+    selectAll;
+    /**
+     * The title of the tool that strikes through text.
+     */
+    strikethrough;
+    /**
+     * The title of the tool that makes text subscript.
+     */
+    subscript;
+    /**
+     * The title of the tool that makes text superscript.
+     */
+    superscript;
+    /**
+     * The title of the tool that underlines text.
+     */
+    underline;
+    /**
+     * The title of the tool that undos the last action.
+     */
+    undo;
+    /**
+     * The title of the tool that removes hyperlinks.
+     */
+    unlink;
+    /**
+     * The title of the tool that shows the editor value as HTML.
+     */
+    viewSource;
+    /**
+     * The title of the tool that inserts table.
+     */
+    insertTable;
+    /**
+    * The caption for the hint in the insert table tool.
+    *
+    * The message consists of several parts - the amount of rows, the amount of columns, an `x` separator, and a localizable string.
+    * To allow for reordering its parts, the `insertTableHint` input accepts a string with placeholders for the selected rows, selected columns
+    * and the separator. The `{rows}` and `{columns}` placeholders will be replaced internally with the respective actual values. The `{x}` placeholder
+    * shows a separator only when rows and columns are selected.
+    */
+    insertTableHint;
+    /**
+     * The title of the tool that adds new column before currently selected column.
+     */
+    addColumnBefore;
+    /**
+     * The title of the tool that adds new column after currently selected column.
+     */
+    addColumnAfter;
+    /**
+     * The title of the tool that adds new row before currently selected row.
+     */
+    addRowBefore;
+    /**
+     * The title of the tool that adds new row after currently selected row.
+     */
+    addRowAfter;
+    /**
+     * The title of the tool that deletes a table column.
+     */
+    deleteColumn;
+    /**
+     * The title of the tool that deletes a table row.
+     */
+    deleteRow;
+    /**
+     * The title of the tool that deletes a table.
+     */
+    deleteTable;
+    /**
+     * The title of the tool that merges the currently selected cells.
+     */
+    mergeCells;
+    /**
+     * The title of the tool that splits the currently selected cell.
+     */
+    splitCell;
+    /* End of Tools Messages Section */
+    /* Section of Dialog Messages */
+    /**
+     * The label of the **Apply** button in all Editor dialogs.
+     */
+    dialogApply;
+    /**
+     * The label of the **Cancel** button in all editor dialogs.
+     */
+    dialogCancel;
+    /**
+     * The label of the **Insert** button in all editor dialogs.
+     */
+    dialogInsert;
+    /**
+     * The label of the **Update** button in all editor dialogs.
+     */
+    dialogUpdate;
+    /**
+     * The caption for the file text in the insertFile dialog.
+     */
+    fileText;
+    /**
+     * The caption for the file Title in the insertFile dialog.
+     */
+    fileTitle;
+    /**
+     * The caption for the file URL in the insertFile dialog.
+     */
+    fileWebAddress;
+    /**
+     * The caption for the image alternate text in the insertImage dialog.
+     */
+    imageAltText;
+    /**
+     * The caption for the image height in the insertImage dialog.
+     */
+    imageHeight;
+    /**
+     * The caption for the image URL in the insertImage dialog.
+     */
+    imageWebAddress;
+    /**
+     * The caption for the image width in the insertImage dialog.
+     */
+    imageWidth;
+    /**
+     * The caption for the checkbox for opening the link in a new window in the createLink dialog.
+     */
+    linkOpenInNewWindow;
+    /**
+     * The caption for the link text in the createLink dialog.
+     */
+    linkText;
+    /**
+     * The caption for the link title in the createLink dialog.
+     */
+    linkTitle;
+    /**
+     * The caption for the URL in the createLink dialog.
+     */
+    linkWebAddress;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MessagesDirective, selector: "[kendoEditorMessages]", inputs: { alignCenter: "alignCenter", alignJustify: "alignJustify", alignLeft: "alignLeft", alignRight: "alignRight", backColor: "backColor", blockquote: "blockquote", bold: "bold", cleanFormatting: "cleanFormatting", createLink: "createLink", fontFamily: "fontFamily", fontSize: "fontSize", foreColor: "foreColor", format: "format", indent: "indent", insertFile: "insertFile", insertImage: "insertImage", insertOrderedList: "insertOrderedList", insertUnorderedList: "insertUnorderedList", italic: "italic", outdent: "outdent", print: "print", redo: "redo", selectAll: "selectAll", strikethrough: "strikethrough", subscript: "subscript", superscript: "superscript", underline: "underline", undo: "undo", unlink: "unlink", viewSource: "viewSource", insertTable: "insertTable", insertTableHint: "insertTableHint", addColumnBefore: "addColumnBefore", addColumnAfter: "addColumnAfter", addRowBefore: "addRowBefore", addRowAfter: "addRowAfter", deleteColumn: "deleteColumn", deleteRow: "deleteRow", deleteTable: "deleteTable", mergeCells: "mergeCells", splitCell: "splitCell", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogInsert: "dialogInsert", dialogUpdate: "dialogUpdate", fileText: "fileText", fileTitle: "fileTitle", fileWebAddress: "fileWebAddress", imageAltText: "imageAltText", imageHeight: "imageHeight", imageWebAddress: "imageWebAddress", imageWidth: "imageWidth", linkOpenInNewWindow: "linkOpenInNewWindow", linkText: "linkText", linkTitle: "linkTitle", linkWebAddress: "linkWebAddress" }, usesInheritance: true, ngImport: i0 });
 }
-MessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessagesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MessagesDirective, selector: "[kendoEditorMessages]", inputs: { alignCenter: "alignCenter", alignJustify: "alignJustify", alignLeft: "alignLeft", alignRight: "alignRight", backColor: "backColor", blockquote: "blockquote", bold: "bold", cleanFormatting: "cleanFormatting", createLink: "createLink", fontFamily: "fontFamily", fontSize: "fontSize", foreColor: "foreColor", format: "format", indent: "indent", insertFile: "insertFile", insertImage: "insertImage", insertOrderedList: "insertOrderedList", insertUnorderedList: "insertUnorderedList", italic: "italic", outdent: "outdent", print: "print", redo: "redo", selectAll: "selectAll", strikethrough: "strikethrough", subscript: "subscript", superscript: "superscript", underline: "underline", undo: "undo", unlink: "unlink", viewSource: "viewSource", insertTable: "insertTable", insertTableHint: "insertTableHint", addColumnBefore: "addColumnBefore", addColumnAfter: "addColumnAfter", addRowBefore: "addRowBefore", addRowAfter: "addRowAfter", deleteColumn: "deleteColumn", deleteRow: "deleteRow", deleteTable: "deleteTable", mergeCells: "mergeCells", splitCell: "splitCell", dialogApply: "dialogApply", dialogCancel: "dialogCancel", dialogInsert: "dialogInsert", dialogUpdate: "dialogUpdate", fileText: "fileText", fileTitle: "fileTitle", fileWebAddress: "fileWebAddress", imageAltText: "imageAltText", imageHeight: "imageHeight", imageWebAddress: "imageWebAddress", imageWidth: "imageWidth", linkOpenInNewWindow: "linkOpenInNewWindow", linkText: "linkText", linkTitle: "linkTitle", linkWebAddress: "linkWebAddress" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoEditorMessages]'
@@ -2779,17 +3077,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class LocalizedMessagesDirective extends MessagesDirective {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoEditorLocalizedMessages]", providers: [{
+                provide: MessagesDirective,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoEditorLocalizedMessages]", providers: [{
-            provide: MessagesDirective,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [{
@@ -2827,160 +3126,14 @@ const getPasteCleanupAttributes = (config) => {
  * Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}).
  */
 class EditorComponent {
-    constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService, renderer) {
-        this.dialogService = dialogService;
-        this.localization = localization;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        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.
-         * @default true
-         */
-        this.iframe = true;
-        /**
-         * If set to `true` or `ApplyToWordOptions` object, commands that apply emphasis or inline styles will be applied to the whole word the cursor is in.
-         * @default false
-         */
-        this.applyToWord = false;
-        /**
-         * By default, whitespace is collapsed as per HTML's rules.
-         * Set to `true` to preserve whitespace, but normalize newlines to spaces.
-         * Set to `'full'` to preserve whitespace entirely. In this case the default ProseMirror behavior is to parse white space into nodes.
-         *
-         * @default false
-         */
-        this.preserveWhitespace = false;
-        /**
-         * Determines whether the Editor can be resized ([see example](slug:resizing_editor#toc-resizing-the-editor)).
-         * @default false
-         */
-        this.resizable = false;
-        /**
-         * Fires each time the value of the Editor is changed upon user interaction&mdash;
-         * for example, when the value is updated through typing in the content area or using some of the Editor tools ([see example](slug:events_editor)).
-         * When the value of the Editor is programmatically changed through its API (`ngModel`) or form binding (`formControl`),
-         * the `valueChange` event is not triggered because it might cause a mix-up with the
-         * built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires when the content area of the Editor is focused ([see example](slug:events_editor)).
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires when the user performs paste in the content area of the Editor ([see example](slug:events_editor)).
-         * The event is preventable. If you cancel it, the Editor content will not change.
-         */
-        this.paste = new EventEmitter();
-        /**
-         * Fires when the content area of the Editor is blurred ([see example](slug:events_editor)).
-         */
-        this.onBlur = new EventEmitter();
-        this.hostClass = true;
-        /**
-         * @hidden
-         */
-        this.stateChange = new BehaviorSubject(initialToolBarState);
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        /**
-         * @hidden
-         */
-        this.valueModified = new Subject();
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-editor-${guid()}`;
-        this._readonly = false;
-        this._placeholder = '';
-        this.inForm = false;
-        this._iframeCss = { keepBuiltInCss: true };
-        this.afterViewInit = new Subject();
-        this.contentAreaLoaded = new Subject();
-        this.dispatchTransaction = (tr) => {
-            const docChanged = tr.docChanged;
-            if (this.disabled || (this.readonly && docChanged)) {
-                return;
-            }
-            if (docChanged) {
-                const doc = tr.doc;
-                const html = getHtml({ doc });
-                this.trOnChange = tr;
-                this.htmlOnChange = html;
-                this.ngZone.run(() => {
-                    this.valueModified.next(html === EMPTY_PARAGRAPH ? '' : html);
-                });
-            }
-            if (!docChanged || this.inForm) {
-                this.view.updateState(this.view.state.apply(tr));
-                this.trOnChange = null;
-            }
-        };
-        this.transformPastedContent = (dirtyHtml, plainText) => {
-            if (plainText) {
-                return this.dispatchPasteEvent(dirtyHtml, dirtyHtml);
-            }
-            const pasteCleanupSettings = { ...defaultPasteCleanupSettings, ...this.pasteCleanupSettings };
-            const html = pipe(removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML), removeCommentsIf(pasteCleanupSettings.removeHtmlComments))(dirtyHtml);
-            const clean = pasteCleanup(html, {
-                convertMsLists: pasteCleanupSettings.convertMsLists,
-                stripTags: pasteCleanupSettings.stripTags.join('|'),
-                attributes: getPasteCleanupAttributes(pasteCleanupSettings)
-            });
-            return this.dispatchPasteEvent(dirtyHtml, clean);
-        };
-        this.transformPastedHTML = (html) => this.transformPastedContent(html);
-        this.transformPastedText = (html) => this.transformPastedContent(html, true);
-        this.changeValue = (value) => {
-            const prev = this._value;
-            this._value = value;
-            if (!this._view) {
-                return;
-            }
-            if (this.htmlOnChange === value && this.trOnChange) {
-                this.view.updateState(this.view.state.apply(this.trOnChange));
-            }
-            else {
-                const newValue = (prev || '') !== (value || '');
-                const formReset = (this.inForm && !value);
-                if (newValue || formReset) {
-                    const iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
-                    if (iframeContentWindowNotPresent) {
-                        return;
-                    }
-                    const state = this.view.state;
-                    const nextDoc = parseContent(value || '', state.schema, { preserveWhitespace: this.preserveWhitespace });
-                    const tr = state.tr
-                        .setSelection(new AllSelection(state.doc))
-                        .replaceSelectionWith(nextDoc);
-                    this.view.updateState(state.apply(tr));
-                }
-            }
-            this.trOnChange = null;
-            this.htmlOnChange = null;
-        };
-        this.onChangeCallback = (value) => {
-            this.changeValue(value);
-        };
-        this.onTouchedCallback = (_) => { };
-        this.onPaste = (_view, nativeEvent) => {
-            this._pasteEvent = nativeEvent;
-            return false;
-        };
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.providerService.editor = this;
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        // https://stackoverflow.com/questions/56572483/chrome-is-synchronously-handling-iframe-loading-whereas-firefox-handles-it-asyn
-        this.subs = zip(this.afterViewInit.asObservable(), this.contentAreaLoaded.asObservable()).subscribe(() => this.initialize());
-    }
+    dialogService;
+    localization;
+    cdr;
+    ngZone;
+    element;
+    providerService;
+    toolsService;
+    renderer;
     /**
      * Sets the value of the Editor ([see example](slug:overview_editor)).
      */
@@ -3061,6 +3214,12 @@ class EditorComponent {
     get readonly() {
         return this._readonly;
     }
+    /**
+     * 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.
+     * @default true
+     */
+    iframe = true;
     /**
      * Allows applying custom CSS styles to the Editor in iframe mode.
      */
@@ -3070,6 +3229,11 @@ class EditorComponent {
     get iframeCss() {
         return this._iframeCss;
     }
+    /**
+     * If set to `true` or `ApplyToWordOptions` object, commands that apply emphasis or inline styles will be applied to the whole word the cursor is in.
+     * @default false
+     */
+    applyToWord = false;
     /**
      * Allows providing a custom schema. ([see example]({% slug schema_editor %}))
      */
@@ -3118,6 +3282,45 @@ class EditorComponent {
     get placeholder() {
         return this._placeholder;
     }
+    /**
+     * By default, whitespace is collapsed as per HTML's rules.
+     * Set to `true` to preserve whitespace, but normalize newlines to spaces.
+     * Set to `'full'` to preserve whitespace entirely. In this case the default ProseMirror behavior is to parse white space into nodes.
+     *
+     * @default false
+     */
+    preserveWhitespace = false;
+    /**
+     * Configures how pasted content is modified before it is added to the Editor ([see example]({% slug paste_cleanup %})).
+     */
+    pasteCleanupSettings;
+    /**
+     * Determines whether the Editor can be resized ([see example](slug:resizing_editor#toc-resizing-the-editor)).
+     * @default false
+     */
+    resizable = false;
+    /**
+     * Fires each time the value of the Editor is changed upon user interaction&mdash;
+     * for example, when the value is updated through typing in the content area or using some of the Editor tools ([see example](slug:events_editor)).
+     * When the value of the Editor is programmatically changed through its API (`ngModel`) or form binding (`formControl`),
+     * the `valueChange` event is not triggered because it might cause a mix-up with the
+     * built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires when the content area of the Editor is focused ([see example](slug:events_editor)).
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires when the user performs paste in the content area of the Editor ([see example](slug:events_editor)).
+     * The event is preventable. If you cancel it, the Editor content will not change.
+     */
+    paste = new EventEmitter();
+    /**
+     * Fires when the content area of the Editor is blurred ([see example](slug:events_editor)).
+     */
+    onBlur = new EventEmitter();
+    hostClass = true;
     get resizableClass() {
         return !!this.resizable;
     }
@@ -3152,6 +3355,14 @@ class EditorComponent {
         const resizableOptions = this.resizable;
         return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
     }
+    /**
+     * @hidden
+     */
+    stateChange = new BehaviorSubject(initialToolBarState);
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
     get toolbar() {
         return this.defaultToolbarComponent || this.userToolBarComponent;
     }
@@ -3171,31 +3382,88 @@ class EditorComponent {
     get selectionText() {
         return this._view && this._view.state ? getSelectionText$1(this._view.state) : '';
     }
-    ngOnInit() {
-        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        }));
-        this.subs.add(this.toolsService.needsCheck.subscribe(() => this.cdr.markForCheck()));
-    }
-    ngAfterViewInit() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.afterViewInit.next();
-        if (!this.iframe) {
-            this.contentAreaLoaded.next();
-        }
-        if (this.resizable) {
-            this.normalizeSize();
-        }
-        if (this.userToolBarComponent) {
-            this.renderer.addClass(this.userToolBarComponent.element.nativeElement, 'k-editor-toolbar');
-        }
-        if (this.toolbar.overflow) {
-            this.toolbar.onResize();
-        }
-    }
-    ngOnChanges(changes) {
+    /**
+     * @hidden
+     */
+    valueModified = new Subject();
+    userToolBarComponent;
+    userToolBarElement;
+    dialogContainer;
+    // Use `ViewContainerRef` instead of `ElementRef` because the dialog expects `ViewContainerRef`.
+    container;
+    direction;
+    viewMountElement;
+    /**
+     * @hidden
+     */
+    focusChangedProgrammatically;
+    /**
+     * @hidden
+     */
+    shouldEmitFocus;
+    /**
+     * @hidden
+     */
+    focusableId = `k-editor-${guid()}`;
+    defaultToolbar;
+    defaultToolbarComponent;
+    subs;
+    _view;
+    _value;
+    _disabled;
+    _readonly = false;
+    _schema;
+    _plugins;
+    _placeholder = '';
+    _styleObserver;
+    trOnChange;
+    htmlOnChange;
+    inForm = false;
+    _pasteEvent;
+    _iframeCss = { keepBuiltInCss: true };
+    afterViewInit = new Subject();
+    contentAreaLoaded = new Subject();
+    constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService, renderer) {
+        this.dialogService = dialogService;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.element = element;
+        this.providerService = providerService;
+        this.toolsService = toolsService;
+        this.renderer = renderer;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.providerService.editor = this;
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        // https://stackoverflow.com/questions/56572483/chrome-is-synchronously-handling-iframe-loading-whereas-firefox-handles-it-asyn
+        this.subs = zip(this.afterViewInit.asObservable(), this.contentAreaLoaded.asObservable()).subscribe(() => this.initialize());
+    }
+    ngOnInit() {
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+        this.subs.add(this.toolsService.needsCheck.subscribe(() => this.cdr.markForCheck()));
+    }
+    ngAfterViewInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.afterViewInit.next();
+        if (!this.iframe) {
+            this.contentAreaLoaded.next();
+        }
+        if (this.resizable) {
+            this.normalizeSize();
+        }
+        if (this.userToolBarComponent) {
+            this.renderer.addClass(this.userToolBarComponent.element.nativeElement, 'k-editor-toolbar');
+        }
+        if (this.toolbar.overflow) {
+            this.toolbar.onResize();
+        }
+    }
+    ngOnChanges(changes) {
         if (changes['value'] && this.view) {
             this.changeValue(changes['value'].currentValue);
         }
@@ -3502,6 +3770,71 @@ class EditorComponent {
             .pipe(filter$1((event) => !this.viewMountElement.contains(event.relatedTarget)))
             .subscribe(() => this.onTouchedCallback()));
     }
+    dispatchTransaction = (tr) => {
+        const docChanged = tr.docChanged;
+        if (this.disabled || (this.readonly && docChanged)) {
+            return;
+        }
+        if (docChanged) {
+            const doc = tr.doc;
+            const html = getHtml({ doc });
+            this.trOnChange = tr;
+            this.htmlOnChange = html;
+            this.ngZone.run(() => {
+                this.valueModified.next(html === EMPTY_PARAGRAPH ? '' : html);
+            });
+        }
+        if (!docChanged || this.inForm) {
+            this.view.updateState(this.view.state.apply(tr));
+            this.trOnChange = null;
+        }
+    };
+    transformPastedContent = (dirtyHtml, plainText) => {
+        if (plainText) {
+            return this.dispatchPasteEvent(dirtyHtml, dirtyHtml);
+        }
+        const pasteCleanupSettings = { ...defaultPasteCleanupSettings, ...this.pasteCleanupSettings };
+        const html = pipe(removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML), removeCommentsIf(pasteCleanupSettings.removeHtmlComments))(dirtyHtml);
+        const clean = pasteCleanup(html, {
+            convertMsLists: pasteCleanupSettings.convertMsLists,
+            stripTags: pasteCleanupSettings.stripTags.join('|'),
+            attributes: getPasteCleanupAttributes(pasteCleanupSettings)
+        });
+        return this.dispatchPasteEvent(dirtyHtml, clean);
+    };
+    transformPastedHTML = (html) => this.transformPastedContent(html);
+    transformPastedText = (html) => this.transformPastedContent(html, true);
+    changeValue = (value) => {
+        const prev = this._value;
+        this._value = value;
+        if (!this._view) {
+            return;
+        }
+        if (this.htmlOnChange === value && this.trOnChange) {
+            this.view.updateState(this.view.state.apply(this.trOnChange));
+        }
+        else {
+            const newValue = (prev || '') !== (value || '');
+            const formReset = (this.inForm && !value);
+            if (newValue || formReset) {
+                const iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
+                if (iframeContentWindowNotPresent) {
+                    return;
+                }
+                const state = this.view.state;
+                const nextDoc = parseContent(value || '', state.schema, { preserveWhitespace: this.preserveWhitespace });
+                const tr = state.tr
+                    .setSelection(new AllSelection(state.doc))
+                    .replaceSelectionWith(nextDoc);
+                this.view.updateState(state.apply(tr));
+            }
+        }
+        this.trOnChange = null;
+        this.htmlOnChange = null;
+    };
+    onChangeCallback = (value) => {
+        this.changeValue(value);
+    };
     normalizeSize() {
         if (typeof this.resizable === 'object' && !this._styleObserver) {
             const element = this.element.nativeElement;
@@ -3543,38 +3876,45 @@ class EditorComponent {
             }
         });
     }
+    onTouchedCallback = (_) => { };
+    onPaste = (_view, nativeEvent) => {
+        this._pasteEvent = nativeEvent;
+        return false;
+    };
     dispatchPasteEvent(originalContent, cleanContent) {
         if (hasObservers(this.paste)) {
+            if (!this.iframe) {
+                this._pasteEvent.stopImmediatePropagation();
+            }
             const event = new EditorPasteEvent(cleanContent, originalContent, this._pasteEvent);
             this.ngZone.run(() => this.paste.emit(event));
             return event.isDefaultPrevented() ? '' : event.cleanedHtml;
         }
         return cleanContent;
     }
-}
-EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: EditorComponent, isStandalone: true, 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,
-        EditorToolsService,
-        {
-            provide: LocalizationService,
-            useExisting: EditorLocalizationService
-        },
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.editor'
-        },
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => EditorComponent),
-            multi: true
-        },
-        {
-            provide: KendoInput,
-            useExisting: forwardRef(() => EditorComponent)
-        }
-    ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorComponent, isStandalone: true, 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,
+            EditorToolsService,
+            {
+                provide: LocalizationService,
+                useExisting: EditorLocalizationService
+            },
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.editor'
+            },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EditorComponent),
+                multi: true
+            },
+            {
+                provide: KendoInput,
+                useExisting: forwardRef(() => EditorComponent)
+            }
+        ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoEditorLocalizedMessages
             i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
@@ -3733,8 +4073,9 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         <ng-container #dialogsContainer></ng-container>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { kind: "directive", type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { kind: "directive", type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { kind: "component", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { kind: "directive", type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { kind: "directive", type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { kind: "directive", type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { kind: "directive", type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { kind: "directive", type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { kind: "directive", type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { kind: "directive", type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { kind: "directive", type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { kind: "directive", type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { kind: "directive", type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { kind: "directive", type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { kind: "directive", type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { kind: "directive", type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { kind: "component", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { kind: "directive", type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { kind: "directive", type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { kind: "directive", type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { kind: "directive", type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { kind: "directive", type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { kind: "directive", type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { kind: "directive", type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { kind: "directive", type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { kind: "directive", type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { kind: "directive", type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { kind: "directive", type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-editor',
@@ -4010,144 +4351,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['defaultToolbar', { read: ToolBarComponent, static: false }]
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * @hidden
- */
-class ColorPickerDialogComponent extends DialogContentBase {
-    constructor(dialog, localization) {
-        super(dialog);
-        this.dialog = dialog;
-        this.localization = localization;
-    }
-    handleActiveColorClick(event) {
-        event.preventOpen();
-        this.value = event.color;
-    }
-    handleClearButtonClick() {
-        this.editor.exec(this.editorCommand, undefined);
-    }
-    onCancelAction() {
-        this.dialog.close();
-    }
-    onConfirmAction() {
-        if (this.value) {
-            this.editor.exec(this.editorCommand, this.value);
-        }
-        this.dialog.close();
-        this.editor.view.focus();
-    }
-    setData(args) {
-        this.editor = args.editor;
-        this.value = args.value;
-        this.svgIcon = args.svgIcon;
-        this.editorCommand = args.editorCommand;
-        this.paletteSettings = args.paletteSettings;
-        this.icon = args.icon;
-        this.views = args.view ? [args.view] : args.views;
-    }
-    textFor(key) {
-        return this.localization.get(key);
-    }
-}
-ColorPickerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPickerDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ textFor(editorCommand) }}
-        </kendo-dialog-titlebar>
-        <div [style.text-align]="'center'">
-            <kendo-colorpicker
-                #colorpicker
-                [views]="views"
-                [format]="'hex'"
-                [attr.title]="title"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                [(value)]="value"
-                [paletteSettings]="paletteSettings"
-                (activeColorClick)="handleActiveColorClick($event)"
-                (clearButtonClick)="handleClearButtonClick()"
-            >
-            </kendo-colorpicker>
-        </div>
-        <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, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: 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"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-        <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ textFor(editorCommand) }}
-        </kendo-dialog-titlebar>
-        <div [style.text-align]="'center'">
-            <kendo-colorpicker
-                #colorpicker
-                [views]="views"
-                [format]="'hex'"
-                [attr.title]="title"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                [(value)]="value"
-                [paletteSettings]="paletteSettings"
-                (activeColorClick)="handleActiveColorClick($event)"
-                (clearButtonClick)="handleClearButtonClick()"
-            >
-            </kendo-colorpicker>
-        </div>
-        <kendo-dialog-actions layout="start">
-            <button
-                kendoButton
-                [primary]="true"
-                (click)="onConfirmAction()"
-            >{{ textFor('dialogApply') }}</button>
-            <button
-                kendoButton
-                (click)="onCancelAction()"
-            >{{ textFor('dialogCancel') }}</button>
-        </kendo-dialog-actions>
-    `,
-                    standalone: true,
-                    imports: [DialogTitleBarComponent, ColorPickerComponent, DialogActionsComponent, ButtonComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }, { type: EditorLocalizationService }]; }, propDecorators: { editor: [{
-                type: Input
-            }], colorPicker: [{
-                type: ViewChild,
-                args: ['colorpicker', { read: ColorPickerComponent, static: true }]
-            }] } });
-
 /**
  * @hidden
  */
-class FontFamilyDropDownListComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
-    onValueChange(tag) {
-        this.valueChange.emit(tag);
+class FontSizeDropDownListComponent {
+    data;
+    value;
+    defaultItem;
+    itemDisabled;
+    title;
+    disabled;
+    tabindex;
+    valueChange = new EventEmitter();
+    element;
+    dropDownList;
+    onValueChange(size) {
+        this.valueChange.emit(size);
     }
     focus() {
         this.dropDownList.focus();
     }
-}
-FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontFamilyDropDownListComponent, isStandalone: true, selector: "kendo-editor-fontfamily-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontSizeDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FontSizeDropDownListComponent, isStandalone: true, selector: "kendo-editor-fontsize-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
         <kendo-dropdownlist
             #element
             kendoEditorDropDownTool
             [defaultItem]="defaultItem"
             [textField]="'text'"
-            [valueField]="'fontName'"
+            [valueField]="'size'"
             [data]="data"
             [(value)]="value"
             [valuePrimitive]="true"
@@ -4158,24 +4389,20 @@ FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             (valueChange)="onValueChange($event)"
             [style.width.em]="13"
         >
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span [ngStyle]="{ 'font-family': dataItem.fontName }">
-                    {{ dataItem.text }}
-                </span>
-            </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-editor-fontfamily-dropdownlist',
+                    selector: 'kendo-editor-fontsize-dropdownlist',
                     template: `
         <kendo-dropdownlist
             #element
             kendoEditorDropDownTool
             [defaultItem]="defaultItem"
             [textField]="'text'"
-            [valueField]="'fontName'"
+            [valueField]="'size'"
             [data]="data"
             [(value)]="value"
             [valuePrimitive]="true"
@@ -4186,15 +4413,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             (valueChange)="onValueChange($event)"
             [style.width.em]="13"
         >
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <span [ngStyle]="{ 'font-family': dataItem.fontName }">
-                    {{ dataItem.text }}
-                </span>
-            </ng-template>
         </kendo-dropdownlist>
     `,
                     standalone: true,
-                    imports: [DropDownListComponent, DropDownToolDirective, ItemTemplateDirective, NgStyle]
+                    imports: [DropDownListComponent, DropDownToolDirective]
                 }]
         }], propDecorators: { data: [{
                 type: Input
@@ -4223,19 +4445,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * @hidden
  */
-class FontFamilyDialogComponent extends DialogContentBase {
+class FontSizeDialogComponent extends DialogContentBase {
+    dialog;
+    localization;
+    editor;
+    fontSizeDropDownList;
+    data = [];
+    defaultItem;
+    value;
+    itemDisabled;
     constructor(dialog, localization) {
         super(dialog);
         this.dialog = dialog;
         this.localization = localization;
-        this.data = [];
     }
     onCancelAction() {
         this.dialog.close();
     }
     onConfirmAction() {
         if (this.value) {
-            this.editor.exec('fontFamily', this.value);
+            this.editor.exec('fontSize', this.value);
         }
         this.dialog.close();
     }
@@ -4249,21 +4478,20 @@ class FontFamilyDialogComponent extends DialogContentBase {
     textFor(key) {
         return this.localization.get(key);
     }
-}
-FontFamilyDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FontFamilyDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontFamilyDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "fontFamilyDropDownList", first: true, predicate: ["fontFamilyDropDownList"], descendants: true, read: FontFamilyDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontSizeDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FontSizeDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "fontSizeDropDownList", first: true, predicate: ["fontSizeDropDownList"], descendants: true, read: FontSizeDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ textFor('fontFamily') }}
+            {{ textFor('fontSize') }}
         </kendo-dialog-titlebar>
         <div [style.text-align]="'center'">
-            <kendo-editor-fontfamily-dropdownlist
-                #fontFamilyDropDownList
+            <kendo-editor-fontsize-dropdownlist
+                #fontSizeDropDownList
                 [defaultItem]="defaultItem"
                 [data]="data"
                 [(value)]="value"
                 [itemDisabled]="itemDisabled"
             >
-            </kendo-editor-fontfamily-dropdownlist>
+            </kendo-editor-fontsize-dropdownlist>
         </div>
         <kendo-dialog-actions layout="start">
             <button
@@ -4276,360 +4504,14 @@ FontFamilyDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
                 (click)="onCancelAction()"
             >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontFamilyDialogComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontSizeDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ textFor('fontFamily') }}
-        </kendo-dialog-titlebar>
-        <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 layout="start">
-            <button
-                kendoButton
-                [primary]="true"
-                (click)="onConfirmAction()"
-            >{{ textFor('dialogApply') }}</button>
-            <button
-                kendoButton
-                (click)="onCancelAction()"
-            >{{ textFor('dialogCancel') }}</button>
-        </kendo-dialog-actions>
-    `,
-                    standalone: true,
-                    imports: [DialogTitleBarComponent, FontFamilyDropDownListComponent, DialogActionsComponent, ButtonComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }, { type: EditorLocalizationService }]; }, propDecorators: { editor: [{
-                type: Input
-            }], fontFamilyDropDownList: [{
-                type: ViewChild,
-                args: ['fontFamilyDropDownList', { read: FontFamilyDropDownListComponent, static: true }]
-            }] } });
-
-/**
- * @hidden
- */
-class PopupTableGridComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this.cellClick = new EventEmitter();
-        this.tableWizardClick = new EventEmitter();
-        this.tableWizardIcon = tableWizardIcon;
-        this.state = { rows: -1, cols: -1 };
-        this.rows = 6;
-        this.cols = 8;
-    }
-    get message() {
-        const { rows, cols } = this.state;
-        const localizationMsg = this.localization.get('insertTableHint') || '';
-        const rowReplacement = rows > -1 ? (rows + 1).toString() : '';
-        const colReplacement = cols > -1 ? (cols + 1).toString() : '';
-        const xReplacement = cols > -1 ? 'x' : '';
-        return replaceMessagePlaceholder(localizationMsg, [
-            { placeholder: 'rows', value: rowReplacement },
-            { placeholder: 'columns', value: colReplacement },
-            { placeholder: 'x', value: xReplacement }
-        ]);
-    }
-    get cells() {
-        return Array.from(Array(this.rows * this.cols).keys());
-    }
-    selected(index) {
-        const { rows, cols } = this.state;
-        const cellRow = Math.floor(index / this.cols);
-        const cellCol = index % this.cols;
-        return cellRow <= rows && cellCol <= cols;
-    }
-    setState(index) {
-        const rows = Math.floor(index / this.cols);
-        const cols = index % this.cols;
-        this.state = { rows: rows, cols: cols };
-    }
-    resetState() {
-        this.state = { rows: -1, cols: -1 };
-    }
-    insertTable() {
-        this.cellClick.emit(this.state);
-    }
-    openTableWizard() {
-        this.tableWizardClick.emit();
-    }
-}
-PopupTableGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupTableGridComponent, deps: [{ token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PopupTableGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopupTableGridComponent, isStandalone: true, selector: "kendo-popup-table-grid", outputs: { cellClick: "cellClick", tableWizardClick: "tableWizardClick" }, ngImport: i0, template: `
-        <div
-            [style.border-color]="'inherit'"
-            class="k-ct-popup"
-            (mouseleave)="resetState()"
-            (click)="insertTable()">
-            <span *ngFor="let i of cells"
-                class="k-ct-cell"
-                [class.k-selected]="selected(i)"
-                [class.k-disabled]="!selected(i)"
-                (mouseenter)="setState(i)">
-            </span>
-        </div>
-        <div class="k-status" unselectable="on">{{ message }}</div>
-        <!-- uncomment when TableWizard is completed
-        <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
-        </div>
-        -->
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupTableGridComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-popup-table-grid',
-                    template: `
-        <div
-            [style.border-color]="'inherit'"
-            class="k-ct-popup"
-            (mouseleave)="resetState()"
-            (click)="insertTable()">
-            <span *ngFor="let i of cells"
-                class="k-ct-cell"
-                [class.k-selected]="selected(i)"
-                [class.k-disabled]="!selected(i)"
-                (mouseenter)="setState(i)">
-            </span>
-        </div>
-        <div class="k-status" unselectable="on">{{ message }}</div>
-        <!-- uncomment when TableWizard is completed
-        <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
-        </div>
-        -->
-    `,
-                    standalone: true,
-                    imports: [NgFor]
-                }]
-        }], ctorParameters: function () { return [{ type: EditorLocalizationService }]; }, propDecorators: { cellClick: [{
-                type: Output
-            }], tableWizardClick: [{
-                type: Output
-            }] } });
-
-/**
- * @hidden
- */
-class InsertTableDialogComponent extends DialogContentBase {
-    constructor(dialog, localization) {
-        super(dialog);
-        this.dialog = dialog;
-        this.localization = localization;
-    }
-    onCancelAction() {
-        this.dialog.close();
-        this.editor.view.focus();
-    }
-    onCellClick(args) {
-        this.dialog.close();
-        this.editor.exec("insertTable", args);
-        this.editor.view.focus();
-    }
-    setData(args) {
-        this.editor = args.editor;
-    }
-    textFor(key) {
-        return this.localization.get(key);
-    }
-}
-InsertTableDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InsertTableDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-InsertTableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InsertTableDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ textFor('insertTable') }}
-        </kendo-dialog-titlebar>
-        <div [style.text-align]="'center'">
-            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
-        </div>
-        <kendo-dialog-actions layout="start">
-            <button
-                kendoButton
-                (click)="onCancelAction()"
-            >{{ textFor('dialogCancel') }}</button>
-        </kendo-dialog-actions>
-    `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InsertTableDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-        <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ textFor('insertTable') }}
-        </kendo-dialog-titlebar>
-        <div [style.text-align]="'center'">
-            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
-        </div>
-        <kendo-dialog-actions layout="start">
-            <button
-                kendoButton
-                (click)="onCancelAction()"
-            >{{ textFor('dialogCancel') }}</button>
-        </kendo-dialog-actions>
-    `,
-                    standalone: true,
-                    imports: [DialogTitleBarComponent, PopupTableGridComponent, DialogActionsComponent, ButtonComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }, { type: EditorLocalizationService }]; }, propDecorators: { editor: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class FontSizeDropDownListComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
-    onValueChange(size) {
-        this.valueChange.emit(size);
-    }
-    focus() {
-        this.dropDownList.focus();
-    }
-}
-FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontSizeDropDownListComponent, isStandalone: true, selector: "kendo-editor-fontsize-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
-        <kendo-dropdownlist
-            #element
-            kendoEditorDropDownTool
-            [defaultItem]="defaultItem"
-            [textField]="'text'"
-            [valueField]="'size'"
-            [data]="data"
-            [(value)]="value"
-            [valuePrimitive]="true"
-            [itemDisabled]="itemDisabled"
-            [attr.title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            [style.width.em]="13"
-        >
-        </kendo-dropdownlist>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-editor-fontsize-dropdownlist',
-                    template: `
-        <kendo-dropdownlist
-            #element
-            kendoEditorDropDownTool
-            [defaultItem]="defaultItem"
-            [textField]="'text'"
-            [valueField]="'size'"
-            [data]="data"
-            [(value)]="value"
-            [valuePrimitive]="true"
-            [itemDisabled]="itemDisabled"
-            [attr.title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            [style.width.em]="13"
-        >
-        </kendo-dropdownlist>
-    `,
-                    standalone: true,
-                    imports: [DropDownListComponent, DropDownToolDirective]
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], defaultItem: [{
-                type: Input
-            }], itemDisabled: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], element: [{
-                type: ViewChild,
-                args: ['element', { static: true }]
-            }], dropDownList: [{
-                type: ViewChild,
-                args: ['element', { read: DropDownListComponent, static: true }]
-            }] } });
-
-/**
- * @hidden
- */
-class FontSizeDialogComponent extends DialogContentBase {
-    constructor(dialog, localization) {
-        super(dialog);
-        this.dialog = dialog;
-        this.localization = localization;
-        this.data = [];
-    }
-    onCancelAction() {
-        this.dialog.close();
-    }
-    onConfirmAction() {
-        if (this.value) {
-            this.editor.exec('fontSize', this.value);
-        }
-        this.dialog.close();
-    }
-    setData(args) {
-        this.editor = args.editor;
-        this.data = args.data;
-        this.defaultItem = args.defaultItem;
-        this.value = args.value;
-        this.itemDisabled = args.itemDisabled;
-    }
-    textFor(key) {
-        return this.localization.get(key);
-    }
-}
-FontSizeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FontSizeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FontSizeDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "fontSizeDropDownList", first: true, predicate: ["fontSizeDropDownList"], descendants: true, read: FontSizeDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ textFor('fontSize') }}
-        </kendo-dialog-titlebar>
-        <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 layout="start">
-            <button
-                kendoButton
-                [primary]="true"
-                (click)="onConfirmAction()"
-            >{{ textFor('dialogApply') }}</button>
-            <button
-                kendoButton
-                (click)="onCancelAction()"
-            >{{ textFor('dialogCancel') }}</button>
-        </kendo-dialog-actions>
-    `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FontSizeDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-        <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ textFor('fontSize') }}
+            {{ textFor('fontSize') }}
         </kendo-dialog-titlebar>
         <div [style.text-align]="'center'">
             <kendo-editor-fontsize-dropdownlist
@@ -4675,31 +4557,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class EditorFontSizeComponent extends ToolBarToolComponent {
-    constructor(dialogService, localization, providerService, toolsService, renderer) {
-        super();
-        this.dialogService = dialogService;
-        this.localization = localization;
-        this.toolsService = toolsService;
-        this.renderer = renderer;
-        this.disabled = false;
-        this.tabindex = -1;
-        /**
-         * Fires when the user updates the value of the drop-down list.
-         */
-        this.valueChange = new EventEmitter();
-        this.fontSizeSVGIcon = fontSizeIcon;
-        this._data = [
-            { text: '8px', size: '8px' },
-            { text: '10px', size: '10px' },
-            { text: '12px', size: '12px' },
-            { text: '14px', size: '14px' },
-            { text: '18px', size: '18px' },
-            { text: '24px', size: '24px' },
-            { text: '36px', size: '36px' }
-        ];
-        this.editor = providerService.editor;
-        this.isBuiltInTool = true;
-    }
+    dialogService;
+    localization;
+    toolsService;
+    renderer;
+    value;
+    disabled = false;
+    tabindex = -1;
     /**
      * Overrides the default font size list.
      * Numeric values are treated as pixels.
@@ -4719,6 +4583,42 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
     get data() {
         return this._data;
     }
+    /**
+     * Fires when the user updates the value of the drop-down list.
+     */
+    valueChange = new EventEmitter();
+    element;
+    fontSizeDropDownList;
+    fontSizeButton;
+    /**
+     * @hidden
+     */
+    defaultItem;
+    fontSizeSVGIcon = fontSizeIcon;
+    /**
+     * @hidden
+     */
+    itemDisabled;
+    subs;
+    editor;
+    _data = [
+        { text: '8px', size: '8px' },
+        { text: '10px', size: '10px' },
+        { text: '12px', size: '12px' },
+        { text: '14px', size: '14px' },
+        { text: '18px', size: '18px' },
+        { text: '24px', size: '24px' },
+        { text: '36px', size: '36px' }
+    ];
+    constructor(dialogService, localization, providerService, toolsService, renderer) {
+        super();
+        this.dialogService = dialogService;
+        this.localization = localization;
+        this.toolsService = toolsService;
+        this.renderer = renderer;
+        this.editor = providerService.editor;
+        this.isBuiltInTool = true;
+    }
     ngOnInit() {
         this.itemDisabled = itemArgs => {
             if (!this.overflows && this.fontSizeDropDownList && !this.fontSizeDropDownList.dropDownList.isOpen) {
@@ -4801,104 +4701,302 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
             this.fontSizeDropDownList?.focus();
         }
     }
-    /**
-     * @hidden
-     */
-    handleKey() {
-        this.tabindex = -1;
-        return false;
+    /**
+     * @hidden
+     */
+    handleKey() {
+        this.tabindex = -1;
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorFontSizeComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorFontSizeComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }], viewQueries: [{ 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
+                #element
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+                [title]="title"
+                [disabled]="disabled"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+            >
+            </kendo-editor-fontsize-dropdownlist>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #fontSizeButton
+                tabindex="-1"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
+                [tabindex]="tabindex"
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }],
+                    selector: 'kendo-toolbar-dropdownlist[kendoEditorFontSize]',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-editor-fontsize-dropdownlist
+                #element
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+                [title]="title"
+                [disabled]="disabled"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+            >
+            </kendo-editor-fontsize-dropdownlist>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #fontSizeButton
+                tabindex="-1"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
+                [tabindex]="tabindex"
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [FontSizeDropDownListComponent, IconWrapperComponent, NgIf]
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], element: [{
+                type: ViewChild,
+                args: ['element']
+            }], fontSizeDropDownList: [{
+                type: ViewChild,
+                args: ['element', { read: FontSizeDropDownListComponent, static: false }]
+            }], fontSizeButton: [{
+                type: ViewChild,
+                args: ['fontSizeButton', { read: ElementRef }]
+            }] } });
+
+/**
+ * @hidden
+ */
+class FontFamilyDropDownListComponent {
+    data;
+    value;
+    defaultItem;
+    itemDisabled;
+    title;
+    disabled;
+    tabindex;
+    valueChange = new EventEmitter();
+    element;
+    dropDownList;
+    onValueChange(tag) {
+        this.valueChange.emit(tag);
+    }
+    focus() {
+        this.dropDownList.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontFamilyDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FontFamilyDropDownListComponent, isStandalone: true, selector: "kendo-editor-fontfamily-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
+        <kendo-dropdownlist
+            #element
+            kendoEditorDropDownTool
+            [defaultItem]="defaultItem"
+            [textField]="'text'"
+            [valueField]="'fontName'"
+            [data]="data"
+            [(value)]="value"
+            [valuePrimitive]="true"
+            [itemDisabled]="itemDisabled"
+            [attr.title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
+            [style.width.em]="13"
+        >
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span [ngStyle]="{ 'font-family': dataItem.fontName }">
+                    {{ dataItem.text }}
+                </span>
+            </ng-template>
+        </kendo-dropdownlist>
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-editor-fontfamily-dropdownlist',
+                    template: `
+        <kendo-dropdownlist
+            #element
+            kendoEditorDropDownTool
+            [defaultItem]="defaultItem"
+            [textField]="'text'"
+            [valueField]="'fontName'"
+            [data]="data"
+            [(value)]="value"
+            [valuePrimitive]="true"
+            [itemDisabled]="itemDisabled"
+            [attr.title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
+            [style.width.em]="13"
+        >
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span [ngStyle]="{ 'font-family': dataItem.fontName }">
+                    {{ dataItem.text }}
+                </span>
+            </ng-template>
+        </kendo-dropdownlist>
+    `,
+                    standalone: true,
+                    imports: [DropDownListComponent, DropDownToolDirective, ItemTemplateDirective, NgStyle]
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], defaultItem: [{
+                type: Input
+            }], itemDisabled: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], element: [{
+                type: ViewChild,
+                args: ['element', { static: true }]
+            }], dropDownList: [{
+                type: ViewChild,
+                args: ['element', { read: DropDownListComponent, static: true }]
+            }] } });
+
+/**
+ * @hidden
+ */
+class FontFamilyDialogComponent extends DialogContentBase {
+    dialog;
+    localization;
+    editor;
+    fontFamilyDropDownList;
+    data = [];
+    defaultItem;
+    value;
+    itemDisabled;
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+    }
+    onCancelAction() {
+        this.dialog.close();
+    }
+    onConfirmAction() {
+        if (this.value) {
+            this.editor.exec('fontFamily', this.value);
+        }
+        this.dialog.close();
+    }
+    setData(args) {
+        this.editor = args.editor;
+        this.data = args.data;
+        this.defaultItem = args.defaultItem;
+        this.value = args.value;
+        this.itemDisabled = args.itemDisabled;
     }
-}
-EditorFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: EditorFontSizeComponent, isStandalone: true, 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
-                #element
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontFamilyDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FontFamilyDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "fontFamilyDropDownList", first: true, predicate: ["fontFamilyDropDownList"], descendants: true, read: FontFamilyDropDownListComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('fontFamily') }}
+        </kendo-dialog-titlebar>
+        <div [style.text-align]="'center'">
+            <kendo-editor-fontfamily-dropdownlist
+                #fontFamilyDropDownList
                 [defaultItem]="defaultItem"
                 [data]="data"
                 [(value)]="value"
                 [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontsize-dropdownlist>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div #fontSizeButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
+            </kendo-editor-fontfamily-dropdownlist>
+        </div>
+        <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, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FontFamilyDialogComponent, decorators: [{
             type: Component,
             args: [{
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }],
-                    selector: 'kendo-toolbar-dropdownlist[kendoEditorFontSize]',
                     template: `
-        <ng-template #toolbarTemplate>
-            <kendo-editor-fontsize-dropdownlist
-                #element
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('fontFamily') }}
+        </kendo-dialog-titlebar>
+        <div [style.text-align]="'center'">
+            <kendo-editor-fontfamily-dropdownlist
+                #fontFamilyDropDownList
                 [defaultItem]="defaultItem"
                 [data]="data"
                 [(value)]="value"
                 [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontsize-dropdownlist>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div #fontSizeButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
-        </ng-template>
+            </kendo-editor-fontfamily-dropdownlist>
+        </div>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
+        </kendo-dialog-actions>
     `,
                     standalone: true,
-                    imports: [FontSizeDropDownListComponent, IconWrapperComponent, NgIf]
+                    imports: [DialogTitleBarComponent, FontFamilyDropDownListComponent, DialogActionsComponent, ButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }, { type: EditorLocalizationService }]; }, propDecorators: { editor: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], element: [{
-                type: ViewChild,
-                args: ['element']
-            }], fontSizeDropDownList: [{
-                type: ViewChild,
-                args: ['element', { read: FontSizeDropDownListComponent, static: false }]
-            }], fontSizeButton: [{
+            }], fontFamilyDropDownList: [{
                 type: ViewChild,
-                args: ['fontSizeButton', { read: ElementRef }]
+                args: ['fontFamilyDropDownList', { read: FontFamilyDropDownListComponent, static: true }]
             }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -4914,36 +5012,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class EditorFontFamilyComponent extends ToolBarToolComponent {
-    constructor(dialogService, localization, providerService, toolsService, renderer) {
-        super();
-        this.dialogService = dialogService;
-        this.localization = localization;
-        this.toolsService = toolsService;
-        this.renderer = renderer;
-        this.disabled = false;
-        this.tabindex = -1;
-        /**
-         * Fires when the user updates the value of the drop-down list.
-         */
-        this.valueChange = new EventEmitter();
-        this.fontFamilySVGIcon = fontFamilyIcon;
-        this._data = [
-            { text: 'Arial', fontName: 'Arial,"Helvetica Neue",Helvetica,sans-serif' },
-            { text: 'Courier New', fontName: '"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace' },
-            { text: 'Georgia', fontName: 'Georgia,Times,"Times New Roman",serif' },
-            {
-                fontName: 'Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,"Helvetica Inserat","Bitstream Vera Sans Bold","Arial Black","sans serif"',
-                text: 'Impact'
-            },
-            { text: 'Lucida Console', fontName: '"Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace' },
-            { text: 'Tahoma', fontName: 'Tahoma,Verdana,Segoe,sans-serif' },
-            { text: 'Times New Roman', fontName: 'TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif' },
-            { text: 'Trebuchet MS', fontName: '"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif' },
-            { text: 'Verdana', fontName: 'Verdana,Geneva,sans-serif' }
-        ];
-        this.editor = providerService.editor;
-        this.isBuiltInTool = true;
-    }
+    dialogService;
+    localization;
+    toolsService;
+    renderer;
+    value;
+    disabled = false;
+    tabindex = -1;
     /**
      * Overrides the default font list.
      */
@@ -4953,6 +5028,47 @@ class EditorFontFamilyComponent extends ToolBarToolComponent {
     get data() {
         return this._data;
     }
+    /**
+     * Fires when the user updates the value of the drop-down list.
+     */
+    valueChange = new EventEmitter();
+    element;
+    fontFamilyDropDownList;
+    fontFamilyButton;
+    /**
+     * @hidden
+     */
+    defaultItem;
+    /**
+     * @hidden
+     */
+    itemDisabled;
+    fontFamilySVGIcon = fontFamilyIcon;
+    subs;
+    editor;
+    _data = [
+        { text: 'Arial', fontName: 'Arial,"Helvetica Neue",Helvetica,sans-serif' },
+        { text: 'Courier New', fontName: '"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace' },
+        { text: 'Georgia', fontName: 'Georgia,Times,"Times New Roman",serif' },
+        {
+            fontName: 'Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,"Helvetica Inserat","Bitstream Vera Sans Bold","Arial Black","sans serif"',
+            text: 'Impact'
+        },
+        { text: 'Lucida Console', fontName: '"Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace' },
+        { text: 'Tahoma', fontName: 'Tahoma,Verdana,Segoe,sans-serif' },
+        { text: 'Times New Roman', fontName: 'TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif' },
+        { text: 'Trebuchet MS', fontName: '"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif' },
+        { text: 'Verdana', fontName: 'Verdana,Geneva,sans-serif' }
+    ];
+    constructor(dialogService, localization, providerService, toolsService, renderer) {
+        super();
+        this.dialogService = dialogService;
+        this.localization = localization;
+        this.toolsService = toolsService;
+        this.renderer = renderer;
+        this.editor = providerService.editor;
+        this.isBuiltInTool = true;
+    }
     ngOnInit() {
         this.itemDisabled = (itemArgs) => {
             if (!this.overflows && this.fontFamilyDropDownList && !this.fontFamilyDropDownList.dropDownList.isOpen) {
@@ -5040,9 +5156,8 @@ class EditorFontFamilyComponent extends ToolBarToolComponent {
         this.tabindex = -1;
         return false;
     }
-}
-EditorFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: EditorFontFamilyComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorFontFamilyComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorFontFamilyComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }], viewQueries: [{ 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
                 #element
@@ -5073,7 +5188,8 @@ EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }],
@@ -5110,27 +5226,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </ng-template>
     `,
                     standalone: true,
-                    imports: [FontFamilyDropDownListComponent, IconWrapperComponent, NgIf]
+                    imports: [FontFamilyDropDownListComponent, IconWrapperComponent, NgIf]
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], element: [{
+                type: ViewChild,
+                args: ['element']
+            }], fontFamilyDropDownList: [{
+                type: ViewChild,
+                args: ['element', { read: FontFamilyDropDownListComponent, static: false }]
+            }], fontFamilyButton: [{
+                type: ViewChild,
+                args: ['fontFamilyButton', { read: ElementRef }]
+            }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @hidden
+ */
+class ColorPickerDialogComponent extends DialogContentBase {
+    dialog;
+    localization;
+    editor;
+    colorPicker;
+    value;
+    title;
+    editorCommand;
+    paletteSettings;
+    icon;
+    svgIcon;
+    view;
+    views;
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+    }
+    handleActiveColorClick(event) {
+        event.preventOpen();
+        this.value = event.color;
+    }
+    handleClearButtonClick() {
+        this.editor.exec(this.editorCommand, undefined);
+    }
+    onCancelAction() {
+        this.dialog.close();
+    }
+    onConfirmAction() {
+        if (this.value) {
+            this.editor.exec(this.editorCommand, this.value);
+        }
+        this.dialog.close();
+        this.editor.view.focus();
+    }
+    setData(args) {
+        this.editor = args.editor;
+        this.value = args.value;
+        this.svgIcon = args.svgIcon;
+        this.editorCommand = args.editorCommand;
+        this.paletteSettings = args.paletteSettings;
+        this.icon = args.icon;
+        this.views = args.view ? [args.view] : args.views;
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor(editorCommand) }}
+        </kendo-dialog-titlebar>
+        <div [style.text-align]="'center'">
+            <kendo-colorpicker
+                #colorpicker
+                [views]="views"
+                [format]="'hex'"
+                [attr.title]="title"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                [(value)]="value"
+                [paletteSettings]="paletteSettings"
+                (activeColorClick)="handleActiveColorClick($event)"
+                (clearButtonClick)="handleClearButtonClick()"
+            >
+            </kendo-colorpicker>
+        </div>
+        <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, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: 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"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor(editorCommand) }}
+        </kendo-dialog-titlebar>
+        <div [style.text-align]="'center'">
+            <kendo-colorpicker
+                #colorpicker
+                [views]="views"
+                [format]="'hex'"
+                [attr.title]="title"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                [(value)]="value"
+                [paletteSettings]="paletteSettings"
+                (activeColorClick)="handleActiveColorClick($event)"
+                (clearButtonClick)="handleClearButtonClick()"
+            >
+            </kendo-colorpicker>
+        </div>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                [primary]="true"
+                (click)="onConfirmAction()"
+            >{{ textFor('dialogApply') }}</button>
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
+        </kendo-dialog-actions>
+    `,
+                    standalone: true,
+                    imports: [DialogTitleBarComponent, ColorPickerComponent, DialogActionsComponent, ButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }, { type: EditorLocalizationService }]; }, propDecorators: { editor: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], element: [{
-                type: ViewChild,
-                args: ['element']
-            }], fontFamilyDropDownList: [{
-                type: ViewChild,
-                args: ['element', { read: FontFamilyDropDownListComponent, static: false }]
-            }], fontFamilyButton: [{
+            }], colorPicker: [{
                 type: ViewChild,
-                args: ['fontFamilyButton', { read: ElementRef }]
+                args: ['colorpicker', { read: ColorPickerComponent, static: true }]
             }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -5141,28 +5379,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * foreground or the background color of the text, use the `kendoEditorForeColor` or `kendoEditorBackColor` directivе ([more information]({% slug toolbartools_editor %}#toc-colorpickers)).
  */
 class EditorColorPickerComponent extends ToolBarToolComponent {
-    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.
-         *
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Specifies whether the ColorPicker will render a gradient, palette, or both in its popup.
-         *
-         * @default ['palette']
-         */
-        this.views = ['palette'];
-        this.editor = providerService.editor;
-        this.isBuiltInTool = true;
-    }
+    localization;
+    dialogService;
+    ngZone;
+    renderer;
+    tabindex = -1;
+    /**
+     * Specifies the initial value of the color picker.
+     */
+    value;
+    /**
+     * Specifies the Kendo UI font icon that will be used.
+     */
+    icon;
+    /**
+     * Defines an SVGIcon to be rendered within the ColorPicker button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    svgIcon;
+    /**
+     * Overrides the default [color palette settings]({% slug api_inputs_palettesettings %}).
+     */
+    paletteSettings;
+    /**
+     * Specifies the color-related command that will be executed.
+     */
+    editorCommand;
+    /**
+     * Specifies if the component should be disabled.
+     *
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Specifies whether the ColorPicker will render a gradient, palette, or both in its popup.
+     *
+     * @default ['palette']
+     */
+    views = ['palette'];
     /**
      * @hidden
      *
@@ -5180,6 +5434,22 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
     get title() {
         return this.localization.get(this.editorCommand);
     }
+    element;
+    colorPicker;
+    colorPickerButton;
+    subs;
+    valueCache;
+    editor;
+    activeView;
+    constructor(localization, dialogService, ngZone, providerService, renderer) {
+        super();
+        this.localization = localization;
+        this.dialogService = dialogService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.editor = providerService.editor;
+        this.isBuiltInTool = true;
+    }
     ngOnInit() {
         this.subs = this.editor.stateChange.subscribe(({ style }) => {
             this.disabled = style.disabled;
@@ -5297,9 +5567,8 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
         this.tabindex = -1;
         return false;
     }
-}
-EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: EditorColorPickerComponent, isStandalone: true, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", svgIcon: "svgIcon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: EditorLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }, { token: ProviderService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorColorPickerComponent, isStandalone: true, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", svgIcon: "svgIcon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #colorpicker
@@ -5341,7 +5610,8 @@ EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }],
@@ -5407,12 +5677,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], view: [{
                 type: Input
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], element: [{
                 type: ViewChild,
                 args: ['colorpicker', { read: ElementRef }]
@@ -5424,6 +5688,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['colorPickerButton', { read: ElementRef }]
             }] } });
 
+/**
+ * @hidden
+ */
+class PopupTableGridComponent {
+    localization;
+    cellClick = new EventEmitter();
+    tableWizardClick = new EventEmitter();
+    tableWizardIcon = tableWizardIcon;
+    state = { rows: -1, cols: -1 };
+    rows = 6;
+    cols = 8;
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get message() {
+        const { rows, cols } = this.state;
+        const localizationMsg = this.localization.get('insertTableHint') || '';
+        const rowReplacement = rows > -1 ? (rows + 1).toString() : '';
+        const colReplacement = cols > -1 ? (cols + 1).toString() : '';
+        const xReplacement = cols > -1 ? 'x' : '';
+        return replaceMessagePlaceholder(localizationMsg, [
+            { placeholder: 'rows', value: rowReplacement },
+            { placeholder: 'columns', value: colReplacement },
+            { placeholder: 'x', value: xReplacement }
+        ]);
+    }
+    get cells() {
+        return Array.from(Array(this.rows * this.cols).keys());
+    }
+    selected(index) {
+        const { rows, cols } = this.state;
+        const cellRow = Math.floor(index / this.cols);
+        const cellCol = index % this.cols;
+        return cellRow <= rows && cellCol <= cols;
+    }
+    setState(index) {
+        const rows = Math.floor(index / this.cols);
+        const cols = index % this.cols;
+        this.state = { rows: rows, cols: cols };
+    }
+    resetState() {
+        this.state = { rows: -1, cols: -1 };
+    }
+    insertTable() {
+        this.cellClick.emit(this.state);
+    }
+    openTableWizard() {
+        this.tableWizardClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupTableGridComponent, deps: [{ token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopupTableGridComponent, isStandalone: true, selector: "kendo-popup-table-grid", outputs: { cellClick: "cellClick", tableWizardClick: "tableWizardClick" }, ngImport: i0, template: `
+        <div
+            [style.border-color]="'inherit'"
+            class="k-ct-popup"
+            (mouseleave)="resetState()"
+            (click)="insertTable()">
+            <span *ngFor="let i of cells"
+                class="k-ct-cell"
+                [class.k-selected]="selected(i)"
+                [class.k-disabled]="!selected(i)"
+                (mouseenter)="setState(i)">
+            </span>
+        </div>
+        <div class="k-status" unselectable="on">{{ message }}</div>
+        <!-- uncomment when TableWizard is completed
+        <div class="k-editor-toolbar" unselectable="on">
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+        </div>
+        -->
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupTableGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-popup-table-grid',
+                    template: `
+        <div
+            [style.border-color]="'inherit'"
+            class="k-ct-popup"
+            (mouseleave)="resetState()"
+            (click)="insertTable()">
+            <span *ngFor="let i of cells"
+                class="k-ct-cell"
+                [class.k-selected]="selected(i)"
+                [class.k-disabled]="!selected(i)"
+                (mouseenter)="setState(i)">
+            </span>
+        </div>
+        <div class="k-status" unselectable="on">{{ message }}</div>
+        <!-- uncomment when TableWizard is completed
+        <div class="k-editor-toolbar" unselectable="on">
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+        </div>
+        -->
+    `,
+                    standalone: true,
+                    imports: [NgFor]
+                }]
+        }], ctorParameters: function () { return [{ type: EditorLocalizationService }]; }, propDecorators: { cellClick: [{
+                type: Output
+            }], tableWizardClick: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class InsertTableDialogComponent extends DialogContentBase {
+    dialog;
+    localization;
+    editor;
+    constructor(dialog, localization) {
+        super(dialog);
+        this.dialog = dialog;
+        this.localization = localization;
+    }
+    onCancelAction() {
+        this.dialog.close();
+        this.editor.view.focus();
+    }
+    onCellClick(args) {
+        this.dialog.close();
+        this.editor.exec("insertTable", args);
+        this.editor.view.focus();
+    }
+    setData(args) {
+        this.editor = args.editor;
+    }
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InsertTableDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InsertTableDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('insertTable') }}
+        </kendo-dialog-titlebar>
+        <div [style.text-align]="'center'">
+            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
+        </div>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
+        </kendo-dialog-actions>
+    `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "component", type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InsertTableDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-dialog-titlebar (close)="onCancelAction()">
+            {{ textFor('insertTable') }}
+        </kendo-dialog-titlebar>
+        <div [style.text-align]="'center'">
+            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
+        </div>
+        <kendo-dialog-actions layout="start">
+            <button
+                kendoButton
+                (click)="onCancelAction()"
+            >{{ textFor('dialogCancel') }}</button>
+        </kendo-dialog-actions>
+    `,
+                    standalone: true,
+                    imports: [DialogTitleBarComponent, PopupTableGridComponent, DialogActionsComponent, ButtonComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }, { type: EditorLocalizationService }]; }, propDecorators: { editor: [{
+                type: Input
+            }] } });
+
 const popupWrapperWidth = '190px';
 const popupWrapperHeight = '164px'; // Set to '192px' when TableWizard button is added;
 /**
@@ -5435,16 +5870,33 @@ const popupWrapperHeight = '164px'; // Set to '192px' when TableWizard button is
  * ```
  */
 class EditorInsertTableButtonComponent extends ToolBarToolComponent {
+    localization;
+    popupService;
+    dialogService;
+    renderer;
+    element;
+    overflowElement;
+    popupGridTemplate;
+    /**
+     * @hidden
+     */
+    popupRef;
+    /**
+     * @hidden
+     */
+    disabled;
+    addTableSVGIcon = tableAddIcon;
+    open = false;
+    buttonBlurred = new EventEmitter();
+    cellClicked = new EventEmitter();
+    subs;
+    editor;
     constructor(localization, popupService, dialogService, providerService, renderer) {
         super();
         this.localization = localization;
         this.popupService = popupService;
         this.dialogService = dialogService;
         this.renderer = renderer;
-        this.addTableSVGIcon = tableAddIcon;
-        this.open = false;
-        this.buttonBlurred = new EventEmitter();
-        this.cellClicked = new EventEmitter();
         this.editor = providerService.editor;
         this.subs = this.editor.stateChange.subscribe(({ insertTable }) => {
             this.disabled = insertTable.disabled;
@@ -5569,9 +6021,8 @@ class EditorInsertTableButtonComponent extends ToolBarToolComponent {
     getButton() {
         return (this.overflows ? this.overflowElement : this.element)?.nativeElement;
     }
-}
-EditorInsertTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: EditorInsertTableButtonComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertTableButtonComponent, deps: [{ token: EditorLocalizationService }, { token: i2.PopupService }, { token: i1$1.DialogService }, { token: ProviderService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorInsertTableButtonComponent, isStandalone: true, selector: "kendo-editor-insert-table-button", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorInsertTableButtonComponent) }], viewQueries: [{ 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
                 type="button"
@@ -5605,7 +6056,8 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             <kendo-popup-table-grid (cellClick)="onCellClick($event)" (tableWizardClick)="onTableWizardClick()"></kendo-popup-table-grid>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertTableButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertTableButtonComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorInsertTableButtonComponent) }],
@@ -5647,13 +6099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [ButtonComponent, IconWrapperComponent, NgIf, PopupTableGridComponent]
                 }]
-        }], 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: [{
-                type: ViewChild,
-                args: ['popupTemplate']
-            }], element: [{
+        }], ctorParameters: function () { return [{ type: EditorLocalizationService }, { type: i2.PopupService }, { type: i1$1.DialogService }, { type: ProviderService }, { type: i0.Renderer2 }]; }, propDecorators: { element: [{
                 type: ViewChild,
                 args: ['element', { read: ElementRef }]
             }], overflowElement: [{
@@ -5678,10 +6124,10 @@ class EditorBlockquoteDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('blockquote', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorBlockquoteDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorBlockquoteDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorBlockquoteButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorBlockquoteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorBlockquoteDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorBlockquoteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorBlockquoteDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorBlockquoteButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorBlockquoteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorBlockquoteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorBlockquoteButton]',
@@ -5704,10 +6150,10 @@ class EditorRedoButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('redo', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorRedoButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorRedoButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorRedoButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorRedoButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorRedoButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorRedoButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorRedoButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorRedoButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorRedoButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorRedoButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorRedoButton]',
@@ -5730,10 +6176,10 @@ class EditorUndoButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('undo', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorUndoButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorUndoButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorUndoButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorUndoButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorUndoButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorUndoButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorUndoButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorUndoButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorUndoButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorUndoButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorUndoButton]',
@@ -5755,10 +6201,10 @@ class EditorViewSourceButtonDirective extends EditorCommandDialog {
     constructor(button, localization, providerService, toolsService) {
         super('viewSource', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorViewSourceButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorViewSourceButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorViewSourceButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorViewSourceButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorViewSourceButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorViewSourceButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorViewSourceButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorViewSourceButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorViewSourceButton]',
@@ -5781,10 +6227,10 @@ class EditorStrikethroughButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('strikethrough', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorStrikethroughButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorStrikethroughButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorStrikethroughButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorStrikethroughButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorStrikethroughButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorStrikethroughButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorStrikethroughButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorStrikethroughButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorStrikethroughButton]',
@@ -5807,10 +6253,10 @@ class EditorSubscriptButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('subscript', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorSubscriptButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorSubscriptButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorSubscriptButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorSubscriptButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorSubscriptButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorSubscriptButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorSubscriptButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorSubscriptButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorSubscriptButton]',
@@ -5833,10 +6279,10 @@ class EditorSuperscriptButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('superscript', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorSuperscriptButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorSuperscriptButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorSuperscriptButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorSuperscriptButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorSuperscriptButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorSuperscriptButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorSuperscriptButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorSuperscriptButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorSuperscriptButton]',
@@ -5858,10 +6304,10 @@ class EditorInsertFileButtonDirective extends EditorCommandDialog {
     constructor(button, localization, providerService, toolsService) {
         super('insertFile', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertFileButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorInsertFileButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorInsertFileButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertFileButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorInsertFileButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorInsertFileButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorInsertFileButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorInsertFileButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorInsertFileButton]',
@@ -5879,16 +6325,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class EditorForeColorDirective {
+    colorPicker;
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.foreColor;
         this.colorPicker.svgIcon = commandSVGIcons.foreColor;
         this.colorPicker.editorCommand = 'foreColor';
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorForeColorDirective, deps: [{ token: EditorColorPickerComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorForeColorDirective, isStandalone: true, selector: "[kendoEditorForeColor]", ngImport: i0 });
 }
-EditorForeColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorForeColorDirective, deps: [{ token: EditorColorPickerComponent }], target: i0.ɵɵFactoryTarget.Directive });
-EditorForeColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorForeColorDirective, isStandalone: true, selector: "[kendoEditorForeColor]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorForeColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorForeColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoEditorForeColor]',
@@ -5906,16 +6353,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class EditorBackColorDirective {
+    colorPicker;
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.backColor;
         this.colorPicker.svgIcon = commandSVGIcons.backColor;
         this.colorPicker.editorCommand = 'backColor';
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorBackColorDirective, deps: [{ token: EditorColorPickerComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorBackColorDirective, isStandalone: true, selector: "[kendoEditorBackColor]", ngImport: i0 });
 }
-EditorBackColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorBackColorDirective, deps: [{ token: EditorColorPickerComponent }], target: i0.ɵɵFactoryTarget.Directive });
-EditorBackColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorBackColorDirective, isStandalone: true, selector: "[kendoEditorBackColor]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorBackColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorBackColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoEditorBackColor]',
@@ -5937,10 +6385,10 @@ class EditorCleanFormattingButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('cleanFormatting', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorCleanFormattingButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorCleanFormattingButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorCleanFormattingButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorCleanFormattingButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorCleanFormattingButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorCleanFormattingButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorCleanFormattingButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorCleanFormattingButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorCleanFormattingButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorCleanFormattingButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorCleanFormattingButton]',
@@ -5963,10 +6411,10 @@ class EditorAddColumnBeforeButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('addColumnBefore', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAddColumnBeforeButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorAddColumnBeforeButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorAddColumnBeforeButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAddColumnBeforeButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorAddColumnBeforeButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorAddColumnBeforeButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAddColumnBeforeButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAddColumnBeforeButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorAddColumnBeforeButton]',
@@ -5989,10 +6437,10 @@ class EditorAddColumnAfterButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('addColumnAfter', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAddColumnAfterButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorAddColumnAfterButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorAddColumnAfterButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAddColumnAfterButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorAddColumnAfterButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorAddColumnAfterButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAddColumnAfterButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAddColumnAfterButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorAddColumnAfterButton]',
@@ -6015,10 +6463,10 @@ class EditorAddRowBeforeButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('addRowBefore', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAddRowBeforeButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorAddRowBeforeButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorAddRowBeforeButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAddRowBeforeButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorAddRowBeforeButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorAddRowBeforeButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAddRowBeforeButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAddRowBeforeButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorAddRowBeforeButton]',
@@ -6041,10 +6489,10 @@ class EditorAddRowAfterButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('addRowAfter', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAddRowAfterButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorAddRowAfterButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorAddRowAfterButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAddRowAfterButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorAddRowAfterButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorAddRowAfterButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorAddRowAfterButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorAddRowAfterButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorAddRowAfterButton]',
@@ -6067,10 +6515,10 @@ class EditorDeleteColumnButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('deleteColumn', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDeleteColumnButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorDeleteColumnButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorDeleteColumnButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDeleteColumnButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorDeleteColumnButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorDeleteColumnButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDeleteColumnButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDeleteColumnButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorDeleteColumnButton]',
@@ -6093,10 +6541,10 @@ class EditorDeleteRowButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('deleteRow', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDeleteRowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorDeleteRowButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorDeleteRowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDeleteRowButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorDeleteRowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorDeleteRowButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDeleteRowButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDeleteRowButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorDeleteRowButton]',
@@ -6119,10 +6567,10 @@ class EditorDeleteTableButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('deleteTable', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDeleteTableButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorDeleteTableButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorDeleteTableButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDeleteTableButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorDeleteTableButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorDeleteTableButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorDeleteTableButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDeleteTableButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorDeleteTableButton]',
@@ -6135,6 +6583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ([see example]({% slug globalization_editor %}#toc-custom-messages)).
  */
 class CustomMessagesComponent extends MessagesDirective {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -6142,15 +6591,15 @@ class CustomMessagesComponent extends MessagesDirective {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-editor-messages", providers: [
+            {
+                provide: MessagesDirective,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-CustomMessagesComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-editor-messages", providers: [
-        {
-            provide: MessagesDirective,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -6199,10 +6648,10 @@ class EditorPrintDirective extends EditorCommandButton {
             }
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorPrintDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorPrintDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorPrintButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorPrintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorPrintDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorPrintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorPrintDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorPrintButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorPrintDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorPrintDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorPrintButton]',
@@ -6228,10 +6677,10 @@ class EditorSelectAllButtonDirective extends EditorCommandButton {
         this.editor.shouldEmitFocus = true;
         super.clickHandler();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorSelectAllButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorSelectAllButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorSelectAllButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorSelectAllButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorSelectAllButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorSelectAllButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorSelectAllButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorSelectAllButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorSelectAllButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorSelectAllButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorSelectAllButton]',
@@ -6256,10 +6705,10 @@ class EditorSplitCellButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('splitCell', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorSplitCellButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorSplitCellButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorSplitCellButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorSplitCellButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorSplitCellButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorSplitCellButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorSplitCellButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorSplitCellButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorSplitCellButton]',
@@ -6284,10 +6733,10 @@ class EditorMergeCellsButtonDirective extends EditorCommandButton {
     constructor(button, localization, providerService, toolsService) {
         super('mergeCells', button, localization, providerService, toolsService);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorMergeCellsButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditorMergeCellsButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]", usesInheritance: true, ngImport: i0 });
 }
-EditorMergeCellsButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorMergeCellsButtonDirective, deps: [{ token: i1$2.ToolBarButtonComponent }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorMergeCellsButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditorMergeCellsButtonDirective, isStandalone: true, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorMergeCellsButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorMergeCellsButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorMergeCellsButton]',
@@ -6344,21 +6793,6 @@ const KENDO_EDITOR = [
     EditorSplitCellButtonDirective
 ];
 
-const TOOLBAR_DIALOGS = [
-    FileLinkDialogComponent,
-    ImageDialogComponent,
-    SourceDialogComponent,
-    FormatDialogComponent,
-    ColorPickerDialogComponent,
-    FontFamilyDialogComponent,
-    FontSizeDialogComponent,
-    InsertTableDialogComponent
-    // TableWizardDialogComponent
-    // Table Wizard Building Blocks
-    // TableSettingsComponent,
-    // CellSettingsComponent,
-    // AccessibilitySettingsComponent
-];
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the Editor component.
@@ -6379,15 +6813,15 @@ const TOOLBAR_DIALOGS = [
  * ```
  */
 class EditorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: EditorModule, imports: [EditorComponent, EditorAlignLeftButtonDirective, EditorAlignCenterButtonDirective, EditorAlignRightButtonDirective, EditorAlignJustifyButtonDirective, EditorInsertFileButtonDirective, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, EditorViewSourceButtonDirective, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorUnderlineButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorForeColorDirective, EditorBackColorDirective, EditorCleanFormattingButtonDirective, EditorAddColumnBeforeButtonDirective, EditorAddColumnAfterButtonDirective, EditorAddRowBeforeButtonDirective, EditorAddRowAfterButtonDirective, EditorDeleteColumnButtonDirective, EditorDeleteRowButtonDirective, EditorDeleteTableButtonDirective, CustomMessagesComponent, EditorPrintDirective, EditorSelectAllButtonDirective, EditorBlockquoteDirective, EditorFontSizeComponent, EditorFontFamilyComponent, EditorFormatComponent, EditorColorPickerComponent, EditorInsertTableButtonComponent, EditorMergeCellsButtonDirective, EditorSplitCellButtonDirective, i1$2.ToolBarComponent, i1$2.ToolbarCustomMessagesComponent, i1$2.ToolBarButtonComponent, i1$2.ToolBarButtonGroupComponent, i1$2.ToolBarDropDownButtonComponent, i1$2.ToolBarSeparatorComponent, i1$2.ToolBarSpacerComponent, i1$2.ToolBarSplitButtonComponent, i1$2.ToolBarToolComponent], exports: [EditorComponent, EditorAlignLeftButtonDirective, EditorAlignCenterButtonDirective, EditorAlignRightButtonDirective, EditorAlignJustifyButtonDirective, EditorInsertFileButtonDirective, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, EditorViewSourceButtonDirective, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorUnderlineButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorForeColorDirective, EditorBackColorDirective, EditorCleanFormattingButtonDirective, EditorAddColumnBeforeButtonDirective, EditorAddColumnAfterButtonDirective, EditorAddRowBeforeButtonDirective, EditorAddRowAfterButtonDirective, EditorDeleteColumnButtonDirective, EditorDeleteRowButtonDirective, EditorDeleteTableButtonDirective, CustomMessagesComponent, EditorPrintDirective, EditorSelectAllButtonDirective, EditorBlockquoteDirective, EditorFontSizeComponent, EditorFontFamilyComponent, EditorFormatComponent, EditorColorPickerComponent, EditorInsertTableButtonComponent, EditorMergeCellsButtonDirective, EditorSplitCellButtonDirective, i1$2.ToolBarComponent, i1$2.ToolbarCustomMessagesComponent, i1$2.ToolBarButtonComponent, i1$2.ToolBarButtonGroupComponent, i1$2.ToolBarDropDownButtonComponent, i1$2.ToolBarSeparatorComponent, i1$2.ToolBarSpacerComponent, i1$2.ToolBarSplitButtonComponent, i1$2.ToolBarToolComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [EditorComponent, EditorFontSizeComponent, EditorFontFamilyComponent, EditorFormatComponent, EditorColorPickerComponent, EditorInsertTableButtonComponent, i1$2.ToolBarComponent, i1$2.ToolbarCustomMessagesComponent, i1$2.ToolBarButtonComponent, i1$2.ToolBarButtonGroupComponent, i1$2.ToolBarDropDownButtonComponent, i1$2.ToolBarSeparatorComponent, i1$2.ToolBarSpacerComponent, i1$2.ToolBarSplitButtonComponent] });
 }
-EditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: EditorModule, imports: [EditorComponent, EditorAlignLeftButtonDirective, EditorAlignCenterButtonDirective, EditorAlignRightButtonDirective, EditorAlignJustifyButtonDirective, EditorInsertFileButtonDirective, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, EditorViewSourceButtonDirective, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorUnderlineButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorForeColorDirective, EditorBackColorDirective, EditorCleanFormattingButtonDirective, EditorAddColumnBeforeButtonDirective, EditorAddColumnAfterButtonDirective, EditorAddRowBeforeButtonDirective, EditorAddRowAfterButtonDirective, EditorDeleteColumnButtonDirective, EditorDeleteRowButtonDirective, EditorDeleteTableButtonDirective, CustomMessagesComponent, EditorPrintDirective, EditorSelectAllButtonDirective, EditorBlockquoteDirective, EditorFontSizeComponent, EditorFontFamilyComponent, EditorFormatComponent, EditorColorPickerComponent, EditorInsertTableButtonComponent, EditorMergeCellsButtonDirective, EditorSplitCellButtonDirective], exports: [EditorComponent, EditorAlignLeftButtonDirective, EditorAlignCenterButtonDirective, EditorAlignRightButtonDirective, EditorAlignJustifyButtonDirective, EditorInsertFileButtonDirective, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, EditorViewSourceButtonDirective, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorUnderlineButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorForeColorDirective, EditorBackColorDirective, EditorCleanFormattingButtonDirective, EditorAddColumnBeforeButtonDirective, EditorAddColumnAfterButtonDirective, EditorAddRowBeforeButtonDirective, EditorAddRowAfterButtonDirective, EditorDeleteColumnButtonDirective, EditorDeleteRowButtonDirective, EditorDeleteTableButtonDirective, CustomMessagesComponent, EditorPrintDirective, EditorSelectAllButtonDirective, EditorBlockquoteDirective, EditorFontSizeComponent, EditorFontFamilyComponent, EditorFormatComponent, EditorColorPickerComponent, EditorInsertTableButtonComponent, EditorMergeCellsButtonDirective, EditorSplitCellButtonDirective, FormsModule, ReactiveFormsModule, ToolBarModule] });
-EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [EditorComponent, EditorFontSizeComponent, EditorFontFamilyComponent, EditorFormatComponent, EditorColorPickerComponent, EditorInsertTableButtonComponent, FormsModule, ReactiveFormsModule, ToolBarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [...KENDO_EDITOR, FormsModule, ReactiveFormsModule, ToolBarModule],
-                    imports: [...KENDO_EDITOR],
+                    exports: [...KENDO_EDITOR, ...KENDO_TOOLBAR],
+                    imports: [...KENDO_EDITOR, ...KENDO_TOOLBAR],
                     providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
                 }]
         }] });