@progress/kendo-angular-editor 4.2.0-dev.202211240835 → 11.0.0-develop.79

package/{esm2015/tools/colorpicker/editor-colorpicker.component.js → esm2020/tools/colorpicker/editor-colorpicker.component.mjs}

@@ -1,14 +1,17 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 // eslint-disable no-forward-ref
-import { Component, Input, forwardRef, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, forwardRef, ViewChild, ElementRef, TemplateRef, NgZone } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import { ColorPickerComponent } from '@progress/kendo-angular-inputs';
+import { EditorLocalizationService } from '../../localization/editor-localization.service';
 import { outerWidth } from '../../util';
+import { DialogService } from '@progress/kendo-angular-dialog';
 import { ColorPickerDialogComponent } from '../../dialogs/colorpicker-dialog.component';
 import { take } from 'rxjs/operators';
+import { ProviderService } from '../../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../../localization/editor-localization.service";
 import * as i2 from "@progress/kendo-angular-dialog";
@@ -161,8 +164,8 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
         return false;
     }
 }
-EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: i1.EditorLocalizationService }, { token: i2.DialogService }, { token: i0.NgZone }, { token: i3.ProviderService }], target: i0.ɵɵFactoryTarget.Component });
-EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: i1.EditorLocalizationService }, { token: i2.DialogService }, { token: i0.NgZone }, { token: i3.ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #colorpicker
@@ -198,8 +201,8 @@ EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 {{ title }}
             </button>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }], directives: [{ type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
+    `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }],

package/{esm2015/tools/colorpicker/editor-fore-color.directive.js → esm2020/tools/colorpicker/editor-fore-color.directive.mjs}

@@ -1,8 +1,9 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive } from '@angular/core';
+import { EditorColorPickerComponent } from './editor-colorpicker.component';
 import { commandIcons } from '../../config/command-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./editor-colorpicker.component";
@@ -18,9 +19,9 @@ export class EditorForeColorDirective {
         this.colorPicker.editorCommand = 'foreColor';
     }
 }
-EditorForeColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorForeColorDirective, deps: [{ token: i1.EditorColorPickerComponent }], target: i0.ɵɵFactoryTarget.Directive });
-EditorForeColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: EditorForeColorDirective, selector: "[kendoEditorForeColor]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorForeColorDirective, decorators: [{
+EditorForeColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorForeColorDirective, deps: [{ token: i1.EditorColorPickerComponent }], target: i0.ɵɵFactoryTarget.Directive });
+EditorForeColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: EditorForeColorDirective, selector: "[kendoEditorForeColor]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorForeColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoEditorForeColor]'

package/{esm2015/tools/editor-clean-formatting-button.directive.js → esm2020/tools/editor-clean-formatting-button.directive.mjs}

@@ -1,9 +1,13 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
 import { EditorCommandButton } from './shared/editor-command-button';
+import { EditorLocalizationService } from '../localization/editor-localization.service';
+import { ProviderService } from '../common/provider.service';
+import { EditorToolsService } from './tools.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-toolbar";
 import * as i2 from "../localization/editor-localization.service";
@@ -31,9 +35,9 @@ export class EditorCleanFormattingButtonDirective extends EditorCommandButton {
         super('cleanFormatting', button, localization, providerService, toolsService);
     }
 }
-EditorCleanFormattingButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorCleanFormattingButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorCleanFormattingButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: EditorCleanFormattingButtonDirective, selector: "kendo-toolbar-button[kendoEditorCleanFormattingButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorCleanFormattingButtonDirective, decorators: [{
+EditorCleanFormattingButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorCleanFormattingButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditorCleanFormattingButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: EditorCleanFormattingButtonDirective, selector: "kendo-toolbar-button[kendoEditorCleanFormattingButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorCleanFormattingButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorCleanFormattingButton]'

package/{esm2015/tools/fontfamily/editor-fontfamily-dropdownlist.component.js → esm2020/tools/fontfamily/editor-fontfamily-dropdownlist.component.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
+import { Component, ViewChild, Input, ElementRef, Output, EventEmitter } from '@angular/core';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dropdowns";
@@ -22,8 +22,8 @@ export class FontFamilyDropDownListComponent {
         this.dropDownList.focus();
     }
 }
-FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FontFamilyDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FontFamilyDropDownListComponent, 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: `
+FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FontFamilyDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FontFamilyDropDownListComponent, 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
@@ -38,6 +38,7 @@ FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             [disabled]="disabled"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
+            [style.width.em]="13"
         >
             <ng-template kendoDropDownListItemTemplate let-dataItem>
                 <span [ngStyle]="{ 'font-family': dataItem.fontName }">
@@ -45,8 +46,8 @@ FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 </span>
             </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, styles: ["\n        .k-dropdownlist {\n            width: 13em;\n        }\n    "], components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i2.DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { type: i1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
+    `, isInline: true, components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i2.DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { type: i1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-editor-fontfamily-dropdownlist',
@@ -65,6 +66,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             [disabled]="disabled"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
+            [style.width.em]="13"
         >
             <ng-template kendoDropDownListItemTemplate let-dataItem>
                 <span [ngStyle]="{ 'font-family': dataItem.fontName }">
@@ -72,12 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 </span>
             </ng-template>
         </kendo-dropdownlist>
-    `,
-                    styles: [`
-        .k-dropdownlist {
-            width: 13em;
-        }
-    `]
+    `
                 }]
         }], propDecorators: { data: [{
                 type: Input

package/{esm2015/tools/fontfamily/editor-fontfamily.component.js → esm2020/tools/fontfamily/editor-fontfamily.component.mjs}

@@ -1,12 +1,16 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild, forwardRef, Input, Output, EventEmitter } from '@angular/core';
+import { Component, TemplateRef, ViewChild, ElementRef, forwardRef, Input, Output, EventEmitter } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import { outerWidth, isPresent, getUniqueStyleValues } from '../../util';
+import { EditorLocalizationService } from '../../localization/editor-localization.service';
+import { DialogService } from '@progress/kendo-angular-dialog';
 import { FontFamilyDialogComponent } from '../../dialogs/font-family-dialog.component';
 import { FontFamilyDropDownListComponent } from './editor-fontfamily-dropdownlist.component';
+import { ProviderService } from '../../common/provider.service';
+import { EditorToolsService } from '../tools.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dialog";
 import * as i2 from "../../localization/editor-localization.service";
@@ -147,8 +151,8 @@ export class EditorFontFamilyComponent extends ToolBarToolComponent {
         return false;
     }
 }
-EditorFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorFontFamilyComponent, deps: [{ token: i1.DialogService }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
-EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "fontFamilyDropDownList", first: true, predicate: ["element"], descendants: true, read: FontFamilyDropDownListComponent }, { propertyName: "fontFamilyButton", first: true, predicate: ["fontFamilyButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+EditorFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontFamilyComponent, deps: [{ token: i1.DialogService }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
+EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "fontFamilyDropDownList", first: true, predicate: ["element"], descendants: true, read: FontFamilyDropDownListComponent }, { propertyName: "fontFamilyButton", first: true, predicate: ["fontFamilyButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-editor-fontfamily-dropdownlist
                 #element
@@ -179,8 +183,8 @@ EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 {{ title }}
             </button>
         </ng-template>
-    `, isInline: true, components: [{ type: i5.FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
+    `, isInline: true, components: [{ type: i5.FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6.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: EditorFontFamilyComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }],
@@ -230,11 +234,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ['popupTemplate', { static: true }]
             }], element: [{
                 type: ViewChild,
-                args: ['element', { static: false }]
+                args: ['element']
             }], fontFamilyDropDownList: [{
                 type: ViewChild,
                 args: ['element', { read: FontFamilyDropDownListComponent, static: false }]
             }], fontFamilyButton: [{
                 type: ViewChild,
-                args: ['fontFamilyButton', { static: false }]
+                args: ['fontFamilyButton', { read: ElementRef }]
             }] } });

package/{esm2015/tools/fontsize/editor-fontsize-dropdownlist.component.js → esm2020/tools/fontsize/editor-fontsize-dropdownlist.component.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
+import { Component, ViewChild, Input, ElementRef, Output, EventEmitter } from '@angular/core';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dropdowns";
@@ -21,8 +21,8 @@ export class FontSizeDropDownListComponent {
         this.dropDownList.focus();
     }
 }
-FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FontSizeDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
+FontSizeDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FontSizeDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
         <kendo-dropdownlist
             #element
             kendoEditorDropDownTool
@@ -37,10 +37,11 @@ FontSizeDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [disabled]="disabled"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
+            [style.width.em]="13"
         >
         </kendo-dropdownlist>
-    `, isInline: true, styles: ["\n        .k-dropdownlist {\n            width: 13em;\n        }\n    "], components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i2.DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
+    `, isInline: true, components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i2.DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-editor-fontsize-dropdownlist',
@@ -59,14 +60,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             [disabled]="disabled"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
+            [style.width.em]="13"
         >
         </kendo-dropdownlist>
-    `,
-                    styles: [`
-        .k-dropdownlist {
-            width: 13em;
-        }
-    `]
+    `
                 }]
         }], propDecorators: { data: [{
                 type: Input

package/{esm2015/tools/fontsize/editor-fontsize.component.js → esm2020/tools/fontsize/editor-fontsize.component.mjs}

@@ -1,12 +1,16 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, ViewChild, forwardRef, Output, EventEmitter } from '@angular/core';
+import { Component, Input, TemplateRef, ViewChild, ElementRef, forwardRef, Output, EventEmitter } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import { outerWidth, isPresent, getUniqueStyleValues } from '../../util';
+import { EditorLocalizationService } from '../../localization/editor-localization.service';
+import { DialogService } from '@progress/kendo-angular-dialog';
 import { FontSizeDialogComponent } from '../../dialogs/font-size-dialog.component';
 import { FontSizeDropDownListComponent } from './editor-fontsize-dropdownlist.component';
+import { ProviderService } from '../../common/provider.service';
+import { EditorToolsService } from '../tools.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dialog";
 import * as i2 from "../../localization/editor-localization.service";
@@ -59,7 +63,7 @@ export class EditorFontSizeComponent extends ToolBarToolComponent {
         if (sizes) {
             normalizedSizes = sizes.map(s => {
                 if (typeof s.size === 'number') {
-                    return Object.assign(Object.assign({}, s), { size: `${s.size}px` });
+                    return { ...s, size: `${s.size}px` };
                 }
                 return s;
             });
@@ -156,8 +160,8 @@ export class EditorFontSizeComponent extends ToolBarToolComponent {
         return false;
     }
 }
-EditorFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorFontSizeComponent, deps: [{ token: i1.DialogService }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
-EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "fontSizeDropDownList", first: true, predicate: ["element"], descendants: true, read: FontSizeDropDownListComponent }, { propertyName: "fontSizeButton", first: true, predicate: ["fontSizeButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+EditorFontSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontSizeComponent, deps: [{ token: i1.DialogService }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
+EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "fontSizeDropDownList", first: true, predicate: ["element"], descendants: true, read: FontSizeDropDownListComponent }, { propertyName: "fontSizeButton", first: true, predicate: ["fontSizeButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-editor-fontsize-dropdownlist
                 #element
@@ -188,8 +192,8 @@ EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 {{ title }}
             </button>
         </ng-template>
-    `, isInline: true, components: [{ type: i5.FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
+    `, isInline: true, components: [{ type: i5.FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6.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: EditorFontSizeComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }],
@@ -239,11 +243,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ['popupTemplate', { static: true }]
             }], element: [{
                 type: ViewChild,
-                args: ['element', { static: false }]
+                args: ['element']
             }], fontSizeDropDownList: [{
                 type: ViewChild,
                 args: ['element', { read: FontSizeDropDownListComponent, static: false }]
             }], fontSizeButton: [{
                 type: ViewChild,
-                args: ['fontSizeButton', { static: false }]
+                args: ['fontSizeButton', { read: ElementRef }]
             }] } });

package/{esm2015/tools/format/editor-format-dropdownlist.component.js → esm2020/tools/format/editor-format-dropdownlist.component.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
+import { Component, ViewChild, Input, ElementRef, Output, EventEmitter } from '@angular/core';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dropdowns";
@@ -22,8 +22,8 @@ export class FormatDropDownListComponent {
         this.dropDownList.focus();
     }
 }
-FormatDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormatDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormatDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
+FormatDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormatDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormatDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
         <kendo-dropdownlist
             #element
             kendoEditorDropDownTool
@@ -38,34 +38,35 @@ FormatDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             [disabled]="disabled"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
+            [style.width.em]="13"
         >
             <ng-template kendoDropDownListItemTemplate let-dataItem>
                 <ng-container [ngSwitch]="dataItem.tag">
-                    <span *ngSwitchCase="'h1'" style="display: block; font-size: 2em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h1'" [style]="'display: block; font-size: 2em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h2'" style="display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h2'" [style]="'display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h3'" style="display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h3'" [style]="'display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h4'" style="display: block; font-size: 1em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h4'" [style]="'display: block; font-size: 1em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h5'" style="display: block; font-size: .83em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h5'" [style]="'display: block; font-size: .83em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h6'" style="display: block; font-size: .67em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h6'" [style]="'display: block; font-size: .67em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'p'" style="display: block; margin-left: 0;">
+                    <span *ngSwitchCase="'p'" [style]="'display: block; margin-left: 0;'">
                         {{ dataItem.text }}
                     </span>
 
@@ -73,8 +74,8 @@ FormatDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </ng-container>
             </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, styles: ["\n        .k-dropdownlist {\n            width: 13em;\n        }\n    "], components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i2.DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { type: i1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormatDropDownListComponent, decorators: [{
+    `, isInline: true, components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i2.DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { type: i1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormatDropDownListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-editor-format-dropdownlist',
@@ -93,34 +94,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             [disabled]="disabled"
             [tabindex]="tabindex"
             (valueChange)="onValueChange($event)"
+            [style.width.em]="13"
         >
             <ng-template kendoDropDownListItemTemplate let-dataItem>
                 <ng-container [ngSwitch]="dataItem.tag">
-                    <span *ngSwitchCase="'h1'" style="display: block; font-size: 2em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h1'" [style]="'display: block; font-size: 2em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h2'" style="display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h2'" [style]="'display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h3'" style="display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h3'" [style]="'display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h4'" style="display: block; font-size: 1em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h4'" [style]="'display: block; font-size: 1em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h5'" style="display: block; font-size: .83em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h5'" [style]="'display: block; font-size: .83em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'h6'" style="display: block; font-size: .67em; margin-left: 0; font-weight: bold;">
+                    <span *ngSwitchCase="'h6'" [style]="'display: block; font-size: .67em; margin-left: 0; font-weight: bold;'">
                         {{ dataItem.text }}
                     </span>
 
-                    <span *ngSwitchCase="'p'" style="display: block; margin-left: 0;">
+                    <span *ngSwitchCase="'p'" [style]="'display: block; margin-left: 0;'">
                         {{ dataItem.text }}
                     </span>
 
@@ -128,12 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 </ng-container>
             </ng-template>
         </kendo-dropdownlist>
-    `,
-                    styles: [`
-        .k-dropdownlist {
-            width: 13em;
-        }
-    `]
+    `
                 }]
         }], propDecorators: { data: [{
                 type: Input

package/{esm2015/tools/format/editor-format.component.js → esm2020/tools/format/editor-format.component.mjs}

@@ -1,11 +1,16 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild, Input, forwardRef, Output, EventEmitter } from '@angular/core';
+import { Component, TemplateRef, ViewChild, Input, forwardRef, Output, EventEmitter, ElementRef } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+import { DialogService } from '@progress/kendo-angular-dialog';
 import { outerWidth, isPresent } from '../../util';
+import { EditorLocalizationService } from '../../localization/editor-localization.service';
 import { FormatDialogComponent } from '../../dialogs/format-dialog.component';
+import { FormatDropDownListComponent } from './editor-format-dropdownlist.component';
+import { ProviderService } from '../../common/provider.service';
+import { EditorToolsService } from '../tools.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-dialog";
 import * as i2 from "../../localization/editor-localization.service";
@@ -143,8 +148,8 @@ export class EditorFormatComponent extends ToolBarToolComponent {
         return false;
     }
 }
-EditorFormatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorFormatComponent, deps: [{ token: i1.DialogService }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
-EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFormatComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "formatDropDownList", first: true, predicate: ["formatDropDownList"], descendants: true }, { propertyName: "formatButton", first: true, predicate: ["formatButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+EditorFormatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFormatComponent, deps: [{ token: i1.DialogService }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Component });
+EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFormatComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "formatDropDownList", first: true, predicate: ["formatDropDownList"], descendants: true }, { propertyName: "formatButton", first: true, predicate: ["formatButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-editor-format-dropdownlist
                 #formatDropDownList
@@ -175,8 +180,8 @@ EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 {{ title }}
             </button>
         </ng-template>
-    `, isInline: true, components: [{ type: i5.FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorFormatComponent, decorators: [{
+    `, isInline: true, components: [{ type: i5.FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6.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: EditorFormatComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFormatComponent) }],
@@ -226,8 +231,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ['popupTemplate', { static: true }]
             }], formatDropDownList: [{
                 type: ViewChild,
-                args: ['formatDropDownList', { static: false }]
+                args: ['formatDropDownList']
             }], formatButton: [{
                 type: ViewChild,
-                args: ['formatButton', { static: false }]
+                args: ['formatButton', { read: ElementRef }]
             }] } });

package/{esm2015/tools/history/editor-redo-button.directive.js → esm2020/tools/history/editor-redo-button.directive.mjs}

@@ -1,9 +1,13 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Directive } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
 import { EditorCommandButton } from '../shared/editor-command-button';
+import { EditorLocalizationService } from '../../localization/editor-localization.service';
+import { ProviderService } from '../../common/provider.service';
+import { EditorToolsService } from '../tools.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-toolbar";
 import * as i2 from "../../localization/editor-localization.service";
@@ -32,9 +36,9 @@ export class EditorRedoButtonDirective extends EditorCommandButton {
         super('redo', button, localization, providerService, toolsService);
     }
 }
-EditorRedoButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorRedoButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
-EditorRedoButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditorRedoButtonDirective, decorators: [{
+EditorRedoButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorRedoButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+EditorRedoButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorRedoButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-toolbar-button[kendoEditorRedoButton]'