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

package/esm2020/tools/colorpicker/editor-colorpicker.component.mjs

@@ -2,8 +2,9 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // eslint-disable no-forward-ref
-import { Component, Input, forwardRef, ViewChild, ElementRef, TemplateRef, NgZone } from '@angular/core';
+import { Component, Input, forwardRef, ViewChild, ElementRef, TemplateRef, NgZone, Renderer2 } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import { ColorPickerComponent } from '@progress/kendo-angular-inputs';
 import { EditorLocalizationService } from '../../localization/editor-localization.service';
@@ -17,18 +18,20 @@ import * as i1 from "../../localization/editor-localization.service";
 import * as i2 from "@progress/kendo-angular-dialog";
 import * as i3 from "../../common/provider.service";
 import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@progress/kendo-angular-buttons";
+import * as i5 from "@progress/kendo-angular-icons";
+import * as i6 from "@angular/common";
 /**
  * A component which configures an existing ColorPickerComponent as a ToolBar tool.
  * To associate a `kendo-toolbar-colorpicker` with an Editor command that changes the
  * foreground or the background color of the text, use the `kendoEditorForeColor` or `kendoEditorBackColor` directive.
  */
 export class EditorColorPickerComponent extends ToolBarToolComponent {
-    constructor(localization, dialogService, ngZone, providerService) {
+    constructor(localization, dialogService, ngZone, providerService, renderer) {
         super();
         this.localization = localization;
         this.dialogService = dialogService;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         this.tabindex = -1;
         /**
          * Specifies if the component should be disabled.
@@ -124,10 +127,12 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: ColorPickerDialogComponent
+            content: ColorPickerDialogComponent,
+            width: 400
         };
         this.editor.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         dialogContent.setData({
             editor: this.editor,
             value: this.value,
@@ -135,6 +140,7 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
             editorCommand: this.editorCommand,
             paletteSettings: this.paletteSettings,
             icon: this.icon,
+            svgIcon: this.svgIcon,
             views: this.views
         });
     }
@@ -150,10 +156,10 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
     focus() {
         this.tabindex = 0;
         if (this.overflows) {
-            this.colorPickerButton.nativeElement.focus();
+            this.colorPickerButton?.nativeElement.focus();
         }
         else {
-            !this.colorPicker.isOpen && this.colorPicker.focus();
+            !this.colorPicker.isOpen && this.colorPicker?.focus();
         }
     }
     /**
@@ -164,13 +170,14 @@ export class EditorColorPickerComponent extends ToolBarToolComponent {
         return false;
     }
 }
-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: `
+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 }, { token: i0.Renderer2 }], 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", svgIcon: "svgIcon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #colorpicker
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [views]="views"
                 [format]="'hex'"
                 [value]="value"
@@ -186,22 +193,25 @@ EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             </kendo-colorpicker>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #colorPickerButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #colorPickerButton
-                class="k-overflow-button"
-                [icon]="icon"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper
+                        *ngIf="icon"
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "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"] }] });
+    `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -213,6 +223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 #colorpicker
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [views]="views"
                 [format]="'hex'"
                 [value]="value"
@@ -228,27 +239,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-colorpicker>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #colorPickerButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #colorPickerButton
-                class="k-overflow-button"
-                [icon]="icon"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper
+                        *ngIf="icon"
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.EditorLocalizationService }, { type: i2.DialogService }, { type: i0.NgZone }, { type: i3.ProviderService }]; }, propDecorators: { value: [{
+        }], ctorParameters: function () { return [{ type: i1.EditorLocalizationService }, { type: i2.DialogService }, { type: i0.NgZone }, { type: i3.ProviderService }, { type: i0.Renderer2 }]; }, propDecorators: { value: [{
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], paletteSettings: [{
                 type: Input
             }], editorCommand: [{
@@ -267,11 +283,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['popupTemplate', { static: true }]
             }], element: [{
                 type: ViewChild,
-                args: ['colorpicker', { read: ElementRef, static: false }]
+                args: ['colorpicker', { read: ElementRef }]
             }], colorPicker: [{
                 type: ViewChild,
-                args: ['colorpicker', { read: ColorPickerComponent, static: false }]
+                args: ['colorpicker', { read: ColorPickerComponent }]
             }], colorPickerButton: [{
                 type: ViewChild,
-                args: ['colorPickerButton', { read: ElementRef, static: false }]
+                args: ['colorPickerButton', { read: ElementRef }]
             }] } });

package/esm2020/tools/colorpicker/editor-fore-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 EditorForeColorDirective {
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.foreColor;
+        this.colorPicker.svgIcon = commandSVGIcons.foreColor;
         this.colorPicker.editorCommand = 'foreColor';
     }
 }

package/esm2020/tools/fontfamily/editor-fontfamily.component.mjs

@@ -2,7 +2,8 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, TemplateRef, ViewChild, ElementRef, forwardRef, Input, Output, EventEmitter } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, TemplateRef, ViewChild, ElementRef, forwardRef, Input, Output, EventEmitter, Renderer2 } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import { outerWidth, isPresent, getUniqueStyleValues } from '../../util';
 import { EditorLocalizationService } from '../../localization/editor-localization.service';
@@ -11,13 +12,15 @@ import { FontFamilyDialogComponent } from '../../dialogs/font-family-dialog.comp
 import { FontFamilyDropDownListComponent } from './editor-fontfamily-dropdownlist.component';
 import { ProviderService } from '../../common/provider.service';
 import { EditorToolsService } from '../tools.service';
+import { fontFamilyIcon } from '@progress/kendo-svg-icons';
 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 "../../common/provider.service";
 import * as i4 from "../tools.service";
 import * as i5 from "./editor-fontfamily-dropdownlist.component";
-import * as i6 from "@progress/kendo-angular-buttons";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "@angular/common";
 /**
  * A component which configures an existing `DropDownListComponent` as an Editor tool
  * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
@@ -30,17 +33,19 @@ import * as i6 from "@progress/kendo-angular-buttons";
  * ```
  */
 export class EditorFontFamilyComponent extends ToolBarToolComponent {
-    constructor(dialogService, localization, providerService, toolsService) {
+    constructor(dialogService, localization, providerService, toolsService, renderer) {
         super();
         this.dialogService = dialogService;
         this.localization = localization;
         this.toolsService = toolsService;
+        this.renderer = renderer;
         this.disabled = false;
         this.tabindex = -1;
         /**
          * Fires when the user updates the value of the drop-down list.
          */
         this.valueChange = new EventEmitter();
+        this.fontFamilySVGIcon = fontFamilyIcon;
         this._data = [
             { text: 'Arial', fontName: 'Arial,"Helvetica Neue",Helvetica,sans-serif' },
             { text: 'Courier New', fontName: '"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace' },
@@ -113,10 +118,12 @@ export class EditorFontFamilyComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: FontFamilyDialogComponent
+            content: FontFamilyDialogComponent,
+            width: 400
         };
         this.editor.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         dialogContent.setData({
             editor: this.editor,
             data: this.data,
@@ -151,7 +158,7 @@ export class EditorFontFamilyComponent extends ToolBarToolComponent {
         return false;
     }
 }
-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.ɵ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 }, { token: i0.Renderer2 }], 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
@@ -168,22 +175,21 @@ EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             </kendo-editor-fontfamily-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #fontFamilyButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #fontFamilyButton
-                class="k-overflow-button"
-                [icon]="'font-family'"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
-    `, 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"] }] });
+    `, isInline: true, components: [{ type: i5.FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
             type: Component,
             args: [{
@@ -205,24 +211,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-editor-fontfamily-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #fontFamilyButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #fontFamilyButton
-                class="k-overflow-button"
-                [icon]="'font-family'"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
                 type: Input
             }], valueChange: [{
                 type: Output

package/esm2020/tools/fontsize/editor-fontsize.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, Input, TemplateRef, ViewChild, ElementRef, forwardRef, Output, EventEmitter } from '@angular/core';
+import { Component, Input, TemplateRef, ViewChild, ElementRef, forwardRef, Output, EventEmitter, Renderer2 } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import { outerWidth, isPresent, getUniqueStyleValues } from '../../util';
 import { EditorLocalizationService } from '../../localization/editor-localization.service';
@@ -11,13 +11,15 @@ import { FontSizeDialogComponent } from '../../dialogs/font-size-dialog.componen
 import { FontSizeDropDownListComponent } from './editor-fontsize-dropdownlist.component';
 import { ProviderService } from '../../common/provider.service';
 import { EditorToolsService } from '../tools.service';
+import { fontSizeIcon } from '@progress/kendo-svg-icons';
 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 "../../common/provider.service";
 import * as i4 from "../tools.service";
 import * as i5 from "./editor-fontsize-dropdownlist.component";
-import * as i6 from "@progress/kendo-angular-buttons";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "@angular/common";
 /**
  * A component which configures an existing `DropDownListComponent` as an Editor tool
  * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
@@ -32,17 +34,19 @@ import * as i6 from "@progress/kendo-angular-buttons";
  * Use the FontSize tool to provide a custom list of font size options including any allowed units ([see example]({% slug toolbartools_editor %}#toc-dropdownlists)).
  */
 export class EditorFontSizeComponent extends ToolBarToolComponent {
-    constructor(dialogService, localization, providerService, toolsService) {
+    constructor(dialogService, localization, providerService, toolsService, renderer) {
         super();
         this.dialogService = dialogService;
         this.localization = localization;
         this.toolsService = toolsService;
+        this.renderer = renderer;
         this.disabled = false;
         this.tabindex = -1;
         /**
          * Fires when the user updates the value of the drop-down list.
          */
         this.valueChange = new EventEmitter();
+        this.fontSizeSVGIcon = fontSizeIcon;
         this._data = [
             { text: '8px', size: '8px' },
             { text: '10px', size: '10px' },
@@ -122,10 +126,12 @@ export class EditorFontSizeComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: FontSizeDialogComponent
+            content: FontSizeDialogComponent,
+            width: 400
         };
         this.editor.toolbar.toggle(false);
         const dialogContent = this.dialogService.open(dialogSettings).content.instance;
+        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
         dialogContent.setData({
             editor: this.editor,
             data: this.data,
@@ -160,7 +166,7 @@ export class EditorFontSizeComponent extends ToolBarToolComponent {
         return false;
     }
 }
-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.ɵ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 }, { token: i0.Renderer2 }], 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
@@ -177,22 +183,21 @@ EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </kendo-editor-fontsize-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #fontSizeButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #fontSizeButton
-                class="k-overflow-button"
-                [icon]="'font-size'"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
-    `, isInline: true, 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"] }] });
+    `, isInline: true, components: [{ type: i5.FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
             type: Component,
             args: [{
@@ -214,24 +219,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-editor-fontsize-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div #fontSizeButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                #fontSizeButton
-                class="k-overflow-button"
-                [icon]="'font-size'"
-                [attr.title]="title"
-                [disabled]="disabled"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
                 type: Input
             }], valueChange: [{
                 type: Output