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

package/esm2020/dialogs/image-dialog.component.mjs

@@ -2,18 +2,21 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { DialogRef, DialogContentBase } from '@progress/kendo-angular-dialog';
 import { getNodeFromSelection } from '@progress/kendo-editor-common';
 import { safeString } from '../util';
 import { EditorLocalizationService } from '../localization/editor-localization.service';
 import { guid } from '@progress/kendo-angular-common';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dialog";
 import * as i2 from "../localization/editor-localization.service";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-label";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@angular/forms";
 /**
  * @hidden
  */
@@ -47,7 +50,7 @@ export class ImageDialogComponent extends DialogContentBase {
     }
     ngAfterViewInit() {
         Promise.resolve(null).then(() => {
-            this.srcInput.nativeElement.focus();
+            this.srcInput.focus();
         });
     }
     onCancelAction() {
@@ -85,46 +88,50 @@ export class ImageDialogComponent extends DialogContentBase {
     }
 }
 ImageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageDialogComponent, deps: [{ token: i1.DialogRef }, { token: i2.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+ImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImageDialogComponent, selector: "ng-component", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "srcInput", first: true, predicate: ["srcInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertImage') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content">
-                    <div class="k-edit-label">
-                        <label [for]="srcInputId">{{ textFor('imageWebAddress') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="srcInputId" #srcInput [formControl]="src" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="altTextInputId">{{ textFor('imageAltText') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="altTextInputId" [formControl]="alt" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="widthInputId">{{ textFor('imageWidth') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="widthInputId" [formControl]="width" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="heightInputId">{{ textFor('imageHeight') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="heightInputId" [formControl]="height" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
+        <div class="k-form k-form-md k-form-horizontal">
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="srcInput" [text]="textFor('imageWebAddress')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #srcInput [formControl]="src"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="altTextInput" [text]="textFor('imageAltText')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #altTextInput [formControl]="alt"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="widthInput" [text]="textFor('imageWidth')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #widthInput [formControl]="width"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="heightInput" [text]="textFor('imageHeight')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #heightInput [formControl]="height"></kendo-textbox>
                 </div>
             </div>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton [disabled]="imageData.invalid"
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i5.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImageDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -132,37 +139,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertImage') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-edit-form-container k-window-content">
-                    <div class="k-edit-label">
-                        <label [for]="srcInputId">{{ textFor('imageWebAddress') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="srcInputId" #srcInput [formControl]="src" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="altTextInputId">{{ textFor('imageAltText') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="altTextInputId" [formControl]="alt" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="widthInputId">{{ textFor('imageWidth') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="widthInputId" [formControl]="width" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
-                    <div class="k-edit-label">
-                        <label [for]="heightInputId">{{ textFor('imageHeight') }}</label>
-                    </div>
-                    <div class="k-edit-field">
-                        <input [id]="heightInputId" [formControl]="height" type="text" class="k-textbox k-input k-rounded-md" />
-                    </div>
+        <div class="k-form k-form-md k-form-horizontal">
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="srcInput" [text]="textFor('imageWebAddress')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #srcInput [formControl]="src"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="altTextInput" [text]="textFor('imageAltText')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #altTextInput [formControl]="alt"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="widthInput" [text]="textFor('imageWidth')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #widthInput [formControl]="width"></kendo-textbox>
+                </div>
+            </div>
+            <div class="k-form-field">
+                <div class="k-form-label">
+                    <kendo-label [for]="heightInput" [text]="textFor('imageHeight')"></kendo-label>
+                </div>
+                <div class="k-form-field-wrap">
+                    <kendo-textbox #heightInput [formControl]="height"></kendo-textbox>
                 </div>
             </div>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton [disabled]="imageData.invalid"
                     (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogInsert') }}</button>
@@ -173,5 +184,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], srcInput: [{
                 type: ViewChild,
-                args: ['srcInput', { read: ElementRef, static: true }]
+                args: ['srcInput']
             }] } });

package/esm2020/dialogs/insert-table-dialog.component.mjs

@@ -41,14 +41,10 @@ InsertTableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertTable') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-ct-popup k-window-content" [style.text-align]="'center'">
-                    <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
@@ -59,14 +55,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('insertTable') }}
         </kendo-dialog-titlebar>
-        <div class="k-editor-dialog">
-            <div class="k-editor-dialog k-popup-edit-form k-window-content k-content">
-                <div class="k-ct-popup k-window-content" [style.text-align]="'center'">
-                    <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
-                </div>
-            </div>
+        <div [style.text-align]="'center'">
+            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
         </div>
-        <kendo-dialog-actions>
+        <kendo-dialog-actions class="k-actions-end k-actions-horizontal k-window-actions" [layout]="'normal'">
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
     `

package/esm2020/dialogs/source-dialog.component.mjs

@@ -2,14 +2,16 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild, ElementRef, Input } from '@angular/core';
+import { Component, ViewChild, Input } from '@angular/core';
 // import { EditorService } from '../editor.service';
 import { DialogRef, DialogContentBase } from '@progress/kendo-angular-dialog';
+import { TextAreaComponent } from '@progress/kendo-angular-inputs';
 import { EditorLocalizationService } from '../localization/editor-localization.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dialog";
 import * as i2 from "../localization/editor-localization.service";
-import * as i3 from "@progress/kendo-angular-buttons";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
@@ -22,7 +24,7 @@ export class SourceDialogComponent extends DialogContentBase {
     }
     ngAfterViewInit() {
         Promise.resolve(null).then(() => {
-            this.textarea.nativeElement.focus();
+            this.textarea.focus();
         });
     }
     onCancelAction() {
@@ -34,7 +36,7 @@ export class SourceDialogComponent extends DialogContentBase {
         this.editor.view.focus();
     }
     getData() {
-        return this.textarea.nativeElement.value;
+        return this.textarea.value;
     }
     setData() {
         this.data = this.indent(this.editor.getSource());
@@ -55,12 +57,12 @@ SourceDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('viewSource') }}
         </kendo-dialog-titlebar>
-        <textarea [value]="data" #textarea class="k-textarea k-editor-textarea" [style.height.%]="100"></textarea>
+        <kendo-textarea [value]="data" #textarea [style.height.%]="100"></kendo-textarea>
         <kendo-dialog-actions>
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogUpdate') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: i1.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SourceDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -68,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-dialog-titlebar (close)="onCancelAction()">
             {{ textFor('viewSource') }}
         </kendo-dialog-titlebar>
-        <textarea [value]="data" #textarea class="k-textarea k-editor-textarea" [style.height.%]="100"></textarea>
+        <kendo-textarea [value]="data" #textarea [style.height.%]="100"></kendo-textarea>
         <kendo-dialog-actions>
             <button kendoButton (click)="onCancelAction()">{{ textFor('dialogCancel') }}</button>
             <button kendoButton (click)="onConfirmAction()" [primary]="true">{{ textFor('dialogUpdate') }}</button>

package/esm2020/editor.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, ViewChild, ContentChild, ViewContainerRef, Output, ElementRef, EventEmitter, forwardRef, Input, ChangeDetectorRef, NgZone, isDevMode } from '@angular/core';
+import { Component, HostBinding, ViewChild, ContentChild, ViewContainerRef, Output, ElementRef, EventEmitter, forwardRef, Input, ChangeDetectorRef, NgZone, isDevMode, Renderer2 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, fromEvent, Subject, zip } from 'rxjs';
 import { map, filter, take } from 'rxjs/operators';
@@ -75,7 +75,7 @@ const getPasteCleanupAttributes = (config) => {
  * Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}).
  */
 export class EditorComponent {
-    constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService) {
+    constructor(dialogService, localization, cdr, ngZone, element, providerService, toolsService, renderer) {
         this.dialogService = dialogService;
         this.localization = localization;
         this.cdr = cdr;
@@ -83,6 +83,7 @@ export class EditorComponent {
         this.element = element;
         this.providerService = providerService;
         this.toolsService = toolsService;
+        this.renderer = renderer;
         /**
          * If set to `false`, the Editor will run in style non-encapsulated mode. This means
          * that the styles of the page will be persisted in the Editor and its content will be affected by them.
@@ -426,6 +427,10 @@ export class EditorComponent {
         if (this.resizable) {
             this.normalizeSize();
         }
+        if (this.userToolBarComponent) {
+            this.renderer.addClass(this.userToolBarComponent.element.nativeElement, 'k-editor-toolbar');
+        }
+        this.toolbar.onResize();
     }
     ngOnChanges(changes) {
         if (changes['value'] && this.view) {
@@ -540,13 +545,16 @@ export class EditorComponent {
     openDialog(dialogName) {
         const editorDialogs = {
             createLink: {
-                content: FileLinkDialogComponent
+                content: FileLinkDialogComponent,
+                width: 400
             },
             insertFile: {
-                content: FileLinkDialogComponent
+                content: FileLinkDialogComponent,
+                width: 400
             },
             insertImage: {
-                content: ImageDialogComponent
+                content: ImageDialogComponent,
+                width: 400
             },
             viewSource: {
                 content: SourceDialogComponent,
@@ -560,6 +568,7 @@ export class EditorComponent {
         const dialog = Object.assign({ appendTo: this.dialogContainer }, editorDialogs[dialogName]);
         this.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialog).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         if (dialogName === 'createLink' || dialogName === 'insertFile') {
             dialogContent.command = dialogName;
         }
@@ -827,7 +836,7 @@ export class EditorComponent {
     }
     ;
 }
-EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, deps: [{ token: i1.DialogService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
+EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, deps: [{ token: i1.DialogService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i3.ProviderService }, { token: i4.EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorComponent, selector: "kendo-editor", inputs: { value: "value", disabled: "disabled", readonly: "readonly", iframe: "iframe", iframeCss: "iframeCss", applyToWord: "applyToWord", schema: "schema", plugins: "plugins", placeholder: "placeholder", preserveWhitespace: "preserveWhitespace", pasteCleanupSettings: "pasteCleanupSettings", resizable: "resizable" }, outputs: { valueChange: "valueChange", onFocus: "focus", paste: "paste", onBlur: "blur" }, host: { properties: { "class.k-editor": "this.hostClass", "class.k-editor-resizable": "this.resizableClass", "class.k-disabled": "this.isDisabled", "class.k-readonly": "this.isReadonly", "class.k-ie": "this.isIE", "attr.dir": "this.dir", "attr.ariaDisabled": "this.ariaDisabled", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
         EditorLocalizationService,
         ProviderService,
@@ -965,7 +974,13 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         >
         </ng-container>
         <ng-content select="kendo-toolbar"></ng-content>
-        <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
+        <kendo-toolbar
+            #defaultToolbar
+            *ngIf="!userToolBarElement"
+            class="k-editor-toolbar"
+            [overflow]="true"
+            [tabindex]="readonly ? -1 : 0"
+        >
             <kendo-toolbar-buttongroup>
                 <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                 <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
@@ -998,7 +1013,7 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         </div>
 
         <ng-container #dialogsContainer></ng-container>
-    `, isInline: true, components: [{ type: i5.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i5.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i5.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i6.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i10.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i11.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i12.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i13.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i14.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i15.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i16.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i17.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i18.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i19.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i20.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i21.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i22.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }] });
+    `, isInline: true, components: [{ type: i5.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i5.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i5.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i6.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i10.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i11.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i12.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i13.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i14.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i15.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i16.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i17.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i18.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i19.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i20.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i21.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i22.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -1141,7 +1156,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         >
         </ng-container>
         <ng-content select="kendo-toolbar"></ng-content>
-        <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
+        <kendo-toolbar
+            #defaultToolbar
+            *ngIf="!userToolBarElement"
+            class="k-editor-toolbar"
+            [overflow]="true"
+            [tabindex]="readonly ? -1 : 0"
+        >
             <kendo-toolbar-buttongroup>
                 <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
                 <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
@@ -1176,7 +1197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-container #dialogsContainer></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; }, propDecorators: { value: [{
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i3.ProviderService }, { type: i4.EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { value: [{
                 type: Input
             }], disabled: [{
                 type: Input

package/esm2020/editor.module.mjs

@@ -9,7 +9,9 @@ import { ToolBarModule } from '@progress/kendo-angular-toolbar';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { DialogModule } from '@progress/kendo-angular-dialog';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
-import { NumericTextBoxModule, TextBoxModule, ColorPickerModule, CheckBoxModule } from '@progress/kendo-angular-inputs';
+import { NumericTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerModule, CheckBoxModule } from '@progress/kendo-angular-inputs';
+import { LabelModule } from "@progress/kendo-angular-label";
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { EditorComponent } from './editor.component';
 import { ImageDialogComponent } from './dialogs/image-dialog.component';
 import { SourceDialogComponent } from './dialogs/source-dialog.component';
@@ -284,8 +286,11 @@ EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DropDownsModule,
         NumericTextBoxModule,
         CheckBoxModule,
+        IconsModule,
         ToolBarModule,
-        TextBoxModule], exports: [EditorComponent, 
+        TextBoxModule,
+        TextAreaModule,
+        LabelModule], exports: [EditorComponent, 
         //alignment
         EditorAlignLeftButtonDirective,
         EditorAlignCenterButtonDirective,
@@ -364,8 +369,11 @@ EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             DropDownsModule,
             NumericTextBoxModule,
             CheckBoxModule,
+            IconsModule,
             ToolBarModule,
-            TextBoxModule
+            TextBoxModule,
+            TextAreaModule,
+            LabelModule
         ], ToolBarModule,
         ButtonModule,
         FormsModule,
@@ -405,8 +413,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DropDownsModule,
                         NumericTextBoxModule,
                         CheckBoxModule,
+                        IconsModule,
                         ToolBarModule,
-                        TextBoxModule
+                        TextBoxModule,
+                        TextAreaModule,
+                        LabelModule
                     ]
                 }]
         }] });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673467013,
-    version: '',
+    publishDate: 1674032463,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/tools/colorpicker/editor-back-color.directive.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Directive } from '@angular/core';
 import { EditorColorPickerComponent } from './editor-colorpicker.component';
-import { commandIcons } from '../../config/command-icons';
+import { commandIcons, commandSVGIcons } from '../../config/command-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./editor-colorpicker.component";
 /**
@@ -16,6 +16,7 @@ export class EditorBackColorDirective {
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.backColor;
+        this.colorPicker.svgIcon = commandSVGIcons.backColor;
         this.colorPicker.editorCommand = 'backColor';
     }
 }