@progress/kendo-angular-toolbar 21.1.1-develop.2 → 21.2.0-develop.10

package/codemods/v19/toolbar-button-showicon.js

@@ -28,28 +28,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
-const index_1 = require("../template-transformer/index");
 const utils_1 = require("../utils");
 const fs = __importStar(require("fs"));
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
+    // Handle HTML files and inline templates
+    const htmlResult = (0, utils_1.htmlTransformer)(fileInfo, api, (templateContent) => {
+        let result = (0, utils_1.attributeValueUpdate)(templateContent, 'kendo-toolbar-button', 'showIcon', 'overflow', 'menu');
+        result = (0, utils_1.attributeValueUpdate)(result, 'kendo-toolbar-button', 'showIcon', 'both', 'always');
+        return result;
+    });
     if (filePath.endsWith('.html')) {
-        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
-            let updatedContent = fileInfo.source;
-            updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showIcon', 'overflow', 'menu');
-            updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showIcon', 'both', 'always');
-            // Only write to file once after all transformations
-            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        if (htmlResult && htmlResult !== fileInfo.source) {
+            fs.writeFileSync(filePath, htmlResult, 'utf-8');
+            return htmlResult;
         }
-        return;
+        return fileInfo.source; // Return original source if no changes
     }
+    // Handle TypeScript property transformations
     const j = api.jscodeshift;
-    const rootSource = j(fileInfo.source);
-    (0, index_1.templateTransformer)(rootSource, j, (root) => {
-        (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showIcon', 'overflow', 'menu');
-        (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showIcon', 'both', 'always');
-    });
-    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, 'DisplayMode', 'overflow', 'menu');
-    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, 'DisplayMode', 'both', 'always');
-    return rootSource.toSource();
+    const rootSource = j(htmlResult || fileInfo.source);
+    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, '@progress/kendo-angular-toolbar', 'DisplayMode', 'overflow', 'menu');
+    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, '@progress/kendo-angular-toolbar', 'DisplayMode', 'both', 'always');
+    return rootSource.toSource({ quote: 'single' });
 }

package/codemods/v19/toolbar-button-showtext.js

@@ -28,28 +28,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
-const index_1 = require("../template-transformer/index");
 const utils_1 = require("../utils");
 const fs = __importStar(require("fs"));
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
+    // Handle HTML files and inline templates
+    const htmlResult = (0, utils_1.htmlTransformer)(fileInfo, api, (templateContent) => {
+        let result = (0, utils_1.attributeValueUpdate)(templateContent, 'kendo-toolbar-button', 'showText', 'overflow', 'menu');
+        result = (0, utils_1.attributeValueUpdate)(result, 'kendo-toolbar-button', 'showText', 'both', 'always');
+        return result;
+    });
     if (filePath.endsWith('.html')) {
-        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
-            let updatedContent = fileInfo.source;
-            updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showText', 'overflow', 'menu');
-            updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showText', 'both', 'always');
-            // Only write to file once after all transformations
-            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        if (htmlResult && htmlResult !== fileInfo.source) {
+            fs.writeFileSync(filePath, htmlResult, 'utf-8');
+            return htmlResult;
         }
-        return;
+        return fileInfo.source; // Return original source if no changes
     }
+    // Handle TypeScript property transformations
     const j = api.jscodeshift;
-    const rootSource = j(fileInfo.source);
-    (0, index_1.templateTransformer)(rootSource, j, (root) => {
-        (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showText', 'overflow', 'menu');
-        (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showText', 'both', 'always');
-    });
-    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, 'DisplayMode', 'overflow', 'menu');
-    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, 'DisplayMode', 'both', 'always');
-    return rootSource.toSource();
+    const rootSource = j(htmlResult || fileInfo.source);
+    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, '@progress/kendo-angular-toolbar', 'DisplayMode', 'overflow', 'menu');
+    (0, utils_1.tsPropertyValueTransformer)(fileInfo.source, rootSource, j, '@progress/kendo-angular-toolbar', 'DisplayMode', 'both', 'always');
+    return rootSource.toSource({ quote: 'single' });
 }

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729041,
-    version: '21.1.1-develop.2',
+    publishDate: 1764592910,
+    version: '21.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/toolbar.component.mjs

@@ -5,7 +5,7 @@
 /* eslint-disable no-case-declarations */
 import { Component, HostBinding, ViewChild, TemplateRef, ElementRef, QueryList, ContentChildren, Input, HostListener, Output, EventEmitter, ViewContainerRef, NgZone, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { guid, normalizeNumpadKeys, ResizeSensorComponent } from '@progress/kendo-angular-common';
+import { guid, normalizeKeys, ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
@@ -22,7 +22,7 @@ import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
 import { ToolbarToolsService } from './tools/tools.service';
 import { ScrollService } from './scroll.service';
@@ -393,7 +393,7 @@ export class ToolBarComponent {
         this.zone.runOutsideAngular(() => {
             this.toolbarKeydownListener = this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => {
                 // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
-                const code = normalizeNumpadKeys(ev);
+                const code = normalizeKeys(ev);
                 switch (code) {
                     case Keys.ArrowLeft:
                         this.zone.run(() => {
@@ -663,7 +663,7 @@ export class ToolBarComponent {
         this.zone.runOutsideAngular(() => {
             if (this.normalizedOverflow.mode === 'section') {
                 this.sectionKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
-                    const code = normalizeNumpadKeys(ev);
+                    const code = normalizeKeys(ev);
                     switch (code) {
                         case Keys.ArrowLeft:
                             this.zone.run(() => {
@@ -710,7 +710,7 @@ export class ToolBarComponent {
             }
             else {
                 this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
-                    const code = normalizeNumpadKeys(ev);
+                    const code = normalizeKeys(ev);
                     switch (code) {
                         case Keys.ArrowUp:
                             this.zone.run(() => {
@@ -1033,7 +1033,7 @@ export class ToolBarComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }, { token: i6.ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex", showIcon: "showIcon", showText: "showText" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex", showIcon: "showIcon", showText: "showText" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
             RefreshService,
             NavigationService,
             LocalizationService,
@@ -1055,21 +1055,24 @@ export class ToolBarComponent {
             nextToolButton="Scroll right"
         >
         </ng-container>
-        <ng-container *ngIf="showScrollButtons && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'start')">
-            <span *ngIf="hasScrollButtons.position === 'split'" #prevScrollButton
-                kendoToolbarScrollableButton
-                [prev]="true"
-                [overflow]="normalizedOverflow"
-                [title]="getScrollButtonTitle('prev')"
-                class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                [ngClass]="{
-                    'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
-                    'k-button-lg': size === 'large'
-                }"
-                (onClick)="scrollTools($event)">
-            </span>
-            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'start'" #startButtonGroup>
+        @if (showScrollButtons && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'start')) {
+            @if (hasScrollButtons.position === 'split') {
+                <span #prevScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="true"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('prev')"
+                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+            }
+            @if (hasScrollButtons.position === 'start') {
+                <div class="k-button-group k-button-group-solid" #startButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
@@ -1097,10 +1100,13 @@ export class ToolBarComponent {
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
+            }
             <div class="k-toolbar-separator k-toolbar-button-separator k-separator" #scrollSeparator></div>
-        </ng-container>
-        <div class="k-toolbar-items k-toolbar-items-scroll" tabindex="-1" *ngIf="isScrollMode; else noScroll" #scrollContainer>
-            <ng-container *ngFor="let tool of allTools; let index = index"
+        }
+        @if (isScrollMode) {
+            <div class="k-toolbar-items k-toolbar-items-scroll" tabindex="-1" #scrollContainer>
+                @for (tool of allTools; track tool; let index = $index) {
+                    <ng-container
                 kendoToolbarRenderer
                 [tool]="tool"
                 location="toolbar"
@@ -1113,9 +1119,11 @@ export class ToolBarComponent {
                     </div>
                 </ng-template>
             </ng-container>
+            }
         </div>
-        <ng-template #noScroll>
-            <ng-container *ngFor="let tool of allTools; let index = index"
+        } @else {
+            @for (tool of allTools; track tool; let index = $index) {
+                <ng-container
                 kendoToolbarRenderer
                 [tool]="tool"
                 location="toolbar"
@@ -1128,9 +1136,13 @@ export class ToolBarComponent {
                     </div>
                 </ng-template>
             </ng-container>
-        </ng-template>
-        <div class="k-toolbar-separator k-toolbar-button-separator k-separator" *ngIf="showOverflowSeparator"></div>
-        <button
+            }
+        }
+        @if (showOverflowSeparator) {
+            <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+        }
+        @if (showMenu) {
+            <button
             kendoButton
             fillMode="flat"
             #overflowButton
@@ -1143,7 +1155,6 @@ export class ToolBarComponent {
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
             [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
-            *ngIf="showMenu"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             class="k-toolbar-overflow-button"
@@ -1151,9 +1162,11 @@ export class ToolBarComponent {
             (click)="showPopup()"
         >
         </button>
-        <ng-container *ngIf="showScrollButtons && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'end')">
+        }
+        @if (showScrollButtons && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'end')) {
             <div class="k-toolbar-separator k-toolbar-button-separator k-separator" #scrollSeparator></div>
-            <span *ngIf="hasScrollButtons.position === 'split'" #nextScrollButton
+            @if (hasScrollButtons.position === 'split') {
+                <span #nextScrollButton
                 kendoToolbarScrollableButton
                 [prev]="false"
                 [overflow]="normalizedOverflow"
@@ -1166,7 +1179,9 @@ export class ToolBarComponent {
                 }"
                 (onClick)="scrollTools($event)">
             </span>
-            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'end'" #endButtonGroup>
+            }
+            @if (hasScrollButtons.position === 'end') {
+                <div class="k-button-group k-button-group-solid" #endButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
@@ -1194,7 +1209,8 @@ export class ToolBarComponent {
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
-        </ng-container>
+            }
+        }
         <ng-template #popupTemplate>
             <div
                 class="k-menu-group k-menu-group-md"
@@ -1202,21 +1218,22 @@ export class ToolBarComponent {
                 [id]="popupId"
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of overflowTools; let index = index">
-                    <ng-template
-                        *ngIf="tool.popupTemplate"
-                        kendoToolbarRenderer
-                        [tool]="tool"
-                        location="overflow"
-                        [resizable]="resizable"
-                        (rendererClick)="onRendererClick($event)"
-                        [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
+                @for (tool of overflowTools; track tool; let index = $index) {
+                    @if (tool.popupTemplate) {
+                        <ng-template
+                            kendoToolbarRenderer
+                            [tool]="tool"
+                            location="overflow"
+                            [resizable]="resizable"
+                            (rendererClick)="onRendererClick($event)"
+                            [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
+                    }
                     <ng-template #popupWrapper>
                         <div role="menuitem" tabindex="-1" class="k-item k-menu-item">
                             <ng-container [ngTemplateOutlet]="tool.popupTemplate"></ng-container>
                         </div>
                     </ng-template>
-                </ng-container>
+                }
             </div>
         </ng-template>
         <ng-template #popupSectionTemplate>
@@ -1226,22 +1243,26 @@ export class ToolBarComponent {
                 [id]="popupId"
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of overflowTools; let index = index"
-                    kendoToolbarRenderer
-                    [tool]="tool"
-                    location="section"
-                    [resizable]="resizable"
-                    (rendererClick)="onRendererClick($event)"
-                    [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
-                    <ng-template #wrapper>
-                        <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
-                    </ng-template>
-                </ng-container>
+                @for (tool of overflowTools; track tool; let index = $index) {
+                    <ng-container
+                        kendoToolbarRenderer
+                        [tool]="tool"
+                        location="section"
+                        [resizable]="resizable"
+                        (rendererClick)="onRendererClick($event)"
+                        [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
+                        <ng-template #wrapper>
+                            <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
+                        </ng-template>
+                    </ng-container>
+                }
             </span>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ToolbarScrollableButtonComponent, selector: "[kendoToolbarScrollableButton]", inputs: ["prev", "overflow"], outputs: ["onClick"] }] });
+        @if (overflowEnabled) {
+            <kendo-resize-sensor #resizeSensor></kendo-resize-sensor>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ToolbarScrollableButtonComponent, selector: "[kendoToolbarScrollableButton]", inputs: ["prev", "overflow"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -1271,21 +1292,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             nextToolButton="Scroll right"
         >
         </ng-container>
-        <ng-container *ngIf="showScrollButtons && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'start')">
-            <span *ngIf="hasScrollButtons.position === 'split'" #prevScrollButton
-                kendoToolbarScrollableButton
-                [prev]="true"
-                [overflow]="normalizedOverflow"
-                [title]="getScrollButtonTitle('prev')"
-                class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
-                [ngClass]="{
-                    'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
-                    'k-button-lg': size === 'large'
-                }"
-                (onClick)="scrollTools($event)">
-            </span>
-            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'start'" #startButtonGroup>
+        @if (showScrollButtons && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'start')) {
+            @if (hasScrollButtons.position === 'split') {
+                <span #prevScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="true"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('prev')"
+                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+            }
+            @if (hasScrollButtons.position === 'start') {
+                <div class="k-button-group k-button-group-solid" #startButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
@@ -1313,10 +1337,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
+            }
             <div class="k-toolbar-separator k-toolbar-button-separator k-separator" #scrollSeparator></div>
-        </ng-container>
-        <div class="k-toolbar-items k-toolbar-items-scroll" tabindex="-1" *ngIf="isScrollMode; else noScroll" #scrollContainer>
-            <ng-container *ngFor="let tool of allTools; let index = index"
+        }
+        @if (isScrollMode) {
+            <div class="k-toolbar-items k-toolbar-items-scroll" tabindex="-1" #scrollContainer>
+                @for (tool of allTools; track tool; let index = $index) {
+                    <ng-container
                 kendoToolbarRenderer
                 [tool]="tool"
                 location="toolbar"
@@ -1329,9 +1356,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     </div>
                 </ng-template>
             </ng-container>
+            }
         </div>
-        <ng-template #noScroll>
-            <ng-container *ngFor="let tool of allTools; let index = index"
+        } @else {
+            @for (tool of allTools; track tool; let index = $index) {
+                <ng-container
                 kendoToolbarRenderer
                 [tool]="tool"
                 location="toolbar"
@@ -1344,9 +1373,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     </div>
                 </ng-template>
             </ng-container>
-        </ng-template>
-        <div class="k-toolbar-separator k-toolbar-button-separator k-separator" *ngIf="showOverflowSeparator"></div>
-        <button
+            }
+        }
+        @if (showOverflowSeparator) {
+            <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+        }
+        @if (showMenu) {
+            <button
             kendoButton
             fillMode="flat"
             #overflowButton
@@ -1359,7 +1392,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
             [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
-            *ngIf="showMenu"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             class="k-toolbar-overflow-button"
@@ -1367,9 +1399,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             (click)="showPopup()"
         >
         </button>
-        <ng-container *ngIf="showScrollButtons && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'end')">
+        }
+        @if (showScrollButtons && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'end')) {
             <div class="k-toolbar-separator k-toolbar-button-separator k-separator" #scrollSeparator></div>
-            <span *ngIf="hasScrollButtons.position === 'split'" #nextScrollButton
+            @if (hasScrollButtons.position === 'split') {
+                <span #nextScrollButton
                 kendoToolbarScrollableButton
                 [prev]="false"
                 [overflow]="normalizedOverflow"
@@ -1382,7 +1416,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }"
                 (onClick)="scrollTools($event)">
             </span>
-            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'end'" #endButtonGroup>
+            }
+            @if (hasScrollButtons.position === 'end') {
+                <div class="k-button-group k-button-group-solid" #endButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
@@ -1410,7 +1446,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
-        </ng-container>
+            }
+        }
         <ng-template #popupTemplate>
             <div
                 class="k-menu-group k-menu-group-md"
@@ -1418,21 +1455,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [id]="popupId"
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of overflowTools; let index = index">
-                    <ng-template
-                        *ngIf="tool.popupTemplate"
-                        kendoToolbarRenderer
-                        [tool]="tool"
-                        location="overflow"
-                        [resizable]="resizable"
-                        (rendererClick)="onRendererClick($event)"
-                        [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
+                @for (tool of overflowTools; track tool; let index = $index) {
+                    @if (tool.popupTemplate) {
+                        <ng-template
+                            kendoToolbarRenderer
+                            [tool]="tool"
+                            location="overflow"
+                            [resizable]="resizable"
+                            (rendererClick)="onRendererClick($event)"
+                            [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
+                    }
                     <ng-template #popupWrapper>
                         <div role="menuitem" tabindex="-1" class="k-item k-menu-item">
                             <ng-container [ngTemplateOutlet]="tool.popupTemplate"></ng-container>
                         </div>
                     </ng-template>
-                </ng-container>
+                }
             </div>
         </ng-template>
         <ng-template #popupSectionTemplate>
@@ -1442,24 +1480,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [id]="popupId"
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of overflowTools; let index = index"
-                    kendoToolbarRenderer
-                    [tool]="tool"
-                    location="section"
-                    [resizable]="resizable"
-                    (rendererClick)="onRendererClick($event)"
-                    [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
-                    <ng-template #wrapper>
-                        <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
-                    </ng-template>
-                </ng-container>
+                @for (tool of overflowTools; track tool; let index = $index) {
+                    <ng-container
+                        kendoToolbarRenderer
+                        [tool]="tool"
+                        location="section"
+                        [resizable]="resizable"
+                        (rendererClick)="onRendererClick($event)"
+                        [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
+                        <ng-template #wrapper>
+                            <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
+                        </ng-template>
+                    </ng-container>
+                }
             </span>
         </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
+        @if (overflowEnabled) {
+            <kendo-resize-sensor #resizeSensor></kendo-resize-sensor>
+        }
     `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ToolbarScrollableButtonComponent]
+                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, ToolBarRendererComponent, ButtonComponent, NgClass, ResizeSensorComponent, ToolbarScrollableButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ToolbarToolsService }, { type: i6.ScrollService }], propDecorators: { overflow: [{
                 type: Input