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

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

@@ -14,7 +14,7 @@ import { take, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
 import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent } from '@progress/kendo-angular-buttons';
-import { NgTemplateOutlet, NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
+import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import { BadgeComponent, BadgeContainerComponent } from '@progress/kendo-angular-indicators';
 
@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763645517,
-    version: '21.1.1-develop.1',
+    publishDate: 1763998158,
+    version: '21.2.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2110,7 +2110,7 @@ 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: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }, { token: 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,
@@ -2132,21 +2132,24 @@ 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"
@@ -2174,10 +2177,13 @@ 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"
@@ -2190,9 +2196,11 @@ 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"
@@ -2205,9 +2213,13 @@ 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
@@ -2220,7 +2232,6 @@ 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"
@@ -2228,9 +2239,11 @@ 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"
@@ -2243,7 +2256,9 @@ 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"
@@ -2271,7 +2286,8 @@ class ToolBarComponent {
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
-        </ng-container>
+            }
+        }
         <ng-template #popupTemplate>
             <div
                 class="k-menu-group k-menu-group-md"
@@ -2279,21 +2295,22 @@ 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>
@@ -2303,22 +2320,26 @@ 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,
@@ -2348,21 +2369,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"
@@ -2390,10 +2414,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"
@@ -2406,9 +2433,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"
@@ -2421,9 +2450,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
@@ -2436,7 +2469,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"
@@ -2444,9 +2476,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"
@@ -2459,7 +2493,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"
@@ -2487,7 +2523,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"
@@ -2495,21 +2532,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>
@@ -2519,24 +2557,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: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }, { type: ScrollService }], propDecorators: { overflow: [{
                 type: Input
@@ -2922,39 +2964,9 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", rounded: "rounded", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-badge-container *ngIf="hasBadgeContainer">
-                <button
-                    #toolbarButton
-                    [class.k-toolbar-button]="!toggleable"
-                    [class.k-toolbar-toggle-button]="toggleable"
-                    [tabindex]="tabIndex"
-                    type="button"
-                    kendoButton
-                    [size]="size"
-                    [ngStyle]="style"
-                    [ngClass]="className"
-                    [attr.title]="title"
-                    [disabled]="disabled"
-                    [toggleable]="toggleable"
-                    [fillMode]="fillMode"
-                    [themeColor]="fillMode ? themeColor : null"
-                    [rounded]="rounded"
-                    [selected]="selected"
-                    [icon]="toolbarOptions.icon"
-                    [iconClass]="toolbarOptions.iconClass"
-                    [svgIcon]="toolbarOptions.svgIcon"
-                    [imageUrl]="toolbarOptions.imageUrl"
-                    (click)="click.emit($event)"
-                    (pointerdown)="pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event)"
-                    (blur)="onBlur()"
-                >
-                    {{ toolbarOptions.text }}
-                </button>
-                <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
-            </kendo-badge-container>
-
-            <button *ngIf="!hasBadgeContainer"
+          @if (hasBadgeContainer) {
+            <kendo-badge-container>
+              <button
                 #toolbarButton
                 [class.k-toolbar-button]="!toggleable"
                 [class.k-toolbar-toggle-button]="toggleable"
@@ -2979,73 +2991,82 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 (pointerdown)="pointerdown.emit($event)"
                 (selectedChange)="selectedChangeHandler($event)"
                 (blur)="onBlur()"
-            >
+                >
                 {{ toolbarOptions.text }}
+              </button>
+              @if (showBadge) {
+                <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
+              }
+            </kendo-badge-container>
+          }
+
+          @if (!hasBadgeContainer) {
+            <button
+              #toolbarButton
+              [class.k-toolbar-button]="!toggleable"
+              [class.k-toolbar-toggle-button]="toggleable"
+              [tabindex]="tabIndex"
+              type="button"
+              kendoButton
+              [size]="size"
+              [ngStyle]="style"
+              [ngClass]="className"
+              [attr.title]="title"
+              [disabled]="disabled"
+              [toggleable]="toggleable"
+              [fillMode]="fillMode"
+              [themeColor]="fillMode ? themeColor : null"
+              [rounded]="rounded"
+              [selected]="selected"
+              [icon]="toolbarOptions.icon"
+              [iconClass]="toolbarOptions.iconClass"
+              [svgIcon]="toolbarOptions.svgIcon"
+              [imageUrl]="toolbarOptions.imageUrl"
+              (click)="click.emit($event)"
+              (pointerdown)="pointerdown.emit($event)"
+              (selectedChange)="selectedChangeHandler($event)"
+              (blur)="onBlur()"
+              >
+              {{ toolbarOptions.text }}
             </button>
+          }
         </ng-template>
         <ng-template #popupTemplate>
-            <div
-                #overflowButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [ngClass]="className"
-                [ngStyle]="style"
-                (click)="handleClick($event)">
-                <span
-                    class="k-link k-menu-link"
-                    [class.k-selected]="selected"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    ></kendo-icon-wrapper>
-                    @if (overflowOptions.imageUrl) {
-                        <span class="k-icon k-button-icon">
-                            <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
-                        </span>
-                    }
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
+          <div
+            #overflowButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [ngClass]="className"
+            [ngStyle]="style"
+            (click)="handleClick($event)">
+            <span
+              class="k-link k-menu-link"
+              [class.k-selected]="selected"
+              >
+              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
+                <kendo-icon-wrapper
+                  [name]="overflowOptions.icon"
+                  [customFontClass]="overflowOptions.iconClass"
+                  [svgIcon]="overflowOptions.svgIcon"
+                ></kendo-icon-wrapper>
+              }
+              @if (overflowOptions.imageUrl) {
+                <span class="k-icon k-button-icon">
+                  <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
                 </span>
-            </div>
+              }
+              @if (overflowOptions.text) {
+                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-badge-container *ngIf="hasBadgeContainer">
-                <button
-                    #sectionButton
-                    [class.k-toolbar-button]="!toggleable"
-                    [class.k-toolbar-toggle-button]="toggleable"
-                    [tabindex]="tabIndex"
-                    type="button"
-                    kendoButton
-                    [size]="size"
-                    [ngStyle]="style"
-                    [ngClass]="className"
-                    [attr.title]="title"
-                    [disabled]="disabled"
-                    [toggleable]="toggleable"
-                    [fillMode]="fillMode"
-                    [themeColor]="fillMode ? themeColor : null"
-                    [rounded]="rounded"
-                    [selected]="selected"
-                    [icon]="toolbarOptions.icon"
-                    [iconClass]="toolbarOptions.iconClass"
-                    [svgIcon]="toolbarOptions.svgIcon"
-                    [imageUrl]="toolbarOptions.imageUrl"
-                    (click)="click.emit($event)"
-                    (pointerdown)="pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event)"
-                    (blur)="onBlur()"
-                >
-                    {{ toolbarOptions.text }}
-                </button>
-                <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
-            </kendo-badge-container>
-            <button
-                *ngIf="!hasBadgeContainer"
+          @if (hasBadgeContainer) {
+            <kendo-badge-container>
+              <button
                 #sectionButton
                 [class.k-toolbar-button]="!toggleable"
                 [class.k-toolbar-toggle-button]="toggleable"
@@ -3070,11 +3091,46 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 (pointerdown)="pointerdown.emit($event)"
                 (selectedChange)="selectedChangeHandler($event)"
                 (blur)="onBlur()"
-            >
+                >
                 {{ toolbarOptions.text }}
+              </button>
+              @if (showBadge) {
+                <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
+              }
+            </kendo-badge-container>
+          }
+          @if (!hasBadgeContainer) {
+            <button
+              #sectionButton
+              [class.k-toolbar-button]="!toggleable"
+              [class.k-toolbar-toggle-button]="toggleable"
+              [tabindex]="tabIndex"
+              type="button"
+              kendoButton
+              [size]="size"
+              [ngStyle]="style"
+              [ngClass]="className"
+              [attr.title]="title"
+              [disabled]="disabled"
+              [toggleable]="toggleable"
+              [fillMode]="fillMode"
+              [themeColor]="fillMode ? themeColor : null"
+              [rounded]="rounded"
+              [selected]="selected"
+              [icon]="toolbarOptions.icon"
+              [iconClass]="toolbarOptions.iconClass"
+              [svgIcon]="toolbarOptions.svgIcon"
+              [imageUrl]="toolbarOptions.imageUrl"
+              (click)="click.emit($event)"
+              (pointerdown)="pointerdown.emit($event)"
+              (selectedChange)="selectedChangeHandler($event)"
+              (blur)="onBlur()"
+              >
+              {{ toolbarOptions.text }}
             </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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
+        `, 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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
@@ -3084,39 +3140,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-button',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-badge-container *ngIf="hasBadgeContainer">
-                <button
-                    #toolbarButton
-                    [class.k-toolbar-button]="!toggleable"
-                    [class.k-toolbar-toggle-button]="toggleable"
-                    [tabindex]="tabIndex"
-                    type="button"
-                    kendoButton
-                    [size]="size"
-                    [ngStyle]="style"
-                    [ngClass]="className"
-                    [attr.title]="title"
-                    [disabled]="disabled"
-                    [toggleable]="toggleable"
-                    [fillMode]="fillMode"
-                    [themeColor]="fillMode ? themeColor : null"
-                    [rounded]="rounded"
-                    [selected]="selected"
-                    [icon]="toolbarOptions.icon"
-                    [iconClass]="toolbarOptions.iconClass"
-                    [svgIcon]="toolbarOptions.svgIcon"
-                    [imageUrl]="toolbarOptions.imageUrl"
-                    (click)="click.emit($event)"
-                    (pointerdown)="pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event)"
-                    (blur)="onBlur()"
-                >
-                    {{ toolbarOptions.text }}
-                </button>
-                <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
-            </kendo-badge-container>
-
-            <button *ngIf="!hasBadgeContainer"
+          @if (hasBadgeContainer) {
+            <kendo-badge-container>
+              <button
                 #toolbarButton
                 [class.k-toolbar-button]="!toggleable"
                 [class.k-toolbar-toggle-button]="toggleable"
@@ -3141,73 +3167,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 (pointerdown)="pointerdown.emit($event)"
                 (selectedChange)="selectedChangeHandler($event)"
                 (blur)="onBlur()"
-            >
+                >
                 {{ toolbarOptions.text }}
+              </button>
+              @if (showBadge) {
+                <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
+              }
+            </kendo-badge-container>
+          }
+
+          @if (!hasBadgeContainer) {
+            <button
+              #toolbarButton
+              [class.k-toolbar-button]="!toggleable"
+              [class.k-toolbar-toggle-button]="toggleable"
+              [tabindex]="tabIndex"
+              type="button"
+              kendoButton
+              [size]="size"
+              [ngStyle]="style"
+              [ngClass]="className"
+              [attr.title]="title"
+              [disabled]="disabled"
+              [toggleable]="toggleable"
+              [fillMode]="fillMode"
+              [themeColor]="fillMode ? themeColor : null"
+              [rounded]="rounded"
+              [selected]="selected"
+              [icon]="toolbarOptions.icon"
+              [iconClass]="toolbarOptions.iconClass"
+              [svgIcon]="toolbarOptions.svgIcon"
+              [imageUrl]="toolbarOptions.imageUrl"
+              (click)="click.emit($event)"
+              (pointerdown)="pointerdown.emit($event)"
+              (selectedChange)="selectedChangeHandler($event)"
+              (blur)="onBlur()"
+              >
+              {{ toolbarOptions.text }}
             </button>
+          }
         </ng-template>
         <ng-template #popupTemplate>
-            <div
-                #overflowButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [ngClass]="className"
-                [ngStyle]="style"
-                (click)="handleClick($event)">
-                <span
-                    class="k-link k-menu-link"
-                    [class.k-selected]="selected"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    ></kendo-icon-wrapper>
-                    @if (overflowOptions.imageUrl) {
-                        <span class="k-icon k-button-icon">
-                            <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
-                        </span>
-                    }
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
+          <div
+            #overflowButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [ngClass]="className"
+            [ngStyle]="style"
+            (click)="handleClick($event)">
+            <span
+              class="k-link k-menu-link"
+              [class.k-selected]="selected"
+              >
+              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
+                <kendo-icon-wrapper
+                  [name]="overflowOptions.icon"
+                  [customFontClass]="overflowOptions.iconClass"
+                  [svgIcon]="overflowOptions.svgIcon"
+                ></kendo-icon-wrapper>
+              }
+              @if (overflowOptions.imageUrl) {
+                <span class="k-icon k-button-icon">
+                  <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
                 </span>
-            </div>
+              }
+              @if (overflowOptions.text) {
+                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
+              }
+            </span>
+          </div>
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-badge-container *ngIf="hasBadgeContainer">
-                <button
-                    #sectionButton
-                    [class.k-toolbar-button]="!toggleable"
-                    [class.k-toolbar-toggle-button]="toggleable"
-                    [tabindex]="tabIndex"
-                    type="button"
-                    kendoButton
-                    [size]="size"
-                    [ngStyle]="style"
-                    [ngClass]="className"
-                    [attr.title]="title"
-                    [disabled]="disabled"
-                    [toggleable]="toggleable"
-                    [fillMode]="fillMode"
-                    [themeColor]="fillMode ? themeColor : null"
-                    [rounded]="rounded"
-                    [selected]="selected"
-                    [icon]="toolbarOptions.icon"
-                    [iconClass]="toolbarOptions.iconClass"
-                    [svgIcon]="toolbarOptions.svgIcon"
-                    [imageUrl]="toolbarOptions.imageUrl"
-                    (click)="click.emit($event)"
-                    (pointerdown)="pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event)"
-                    (blur)="onBlur()"
-                >
-                    {{ toolbarOptions.text }}
-                </button>
-                <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
-            </kendo-badge-container>
-            <button
-                *ngIf="!hasBadgeContainer"
+          @if (hasBadgeContainer) {
+            <kendo-badge-container>
+              <button
                 #sectionButton
                 [class.k-toolbar-button]="!toggleable"
                 [class.k-toolbar-toggle-button]="toggleable"
@@ -3232,13 +3267,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 (pointerdown)="pointerdown.emit($event)"
                 (selectedChange)="selectedChangeHandler($event)"
                 (blur)="onBlur()"
-            >
+                >
                 {{ toolbarOptions.text }}
+              </button>
+              @if (showBadge) {
+                <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
+              }
+            </kendo-badge-container>
+          }
+          @if (!hasBadgeContainer) {
+            <button
+              #sectionButton
+              [class.k-toolbar-button]="!toggleable"
+              [class.k-toolbar-toggle-button]="toggleable"
+              [tabindex]="tabIndex"
+              type="button"
+              kendoButton
+              [size]="size"
+              [ngStyle]="style"
+              [ngClass]="className"
+              [attr.title]="title"
+              [disabled]="disabled"
+              [toggleable]="toggleable"
+              [fillMode]="fillMode"
+              [themeColor]="fillMode ? themeColor : null"
+              [rounded]="rounded"
+              [selected]="selected"
+              [icon]="toolbarOptions.icon"
+              [iconClass]="toolbarOptions.iconClass"
+              [svgIcon]="toolbarOptions.svgIcon"
+              [imageUrl]="toolbarOptions.imageUrl"
+              (click)="click.emit($event)"
+              (pointerdown)="pointerdown.emit($event)"
+              (selectedChange)="selectedChangeHandler($event)"
+              (blur)="onBlur()"
+              >
+              {{ toolbarOptions.text }}
             </button>
+          }
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
+                    imports: [ButtonComponent, NgStyle, NgClass, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: ToolBarComponent }], propDecorators: { showText: [{
                 type: Input
@@ -3478,107 +3548,113 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-{{fillMode}}"
-                #toolbarButtonGroup
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-                (navigate)="onNavigate($event)"
-                (focus)="onFocus()"
+          <kendo-buttongroup
+            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            #toolbarButtonGroup
+            [tabIndex]="-1"
+            [selection]="selection"
+            [disabled]="disabled"
+            [width]="width"
+            (navigate)="onNavigate($event)"
+            (focus)="onFocus()"
             >
-                <button
-                    kendoButton
-                    type="button"
-                    *ngFor="let button of buttonComponents"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [size]="size"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [attr.aria-pressed]="button.selected ? true : false"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.toolbarOptions.icon"
-                    [iconClass]="button.toolbarOptions.iconClass"
-                    [svgIcon]="button.toolbarOptions.svgIcon"
-                    [imageUrl]="button.toolbarOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (pointerdown)="button.pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
+            @for (button of buttonComponents; track button) {
+              <button
+                kendoButton
+                type="button"
+                [ngStyle]="button.style"
+                [ngClass]="button.className"
+                [attr.title]="button.title"
+                [disabled]="button.disabled"
+                [size]="size"
+                [togglable]="button.togglable"
+                [selected]="button.selected"
+                [attr.aria-pressed]="button.selected ? true : false"
+                [fillMode]="button.fillMode"
+                [themeColor]="button.fillMode ? button.themeColor : null"
+                [icon]="button.toolbarOptions.icon"
+                [iconClass]="button.toolbarOptions.iconClass"
+                [svgIcon]="button.toolbarOptions.svgIcon"
+                [imageUrl]="button.toolbarOptions.imageUrl"
+                (click)="button.click.emit($event); onButtonClick($event)"
+                (pointerdown)="button.pointerdown.emit($event)"
+                (selectedChange)="selectedChangeHandler($event, button)"
                 >
-                    {{ button.toolbarOptions.text }}
-                </button>
-            </kendo-buttongroup>
+                {{ button.toolbarOptions.text }}
+              </button>
+            }
+          </kendo-buttongroup>
         </ng-template>
         <ng-template #popupTemplate>
-                <div
-                    *ngFor="let button of buttonComponents" 
-                    #listItem
-                    tabindex="-1"
-                    role="menuitem"
-                    class="k-item k-menu-item"
-                    [class.k-disabled]="disabled || button.disabled"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    (click)="handleClick($event, button)">
-                    <span
-                        class="k-link k-menu-link"
-                        [class.k-selected]="button.selected"
-                    >
-                        <kendo-icon-wrapper
-                            *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
-                            [name]="button.overflowOptions.icon"
-                            [customFontClass]="button.overflowOptions.iconClass"
-                            [svgIcon]="button.overflowOptions.svgIcon"
-                        ></kendo-icon-wrapper>
-                        <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
-                    </span>
-                </div>
+          @for (button of buttonComponents; track button) {
+            <div
+              #listItem
+              tabindex="-1"
+              role="menuitem"
+              class="k-item k-menu-item"
+              [class.k-disabled]="disabled || button.disabled"
+              [ngStyle]="button.style"
+              [ngClass]="button.className"
+              (click)="handleClick($event, button)">
+              <span
+                class="k-link k-menu-link"
+                [class.k-selected]="button.selected"
+                >
+                @if (button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon) {
+                  <kendo-icon-wrapper
+                    [name]="button.overflowOptions.icon"
+                    [customFontClass]="button.overflowOptions.iconClass"
+                    [svgIcon]="button.overflowOptions.svgIcon"
+                  ></kendo-icon-wrapper>
+                }
+                @if (button.overflowOptions.text) {
+                  <span class="k-menu-link-text">{{button.overflowOptions.text}}</span>
+                }
+              </span>
+            </div>
+          }
         </ng-template>
         <ng-template #sectionTemplate>
-        <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-{{fillMode}}"
-                #sectionButtonGroup
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-                (navigate)="onNavigate($event)"
-                (focus)="onFocus()"
+          <kendo-buttongroup
+            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            #sectionButtonGroup
+            [tabIndex]="-1"
+            [selection]="selection"
+            [disabled]="disabled"
+            [width]="width"
+            (navigate)="onNavigate($event)"
+            (focus)="onFocus()"
             >
-                <button
-                    kendoButton
-                    type="button"
-                    *ngFor="let button of buttonComponents"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [size]="size"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [attr.aria-pressed]="button.selected ? true : false"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.toolbarOptions.icon"
-                    [iconClass]="button.toolbarOptions.iconClass"
-                    [svgIcon]="button.toolbarOptions.svgIcon"
-                    [imageUrl]="button.toolbarOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (pointerdown)="button.pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
+            @for (button of buttonComponents; track button) {
+              <button
+                kendoButton
+                type="button"
+                [ngStyle]="button.style"
+                [ngClass]="button.className"
+                [attr.title]="button.title"
+                [disabled]="button.disabled"
+                [size]="size"
+                [togglable]="button.togglable"
+                [selected]="button.selected"
+                [attr.aria-pressed]="button.selected ? true : false"
+                [fillMode]="button.fillMode"
+                [themeColor]="button.fillMode ? button.themeColor : null"
+                [icon]="button.toolbarOptions.icon"
+                [iconClass]="button.toolbarOptions.iconClass"
+                [svgIcon]="button.toolbarOptions.svgIcon"
+                [imageUrl]="button.toolbarOptions.imageUrl"
+                (click)="button.click.emit($event); onButtonClick($event)"
+                (pointerdown)="button.pointerdown.emit($event)"
+                (selectedChange)="selectedChangeHandler($event, button)"
                 >
-                    {{ button.toolbarOptions.text }}
-                </button>
-            </kendo-buttongroup>
+                {{ button.toolbarOptions.text }}
+              </button>
+            }
+          </kendo-buttongroup>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
@@ -3588,107 +3664,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-buttongroup',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-{{fillMode}}"
-                #toolbarButtonGroup
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-                (navigate)="onNavigate($event)"
-                (focus)="onFocus()"
+          <kendo-buttongroup
+            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            #toolbarButtonGroup
+            [tabIndex]="-1"
+            [selection]="selection"
+            [disabled]="disabled"
+            [width]="width"
+            (navigate)="onNavigate($event)"
+            (focus)="onFocus()"
             >
-                <button
-                    kendoButton
-                    type="button"
-                    *ngFor="let button of buttonComponents"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [size]="size"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [attr.aria-pressed]="button.selected ? true : false"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.toolbarOptions.icon"
-                    [iconClass]="button.toolbarOptions.iconClass"
-                    [svgIcon]="button.toolbarOptions.svgIcon"
-                    [imageUrl]="button.toolbarOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (pointerdown)="button.pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
+            @for (button of buttonComponents; track button) {
+              <button
+                kendoButton
+                type="button"
+                [ngStyle]="button.style"
+                [ngClass]="button.className"
+                [attr.title]="button.title"
+                [disabled]="button.disabled"
+                [size]="size"
+                [togglable]="button.togglable"
+                [selected]="button.selected"
+                [attr.aria-pressed]="button.selected ? true : false"
+                [fillMode]="button.fillMode"
+                [themeColor]="button.fillMode ? button.themeColor : null"
+                [icon]="button.toolbarOptions.icon"
+                [iconClass]="button.toolbarOptions.iconClass"
+                [svgIcon]="button.toolbarOptions.svgIcon"
+                [imageUrl]="button.toolbarOptions.imageUrl"
+                (click)="button.click.emit($event); onButtonClick($event)"
+                (pointerdown)="button.pointerdown.emit($event)"
+                (selectedChange)="selectedChangeHandler($event, button)"
                 >
-                    {{ button.toolbarOptions.text }}
-                </button>
-            </kendo-buttongroup>
+                {{ button.toolbarOptions.text }}
+              </button>
+            }
+          </kendo-buttongroup>
         </ng-template>
         <ng-template #popupTemplate>
-                <div
-                    *ngFor="let button of buttonComponents" 
-                    #listItem
-                    tabindex="-1"
-                    role="menuitem"
-                    class="k-item k-menu-item"
-                    [class.k-disabled]="disabled || button.disabled"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    (click)="handleClick($event, button)">
-                    <span
-                        class="k-link k-menu-link"
-                        [class.k-selected]="button.selected"
-                    >
-                        <kendo-icon-wrapper
-                            *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
-                            [name]="button.overflowOptions.icon"
-                            [customFontClass]="button.overflowOptions.iconClass"
-                            [svgIcon]="button.overflowOptions.svgIcon"
-                        ></kendo-icon-wrapper>
-                        <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
-                    </span>
-                </div>
+          @for (button of buttonComponents; track button) {
+            <div
+              #listItem
+              tabindex="-1"
+              role="menuitem"
+              class="k-item k-menu-item"
+              [class.k-disabled]="disabled || button.disabled"
+              [ngStyle]="button.style"
+              [ngClass]="button.className"
+              (click)="handleClick($event, button)">
+              <span
+                class="k-link k-menu-link"
+                [class.k-selected]="button.selected"
+                >
+                @if (button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon) {
+                  <kendo-icon-wrapper
+                    [name]="button.overflowOptions.icon"
+                    [customFontClass]="button.overflowOptions.iconClass"
+                    [svgIcon]="button.overflowOptions.svgIcon"
+                  ></kendo-icon-wrapper>
+                }
+                @if (button.overflowOptions.text) {
+                  <span class="k-menu-link-text">{{button.overflowOptions.text}}</span>
+                }
+              </span>
+            </div>
+          }
         </ng-template>
         <ng-template #sectionTemplate>
-        <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-{{fillMode}}"
-                #sectionButtonGroup
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-                (navigate)="onNavigate($event)"
-                (focus)="onFocus()"
+          <kendo-buttongroup
+            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            #sectionButtonGroup
+            [tabIndex]="-1"
+            [selection]="selection"
+            [disabled]="disabled"
+            [width]="width"
+            (navigate)="onNavigate($event)"
+            (focus)="onFocus()"
             >
-                <button
-                    kendoButton
-                    type="button"
-                    *ngFor="let button of buttonComponents"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [size]="size"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [attr.aria-pressed]="button.selected ? true : false"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.toolbarOptions.icon"
-                    [iconClass]="button.toolbarOptions.iconClass"
-                    [svgIcon]="button.toolbarOptions.svgIcon"
-                    [imageUrl]="button.toolbarOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (pointerdown)="button.pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
+            @for (button of buttonComponents; track button) {
+              <button
+                kendoButton
+                type="button"
+                [ngStyle]="button.style"
+                [ngClass]="button.className"
+                [attr.title]="button.title"
+                [disabled]="button.disabled"
+                [size]="size"
+                [togglable]="button.togglable"
+                [selected]="button.selected"
+                [attr.aria-pressed]="button.selected ? true : false"
+                [fillMode]="button.fillMode"
+                [themeColor]="button.fillMode ? button.themeColor : null"
+                [icon]="button.toolbarOptions.icon"
+                [iconClass]="button.toolbarOptions.iconClass"
+                [svgIcon]="button.toolbarOptions.svgIcon"
+                [imageUrl]="button.toolbarOptions.imageUrl"
+                (click)="button.click.emit($event); onButtonClick($event)"
+                (pointerdown)="button.pointerdown.emit($event)"
+                (selectedChange)="selectedChangeHandler($event, button)"
                 >
-                    {{ button.toolbarOptions.text }}
-                </button>
-            </kendo-buttongroup>
+                {{ button.toolbarOptions.text }}
+              </button>
+            }
+          </kendo-buttongroup>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [ButtonGroupComponent, NgFor, ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
+                    imports: [ButtonGroupComponent, ButtonComponent, NgStyle, NgClass, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: ToolBarComponent }], propDecorators: { disabled: [{
                 type: Input
@@ -4033,98 +4115,104 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "sectionDropDownButton", first: true, predicate: ["sectionDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "sectionDropDownButton", first: true, predicate: ["sectionDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton #toolbarDropDownButton
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [arrowIcon]="arrowIcon"
-                [buttonClass]="buttonClass"
-                [disabled]="disabled"
-                [size]="size"
-                [tabIndex]="-1"
-                [data]="data"
-                [buttonAttributes]="{'title': title}"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
+          <kendo-dropdownbutton #toolbarDropDownButton
+            [icon]="toolbarOptions.icon"
+            [iconClass]="toolbarOptions.iconClass"
+            [svgIcon]="toolbarOptions.svgIcon"
+            [imageUrl]="toolbarOptions.imageUrl"
+            [arrowIcon]="arrowIcon"
+            [buttonClass]="buttonClass"
+            [disabled]="disabled"
+            [size]="size"
+            [tabIndex]="-1"
+            [data]="data"
+            [buttonAttributes]="{'title': title}"
+            [textField]="textField"
+            [popupSettings]="popupSettings"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (open)="open.emit($event)"
+            (close)="close.emit($event)"
+            (itemClick)="itemClick.emit($event)"
             >
-                {{ toolbarOptions.text }}
-            </kendo-dropdownbutton>
+            {{ toolbarOptions.text }}
+          </kendo-dropdownbutton>
         </ng-template>
-
+        
         <ng-template #popupTemplate>
-            <div
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item k-disabled"
-                [ngClass]="buttonClass">
-                <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
+          <div
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item k-disabled"
+            [ngClass]="buttonClass">
+            <span
+              [ngClass]="{'k-link': true, 'k-menu-link': true}"
+              >
+              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
+                <kendo-icon-wrapper
+                  [name]="overflowOptions.icon"
+                  [customFontClass]="overflowOptions.iconClass"
+                  [svgIcon]="overflowOptions.svgIcon"
+                ></kendo-icon-wrapper>
+              }
+              @if (overflowOptions.text) {
+                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
+              }
+            </span>
+          </div>
+          @for (item of data; track item; let i = $index) {
+            <div #listItem
+              tabindex="-1"
+              role="menuitem"
+              class="k-item k-menu-item"
+              [class.k-disabled]="disabled || item.disabled"
+              (click)="handleClick($event, item, i)">
+              <span
+                class="k-link k-menu-link"
+                [ngClass]="item.cssClass"
                 >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
+                @if (item.icon || item.iconClass || item.svgIcon) {
+                  <kendo-icon-wrapper
+                    [name]="item.icon"
+                    [customFontClass]="item.iconClass"
+                    [svgIcon]="item.svgIcon"
+                  ></kendo-icon-wrapper>
+                }
+                @if (getText(item)) {
+                  <span class="k-menu-link-text">{{ getText(item) }}</span>
+                }
+              </span>
             </div>
-            <ng-container *ngFor="let item of data; let i = index">
-                <div #listItem
-                    tabindex="-1"
-                    role="menuitem"
-                    class="k-item k-menu-item"
-                    [class.k-disabled]="disabled || item.disabled"
-                    (click)="handleClick($event, item, i)">
-                    <span
-                        class="k-link k-menu-link"
-                        [ngClass]="item.cssClass"
-                    >
-                        <kendo-icon-wrapper
-                            *ngIf="item.icon || item.iconClass || item.svgIcon"
-                            [name]="item.icon"
-                            [customFontClass]="item.iconClass"
-                            [svgIcon]="item.svgIcon"
-                        ></kendo-icon-wrapper>
-                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                    </span>
-                </div>
-            </ng-container>
+          }
         </ng-template>
-
+        
         <ng-template #sectionTemplate>
-            <kendo-dropdownbutton #sectionDropDownButton
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [arrowIcon]="arrowIcon"
-                [buttonClass]="buttonClass"
-                [disabled]="disabled"
-                [size]="size"
-                [tabIndex]="-1"
-                [data]="data"
-                [buttonAttributes]="{'title': title}"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
+          <kendo-dropdownbutton #sectionDropDownButton
+            [icon]="toolbarOptions.icon"
+            [iconClass]="toolbarOptions.iconClass"
+            [svgIcon]="toolbarOptions.svgIcon"
+            [imageUrl]="toolbarOptions.imageUrl"
+            [arrowIcon]="arrowIcon"
+            [buttonClass]="buttonClass"
+            [disabled]="disabled"
+            [size]="size"
+            [tabIndex]="-1"
+            [data]="data"
+            [buttonAttributes]="{'title': title}"
+            [textField]="textField"
+            [popupSettings]="popupSettings"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (open)="open.emit($event)"
+            (close)="close.emit($event)"
+            (itemClick)="itemClick.emit($event)"
             >
-                {{ toolbarOptions.text }}
-            </kendo-dropdownbutton>
+            {{ toolbarOptions.text }}
+          </kendo-dropdownbutton>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
@@ -4134,98 +4222,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-dropdownbutton',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton #toolbarDropDownButton
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [arrowIcon]="arrowIcon"
-                [buttonClass]="buttonClass"
-                [disabled]="disabled"
-                [size]="size"
-                [tabIndex]="-1"
-                [data]="data"
-                [buttonAttributes]="{'title': title}"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
+          <kendo-dropdownbutton #toolbarDropDownButton
+            [icon]="toolbarOptions.icon"
+            [iconClass]="toolbarOptions.iconClass"
+            [svgIcon]="toolbarOptions.svgIcon"
+            [imageUrl]="toolbarOptions.imageUrl"
+            [arrowIcon]="arrowIcon"
+            [buttonClass]="buttonClass"
+            [disabled]="disabled"
+            [size]="size"
+            [tabIndex]="-1"
+            [data]="data"
+            [buttonAttributes]="{'title': title}"
+            [textField]="textField"
+            [popupSettings]="popupSettings"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (open)="open.emit($event)"
+            (close)="close.emit($event)"
+            (itemClick)="itemClick.emit($event)"
             >
-                {{ toolbarOptions.text }}
-            </kendo-dropdownbutton>
+            {{ toolbarOptions.text }}
+          </kendo-dropdownbutton>
         </ng-template>
-
+        
         <ng-template #popupTemplate>
-            <div
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item k-disabled"
-                [ngClass]="buttonClass">
-                <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
+          <div
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item k-disabled"
+            [ngClass]="buttonClass">
+            <span
+              [ngClass]="{'k-link': true, 'k-menu-link': true}"
+              >
+              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
+                <kendo-icon-wrapper
+                  [name]="overflowOptions.icon"
+                  [customFontClass]="overflowOptions.iconClass"
+                  [svgIcon]="overflowOptions.svgIcon"
+                ></kendo-icon-wrapper>
+              }
+              @if (overflowOptions.text) {
+                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
+              }
+            </span>
+          </div>
+          @for (item of data; track item; let i = $index) {
+            <div #listItem
+              tabindex="-1"
+              role="menuitem"
+              class="k-item k-menu-item"
+              [class.k-disabled]="disabled || item.disabled"
+              (click)="handleClick($event, item, i)">
+              <span
+                class="k-link k-menu-link"
+                [ngClass]="item.cssClass"
                 >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
+                @if (item.icon || item.iconClass || item.svgIcon) {
+                  <kendo-icon-wrapper
+                    [name]="item.icon"
+                    [customFontClass]="item.iconClass"
+                    [svgIcon]="item.svgIcon"
+                  ></kendo-icon-wrapper>
+                }
+                @if (getText(item)) {
+                  <span class="k-menu-link-text">{{ getText(item) }}</span>
+                }
+              </span>
             </div>
-            <ng-container *ngFor="let item of data; let i = index">
-                <div #listItem
-                    tabindex="-1"
-                    role="menuitem"
-                    class="k-item k-menu-item"
-                    [class.k-disabled]="disabled || item.disabled"
-                    (click)="handleClick($event, item, i)">
-                    <span
-                        class="k-link k-menu-link"
-                        [ngClass]="item.cssClass"
-                    >
-                        <kendo-icon-wrapper
-                            *ngIf="item.icon || item.iconClass || item.svgIcon"
-                            [name]="item.icon"
-                            [customFontClass]="item.iconClass"
-                            [svgIcon]="item.svgIcon"
-                        ></kendo-icon-wrapper>
-                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                    </span>
-                </div>
-            </ng-container>
+          }
         </ng-template>
-
+        
         <ng-template #sectionTemplate>
-            <kendo-dropdownbutton #sectionDropDownButton
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [arrowIcon]="arrowIcon"
-                [buttonClass]="buttonClass"
-                [disabled]="disabled"
-                [size]="size"
-                [tabIndex]="-1"
-                [data]="data"
-                [buttonAttributes]="{'title': title}"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
+          <kendo-dropdownbutton #sectionDropDownButton
+            [icon]="toolbarOptions.icon"
+            [iconClass]="toolbarOptions.iconClass"
+            [svgIcon]="toolbarOptions.svgIcon"
+            [imageUrl]="toolbarOptions.imageUrl"
+            [arrowIcon]="arrowIcon"
+            [buttonClass]="buttonClass"
+            [disabled]="disabled"
+            [size]="size"
+            [tabIndex]="-1"
+            [data]="data"
+            [buttonAttributes]="{'title': title}"
+            [textField]="textField"
+            [popupSettings]="popupSettings"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (open)="open.emit($event)"
+            (close)="close.emit($event)"
+            (itemClick)="itemClick.emit($event)"
             >
-                {{ toolbarOptions.text }}
-            </kendo-dropdownbutton>
+            {{ toolbarOptions.text }}
+          </kendo-dropdownbutton>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
+                    imports: [DropDownButtonComponent, NgClass, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: ToolBarComponent }], propDecorators: { arrowIcon: [{
                 type: Input
@@ -4598,105 +4692,111 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [{ token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "sectionSplitButton", first: true, predicate: ["sectionSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "sectionSplitButton", first: true, predicate: ["sectionSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
-            <kendo-splitbutton
-                #toolbarSplitButton
-                class="k-toolbar-split-button"
-                [data]="data"
-                [text]="toolbarOptions.text"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [buttonClass]="buttonClass"
-                [arrowButtonClass]="arrowButtonClass"
-                [arrowButtonIcon]="arrowButtonIcon"
-                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
-                [disabled]="disabled"
-                [size]="size"
-                [tabIndex]="-1"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (buttonClick)="buttonClick.emit($event)"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            ></kendo-splitbutton>
+          <kendo-splitbutton
+            #toolbarSplitButton
+            class="k-toolbar-split-button"
+            [data]="data"
+            [text]="toolbarOptions.text"
+            [icon]="toolbarOptions.icon"
+            [iconClass]="toolbarOptions.iconClass"
+            [svgIcon]="toolbarOptions.svgIcon"
+            [imageUrl]="toolbarOptions.imageUrl"
+            [buttonClass]="buttonClass"
+            [arrowButtonClass]="arrowButtonClass"
+            [arrowButtonIcon]="arrowButtonIcon"
+            [arrowButtonSvgIcon]="arrowButtonSvgIcon"
+            [disabled]="disabled"
+            [size]="size"
+            [tabIndex]="-1"
+            [textField]="textField"
+            [popupSettings]="popupSettings"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (buttonClick)="buttonClick.emit($event)"
+            (open)="open.emit($event)"
+            (close)="close.emit($event)"
+            (itemClick)="itemClick.emit($event)"
+          ></kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #overflowMainButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [ngClass]="buttonClass"
-                (click)="onMainButtonClick($event)">
-                <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    >
-                    </kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
-            </div>
-            <ng-container *ngFor="let item of data; let i = index">
+          <div #overflowMainButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [ngClass]="buttonClass"
+            (click)="onMainButtonClick($event)">
+            <span
+              [ngClass]="{'k-link': true, 'k-menu-link': true}"
+              >
+              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
+                <kendo-icon-wrapper
+                  [name]="overflowOptions.icon"
+                  [customFontClass]="overflowOptions.iconClass"
+                  [svgIcon]="overflowOptions.svgIcon"
+                  >
+                </kendo-icon-wrapper>
+              }
+              @if (overflowOptions.text) {
+                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
+              }
+            </span>
+          </div>
+          @for (item of data; track item; let i = $index) {
             <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
+              tabindex="-1"
+              role="menuitem"
+              class="k-item k-menu-item"
+              [class.k-disabled]="disabled || item.disabled"
+              (click)="handleClick($event, item, i)">
+              <span
+                class="k-link k-menu-link"
                 >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
+                @if (item.icon || item.iconClass || item.svgIcon) {
+                  <kendo-icon-wrapper
+                    [name]="item.icon"
+                    [customFontClass]="item.iconClass"
+                    [svgIcon]="item.svgIcon"
                     >
-                    </kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
+                  </kendo-icon-wrapper>
+                }
+                @if (getText(item)) {
+                  <span class="k-menu-link-text">{{ getText(item) }}</span>
+                }
+              </span>
             </div>
-            </ng-container>
+          }
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-splitbutton
-                #sectionSplitButton
-                class="k-toolbar-split-button"
-                [data]="data"
-                [text]="toolbarOptions.text"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [buttonClass]="buttonClass"
-                [arrowButtonClass]="arrowButtonClass"
-                [arrowButtonIcon]="arrowButtonIcon"
-                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
-                [disabled]="disabled"
-                [size]="size"
-                [tabIndex]="-1"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (buttonClick)="buttonClick.emit($event)"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            ></kendo-splitbutton>
+          <kendo-splitbutton
+            #sectionSplitButton
+            class="k-toolbar-split-button"
+            [data]="data"
+            [text]="toolbarOptions.text"
+            [icon]="toolbarOptions.icon"
+            [iconClass]="toolbarOptions.iconClass"
+            [svgIcon]="toolbarOptions.svgIcon"
+            [imageUrl]="toolbarOptions.imageUrl"
+            [buttonClass]="buttonClass"
+            [arrowButtonClass]="arrowButtonClass"
+            [arrowButtonIcon]="arrowButtonIcon"
+            [arrowButtonSvgIcon]="arrowButtonSvgIcon"
+            [disabled]="disabled"
+            [size]="size"
+            [tabIndex]="-1"
+            [textField]="textField"
+            [popupSettings]="popupSettings"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (buttonClick)="buttonClick.emit($event)"
+            (open)="open.emit($event)"
+            (close)="close.emit($event)"
+            (itemClick)="itemClick.emit($event)"
+          ></kendo-splitbutton>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
@@ -4706,105 +4806,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-toolbar-splitbutton',
                     template: `
         <ng-template #toolbarTemplate>
-            <kendo-splitbutton
-                #toolbarSplitButton
-                class="k-toolbar-split-button"
-                [data]="data"
-                [text]="toolbarOptions.text"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [buttonClass]="buttonClass"
-                [arrowButtonClass]="arrowButtonClass"
-                [arrowButtonIcon]="arrowButtonIcon"
-                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
-                [disabled]="disabled"
-                [size]="size"
-                [tabIndex]="-1"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (buttonClick)="buttonClick.emit($event)"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            ></kendo-splitbutton>
+          <kendo-splitbutton
+            #toolbarSplitButton
+            class="k-toolbar-split-button"
+            [data]="data"
+            [text]="toolbarOptions.text"
+            [icon]="toolbarOptions.icon"
+            [iconClass]="toolbarOptions.iconClass"
+            [svgIcon]="toolbarOptions.svgIcon"
+            [imageUrl]="toolbarOptions.imageUrl"
+            [buttonClass]="buttonClass"
+            [arrowButtonClass]="arrowButtonClass"
+            [arrowButtonIcon]="arrowButtonIcon"
+            [arrowButtonSvgIcon]="arrowButtonSvgIcon"
+            [disabled]="disabled"
+            [size]="size"
+            [tabIndex]="-1"
+            [textField]="textField"
+            [popupSettings]="popupSettings"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (buttonClick)="buttonClick.emit($event)"
+            (open)="open.emit($event)"
+            (close)="close.emit($event)"
+            (itemClick)="itemClick.emit($event)"
+          ></kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
-            <div #overflowMainButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [ngClass]="buttonClass"
-                (click)="onMainButtonClick($event)">
-                <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    >
-                    </kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
-            </div>
-            <ng-container *ngFor="let item of data; let i = index">
+          <div #overflowMainButton
+            tabindex="-1"
+            role="menuitem"
+            class="k-item k-menu-item"
+            [class.k-disabled]="disabled"
+            [ngClass]="buttonClass"
+            (click)="onMainButtonClick($event)">
+            <span
+              [ngClass]="{'k-link': true, 'k-menu-link': true}"
+              >
+              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
+                <kendo-icon-wrapper
+                  [name]="overflowOptions.icon"
+                  [customFontClass]="overflowOptions.iconClass"
+                  [svgIcon]="overflowOptions.svgIcon"
+                  >
+                </kendo-icon-wrapper>
+              }
+              @if (overflowOptions.text) {
+                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
+              }
+            </span>
+          </div>
+          @for (item of data; track item; let i = $index) {
             <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
+              tabindex="-1"
+              role="menuitem"
+              class="k-item k-menu-item"
+              [class.k-disabled]="disabled || item.disabled"
+              (click)="handleClick($event, item, i)">
+              <span
+                class="k-link k-menu-link"
                 >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
+                @if (item.icon || item.iconClass || item.svgIcon) {
+                  <kendo-icon-wrapper
+                    [name]="item.icon"
+                    [customFontClass]="item.iconClass"
+                    [svgIcon]="item.svgIcon"
                     >
-                    </kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
+                  </kendo-icon-wrapper>
+                }
+                @if (getText(item)) {
+                  <span class="k-menu-link-text">{{ getText(item) }}</span>
+                }
+              </span>
             </div>
-            </ng-container>
+          }
         </ng-template>
         <ng-template #sectionTemplate>
-            <kendo-splitbutton
-                #sectionSplitButton
-                class="k-toolbar-split-button"
-                [data]="data"
-                [text]="toolbarOptions.text"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [buttonClass]="buttonClass"
-                [arrowButtonClass]="arrowButtonClass"
-                [arrowButtonIcon]="arrowButtonIcon"
-                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
-                [disabled]="disabled"
-                [size]="size"
-                [tabIndex]="-1"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (buttonClick)="buttonClick.emit($event)"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            ></kendo-splitbutton>
+          <kendo-splitbutton
+            #sectionSplitButton
+            class="k-toolbar-split-button"
+            [data]="data"
+            [text]="toolbarOptions.text"
+            [icon]="toolbarOptions.icon"
+            [iconClass]="toolbarOptions.iconClass"
+            [svgIcon]="toolbarOptions.svgIcon"
+            [imageUrl]="toolbarOptions.imageUrl"
+            [buttonClass]="buttonClass"
+            [arrowButtonClass]="arrowButtonClass"
+            [arrowButtonIcon]="arrowButtonIcon"
+            [arrowButtonSvgIcon]="arrowButtonSvgIcon"
+            [disabled]="disabled"
+            [size]="size"
+            [tabIndex]="-1"
+            [textField]="textField"
+            [popupSettings]="popupSettings"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (buttonClick)="buttonClick.emit($event)"
+            (open)="open.emit($event)"
+            (close)="close.emit($event)"
+            (itemClick)="itemClick.emit($event)"
+          ></kendo-splitbutton>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [SplitButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
+                    imports: [SplitButtonComponent, NgClass, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: ToolBarComponent }], propDecorators: { showText: [{
                 type: Input