@progress/kendo-angular-editor 17.0.0-develop.39 → 17.0.0-develop.40

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

@@ -6,11 +6,11 @@ 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';
@@ -22,7 +22,7 @@ import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progr
 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: 1730797303,
-    version: '17.0.0-develop.39',
+    publishDate: 1730799135,
+    version: '17.0.0-develop.40',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -4351,509 +4351,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['defaultToolbar', { read: ToolBarComponent, static: false }]
             }] } });
 
-/* 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.DialogRef }, { type: EditorLocalizationService }]; }, propDecorators: { editor: [{
-                type: Input
-            }], colorPicker: [{
-                type: ViewChild,
-                args: ['colorpicker', { read: ColorPickerComponent, static: true }]
-            }] } });
-
-/**
- * @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;
-    }
-    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"
-            >
-            </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: [{
-                    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 {
-    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
-            }] } });
-
 /**
  * @hidden
  */
@@ -5204,98 +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;
     }
-    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
+    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"] }] });
+            </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: EditorFontSizeComponent, decorators: [{
+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
-            }], 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 */
@@ -5488,58 +5189,186 @@ class EditorFontFamilyComponent extends ToolBarToolComponent {
         </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: "16.2.12", 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) }],
+                    selector: 'kendo-toolbar-dropdownlist[kendoEditorFontFamily]',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-editor-fontfamily-dropdownlist
+                #element
+                [defaultItem]="defaultItem"
+                [data]="data"
+                [(value)]="value"
+                [itemDisabled]="itemDisabled"
+                [title]="title"
+                [disabled]="disabled"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+            >
+            </kendo-editor-fontfamily-dropdownlist>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #fontFamilyButton
+                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-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `,
+                    standalone: true,
+                    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: [{
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }],
-                    selector: 'kendo-toolbar-dropdownlist[kendoEditorFontFamily]',
                     template: `
-        <ng-template #toolbarTemplate>
-            <kendo-editor-fontfamily-dropdownlist
-                #element
-                [defaultItem]="defaultItem"
-                [data]="data"
+        <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"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+                [paletteSettings]="paletteSettings"
+                (activeColorClick)="handleActiveColorClick($event)"
+                (clearButtonClick)="handleClearButtonClick()"
             >
-            </kendo-editor-fontfamily-dropdownlist>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div #fontFamilyButton
-                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-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
-        </ng-template>
+            </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: [FontFamilyDropDownListComponent, IconWrapperComponent, NgIf]
+                    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
-            }], 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 */
@@ -5859,6 +5688,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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;
 /**
@@ -6793,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.
@@ -6829,14 +6814,14 @@ 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], 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] });
-    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, FormsModule, ReactiveFormsModule, ToolBarModule] });
+    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] });
 }
 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]
                 }]
         }] });