@progress/kendo-angular-editor 21.1.1-develop.2 → 21.2.0-develop.1

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

@@ -4,7 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { Injectable, Inject, Optional, Component, Input, ViewChild, InjectionToken, Directive, EventEmitter, Output, forwardRef, ElementRef, isDevMode, ViewContainerRef, HostBinding, ContentChild, NgModule } from '@angular/core';
-import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgStyle, NgFor } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormControl, Validators, FormGroup, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, BehaviorSubject, zip, fromEvent, interval } from 'rxjs';
@@ -27,6 +26,7 @@ import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icon
 import { DropDownListComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
+import { NgStyle } from '@angular/common';
 
 /**
  * @hidden
@@ -36,8 +36,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729402,
-    version: '21.1.1-develop.2',
+    publishDate: 1763998513,
+    version: '21.2.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1059,146 +1059,146 @@ class FileLinkDialogComponent extends DialogContentBase {
         return linkData;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileLinkDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileLinkDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor", command: "command" }, viewQueries: [{ propertyName: "hrefInput", first: true, predicate: ["hrefInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FileLinkDialogComponent, isStandalone: true, selector: "ng-component", inputs: { editor: "editor", command: "command" }, viewQueries: [{ propertyName: "hrefInput", first: true, predicate: ["hrefInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ titleText }}
+          {{ titleText }}
         </kendo-dialog-titlebar>
         <form class="k-form k-form-md" novalidate [formGroup]="linkForm">
+          <kendo-formfield>
+            <kendo-label
+              labelCssClass="k-form-label"
+              [for]="hrefInput"
+              [text]="textForWithPrefix('WebAddress')"
+            ></kendo-label>
+            <kendo-textbox
+              #hrefInput
+              formControlName="href"
+            ></kendo-textbox>
+          </kendo-formfield>
+          <kendo-formfield>
+            <kendo-label
+              labelCssClass="k-form-label"
+              [for]="textInput"
+              [text]="textForWithPrefix('Text')"
+            ></kendo-label>
+            <kendo-textbox
+              #textInput
+              formControlName="text"
+            ></kendo-textbox>
+          </kendo-formfield>
+          <kendo-formfield>
+            <kendo-label
+              labelCssClass="k-form-label"
+              [for]="titleInput"
+              [text]="textForWithPrefix('Title')"
+            ></kendo-label>
+            <kendo-textbox
+              #titleInput
+              formControlName="title"
+            ></kendo-textbox>
+          </kendo-formfield>
+          @if (command === 'createLink') {
             <kendo-formfield>
-                <kendo-label
-                    labelCssClass="k-form-label"
-                    [for]="hrefInput"
-                    [text]="textForWithPrefix('WebAddress')"
-                ></kendo-label>
-                <kendo-textbox
-                    #hrefInput
-                    formControlName="href"
-                ></kendo-textbox>
-            </kendo-formfield>
-            <kendo-formfield>
-                <kendo-label
-                    labelCssClass="k-form-label"
-                    [for]="textInput"
-                    [text]="textForWithPrefix('Text')"
-                ></kendo-label>
-                <kendo-textbox
-                    #textInput
-                    formControlName="text"
-                ></kendo-textbox>
-            </kendo-formfield>
-            <kendo-formfield>
-                <kendo-label
-                    labelCssClass="k-form-label"
-                    [for]="titleInput"
-                    [text]="textForWithPrefix('Title')"
-                ></kendo-label>
-                <kendo-textbox
-                    #titleInput
-                    formControlName="title"
-                ></kendo-textbox>
+              <ng-container>
+                <span class="k-checkbox-wrap">
+                  <input
+                    id='k-target-blank'
+                    type='checkbox'
+                    kendoCheckBox
+                    formControlName="target"
+                    />
+                </span>
+                <label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label>
+              </ng-container>
             </kendo-formfield>
-            <ng-container *ngIf="command === 'createLink'">
-                <kendo-formfield>
-                    <ng-container>
-                        <span class="k-checkbox-wrap">
-                            <input
-                                id='k-target-blank'
-                                type='checkbox'
-                                kendoCheckBox
-                                formControlName="target"
-                            />
-                        </span>
-                        <label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label>
-                    </ng-container>
-                </kendo-formfield>
-            </ng-container>
+          }
         </form>
         <kendo-dialog-actions layout="start">
-            <button
-                kendoButton
-                [disabled]="linkForm.invalid"
-                [primary]="true"
-                (click)="onConfirmAction()"
-            >{{ textFor('dialogInsert') }}</button>
-            <button
-                kendoButton
-                (click)="onCancelAction()"
-            >{{ textFor('dialogCancel') }}</button>
+          <button
+            kendoButton
+            [disabled]="linkForm.invalid"
+            [primary]="true"
+            (click)="onConfirmAction()"
+          >{{ textFor('dialogInsert') }}</button>
+          <button
+            kendoButton
+            (click)="onCancelAction()"
+          >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
-    `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileLinkDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
         <kendo-dialog-titlebar (close)="onCancelAction()">
-            {{ titleText }}
+          {{ titleText }}
         </kendo-dialog-titlebar>
         <form class="k-form k-form-md" novalidate [formGroup]="linkForm">
+          <kendo-formfield>
+            <kendo-label
+              labelCssClass="k-form-label"
+              [for]="hrefInput"
+              [text]="textForWithPrefix('WebAddress')"
+            ></kendo-label>
+            <kendo-textbox
+              #hrefInput
+              formControlName="href"
+            ></kendo-textbox>
+          </kendo-formfield>
+          <kendo-formfield>
+            <kendo-label
+              labelCssClass="k-form-label"
+              [for]="textInput"
+              [text]="textForWithPrefix('Text')"
+            ></kendo-label>
+            <kendo-textbox
+              #textInput
+              formControlName="text"
+            ></kendo-textbox>
+          </kendo-formfield>
+          <kendo-formfield>
+            <kendo-label
+              labelCssClass="k-form-label"
+              [for]="titleInput"
+              [text]="textForWithPrefix('Title')"
+            ></kendo-label>
+            <kendo-textbox
+              #titleInput
+              formControlName="title"
+            ></kendo-textbox>
+          </kendo-formfield>
+          @if (command === 'createLink') {
             <kendo-formfield>
-                <kendo-label
-                    labelCssClass="k-form-label"
-                    [for]="hrefInput"
-                    [text]="textForWithPrefix('WebAddress')"
-                ></kendo-label>
-                <kendo-textbox
-                    #hrefInput
-                    formControlName="href"
-                ></kendo-textbox>
-            </kendo-formfield>
-            <kendo-formfield>
-                <kendo-label
-                    labelCssClass="k-form-label"
-                    [for]="textInput"
-                    [text]="textForWithPrefix('Text')"
-                ></kendo-label>
-                <kendo-textbox
-                    #textInput
-                    formControlName="text"
-                ></kendo-textbox>
-            </kendo-formfield>
-            <kendo-formfield>
-                <kendo-label
-                    labelCssClass="k-form-label"
-                    [for]="titleInput"
-                    [text]="textForWithPrefix('Title')"
-                ></kendo-label>
-                <kendo-textbox
-                    #titleInput
-                    formControlName="title"
-                ></kendo-textbox>
+              <ng-container>
+                <span class="k-checkbox-wrap">
+                  <input
+                    id='k-target-blank'
+                    type='checkbox'
+                    kendoCheckBox
+                    formControlName="target"
+                    />
+                </span>
+                <label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label>
+              </ng-container>
             </kendo-formfield>
-            <ng-container *ngIf="command === 'createLink'">
-                <kendo-formfield>
-                    <ng-container>
-                        <span class="k-checkbox-wrap">
-                            <input
-                                id='k-target-blank'
-                                type='checkbox'
-                                kendoCheckBox
-                                formControlName="target"
-                            />
-                        </span>
-                        <label [labelClass]="false" class='k-checkbox-label' for='k-target-blank'>{{ textForWithPrefix('OpenInNewWindow') }}</label>
-                    </ng-container>
-                </kendo-formfield>
-            </ng-container>
+          }
         </form>
         <kendo-dialog-actions layout="start">
-            <button
-                kendoButton
-                [disabled]="linkForm.invalid"
-                [primary]="true"
-                (click)="onConfirmAction()"
-            >{{ textFor('dialogInsert') }}</button>
-            <button
-                kendoButton
-                (click)="onCancelAction()"
-            >{{ textFor('dialogCancel') }}</button>
+          <button
+            kendoButton
+            [disabled]="linkForm.invalid"
+            [primary]="true"
+            (click)="onConfirmAction()"
+          >{{ textFor('dialogInsert') }}</button>
+          <button
+            kendoButton
+            (click)="onCancelAction()"
+          >{{ textFor('dialogCancel') }}</button>
         </kendo-dialog-actions>
-    `,
+        `,
                     standalone: true,
-                    imports: [DialogTitleBarComponent, ReactiveFormsModule, FormFieldComponent, LabelComponent, TextBoxComponent, NgIf, CheckBoxDirective, LabelDirective, DialogActionsComponent, ButtonComponent]
+                    imports: [DialogTitleBarComponent, ReactiveFormsModule, FormFieldComponent, LabelComponent, TextBoxComponent, CheckBoxDirective, LabelDirective, DialogActionsComponent, ButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: EditorLocalizationService }], propDecorators: { editor: [{
                 type: Input
@@ -2174,58 +2174,67 @@ class FormatDropDownListComponent {
         this.dropDownList.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormatDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormatDropDownListComponent, isStandalone: true, 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormatDropDownListComponent, isStandalone: true, 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
-            [defaultItem]="defaultItem"
-            [textField]="'text'"
-            [valueField]="'tag'"
-            [data]="data"
-            [(value)]="value"
-            [valuePrimitive]="true"
-            [itemDisabled]="itemDisabled"
-            [attr.title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            [style.width.em]="13"
-        >
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <ng-container [ngSwitch]="dataItem.tag">
-                    <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;'">
-                        {{ dataItem.text }}
-                    </span>
-
-                    <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;'">
-                        {{ dataItem.text }}
-                    </span>
-
-                    <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;'">
-                        {{ dataItem.text }}
-                    </span>
-
-                    <span *ngSwitchCase="'p'" [style]="'display: block; margin-left: 0;'">
-                        {{ dataItem.text }}
-                    </span>
-
-                    <span *ngSwitchDefault>{{ dataItem.text }}</span>
-                </ng-container>
-            </ng-template>
+          #element
+          kendoEditorDropDownTool
+          [defaultItem]="defaultItem"
+          [textField]="'text'"
+          [valueField]="'tag'"
+          [data]="data"
+          [(value)]="value"
+          [valuePrimitive]="true"
+          [itemDisabled]="itemDisabled"
+          [attr.title]="title"
+          [disabled]="disabled"
+          [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"
+          [style.width.em]="13"
+          >
+          <ng-template kendoDropDownListItemTemplate let-dataItem>
+            @switch (dataItem.tag) {
+              @case ('h1') {
+                <span [style]="'display: block; font-size: 2em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h2') {
+                <span [style]="'display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h3') {
+                <span [style]="'display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h4') {
+                <span [style]="'display: block; font-size: 1em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h5') {
+                <span [style]="'display: block; font-size: .83em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h6') {
+                <span [style]="'display: block; font-size: .67em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('p') {
+                <span [style]="'display: block; margin-left: 0;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @default {
+                <span>{{ dataItem.text }}</span>
+              }
+            }
+          </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormatDropDownListComponent, decorators: [{
             type: Component,
@@ -2233,58 +2242,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-editor-format-dropdownlist',
                     template: `
         <kendo-dropdownlist
-            #element
-            kendoEditorDropDownTool
-            [defaultItem]="defaultItem"
-            [textField]="'text'"
-            [valueField]="'tag'"
-            [data]="data"
-            [(value)]="value"
-            [valuePrimitive]="true"
-            [itemDisabled]="itemDisabled"
-            [attr.title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            [style.width.em]="13"
-        >
-            <ng-template kendoDropDownListItemTemplate let-dataItem>
-                <ng-container [ngSwitch]="dataItem.tag">
-                    <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;'">
-                        {{ dataItem.text }}
-                    </span>
-
-                    <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;'">
-                        {{ dataItem.text }}
-                    </span>
-
-                    <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;'">
-                        {{ dataItem.text }}
-                    </span>
-
-                    <span *ngSwitchCase="'p'" [style]="'display: block; margin-left: 0;'">
-                        {{ dataItem.text }}
-                    </span>
-
-                    <span *ngSwitchDefault>{{ dataItem.text }}</span>
-                </ng-container>
-            </ng-template>
+          #element
+          kendoEditorDropDownTool
+          [defaultItem]="defaultItem"
+          [textField]="'text'"
+          [valueField]="'tag'"
+          [data]="data"
+          [(value)]="value"
+          [valuePrimitive]="true"
+          [itemDisabled]="itemDisabled"
+          [attr.title]="title"
+          [disabled]="disabled"
+          [tabindex]="tabindex"
+          (valueChange)="onValueChange($event)"
+          [style.width.em]="13"
+          >
+          <ng-template kendoDropDownListItemTemplate let-dataItem>
+            @switch (dataItem.tag) {
+              @case ('h1') {
+                <span [style]="'display: block; font-size: 2em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h2') {
+                <span [style]="'display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h3') {
+                <span [style]="'display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h4') {
+                <span [style]="'display: block; font-size: 1em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h5') {
+                <span [style]="'display: block; font-size: .83em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('h6') {
+                <span [style]="'display: block; font-size: .67em; margin-left: 0; font-weight: bold;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @case ('p') {
+                <span [style]="'display: block; margin-left: 0;'">
+                  {{ dataItem.text }}
+                </span>
+              }
+              @default {
+                <span>{{ dataItem.text }}</span>
+              }
+            }
+          </ng-template>
         </kendo-dropdownlist>
-    `,
+        `,
                     standalone: true,
-                    imports: [DropDownListComponent, DropDownToolDirective, ItemTemplateDirective, NgSwitch, NgSwitchCase, NgSwitchDefault]
+                    imports: [DropDownListComponent, DropDownToolDirective, ItemTemplateDirective]
                 }]
         }], propDecorators: { data: [{
                 type: Input
@@ -2564,50 +2582,52 @@ class EditorFormatComponent extends ToolBarToolComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFormatComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorFormatComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFormatComponent) }], viewQueries: [{ propertyName: "formatDropDownList", first: true, predicate: ["formatDropDownList"], descendants: true }, { propertyName: "formatButton", first: true, predicate: ["formatButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditorFormatComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFormatComponent) }], viewQueries: [{ 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
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-format-dropdownlist
+            #formatDropDownList
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-format-dropdownlist>
+          </kendo-editor-format-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #formatButton
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
+          <div #formatButton
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [tabindex]="tabindex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-editor-format-dropdownlist
-                #formatDropDownList
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-format-dropdownlist
+            #formatDropDownList
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-format-dropdownlist>
+          </kendo-editor-format-dropdownlist>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFormatComponent, decorators: [{
             type: Component,
@@ -2616,50 +2636,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-dropdownlist[kendoEditorFormat]',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-editor-format-dropdownlist
-                #formatDropDownList
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-format-dropdownlist
+            #formatDropDownList
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-format-dropdownlist>
+          </kendo-editor-format-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #formatButton
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
+          <div #formatButton
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [tabindex]="tabindex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-editor-format-dropdownlist
-                #formatDropDownList
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-format-dropdownlist
+            #formatDropDownList
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-format-dropdownlist>
+          </kendo-editor-format-dropdownlist>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [FormatDropDownListComponent, IconWrapperComponent, NgIf]
+                    imports: [FormatDropDownListComponent, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
@@ -3944,7 +3966,7 @@ class EditorComponent {
         return cleanContent;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorComponent, deps: [{ token: i1$1.DialogService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorComponent, isStandalone: true, selector: "kendo-editor", inputs: { value: "value", disabled: "disabled", readonly: "readonly", iframe: "iframe", iframeCss: "iframeCss", applyToWord: "applyToWord", schema: "schema", plugins: "plugins", placeholder: "placeholder", preserveWhitespace: "preserveWhitespace", pasteCleanupSettings: "pasteCleanupSettings", resizable: "resizable" }, outputs: { valueChange: "valueChange", onFocus: "focus", paste: "paste", onBlur: "blur" }, host: { properties: { "class.k-editor": "this.hostClass", "class.k-editor-resizable": "this.resizableClass", "class.k-disabled": "this.isDisabled", "class.k-readonly": "this.isReadonly", "attr.dir": "this.dir", "attr.ariaDisabled": "this.ariaDisabled", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditorComponent, isStandalone: true, selector: "kendo-editor", inputs: { value: "value", disabled: "disabled", readonly: "readonly", iframe: "iframe", iframeCss: "iframeCss", applyToWord: "applyToWord", schema: "schema", plugins: "plugins", placeholder: "placeholder", preserveWhitespace: "preserveWhitespace", pasteCleanupSettings: "pasteCleanupSettings", resizable: "resizable" }, outputs: { valueChange: "valueChange", onFocus: "focus", paste: "paste", onBlur: "blur" }, host: { properties: { "class.k-editor": "this.hostClass", "class.k-editor-resizable": "this.resizableClass", "class.k-disabled": "this.isDisabled", "class.k-readonly": "this.isReadonly", "attr.dir": "this.dir", "attr.ariaDisabled": "this.ariaDisabled", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
             EditorLocalizationService,
             ProviderService,
             EditorToolsService,
@@ -3967,164 +3989,171 @@ class EditorComponent {
             }
         ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
-            kendoEditorLocalizedMessages
-            i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
-            alignCenter="Center text"
-            i18n-alignJustify="kendo.editor.alignJustify|The title of the tool that justifies text both left and right."
-            alignJustify="Justify"
-            i18n-alignLeft="kendo.editor.alignLeft|The title of the tool that aligns text on the left."
-            alignLeft="Align text left"
-            i18n-alignRight="kendo.editor.alignRight|The title of the tool that aligns text on the right."
-            alignRight="Align text right"
-            i18n-backColor="kendo.editor.backColor|The title of the tool that changes the text background color."
-            backColor="Background color"
-            i18n-blockquote="kendo.editor.blockquote|The title of the tool that wraps an element in a blockquote"
-            blockquote="Quotation"
-            i18n-bold="kendo.editor.bold|The title of the tool that makes text bold."
-            bold="Bold"
-            i18n-cleanFormatting="kendo.editor.cleanFormatting|The title of the Clean Formatting tool."
-            cleanFormatting="Clean formatting"
-            i18n-createLink="kendo.editor.createLink|The title of the tool that creates hyperlinks."
-            createLink="Insert link"
-            i18n-dialogApply="kendo.editor.dialogApply|The label of the **Apply** button in all editor dialogs."
-            dialogApply="Apply"
-            i18n-dialogCancel="kendo.editor.dialogCancel|The label of the **Cancel** button in all editor dialogs."
-            dialogCancel="Cancel"
-            i18n-dialogInsert="kendo.editor.dialogInsert|The label of the **Insert** button in all editor dialogs."
-            dialogInsert="Insert"
-            i18n-dialogUpdate="kendo.editor.dialogUpdate|The label of the **Update** button in all editor dialogs."
-            dialogUpdate="Update"
-            i18n-fileText="kendo.editor.fileText|The caption for the file text in the insertFile dialog."
-            fileText="Text"
-            i18n-fileTitle="kendo.editor.fileTitle|The caption for the file Title in the insertFile dialog."
-            fileTitle="Title"
-            i18n-fileWebAddress="kendo.editor.fileWebAddress|The caption for the file URL in the insertFile dialog."
-            fileWebAddress="Web address"
-            i18n-fontFamily="kendo.editor.fontFamily|The title of the tool that changes the text font."
-            fontFamily="Select font family"
-            i18n-fontSize="kendo.editor.fontSize|The title of the tool that changes the text size."
-            fontSize="Select font size"
-            i18n-foreColor="kendo.editor.foreColor|The title of the tool that changes the text color."
-            foreColor="Color"
-            i18n-format="kendo.editor.format|The title of the tool that lets users choose block formats."
-            format="Format"
-            i18n-imageAltText="kendo.editor.imageAltText|The caption for the image alternate text in the insertImage dialog."
-            imageAltText="Alternate text"
-            i18n-imageHeight="kendo.editor.imageHeight|The caption for the image height in the insertImage dialog."
-            imageHeight="Height (px)"
-            i18n-imageWebAddress="kendo.editor.imageWebAddress|The caption for the image URL in the insertImage dialog."
-            imageWebAddress="Web address"
-            i18n-imageWidth="kendo.editor.imageWidth|The caption for the image width in the insertImage dialog."
-            imageWidth="Width (px)"
-            i18n-indent="kendo.editor.indent|The title of the tool that indents the content."
-            indent="Indent"
-            i18n-insertFile="kendo.editor.insertFile|The title of the tool that inserts links to files."
-            insertFile="Insert file"
-            i18n-insertImage="kendo.editor.insertImage|The title of the tool that inserts images."
-            insertImage="Insert image"
-            i18n-insertOrderedList="kendo.editor.insertOrderedList|The title of the tool that inserts an ordered list."
-            insertOrderedList="Insert ordered list"
-            i18n-insertUnorderedList="kendo.editor.insertUnorderedList|The title of the tool that inserts an unordered list."
-            insertUnorderedList="Insert unordered list"
-            i18n-italic="kendo.editor.italic|The title of the tool that makes text italicized."
-            italic="Italic"
-            i18n-linkOpenInNewWindow="kendo.editor.linkOpenInNewWindow|The caption for the checkbox for opening the link in a new window in the createLink dialog."
-            linkOpenInNewWindow="Open link in new window"
-            i18n-linkText="kendo.editor.linkText|The caption for the link text in the createLink dialog."
-            linkText="Text"
-            i18n-linkTitle="kendo.editor.linkTitle|The caption for the link title in the createLink dialog."
-            linkTitle="Title"
-            i18n-linkWebAddress="kendo.editor.linkWebAddress|The caption for the URL in the createLink dialog."
-            linkWebAddress="Web address"
-            i18n-outdent="kendo.editor.outdent|The title of the tool that outdents the content."
-            outdent="Outdent"
-            i18n-print="kendo.editor.print|The title of the print tool."
-            print="Print"
-            i18n-redo="kendo.editor.redo|The title of the tool that undos the last action."
-            redo="Redo"
-            i18n-selectAll="kendo.editor.selectAll|The title of the tool that selects all content."
-            selectAll="Select All"
-            i18n-strikethrough="kendo.editor.strikethrough|The title of the tool that strikes through text."
-            strikethrough="Strikethrough"
-            i18n-subscript="kendo.editor.subscript|The title of the tool that makes text subscript."
-            subscript="Subscript"
-            i18n-superscript="kendo.editor.superscript|The title of the tool that makes text superscript."
-            superscript="Superscript"
-            i18n-underline="kendo.editor.underline|The title of the tool that underlines text."
-            underline="Underline"
-            i18n-unlink="kendo.editor.unlink|The title of the tool that removes hyperlinks."
-            unlink="Remove Link"
-            i18n-undo="kendo.editor.undo|The title of the tool that undos the last action."
-            undo="Undo"
-            i18n-viewSource="kendo.editor.viewSource|The title of the tool that shows the editor value as HTML."
-            viewSource="View source"
-            i18n-insertTable="kendo.editor.insertTable|The title of the tool that inserts table."
-            insertTable="Insert Table"
-            i18n-insertTableHint="kendo.editor.insertTableHint|The caption for the hint in the insert table tool."
-            insertTableHint="Create a {rows} {x} {columns} table"
-            i18n-addColumnBefore="kendo.editor.addColumnBefore|The title of the tool that adds new column before currently selected column."
-            addColumnBefore="Add column before"
-            i18n-addColumnAfter="kendo.editor.addColumnAfter|The title of the tool that adds new column after currently selected column."
-            addColumnAfter="Add column after"
-            i18n-addRowBefore="kendo.editor.addRowBefore|The title of the tool that adds new row before currently selected row."
-            addRowBefore="Add row before"
-            i18n-addRowAfter="kendo.editor.addRowAfter|The title of the tool that adds new row after currently selected row."
-            addRowAfter="Add row after"
-            i18n-mergeCells="kendo.editor.mergeCells|The title of the tool that merges the currently selected cells."
-            mergeCells="Merge cells"
-            i18n-splitCell="kendo.editor.splitCell|The title of the tool that splits the currently selected cell."
-            splitCell="Split cell"
-            i18n-deleteColumn="kendo.editor.deleteColumn|The title of the tool that deletes a table column."
-            deleteColumn="Delete column"
-            i18n-deleteRow="kendo.editor.deleteRow|The title of the tool that deletes a table row."
-            deleteRow="Delete row"
-            i18n-deleteTable="kendo.editor.deleteTable|The title of the tool that deletes a table."
-            deleteTable="Delete table"
-        >
+          kendoEditorLocalizedMessages
+          i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
+          alignCenter="Center text"
+          i18n-alignJustify="kendo.editor.alignJustify|The title of the tool that justifies text both left and right."
+          alignJustify="Justify"
+          i18n-alignLeft="kendo.editor.alignLeft|The title of the tool that aligns text on the left."
+          alignLeft="Align text left"
+          i18n-alignRight="kendo.editor.alignRight|The title of the tool that aligns text on the right."
+          alignRight="Align text right"
+          i18n-backColor="kendo.editor.backColor|The title of the tool that changes the text background color."
+          backColor="Background color"
+          i18n-blockquote="kendo.editor.blockquote|The title of the tool that wraps an element in a blockquote"
+          blockquote="Quotation"
+          i18n-bold="kendo.editor.bold|The title of the tool that makes text bold."
+          bold="Bold"
+          i18n-cleanFormatting="kendo.editor.cleanFormatting|The title of the Clean Formatting tool."
+          cleanFormatting="Clean formatting"
+          i18n-createLink="kendo.editor.createLink|The title of the tool that creates hyperlinks."
+          createLink="Insert link"
+          i18n-dialogApply="kendo.editor.dialogApply|The label of the **Apply** button in all editor dialogs."
+          dialogApply="Apply"
+          i18n-dialogCancel="kendo.editor.dialogCancel|The label of the **Cancel** button in all editor dialogs."
+          dialogCancel="Cancel"
+          i18n-dialogInsert="kendo.editor.dialogInsert|The label of the **Insert** button in all editor dialogs."
+          dialogInsert="Insert"
+          i18n-dialogUpdate="kendo.editor.dialogUpdate|The label of the **Update** button in all editor dialogs."
+          dialogUpdate="Update"
+          i18n-fileText="kendo.editor.fileText|The caption for the file text in the insertFile dialog."
+          fileText="Text"
+          i18n-fileTitle="kendo.editor.fileTitle|The caption for the file Title in the insertFile dialog."
+          fileTitle="Title"
+          i18n-fileWebAddress="kendo.editor.fileWebAddress|The caption for the file URL in the insertFile dialog."
+          fileWebAddress="Web address"
+          i18n-fontFamily="kendo.editor.fontFamily|The title of the tool that changes the text font."
+          fontFamily="Select font family"
+          i18n-fontSize="kendo.editor.fontSize|The title of the tool that changes the text size."
+          fontSize="Select font size"
+          i18n-foreColor="kendo.editor.foreColor|The title of the tool that changes the text color."
+          foreColor="Color"
+          i18n-format="kendo.editor.format|The title of the tool that lets users choose block formats."
+          format="Format"
+          i18n-imageAltText="kendo.editor.imageAltText|The caption for the image alternate text in the insertImage dialog."
+          imageAltText="Alternate text"
+          i18n-imageHeight="kendo.editor.imageHeight|The caption for the image height in the insertImage dialog."
+          imageHeight="Height (px)"
+          i18n-imageWebAddress="kendo.editor.imageWebAddress|The caption for the image URL in the insertImage dialog."
+          imageWebAddress="Web address"
+          i18n-imageWidth="kendo.editor.imageWidth|The caption for the image width in the insertImage dialog."
+          imageWidth="Width (px)"
+          i18n-indent="kendo.editor.indent|The title of the tool that indents the content."
+          indent="Indent"
+          i18n-insertFile="kendo.editor.insertFile|The title of the tool that inserts links to files."
+          insertFile="Insert file"
+          i18n-insertImage="kendo.editor.insertImage|The title of the tool that inserts images."
+          insertImage="Insert image"
+          i18n-insertOrderedList="kendo.editor.insertOrderedList|The title of the tool that inserts an ordered list."
+          insertOrderedList="Insert ordered list"
+          i18n-insertUnorderedList="kendo.editor.insertUnorderedList|The title of the tool that inserts an unordered list."
+          insertUnorderedList="Insert unordered list"
+          i18n-italic="kendo.editor.italic|The title of the tool that makes text italicized."
+          italic="Italic"
+          i18n-linkOpenInNewWindow="kendo.editor.linkOpenInNewWindow|The caption for the checkbox for opening the link in a new window in the createLink dialog."
+          linkOpenInNewWindow="Open link in new window"
+          i18n-linkText="kendo.editor.linkText|The caption for the link text in the createLink dialog."
+          linkText="Text"
+          i18n-linkTitle="kendo.editor.linkTitle|The caption for the link title in the createLink dialog."
+          linkTitle="Title"
+          i18n-linkWebAddress="kendo.editor.linkWebAddress|The caption for the URL in the createLink dialog."
+          linkWebAddress="Web address"
+          i18n-outdent="kendo.editor.outdent|The title of the tool that outdents the content."
+          outdent="Outdent"
+          i18n-print="kendo.editor.print|The title of the print tool."
+          print="Print"
+          i18n-redo="kendo.editor.redo|The title of the tool that undos the last action."
+          redo="Redo"
+          i18n-selectAll="kendo.editor.selectAll|The title of the tool that selects all content."
+          selectAll="Select All"
+          i18n-strikethrough="kendo.editor.strikethrough|The title of the tool that strikes through text."
+          strikethrough="Strikethrough"
+          i18n-subscript="kendo.editor.subscript|The title of the tool that makes text subscript."
+          subscript="Subscript"
+          i18n-superscript="kendo.editor.superscript|The title of the tool that makes text superscript."
+          superscript="Superscript"
+          i18n-underline="kendo.editor.underline|The title of the tool that underlines text."
+          underline="Underline"
+          i18n-unlink="kendo.editor.unlink|The title of the tool that removes hyperlinks."
+          unlink="Remove Link"
+          i18n-undo="kendo.editor.undo|The title of the tool that undos the last action."
+          undo="Undo"
+          i18n-viewSource="kendo.editor.viewSource|The title of the tool that shows the editor value as HTML."
+          viewSource="View source"
+          i18n-insertTable="kendo.editor.insertTable|The title of the tool that inserts table."
+          insertTable="Insert Table"
+          i18n-insertTableHint="kendo.editor.insertTableHint|The caption for the hint in the insert table tool."
+          insertTableHint="Create a {rows} {x} {columns} table"
+          i18n-addColumnBefore="kendo.editor.addColumnBefore|The title of the tool that adds new column before currently selected column."
+          addColumnBefore="Add column before"
+          i18n-addColumnAfter="kendo.editor.addColumnAfter|The title of the tool that adds new column after currently selected column."
+          addColumnAfter="Add column after"
+          i18n-addRowBefore="kendo.editor.addRowBefore|The title of the tool that adds new row before currently selected row."
+          addRowBefore="Add row before"
+          i18n-addRowAfter="kendo.editor.addRowAfter|The title of the tool that adds new row after currently selected row."
+          addRowAfter="Add row after"
+          i18n-mergeCells="kendo.editor.mergeCells|The title of the tool that merges the currently selected cells."
+          mergeCells="Merge cells"
+          i18n-splitCell="kendo.editor.splitCell|The title of the tool that splits the currently selected cell."
+          splitCell="Split cell"
+          i18n-deleteColumn="kendo.editor.deleteColumn|The title of the tool that deletes a table column."
+          deleteColumn="Delete column"
+          i18n-deleteRow="kendo.editor.deleteRow|The title of the tool that deletes a table row."
+          deleteRow="Delete row"
+          i18n-deleteTable="kendo.editor.deleteTable|The title of the tool that deletes a table."
+          deleteTable="Delete table"
+          >
         </ng-container>
         <ng-content select="kendo-toolbar"></ng-content>
-        <kendo-toolbar
+        @if (!userToolBarElement) {
+          <kendo-toolbar
             #defaultToolbar
-            *ngIf="!userToolBarElement"
             class="k-editor-toolbar"
             [overflow]="true"
             [tabindex]="readonly ? -1 : 0"
-        >
+            >
             <kendo-toolbar-buttongroup>
-                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
             <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
             <kendo-toolbar-buttongroup>
-                <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
             <kendo-toolbar-buttongroup>
-                <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
             <kendo-toolbar-buttongroup>
-                <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
             <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>
-        </kendo-toolbar>
-
-        <div *ngIf="!iframe" #content [attr.dir]="direction" class="k-editor-content"></div>
-
-        <div class="k-editor-content" *ngIf="iframe">
+          </kendo-toolbar>
+        }
+        
+        @if (!iframe) {
+          <div #content [attr.dir]="direction" class="k-editor-content"></div>
+        }
+        
+        @if (iframe) {
+          <div class="k-editor-content">
             <iframe #content srcdoc="<!DOCTYPE html>" role="none" frameborder="0" class="k-iframe" [style.width.%]="100" [style.height.%]="100" [style.display]="'block'" (load)="iframeOnLoad()"></iframe>
-        </div>
-
+          </div>
+        }
+        
         <ng-container #dialogsContainer></ng-container>
-
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { kind: "directive", type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { kind: "directive", type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { kind: "component", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { kind: "directive", type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { kind: "directive", type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { kind: "directive", type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { kind: "directive", type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { kind: "directive", type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { kind: "directive", type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { kind: "directive", type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { kind: "directive", type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { kind: "directive", type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { kind: "directive", type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { kind: "directive", type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+        
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoEditorLocalizedMessages]" }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { kind: "directive", type: EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { kind: "directive", type: EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { kind: "component", type: EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { kind: "directive", type: EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { kind: "directive", type: EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { kind: "directive", type: EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { kind: "directive", type: EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { kind: "directive", type: EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { kind: "directive", type: EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { kind: "directive", type: EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { kind: "directive", type: EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { kind: "directive", type: EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { kind: "directive", type: EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { kind: "directive", type: EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
@@ -4154,166 +4183,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
         <ng-container
-            kendoEditorLocalizedMessages
-            i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
-            alignCenter="Center text"
-            i18n-alignJustify="kendo.editor.alignJustify|The title of the tool that justifies text both left and right."
-            alignJustify="Justify"
-            i18n-alignLeft="kendo.editor.alignLeft|The title of the tool that aligns text on the left."
-            alignLeft="Align text left"
-            i18n-alignRight="kendo.editor.alignRight|The title of the tool that aligns text on the right."
-            alignRight="Align text right"
-            i18n-backColor="kendo.editor.backColor|The title of the tool that changes the text background color."
-            backColor="Background color"
-            i18n-blockquote="kendo.editor.blockquote|The title of the tool that wraps an element in a blockquote"
-            blockquote="Quotation"
-            i18n-bold="kendo.editor.bold|The title of the tool that makes text bold."
-            bold="Bold"
-            i18n-cleanFormatting="kendo.editor.cleanFormatting|The title of the Clean Formatting tool."
-            cleanFormatting="Clean formatting"
-            i18n-createLink="kendo.editor.createLink|The title of the tool that creates hyperlinks."
-            createLink="Insert link"
-            i18n-dialogApply="kendo.editor.dialogApply|The label of the **Apply** button in all editor dialogs."
-            dialogApply="Apply"
-            i18n-dialogCancel="kendo.editor.dialogCancel|The label of the **Cancel** button in all editor dialogs."
-            dialogCancel="Cancel"
-            i18n-dialogInsert="kendo.editor.dialogInsert|The label of the **Insert** button in all editor dialogs."
-            dialogInsert="Insert"
-            i18n-dialogUpdate="kendo.editor.dialogUpdate|The label of the **Update** button in all editor dialogs."
-            dialogUpdate="Update"
-            i18n-fileText="kendo.editor.fileText|The caption for the file text in the insertFile dialog."
-            fileText="Text"
-            i18n-fileTitle="kendo.editor.fileTitle|The caption for the file Title in the insertFile dialog."
-            fileTitle="Title"
-            i18n-fileWebAddress="kendo.editor.fileWebAddress|The caption for the file URL in the insertFile dialog."
-            fileWebAddress="Web address"
-            i18n-fontFamily="kendo.editor.fontFamily|The title of the tool that changes the text font."
-            fontFamily="Select font family"
-            i18n-fontSize="kendo.editor.fontSize|The title of the tool that changes the text size."
-            fontSize="Select font size"
-            i18n-foreColor="kendo.editor.foreColor|The title of the tool that changes the text color."
-            foreColor="Color"
-            i18n-format="kendo.editor.format|The title of the tool that lets users choose block formats."
-            format="Format"
-            i18n-imageAltText="kendo.editor.imageAltText|The caption for the image alternate text in the insertImage dialog."
-            imageAltText="Alternate text"
-            i18n-imageHeight="kendo.editor.imageHeight|The caption for the image height in the insertImage dialog."
-            imageHeight="Height (px)"
-            i18n-imageWebAddress="kendo.editor.imageWebAddress|The caption for the image URL in the insertImage dialog."
-            imageWebAddress="Web address"
-            i18n-imageWidth="kendo.editor.imageWidth|The caption for the image width in the insertImage dialog."
-            imageWidth="Width (px)"
-            i18n-indent="kendo.editor.indent|The title of the tool that indents the content."
-            indent="Indent"
-            i18n-insertFile="kendo.editor.insertFile|The title of the tool that inserts links to files."
-            insertFile="Insert file"
-            i18n-insertImage="kendo.editor.insertImage|The title of the tool that inserts images."
-            insertImage="Insert image"
-            i18n-insertOrderedList="kendo.editor.insertOrderedList|The title of the tool that inserts an ordered list."
-            insertOrderedList="Insert ordered list"
-            i18n-insertUnorderedList="kendo.editor.insertUnorderedList|The title of the tool that inserts an unordered list."
-            insertUnorderedList="Insert unordered list"
-            i18n-italic="kendo.editor.italic|The title of the tool that makes text italicized."
-            italic="Italic"
-            i18n-linkOpenInNewWindow="kendo.editor.linkOpenInNewWindow|The caption for the checkbox for opening the link in a new window in the createLink dialog."
-            linkOpenInNewWindow="Open link in new window"
-            i18n-linkText="kendo.editor.linkText|The caption for the link text in the createLink dialog."
-            linkText="Text"
-            i18n-linkTitle="kendo.editor.linkTitle|The caption for the link title in the createLink dialog."
-            linkTitle="Title"
-            i18n-linkWebAddress="kendo.editor.linkWebAddress|The caption for the URL in the createLink dialog."
-            linkWebAddress="Web address"
-            i18n-outdent="kendo.editor.outdent|The title of the tool that outdents the content."
-            outdent="Outdent"
-            i18n-print="kendo.editor.print|The title of the print tool."
-            print="Print"
-            i18n-redo="kendo.editor.redo|The title of the tool that undos the last action."
-            redo="Redo"
-            i18n-selectAll="kendo.editor.selectAll|The title of the tool that selects all content."
-            selectAll="Select All"
-            i18n-strikethrough="kendo.editor.strikethrough|The title of the tool that strikes through text."
-            strikethrough="Strikethrough"
-            i18n-subscript="kendo.editor.subscript|The title of the tool that makes text subscript."
-            subscript="Subscript"
-            i18n-superscript="kendo.editor.superscript|The title of the tool that makes text superscript."
-            superscript="Superscript"
-            i18n-underline="kendo.editor.underline|The title of the tool that underlines text."
-            underline="Underline"
-            i18n-unlink="kendo.editor.unlink|The title of the tool that removes hyperlinks."
-            unlink="Remove Link"
-            i18n-undo="kendo.editor.undo|The title of the tool that undos the last action."
-            undo="Undo"
-            i18n-viewSource="kendo.editor.viewSource|The title of the tool that shows the editor value as HTML."
-            viewSource="View source"
-            i18n-insertTable="kendo.editor.insertTable|The title of the tool that inserts table."
-            insertTable="Insert Table"
-            i18n-insertTableHint="kendo.editor.insertTableHint|The caption for the hint in the insert table tool."
-            insertTableHint="Create a {rows} {x} {columns} table"
-            i18n-addColumnBefore="kendo.editor.addColumnBefore|The title of the tool that adds new column before currently selected column."
-            addColumnBefore="Add column before"
-            i18n-addColumnAfter="kendo.editor.addColumnAfter|The title of the tool that adds new column after currently selected column."
-            addColumnAfter="Add column after"
-            i18n-addRowBefore="kendo.editor.addRowBefore|The title of the tool that adds new row before currently selected row."
-            addRowBefore="Add row before"
-            i18n-addRowAfter="kendo.editor.addRowAfter|The title of the tool that adds new row after currently selected row."
-            addRowAfter="Add row after"
-            i18n-mergeCells="kendo.editor.mergeCells|The title of the tool that merges the currently selected cells."
-            mergeCells="Merge cells"
-            i18n-splitCell="kendo.editor.splitCell|The title of the tool that splits the currently selected cell."
-            splitCell="Split cell"
-            i18n-deleteColumn="kendo.editor.deleteColumn|The title of the tool that deletes a table column."
-            deleteColumn="Delete column"
-            i18n-deleteRow="kendo.editor.deleteRow|The title of the tool that deletes a table row."
-            deleteRow="Delete row"
-            i18n-deleteTable="kendo.editor.deleteTable|The title of the tool that deletes a table."
-            deleteTable="Delete table"
-        >
+          kendoEditorLocalizedMessages
+          i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
+          alignCenter="Center text"
+          i18n-alignJustify="kendo.editor.alignJustify|The title of the tool that justifies text both left and right."
+          alignJustify="Justify"
+          i18n-alignLeft="kendo.editor.alignLeft|The title of the tool that aligns text on the left."
+          alignLeft="Align text left"
+          i18n-alignRight="kendo.editor.alignRight|The title of the tool that aligns text on the right."
+          alignRight="Align text right"
+          i18n-backColor="kendo.editor.backColor|The title of the tool that changes the text background color."
+          backColor="Background color"
+          i18n-blockquote="kendo.editor.blockquote|The title of the tool that wraps an element in a blockquote"
+          blockquote="Quotation"
+          i18n-bold="kendo.editor.bold|The title of the tool that makes text bold."
+          bold="Bold"
+          i18n-cleanFormatting="kendo.editor.cleanFormatting|The title of the Clean Formatting tool."
+          cleanFormatting="Clean formatting"
+          i18n-createLink="kendo.editor.createLink|The title of the tool that creates hyperlinks."
+          createLink="Insert link"
+          i18n-dialogApply="kendo.editor.dialogApply|The label of the **Apply** button in all editor dialogs."
+          dialogApply="Apply"
+          i18n-dialogCancel="kendo.editor.dialogCancel|The label of the **Cancel** button in all editor dialogs."
+          dialogCancel="Cancel"
+          i18n-dialogInsert="kendo.editor.dialogInsert|The label of the **Insert** button in all editor dialogs."
+          dialogInsert="Insert"
+          i18n-dialogUpdate="kendo.editor.dialogUpdate|The label of the **Update** button in all editor dialogs."
+          dialogUpdate="Update"
+          i18n-fileText="kendo.editor.fileText|The caption for the file text in the insertFile dialog."
+          fileText="Text"
+          i18n-fileTitle="kendo.editor.fileTitle|The caption for the file Title in the insertFile dialog."
+          fileTitle="Title"
+          i18n-fileWebAddress="kendo.editor.fileWebAddress|The caption for the file URL in the insertFile dialog."
+          fileWebAddress="Web address"
+          i18n-fontFamily="kendo.editor.fontFamily|The title of the tool that changes the text font."
+          fontFamily="Select font family"
+          i18n-fontSize="kendo.editor.fontSize|The title of the tool that changes the text size."
+          fontSize="Select font size"
+          i18n-foreColor="kendo.editor.foreColor|The title of the tool that changes the text color."
+          foreColor="Color"
+          i18n-format="kendo.editor.format|The title of the tool that lets users choose block formats."
+          format="Format"
+          i18n-imageAltText="kendo.editor.imageAltText|The caption for the image alternate text in the insertImage dialog."
+          imageAltText="Alternate text"
+          i18n-imageHeight="kendo.editor.imageHeight|The caption for the image height in the insertImage dialog."
+          imageHeight="Height (px)"
+          i18n-imageWebAddress="kendo.editor.imageWebAddress|The caption for the image URL in the insertImage dialog."
+          imageWebAddress="Web address"
+          i18n-imageWidth="kendo.editor.imageWidth|The caption for the image width in the insertImage dialog."
+          imageWidth="Width (px)"
+          i18n-indent="kendo.editor.indent|The title of the tool that indents the content."
+          indent="Indent"
+          i18n-insertFile="kendo.editor.insertFile|The title of the tool that inserts links to files."
+          insertFile="Insert file"
+          i18n-insertImage="kendo.editor.insertImage|The title of the tool that inserts images."
+          insertImage="Insert image"
+          i18n-insertOrderedList="kendo.editor.insertOrderedList|The title of the tool that inserts an ordered list."
+          insertOrderedList="Insert ordered list"
+          i18n-insertUnorderedList="kendo.editor.insertUnorderedList|The title of the tool that inserts an unordered list."
+          insertUnorderedList="Insert unordered list"
+          i18n-italic="kendo.editor.italic|The title of the tool that makes text italicized."
+          italic="Italic"
+          i18n-linkOpenInNewWindow="kendo.editor.linkOpenInNewWindow|The caption for the checkbox for opening the link in a new window in the createLink dialog."
+          linkOpenInNewWindow="Open link in new window"
+          i18n-linkText="kendo.editor.linkText|The caption for the link text in the createLink dialog."
+          linkText="Text"
+          i18n-linkTitle="kendo.editor.linkTitle|The caption for the link title in the createLink dialog."
+          linkTitle="Title"
+          i18n-linkWebAddress="kendo.editor.linkWebAddress|The caption for the URL in the createLink dialog."
+          linkWebAddress="Web address"
+          i18n-outdent="kendo.editor.outdent|The title of the tool that outdents the content."
+          outdent="Outdent"
+          i18n-print="kendo.editor.print|The title of the print tool."
+          print="Print"
+          i18n-redo="kendo.editor.redo|The title of the tool that undos the last action."
+          redo="Redo"
+          i18n-selectAll="kendo.editor.selectAll|The title of the tool that selects all content."
+          selectAll="Select All"
+          i18n-strikethrough="kendo.editor.strikethrough|The title of the tool that strikes through text."
+          strikethrough="Strikethrough"
+          i18n-subscript="kendo.editor.subscript|The title of the tool that makes text subscript."
+          subscript="Subscript"
+          i18n-superscript="kendo.editor.superscript|The title of the tool that makes text superscript."
+          superscript="Superscript"
+          i18n-underline="kendo.editor.underline|The title of the tool that underlines text."
+          underline="Underline"
+          i18n-unlink="kendo.editor.unlink|The title of the tool that removes hyperlinks."
+          unlink="Remove Link"
+          i18n-undo="kendo.editor.undo|The title of the tool that undos the last action."
+          undo="Undo"
+          i18n-viewSource="kendo.editor.viewSource|The title of the tool that shows the editor value as HTML."
+          viewSource="View source"
+          i18n-insertTable="kendo.editor.insertTable|The title of the tool that inserts table."
+          insertTable="Insert Table"
+          i18n-insertTableHint="kendo.editor.insertTableHint|The caption for the hint in the insert table tool."
+          insertTableHint="Create a {rows} {x} {columns} table"
+          i18n-addColumnBefore="kendo.editor.addColumnBefore|The title of the tool that adds new column before currently selected column."
+          addColumnBefore="Add column before"
+          i18n-addColumnAfter="kendo.editor.addColumnAfter|The title of the tool that adds new column after currently selected column."
+          addColumnAfter="Add column after"
+          i18n-addRowBefore="kendo.editor.addRowBefore|The title of the tool that adds new row before currently selected row."
+          addRowBefore="Add row before"
+          i18n-addRowAfter="kendo.editor.addRowAfter|The title of the tool that adds new row after currently selected row."
+          addRowAfter="Add row after"
+          i18n-mergeCells="kendo.editor.mergeCells|The title of the tool that merges the currently selected cells."
+          mergeCells="Merge cells"
+          i18n-splitCell="kendo.editor.splitCell|The title of the tool that splits the currently selected cell."
+          splitCell="Split cell"
+          i18n-deleteColumn="kendo.editor.deleteColumn|The title of the tool that deletes a table column."
+          deleteColumn="Delete column"
+          i18n-deleteRow="kendo.editor.deleteRow|The title of the tool that deletes a table row."
+          deleteRow="Delete row"
+          i18n-deleteTable="kendo.editor.deleteTable|The title of the tool that deletes a table."
+          deleteTable="Delete table"
+          >
         </ng-container>
         <ng-content select="kendo-toolbar"></ng-content>
-        <kendo-toolbar
+        @if (!userToolBarElement) {
+          <kendo-toolbar
             #defaultToolbar
-            *ngIf="!userToolBarElement"
             class="k-editor-toolbar"
             [overflow]="true"
             [tabindex]="readonly ? -1 : 0"
-        >
+            >
             <kendo-toolbar-buttongroup>
-                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
             <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
             <kendo-toolbar-buttongroup>
-                <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
             <kendo-toolbar-buttongroup>
-                <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
             <kendo-toolbar-buttongroup>
-                <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>
-                <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>
+              <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
             </kendo-toolbar-buttongroup>
             <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>
-        </kendo-toolbar>
-
-        <div *ngIf="!iframe" #content [attr.dir]="direction" class="k-editor-content"></div>
-
-        <div class="k-editor-content" *ngIf="iframe">
+          </kendo-toolbar>
+        }
+        
+        @if (!iframe) {
+          <div #content [attr.dir]="direction" class="k-editor-content"></div>
+        }
+        
+        @if (iframe) {
+          <div class="k-editor-content">
             <iframe #content srcdoc="<!DOCTYPE html>" role="none" frameborder="0" class="k-iframe" [style.width.%]="100" [style.height.%]="100" [style.display]="'block'" (load)="iframeOnLoad()"></iframe>
-        </div>
-
+          </div>
+        }
+        
         <ng-container #dialogsContainer></ng-container>
-
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `,
+        
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, ToolBarComponent, ToolBarButtonGroupComponent, ToolBarButtonComponent, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorUnderlineButtonDirective, EditorFormatComponent, EditorAlignLeftButtonDirective, EditorAlignCenterButtonDirective, EditorAlignRightButtonDirective, EditorAlignJustifyButtonDirective, EditorInsertUnorderedListButtonDirective, EditorInsertOrderedListButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorUnlinkButtonDirective, EditorInsertImageButtonDirective, WatermarkOverlayComponent]
+                    imports: [LocalizedMessagesDirective, ToolBarComponent, ToolBarButtonGroupComponent, ToolBarButtonComponent, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorUnderlineButtonDirective, EditorFormatComponent, EditorAlignLeftButtonDirective, EditorAlignCenterButtonDirective, EditorAlignRightButtonDirective, EditorAlignJustifyButtonDirective, EditorInsertUnorderedListButtonDirective, EditorInsertOrderedListButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorUnlinkButtonDirective, EditorInsertImageButtonDirective, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$1.DialogService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }], propDecorators: { value: [{
                 type: Input
@@ -4761,51 +4797,53 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFontSizeComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorFontSizeComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "fontSizeDropDownList", first: true, predicate: ["element"], descendants: true, read: FontSizeDropDownListComponent }, { propertyName: "fontSizeButton", first: true, predicate: ["fontSizeButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditorFontSizeComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "fontSizeDropDownList", first: true, predicate: ["element"], descendants: true, read: FontSizeDropDownListComponent }, { propertyName: "fontSizeButton", first: true, predicate: ["fontSizeButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-editor-fontsize-dropdownlist
-                #element
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-fontsize-dropdownlist
+            #element
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontsize-dropdownlist>
+          </kendo-editor-fontsize-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #fontSizeButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
+          <div #fontSizeButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [tabindex]="tabindex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-editor-fontsize-dropdownlist
-                #element
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-fontsize-dropdownlist
+            #element
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontsize-dropdownlist>
+          </kendo-editor-fontsize-dropdownlist>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
             type: Component,
@@ -4814,51 +4852,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-dropdownlist[kendoEditorFontSize]',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-editor-fontsize-dropdownlist
-                #element
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-fontsize-dropdownlist
+            #element
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontsize-dropdownlist>
+          </kendo-editor-fontsize-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #fontSizeButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
+          <div #fontSizeButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [tabindex]="tabindex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-editor-fontsize-dropdownlist
-                #element
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-fontsize-dropdownlist
+            #element
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontsize-dropdownlist>
+          </kendo-editor-fontsize-dropdownlist>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [FontSizeDropDownListComponent, IconWrapperComponent, NgIf]
+                    imports: [FontSizeDropDownListComponent, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
@@ -5239,51 +5279,53 @@ class EditorFontFamilyComponent extends ToolBarToolComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFontFamilyComponent, deps: [{ token: i1$1.DialogService }, { token: EditorLocalizationService }, { token: ProviderService }, { token: EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorFontFamilyComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }], viewQueries: [{ 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditorFontFamilyComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }], viewQueries: [{ 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
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-fontfamily-dropdownlist
+            #element
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontfamily-dropdownlist>
+          </kendo-editor-fontfamily-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #fontFamilyButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
+          <div #fontFamilyButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [tabindex]="tabindex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-editor-fontfamily-dropdownlist
-                #element
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-fontfamily-dropdownlist
+            #element
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontfamily-dropdownlist>
+          </kendo-editor-fontfamily-dropdownlist>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
             type: Component,
@@ -5292,51 +5334,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-dropdownlist[kendoEditorFontFamily]',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-editor-fontfamily-dropdownlist
-                #element
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-fontfamily-dropdownlist
+            #element
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontfamily-dropdownlist>
+          </kendo-editor-fontfamily-dropdownlist>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #fontFamilyButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
+          <div #fontFamilyButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [tabindex]="tabindex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-editor-fontfamily-dropdownlist
-                #element
-                [defaultItem]="defaultItem"
-                [data]="data"
-                [(value)]="value"
-                [itemDisabled]="itemDisabled"
-                [title]="title"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="onValueChange($event)"
+          <kendo-editor-fontfamily-dropdownlist
+            #element
+            [defaultItem]="defaultItem"
+            [data]="data"
+            [(value)]="value"
+            [itemDisabled]="itemDisabled"
+            [title]="title"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
             >
-            </kendo-editor-fontfamily-dropdownlist>
+          </kendo-editor-fontfamily-dropdownlist>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [FontFamilyDropDownListComponent, IconWrapperComponent, NgIf]
+                    imports: [FontFamilyDropDownListComponent, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$1.DialogService }, { type: EditorLocalizationService }, { type: ProviderService }, { type: EditorToolsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
@@ -5677,67 +5721,70 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: EditorLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }, { token: ProviderService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorColorPickerComponent, isStandalone: true, 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: "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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditorColorPickerComponent, isStandalone: true, 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: "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"
-                [paletteSettings]="paletteSettings"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="handleValueChange($event)"
-                (clearButtonClick)="handleClearButtonClick()"
-                (activeColorClick)="handleActiveColorClick($event)"
-                (close)="onClose()"
-                (activeViewChange)="onActiveViewChange($event)"
+          <kendo-colorpicker
+            #colorpicker
+            [attr.title]="title"
+            [icon]="icon"
+            [svgIcon]="svgIcon"
+            [views]="views"
+            [format]="'hex'"
+            [(value)]="value"
+            [paletteSettings]="paletteSettings"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="handleValueChange($event)"
+            (clearButtonClick)="handleClearButtonClick()"
+            (activeColorClick)="handleActiveColorClick($event)"
+            (close)="onClose()"
+            (activeViewChange)="onActiveViewChange($event)"
             >
-            </kendo-colorpicker>
+          </kendo-colorpicker>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #colorPickerButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper
-                        *ngIf="icon"
-                        [name]="icon"
-                        [svgIcon]="svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
+          <div #colorPickerButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [tabindex]="tabindex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              @if (icon) {
+                <kendo-icon-wrapper
+                  [name]="icon"
+                  [svgIcon]="svgIcon"
+                ></kendo-icon-wrapper>
+              }
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-colorpicker
-                #colorpicker
-                [attr.title]="title"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                [views]="views"
-                [format]="'hex'"
-                [(value)]="value"
-                [paletteSettings]="paletteSettings"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="handleValueChange($event)"
-                (clearButtonClick)="handleClearButtonClick()"
-                (activeColorClick)="handleActiveColorClick($event)"
-                (close)="onClose()"
-                (activeViewChange)="onActiveViewChange($event)"
+          <kendo-colorpicker
+            #colorpicker
+            [attr.title]="title"
+            [icon]="icon"
+            [svgIcon]="svgIcon"
+            [views]="views"
+            [format]="'hex'"
+            [(value)]="value"
+            [paletteSettings]="paletteSettings"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="handleValueChange($event)"
+            (clearButtonClick)="handleClearButtonClick()"
+            (activeColorClick)="handleActiveColorClick($event)"
+            (close)="onClose()"
+            (activeViewChange)="onActiveViewChange($event)"
             >
-            </kendo-colorpicker>
+          </kendo-colorpicker>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
@@ -5746,67 +5793,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-colorpicker',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-colorpicker
-                #colorpicker
-                [attr.title]="title"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                [views]="views"
-                [format]="'hex'"
-                [(value)]="value"
-                [paletteSettings]="paletteSettings"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="handleValueChange($event)"
-                (clearButtonClick)="handleClearButtonClick()"
-                (activeColorClick)="handleActiveColorClick($event)"
-                (close)="onClose()"
-                (activeViewChange)="onActiveViewChange($event)"
+          <kendo-colorpicker
+            #colorpicker
+            [attr.title]="title"
+            [icon]="icon"
+            [svgIcon]="svgIcon"
+            [views]="views"
+            [format]="'hex'"
+            [(value)]="value"
+            [paletteSettings]="paletteSettings"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="handleValueChange($event)"
+            (clearButtonClick)="handleClearButtonClick()"
+            (activeColorClick)="handleActiveColorClick($event)"
+            (close)="onClose()"
+            (activeViewChange)="onActiveViewChange($event)"
             >
-            </kendo-colorpicker>
+          </kendo-colorpicker>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #colorPickerButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [tabindex]="tabindex"
-                (click)="openDialog()">
-                <span
-                    class="k-link k-menu-link">
-                    <kendo-icon-wrapper
-                        *ngIf="icon"
-                        [name]="icon"
-                        [svgIcon]="svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
-                </span>
-            </div>
+          <div #colorPickerButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [tabindex]="tabindex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              @if (icon) {
+                <kendo-icon-wrapper
+                  [name]="icon"
+                  [svgIcon]="svgIcon"
+                ></kendo-icon-wrapper>
+              }
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-colorpicker
-                #colorpicker
-                [attr.title]="title"
-                [icon]="icon"
-                [svgIcon]="svgIcon"
-                [views]="views"
-                [format]="'hex'"
-                [(value)]="value"
-                [paletteSettings]="paletteSettings"
-                [disabled]="disabled"
-                [tabindex]="tabindex"
-                (valueChange)="handleValueChange($event)"
-                (clearButtonClick)="handleClearButtonClick()"
-                (activeColorClick)="handleActiveColorClick($event)"
-                (close)="onClose()"
-                (activeViewChange)="onActiveViewChange($event)"
+          <kendo-colorpicker
+            #colorpicker
+            [attr.title]="title"
+            [icon]="icon"
+            [svgIcon]="svgIcon"
+            [views]="views"
+            [format]="'hex'"
+            [(value)]="value"
+            [paletteSettings]="paletteSettings"
+            [disabled]="disabled"
+            [tabindex]="tabindex"
+            (valueChange)="handleValueChange($event)"
+            (clearButtonClick)="handleClearButtonClick()"
+            (activeColorClick)="handleActiveColorClick($event)"
+            (close)="onClose()"
+            (activeViewChange)="onActiveViewChange($event)"
             >
-            </kendo-colorpicker>
+          </kendo-colorpicker>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [ColorPickerComponent, NgIf, IconWrapperComponent]
+                    imports: [ColorPickerComponent, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: EditorLocalizationService }, { type: i1$1.DialogService }, { type: i0.NgZone }, { type: ProviderService }, { type: i0.Renderer2 }], propDecorators: { value: [{
                 type: Input
@@ -5885,26 +5935,28 @@ class PopupTableGridComponent {
         this.tableWizardClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupTableGridComponent, deps: [{ token: EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PopupTableGridComponent, isStandalone: true, selector: "kendo-popup-table-grid", outputs: { cellClick: "cellClick", tableWizardClick: "tableWizardClick" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PopupTableGridComponent, isStandalone: true, selector: "kendo-popup-table-grid", outputs: { cellClick: "cellClick", tableWizardClick: "tableWizardClick" }, ngImport: i0, template: `
         <div
-            [style.border-color]="'inherit'"
-            class="k-ct-popup"
-            (mouseleave)="resetState()"
-            (click)="insertTable()">
-            <span *ngFor="let i of cells"
-                class="k-ct-cell"
-                [class.k-selected]="selected(i)"
-                [class.k-disabled]="!selected(i)"
-                (mouseenter)="setState(i)">
+          [style.border-color]="'inherit'"
+          class="k-ct-popup"
+          (mouseleave)="resetState()"
+          (click)="insertTable()">
+          @for (i of cells; track i) {
+            <span
+              class="k-ct-cell"
+              [class.k-selected]="selected(i)"
+              [class.k-disabled]="!selected(i)"
+              (mouseenter)="setState(i)">
             </span>
+          }
         </div>
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+          <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopupTableGridComponent, decorators: [{
             type: Component,
@@ -5912,26 +5964,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-popup-table-grid',
                     template: `
         <div
-            [style.border-color]="'inherit'"
-            class="k-ct-popup"
-            (mouseleave)="resetState()"
-            (click)="insertTable()">
-            <span *ngFor="let i of cells"
-                class="k-ct-cell"
-                [class.k-selected]="selected(i)"
-                [class.k-disabled]="!selected(i)"
-                (mouseenter)="setState(i)">
+          [style.border-color]="'inherit'"
+          class="k-ct-popup"
+          (mouseleave)="resetState()"
+          (click)="insertTable()">
+          @for (i of cells; track i) {
+            <span
+              class="k-ct-cell"
+              [class.k-selected]="selected(i)"
+              [class.k-disabled]="!selected(i)"
+              (mouseenter)="setState(i)">
             </span>
+          }
         </div>
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+          <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
-    `,
+        `,
                     standalone: true,
-                    imports: [NgFor]
+                    imports: []
                 }]
         }], ctorParameters: () => [{ type: EditorLocalizationService }], propDecorators: { cellClick: [{
                 type: Output
@@ -6168,55 +6222,57 @@ class EditorInsertTableButtonComponent extends ToolBarToolComponent {
         return (this.overflows ? this.overflowElement : this.element)?.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorInsertTableButtonComponent, deps: [{ token: EditorLocalizationService }, { token: i2.PopupService }, { token: i1$1.DialogService }, { token: ProviderService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditorInsertTableButtonComponent, isStandalone: true, selector: "kendo-editor-insert-table-button", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorInsertTableButtonComponent) }], viewQueries: [{ 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditorInsertTableButtonComponent, isStandalone: true, selector: "kendo-editor-insert-table-button", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorInsertTableButtonComponent) }], viewQueries: [{ 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
-                type="button"
-                kendoButton
-                class="k-toolbar-button"
-                #element
-                [attr.title]="title"
-                [attr.tabindex]="tabIndex"
-                icon="table-add"
-                [svgIcon]="addTableSVGIcon"
-                [disabled]="disabled"
-                (click)="toggle()"
-                (blur)="onBlur()"
-            ></button>
+          <button
+            type="button"
+            kendoButton
+            class="k-toolbar-button"
+            #element
+            [attr.title]="title"
+            [attr.tabindex]="tabIndex"
+            icon="table-add"
+            [svgIcon]="addTableSVGIcon"
+            [disabled]="disabled"
+            (click)="toggle()"
+            (blur)="onBlur()"
+          ></button>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #overflowElement
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [attr.tabindex]="tabIndex"
-                (click)="openDialog()">
-                <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>
+          <div #overflowElement
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [attr.tabindex]="tabIndex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper name="table-add" [svgIcon]="addTableSVGIcon"></kendo-icon-wrapper>
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #popupGridTemplate>
-            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
+          <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
         </ng-template>
         <ng-template #sectionTemplate>
-            <button
-                type="button"
-                kendoButton
-                class="k-toolbar-button"
-                #element
-                [attr.title]="title"
-                [attr.tabindex]="tabIndex"
-                icon="table-add"
-                [svgIcon]="addTableSVGIcon"
-                [disabled]="disabled"
-                (click)="toggle()"
-                (blur)="onBlur()"
-            ></button>
+          <button
+            type="button"
+            kendoButton
+            class="k-toolbar-button"
+            #element
+            [attr.title]="title"
+            [attr.tabindex]="tabIndex"
+            icon="table-add"
+            [svgIcon]="addTableSVGIcon"
+            [disabled]="disabled"
+            (click)="toggle()"
+            (blur)="onBlur()"
+          ></button>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorInsertTableButtonComponent, decorators: [{
             type: Component,
@@ -6225,55 +6281,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-editor-insert-table-button',
                     template: `
         <ng-template #toolbarTemplate>
-            <button
-                type="button"
-                kendoButton
-                class="k-toolbar-button"
-                #element
-                [attr.title]="title"
-                [attr.tabindex]="tabIndex"
-                icon="table-add"
-                [svgIcon]="addTableSVGIcon"
-                [disabled]="disabled"
-                (click)="toggle()"
-                (blur)="onBlur()"
-            ></button>
+          <button
+            type="button"
+            kendoButton
+            class="k-toolbar-button"
+            #element
+            [attr.title]="title"
+            [attr.tabindex]="tabIndex"
+            icon="table-add"
+            [svgIcon]="addTableSVGIcon"
+            [disabled]="disabled"
+            (click)="toggle()"
+            (blur)="onBlur()"
+          ></button>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #overflowElement
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [attr.tabindex]="tabIndex"
-                (click)="openDialog()">
-                <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>
+          <div #overflowElement
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [attr.tabindex]="tabIndex"
+            (click)="openDialog()">
+            <span
+              class="k-link k-menu-link">
+              <kendo-icon-wrapper name="table-add" [svgIcon]="addTableSVGIcon"></kendo-icon-wrapper>
+              @if (title) {
+                <span class="k-menu-link-text">{{title}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #popupGridTemplate>
-            <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
+          <kendo-popup-table-grid (cellClick)="onCellClick($event)"></kendo-popup-table-grid>
         </ng-template>
         <ng-template #sectionTemplate>
-            <button
-                type="button"
-                kendoButton
-                class="k-toolbar-button"
-                #element
-                [attr.title]="title"
-                [attr.tabindex]="tabIndex"
-                icon="table-add"
-                [svgIcon]="addTableSVGIcon"
-                [disabled]="disabled"
-                (click)="toggle()"
-                (blur)="onBlur()"
-            ></button>
+          <button
+            type="button"
+            kendoButton
+            class="k-toolbar-button"
+            #element
+            [attr.title]="title"
+            [attr.tabindex]="tabIndex"
+            icon="table-add"
+            [svgIcon]="addTableSVGIcon"
+            [disabled]="disabled"
+            (click)="toggle()"
+            (blur)="onBlur()"
+          ></button>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [ButtonComponent, IconWrapperComponent, NgIf, PopupTableGridComponent]
+                    imports: [ButtonComponent, IconWrapperComponent, PopupTableGridComponent]
                 }]
         }], ctorParameters: () => [{ type: EditorLocalizationService }, { type: i2.PopupService }, { type: i1$1.DialogService }, { type: ProviderService }, { type: i0.Renderer2 }], propDecorators: { element: [{
                 type: ViewChild,