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

package/esm2020/tools/format/editor-format.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, TemplateRef, ViewChild, Input, forwardRef, Output, EventEmitter, ElementRef } from '@angular/core';
+import { Component, TemplateRef, ViewChild, Input, forwardRef, Output, EventEmitter, ElementRef, Renderer2 } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { outerWidth, isPresent } from '../../util';
@@ -11,13 +11,15 @@ 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 { applyFormatIcon } 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-format-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,11 +32,12 @@ import * as i6 from "@progress/kendo-angular-buttons";
  * ```
  */
 export class EditorFormatComponent 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;
         /**
@@ -50,6 +53,7 @@ export class EditorFormatComponent extends ToolBarToolComponent {
             { text: 'Heading 5', tag: 'h5' },
             { text: 'Heading 6', tag: 'h6' }
         ];
+        this.applyFormatSVGIcon = applyFormatIcon;
         this.editor = providerService.editor;
     }
     /**
@@ -110,10 +114,12 @@ export class EditorFormatComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: FormatDialogComponent
+            content: FormatDialogComponent,
+            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,
@@ -148,7 +154,7 @@ export class EditorFormatComponent extends ToolBarToolComponent {
         return false;
     }
 }
-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.ɵ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 }, { token: i0.Renderer2 }], 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
@@ -165,22 +171,20 @@ EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </kendo-editor-format-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                #formatButton
+            <div #formatButton
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                type="button"
-                kendoButton
-                class="k-overflow-button"
-                [icon]="'apply-format'"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
-    `, 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"] }] });
+    `, isInline: true, components: [{ type: i5.FormatDropDownListComponent, selector: "kendo-editor-format-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: EditorFormatComponent, decorators: [{
             type: Component,
             args: [{
@@ -202,24 +206,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-editor-format-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                #formatButton
+            <div #formatButton
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [tabindex]="tabindex"
-                type="button"
-                kendoButton
-                class="k-overflow-button"
-                [icon]="'apply-format'"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()"
-            >
-                {{ title }}
-            </button>
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></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/shared/editor-command-base.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
-import { commandIcons } from '../../config/command-icons';
+import { commandIcons, commandSVGIcons } from '../../config/command-icons';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ProviderService } from '../../common/provider.service';
 import { Directive, Inject, InjectionToken } from '@angular/core';
@@ -24,18 +24,25 @@ export class EditorCommandBaseDirective {
         this.localization = localization;
         this.toolsService = toolsService;
         this.editor = providerService.editor;
-        setTimeout(() => {
-            const text = this.localization.get(this.command);
-            if (text) {
-                this.button.showText = 'overflow';
-                this.button.showIcon = 'both';
-                this.button.text = text;
-            }
-            if (!this.button.toolbarOptions.icon) {
-                this.button.icon = commandIcons[this.command];
-            }
-            this.button.title = text;
-            this.toolsService.needsCheck.next();
+        this.toolsService.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const text = this.localization.get(this.command);
+                if (text) {
+                    this.button.showText = 'overflow';
+                    this.button.showIcon = 'both';
+                    this.button.text = text;
+                }
+                if (!this.button.toolbarOptions.icon) {
+                    this.button.icon = commandIcons[this.command];
+                }
+                if (!this.button.toolbarOptions.svgIcon) {
+                    this.button.svgIcon = commandSVGIcons[this.command];
+                }
+                this.button.title = text;
+                this.toolsService.zone.run(() => {
+                    this.toolsService.needsCheck.next();
+                });
+            });
         });
     }
     ngOnInit() {

package/esm2020/tools/shared/editor-command-button.mjs

@@ -23,7 +23,15 @@ export class EditorCommandButton extends EditorCommandBaseDirective {
         e.preventDefault();
     }
     onStateChange(toolBarState) {
-        this.button.selected = toolBarState[this.command].selected;
-        this.button.disabled = toolBarState[this.command].disabled;
+        if (this.button.overflows) {
+            setTimeout(() => {
+                this.button.selected = toolBarState[this.command].selected;
+                this.button.disabled = toolBarState[this.command].disabled;
+            });
+        }
+        else {
+            this.button.selected = toolBarState[this.command].selected;
+            this.button.disabled = toolBarState[this.command].disabled;
+        }
     }
 }

package/esm2020/tools/shared/editor-command-dialog.mjs

@@ -18,7 +18,15 @@ export class EditorCommandDialog extends EditorCommandBaseDirective {
         this.editor.openDialog(this.dialog);
     }
     onStateChange(toolBarState) {
-        this.button.selected = toolBarState[this.command].selected;
-        this.button.disabled = toolBarState[this.command].disabled;
+        if (this.button.overflows) {
+            setTimeout(() => {
+                this.button.selected = toolBarState[this.command].selected;
+                this.button.disabled = toolBarState[this.command].disabled;
+            });
+        }
+        else {
+            this.button.selected = toolBarState[this.command].selected;
+            this.button.disabled = toolBarState[this.command].disabled;
+        }
     }
 }

package/esm2020/tools/tables/editor-insert-table-button.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, TemplateRef, ViewChild, ElementRef, forwardRef, EventEmitter } from '@angular/core';
+import { Component, TemplateRef, ViewChild, ElementRef, forwardRef, EventEmitter, Renderer2 } from '@angular/core';
 import { interval } from 'rxjs';
 import { concatMap, take, takeUntil } from 'rxjs/operators';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
@@ -13,13 +13,16 @@ import { DialogService } from '@progress/kendo-angular-dialog';
 import { InsertTableDialogComponent } from '../../dialogs/insert-table-dialog.component';
 import { Keys } from '@progress/kendo-angular-common';
 import { ProviderService } from '../../common/provider.service';
+import { tableAddIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../../localization/editor-localization.service";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "@progress/kendo-angular-dialog";
 import * as i4 from "../../common/provider.service";
 import * as i5 from "@progress/kendo-angular-buttons";
-import * as i6 from "./popup-table-grid.component";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "./popup-table-grid.component";
+import * as i8 from "@angular/common";
 const popupWrapperWidth = '190px';
 const popupWrapperHeight = '164px'; // Set to '192px' when TableWizard button is added;
 /**
@@ -31,11 +34,13 @@ const popupWrapperHeight = '164px'; // Set to '192px' when TableWizard button is
  * ```
  */
 export class EditorInsertTableButtonComponent extends ToolBarToolComponent {
-    constructor(localization, popupService, dialogService, providerService) {
+    constructor(localization, popupService, dialogService, providerService, renderer) {
         super();
         this.localization = localization;
         this.popupService = popupService;
         this.dialogService = dialogService;
+        this.renderer = renderer;
+        this.addTableSVGIcon = tableAddIcon;
         this.open = false;
         this.buttonBlurred = new EventEmitter();
         this.cellClicked = new EventEmitter();
@@ -77,10 +82,12 @@ export class EditorInsertTableButtonComponent extends ToolBarToolComponent {
     openDialog() {
         const dialogSettings = {
             appendTo: this.editor.dialogContainer,
-            content: InsertTableDialogComponent
+            content: InsertTableDialogComponent,
+            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
         });
@@ -158,7 +165,7 @@ export class EditorInsertTableButtonComponent extends ToolBarToolComponent {
         return (this.overflows ? this.overflowElement : this.element).nativeElement;
     }
 }
-EditorInsertTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorInsertTableButtonComponent, deps: [{ token: i1.EditorLocalizationService }, { token: i2.PopupService }, { token: i3.DialogService }, { token: i4.ProviderService }], target: i0.ɵɵFactoryTarget.Component });
+EditorInsertTableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorInsertTableButtonComponent, deps: [{ token: i1.EditorLocalizationService }, { token: i2.PopupService }, { token: i3.DialogService }, { token: i4.ProviderService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorInsertTableButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef }, { propertyName: "overflowElement", first: true, predicate: ["overflowElement"], descendants: true, read: ElementRef }, { propertyName: "popupGridTemplate", first: true, predicate: ["popupGridTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
@@ -168,27 +175,30 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [attr.title]="title"
                 [attr.tabindex]="tabIndex"
                 icon="table-add"
+                [svgIcon]="addTableSVGIcon"
                 [disabled]="disabled"
                 (click)="toggle()"
                 (blur)="onBlur()"
             ></button>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                kendoButton
-                #overflowElement
-                [attr.title]="title"
+            <div #overflowElement
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [attr.tabindex]="tabIndex"
-                icon="table-add"
-                [disabled]="disabled"
                 (click)="openDialog()">
-                {{ title }}
-            </button>
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="table-add" [svgIcon]="addTableSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
         <ng-template #popupGridTemplate>
             <kendo-popup-table-grid (cellClick)="onCellClick($event)" (tableWizardClick)="onTableWizardClick()"></kendo-popup-table-grid>
         </ng-template>
-    `, isInline: true, components: [{ 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"] }, { type: i6.PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }] });
+    `, isInline: true, components: [{ 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"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorInsertTableButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -203,29 +213,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [attr.title]="title"
                 [attr.tabindex]="tabIndex"
                 icon="table-add"
+                [svgIcon]="addTableSVGIcon"
                 [disabled]="disabled"
                 (click)="toggle()"
                 (blur)="onBlur()"
             ></button>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                kendoButton
-                #overflowElement
-                [attr.title]="title"
+            <div #overflowElement
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [attr.tabindex]="tabIndex"
-                icon="table-add"
-                [disabled]="disabled"
                 (click)="openDialog()">
-                {{ title }}
-            </button>
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper name="table-add" [svgIcon]="addTableSVGIcon"></kendo-icon-wrapper>
+                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
+                </span>
+            </div>
         </ng-template>
         <ng-template #popupGridTemplate>
             <kendo-popup-table-grid (cellClick)="onCellClick($event)" (tableWizardClick)="onTableWizardClick()"></kendo-popup-table-grid>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.EditorLocalizationService }, { type: i2.PopupService }, { type: i3.DialogService }, { type: i4.ProviderService }]; }, propDecorators: { toolbarTemplate: [{
+        }], ctorParameters: function () { return [{ type: i1.EditorLocalizationService }, { type: i2.PopupService }, { type: i3.DialogService }, { type: i4.ProviderService }, { type: i0.Renderer2 }]; }, propDecorators: { toolbarTemplate: [{
                 type: ViewChild,
                 args: ['toolbarTemplate', { static: true }]
             }], popupTemplate: [{

package/esm2020/tools/tables/popup-table-grid.component.mjs

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Output, EventEmitter } from '@angular/core';
+import { tableWizardIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 /**
@@ -12,6 +13,7 @@ export class PopupTableGridComponent {
     constructor() {
         this.cellClick = new EventEmitter();
         this.tableWizardClick = new EventEmitter();
+        this.tableWizardIcon = tableWizardIcon;
         this.state = { rows: -1, cols: -1 };
         this.rows = 6;
         this.cols = 8;
@@ -57,7 +59,7 @@ PopupTableGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
     `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
@@ -77,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
     `

package/esm2020/tools/tools.service.mjs

@@ -2,19 +2,20 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export class EditorToolsService {
-    constructor() {
+    constructor(zone) {
+        this.zone = zone;
         this.needsCheck = new Subject();
     }
 }
-EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 EditorToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });