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

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

@@ -7,14 +7,14 @@ import { Injectable, Directive, Optional, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { Keys, getLicenseMessage, shouldShowValidationUI, normalizeNumpadKeys, WatermarkOverlayComponent, isDocumentAvailable, anyChanged, isObjectPresent, removeHTMLAttributes, parseAttributes, setHTMLAttributes, DraggableDirective, PreventableEvent as PreventableEvent$1, guid, ResizeSensorComponent, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged } from '@progress/kendo-angular-common';
+import { Keys, getLicenseMessage, shouldShowValidationUI, normalizeKeys, WatermarkOverlayComponent, isDocumentAvailable, anyChanged, isObjectPresent, removeHTMLAttributes, parseAttributes, setHTMLAttributes, DraggableDirective, PreventableEvent as PreventableEvent$1, guid, ResizeSensorComponent, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
 import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
 import { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, checkCircleIcon, exclamationCircleIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgIf, NgTemplateOutlet, NgFor, NgStyle, NgClass } from '@angular/common';
+import { NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
 import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
 import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
 import { Draggable } from '@progress/kendo-draggable';
@@ -29,8 +29,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729057,
-    version: '21.1.1-develop.2',
+    publishDate: 1764592921,
+    version: '21.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -608,30 +608,35 @@ class PanelBarItemComponent {
         this.wrapperFocused = focused;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PanelBarItemComponent, isStandalone: true, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PanelBarItemComponent, isStandalone: true, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
             <span
-                #header
-                [class.k-link]="true"
-                [class.k-selected]="!disabled && selected"
-                [class.k-focus]="focused && wrapperFocused"
-                [class.k-disabled]="disabled"
-                (click)="onItemClick($event)">
+              #header
+              [class.k-link]="true"
+              [class.k-selected]="!disabled && selected"
+              [class.k-focus]="focused && wrapperFocused"
+              [class.k-disabled]="disabled"
+              (click)="onItemClick($event)">
+              @if (icon || iconClass || svgIcon) {
                 <kendo-icon-wrapper
-                    *ngIf="icon || iconClass || svgIcon"
-                    [name]="iconClasses"
-                    [customFontClass]="customIconClasses"
-                    [svgIcon]="svgIcon"
-                    innerCssClass="k-panelbar-item-icon"
-                >
+                  [name]="iconClasses"
+                  [customFontClass]="customIconClasses"
+                  [svgIcon]="svgIcon"
+                  innerCssClass="k-panelbar-item-icon"
+                  >
                 </kendo-icon-wrapper>
+              }
+              @if (imageUrl) {
                 <img
-                    *ngIf="imageUrl"
-                    class="k-image k-panelbar-item-icon"
-                    [src]="imageUrl"
-                    alt="">
-                <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
-                <ng-template *ngIf="titleTemplate"
-                [ngTemplateOutlet]="titleTemplate"
+                  class="k-image k-panelbar-item-icon"
+                  [src]="imageUrl"
+                  alt="">
+              }
+              @if (!titleTemplate) {
+                <span class="k-panelbar-item-text">{{title}}</span>
+              }
+              @if (titleTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="titleTemplate"
                 [ngTemplateOutletContext]="{
                     item: {
                         title: title,
@@ -647,36 +652,39 @@ class PanelBarItemComponent {
                         content: content
                     }
                 }"></ng-template>
-                <kendo-icon-wrapper
-                    *ngIf="hasChildItems || hasContent"
-                    [name]="expanded ? 'chevron-up' : 'chevron-down'"
-                    [svgIcon]="expanderSVGIcon"
-                    [innerCssClass]="dirInnerCssClasses"
+            }
+            @if (hasChildItems || hasContent) {
+              <kendo-icon-wrapper
+                [name]="expanded ? 'chevron-up' : 'chevron-down'"
+                [svgIcon]="expanderSVGIcon"
+                [innerCssClass]="dirInnerCssClasses"
                 >
-                </kendo-icon-wrapper>
+              </kendo-icon-wrapper>
+            }
             </span>
-            <div
+            @if (keepContent || (!disabled && expanded && (hasChildItems || hasContent))) {
+              <div
                 #contentWrapper
-                *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
                 [@toggle]="state"
                 [attr.role]="'group'"
                 [attr.aria-hidden]="!disabled && !expanded"
-            >
-                <div
-                    *ngIf="hasChildItems && !items?.length"
+                >
+                @if (hasChildItems && !items?.length) {
+                  <div
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
                     class="k-panelbar-group"
-                >
+                    >
                     <ng-content select="kendo-panelbar-item"></ng-content>
-                </div>
-                <div
-                    *ngIf="hasContent && !content"
+                  </div>
+                }
+                @if (hasContent && !content) {
+                  <div
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
                     class="k-panelbar-content">
                     <ng-template
-                        [ngTemplateOutlet]="contentTemplate.first.templateRef"
+                      [ngTemplateOutlet]="contentTemplate.first.templateRef"
                         [ngTemplateOutletContext]="{
                             $implicit: {
                                 title: title,
@@ -687,36 +695,41 @@ class PanelBarItemComponent {
                                 content: content
                             }
                         }">
-                    </ng-template>
+                  </ng-template>
                 </div>
-                <div *ngIf="hasItems"
-                    [style.overflow]="contentOverflow"
-                    [style.height]="contentHeight"
-                    class="k-panelbar-group">
-                    <ng-container *ngFor="let item of items">
-                        <kendo-panelbar-item *ngIf="!item.hidden"
-                            [title]="item.title"
-                            [id]="item.id"
-                            [icon]="item.icon"
-                            [iconClass]="item.iconClass"
-                            [svgIcon]="item.svgIcon"
-                            [imageUrl]="item.imageUrl"
-                            [selected]="!!item.selected"
-                            [expanded]="!!item.expanded"
-                            [disabled]="!!item.disabled"
-                            [template]="template"
-                            [items]="item.children"
-                            [content]="item.content">
-                        </kendo-panelbar-item>
-                    </ng-container>
+              }
+              @if (hasItems) {
+                <div
+                  [style.overflow]="contentOverflow"
+                  [style.height]="contentHeight"
+                  class="k-panelbar-group">
+                  @for (item of items; track item) {
+                    @if (!item.hidden) {
+                      <kendo-panelbar-item
+                        [title]="item.title"
+                        [id]="item.id"
+                        [icon]="item.icon"
+                        [iconClass]="item.iconClass"
+                        [svgIcon]="item.svgIcon"
+                        [imageUrl]="item.imageUrl"
+                        [selected]="!!item.selected"
+                        [expanded]="!!item.expanded"
+                        [disabled]="!!item.disabled"
+                        [template]="template"
+                        [items]="item.children"
+                        [content]="item.content">
+                      </kendo-panelbar-item>
+                    }
+                  }
                 </div>
+              }
+              @if (content) {
                 <div
-                    *ngIf="content"
-                    [style.overflow]="contentOverflow"
-                    [style.height]="contentHeight"
-                    class="k-panelbar-content">
-                    <ng-template
-                        [ngTemplateOutlet]="template"
+                  [style.overflow]="contentOverflow"
+                  [style.height]="contentHeight"
+                  class="k-panelbar-content">
+                  <ng-template
+                    [ngTemplateOutlet]="template"
                         [ngTemplateOutletContext]="{
                             $implicit: {
                                 title: title,
@@ -727,10 +740,14 @@ class PanelBarItemComponent {
                                 content: content
                             }
                         }">
-                    </ng-template>
-                    <ng-template [ngIf]="!template">{{content}}</ng-template>
-                </div>
-            </div>`, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+                </ng-template>
+                @if (!template) {
+                  {{content}}
+                }
+              </div>
+            }
+            </div>
+            }`, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('toggle', [
                 state('inactive', style({ display: 'none' })),
                 transition('* => active', [
@@ -764,28 +781,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: "kendo-panelbar-item",
                     template: `
             <span
-                #header
-                [class.k-link]="true"
-                [class.k-selected]="!disabled && selected"
-                [class.k-focus]="focused && wrapperFocused"
-                [class.k-disabled]="disabled"
-                (click)="onItemClick($event)">
+              #header
+              [class.k-link]="true"
+              [class.k-selected]="!disabled && selected"
+              [class.k-focus]="focused && wrapperFocused"
+              [class.k-disabled]="disabled"
+              (click)="onItemClick($event)">
+              @if (icon || iconClass || svgIcon) {
                 <kendo-icon-wrapper
-                    *ngIf="icon || iconClass || svgIcon"
-                    [name]="iconClasses"
-                    [customFontClass]="customIconClasses"
-                    [svgIcon]="svgIcon"
-                    innerCssClass="k-panelbar-item-icon"
-                >
+                  [name]="iconClasses"
+                  [customFontClass]="customIconClasses"
+                  [svgIcon]="svgIcon"
+                  innerCssClass="k-panelbar-item-icon"
+                  >
                 </kendo-icon-wrapper>
+              }
+              @if (imageUrl) {
                 <img
-                    *ngIf="imageUrl"
-                    class="k-image k-panelbar-item-icon"
-                    [src]="imageUrl"
-                    alt="">
-                <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
-                <ng-template *ngIf="titleTemplate"
-                [ngTemplateOutlet]="titleTemplate"
+                  class="k-image k-panelbar-item-icon"
+                  [src]="imageUrl"
+                  alt="">
+              }
+              @if (!titleTemplate) {
+                <span class="k-panelbar-item-text">{{title}}</span>
+              }
+              @if (titleTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="titleTemplate"
                 [ngTemplateOutletContext]="{
                     item: {
                         title: title,
@@ -801,36 +823,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         content: content
                     }
                 }"></ng-template>
-                <kendo-icon-wrapper
-                    *ngIf="hasChildItems || hasContent"
-                    [name]="expanded ? 'chevron-up' : 'chevron-down'"
-                    [svgIcon]="expanderSVGIcon"
-                    [innerCssClass]="dirInnerCssClasses"
+            }
+            @if (hasChildItems || hasContent) {
+              <kendo-icon-wrapper
+                [name]="expanded ? 'chevron-up' : 'chevron-down'"
+                [svgIcon]="expanderSVGIcon"
+                [innerCssClass]="dirInnerCssClasses"
                 >
-                </kendo-icon-wrapper>
+              </kendo-icon-wrapper>
+            }
             </span>
-            <div
+            @if (keepContent || (!disabled && expanded && (hasChildItems || hasContent))) {
+              <div
                 #contentWrapper
-                *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
                 [@toggle]="state"
                 [attr.role]="'group'"
                 [attr.aria-hidden]="!disabled && !expanded"
-            >
-                <div
-                    *ngIf="hasChildItems && !items?.length"
+                >
+                @if (hasChildItems && !items?.length) {
+                  <div
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
                     class="k-panelbar-group"
-                >
+                    >
                     <ng-content select="kendo-panelbar-item"></ng-content>
-                </div>
-                <div
-                    *ngIf="hasContent && !content"
+                  </div>
+                }
+                @if (hasContent && !content) {
+                  <div
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
                     class="k-panelbar-content">
                     <ng-template
-                        [ngTemplateOutlet]="contentTemplate.first.templateRef"
+                      [ngTemplateOutlet]="contentTemplate.first.templateRef"
                         [ngTemplateOutletContext]="{
                             $implicit: {
                                 title: title,
@@ -841,36 +866,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                 content: content
                             }
                         }">
-                    </ng-template>
+                  </ng-template>
                 </div>
-                <div *ngIf="hasItems"
-                    [style.overflow]="contentOverflow"
-                    [style.height]="contentHeight"
-                    class="k-panelbar-group">
-                    <ng-container *ngFor="let item of items">
-                        <kendo-panelbar-item *ngIf="!item.hidden"
-                            [title]="item.title"
-                            [id]="item.id"
-                            [icon]="item.icon"
-                            [iconClass]="item.iconClass"
-                            [svgIcon]="item.svgIcon"
-                            [imageUrl]="item.imageUrl"
-                            [selected]="!!item.selected"
-                            [expanded]="!!item.expanded"
-                            [disabled]="!!item.disabled"
-                            [template]="template"
-                            [items]="item.children"
-                            [content]="item.content">
-                        </kendo-panelbar-item>
-                    </ng-container>
+              }
+              @if (hasItems) {
+                <div
+                  [style.overflow]="contentOverflow"
+                  [style.height]="contentHeight"
+                  class="k-panelbar-group">
+                  @for (item of items; track item) {
+                    @if (!item.hidden) {
+                      <kendo-panelbar-item
+                        [title]="item.title"
+                        [id]="item.id"
+                        [icon]="item.icon"
+                        [iconClass]="item.iconClass"
+                        [svgIcon]="item.svgIcon"
+                        [imageUrl]="item.imageUrl"
+                        [selected]="!!item.selected"
+                        [expanded]="!!item.expanded"
+                        [disabled]="!!item.disabled"
+                        [template]="template"
+                        [items]="item.children"
+                        [content]="item.content">
+                      </kendo-panelbar-item>
+                    }
+                  }
                 </div>
+              }
+              @if (content) {
                 <div
-                    *ngIf="content"
-                    [style.overflow]="contentOverflow"
-                    [style.height]="contentHeight"
-                    class="k-panelbar-content">
-                    <ng-template
-                        [ngTemplateOutlet]="template"
+                  [style.overflow]="contentOverflow"
+                  [style.height]="contentHeight"
+                  class="k-panelbar-content">
+                  <ng-template
+                    [ngTemplateOutlet]="template"
                         [ngTemplateOutletContext]="{
                             $implicit: {
                                 title: title,
@@ -881,12 +911,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                 content: content
                             }
                         }">
-                    </ng-template>
-                    <ng-template [ngIf]="!template">{{content}}</ng-template>
-                </div>
-            </div>`,
+                </ng-template>
+                @if (!template) {
+                  {{content}}
+                }
+              </div>
+            }
+            </div>
+            }`,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgTemplateOutlet, NgFor]
+                    imports: [IconWrapperComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: PanelBarItemComponent, decorators: [{
                     type: SkipSelf
@@ -1329,7 +1363,7 @@ class PanelBarComponent {
     onComponentKeyDown(event) {
         if (event.target === this.elementRef.nativeElement) {
             // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
-            const code = normalizeNumpadKeys(event);
+            const code = normalizeKeys(event);
             if (code === Keys.Space || code === Keys.ArrowUp || code === Keys.ArrowDown ||
                 code === Keys.ArrowLeft || code === Keys.ArrowRight || code === Keys.Home ||
                 code === Keys.End || code === Keys.PageUp || code === Keys.PageDown) {
@@ -1605,7 +1639,7 @@ class PanelBarComponent {
         return flattedItems;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: PanelBarService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PanelBarComponent, isStandalone: true, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PanelBarComponent, isStandalone: true, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
             PanelBarService,
             LocalizationService,
             {
@@ -1613,29 +1647,35 @@ class PanelBarComponent {
                 useValue: 'kendo.panelbar'
             }
         ], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], usesOnChanges: true, ngImport: i0, template: `
-        <ng-content *ngIf="contentChildItems && !items" select="kendo-panelbar-item"></ng-content>
-        <ng-template [ngIf]="items?.length">
-            <ng-container *ngFor="let item of items">
-                <kendo-panelbar-item *ngIf="!item.hidden"
-                    [title]="item.title"
-                    [id]="item.id"
-                    [icon]="item.icon"
-                    [iconClass]="item.iconClass"
-                    [svgIcon]="item.svgIcon"
-                    [imageUrl]="item.imageUrl"
-                    [selected]="!!item.selected"
-                    [expanded]="!!item.expanded"
-                    [disabled]="!!item.disabled"
-                    [template]="templateRef"
-                    [items]="item.children"
-                    [content]="item.content"
+        @if (contentChildItems && !items) {
+          <ng-content select="kendo-panelbar-item"></ng-content>
+        }
+        @if (items?.length) {
+          @for (item of items; track item) {
+            @if (!item.hidden) {
+              <kendo-panelbar-item
+                [title]="item.title"
+                [id]="item.id"
+                [icon]="item.icon"
+                [iconClass]="item.iconClass"
+                [svgIcon]="item.svgIcon"
+                [imageUrl]="item.imageUrl"
+                [selected]="!!item.selected"
+                [expanded]="!!item.expanded"
+                [disabled]="!!item.disabled"
+                [template]="templateRef"
+                [items]="item.children"
+                [content]="item.content"
                 >
-                </kendo-panelbar-item>
-            </ng-container>
-        </ng-template>
+              </kendo-panelbar-item>
+            }
+          }
+        }
 
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelBarComponent, decorators: [{
             type: Component,
@@ -1651,31 +1691,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     selector: 'kendo-panelbar',
                     template: `
-        <ng-content *ngIf="contentChildItems && !items" select="kendo-panelbar-item"></ng-content>
-        <ng-template [ngIf]="items?.length">
-            <ng-container *ngFor="let item of items">
-                <kendo-panelbar-item *ngIf="!item.hidden"
-                    [title]="item.title"
-                    [id]="item.id"
-                    [icon]="item.icon"
-                    [iconClass]="item.iconClass"
-                    [svgIcon]="item.svgIcon"
-                    [imageUrl]="item.imageUrl"
-                    [selected]="!!item.selected"
-                    [expanded]="!!item.expanded"
-                    [disabled]="!!item.disabled"
-                    [template]="templateRef"
-                    [items]="item.children"
-                    [content]="item.content"
+        @if (contentChildItems && !items) {
+          <ng-content select="kendo-panelbar-item"></ng-content>
+        }
+        @if (items?.length) {
+          @for (item of items; track item) {
+            @if (!item.hidden) {
+              <kendo-panelbar-item
+                [title]="item.title"
+                [id]="item.id"
+                [icon]="item.icon"
+                [iconClass]="item.iconClass"
+                [svgIcon]="item.svgIcon"
+                [imageUrl]="item.imageUrl"
+                [selected]="!!item.selected"
+                [expanded]="!!item.expanded"
+                [disabled]="!!item.disabled"
+                [template]="templateRef"
+                [items]="item.children"
+                [content]="item.content"
                 >
-                </kendo-panelbar-item>
-            </ng-container>
-        </ng-template>
+              </kendo-panelbar-item>
+            }
+          }
+        }
 
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `,
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgFor, PanelBarItemComponent, WatermarkOverlayComponent]
+                    imports: [PanelBarItemComponent, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: PanelBarService }, { type: i1.LocalizationService }], propDecorators: { expandMode: [{
                 type: Input
@@ -2225,10 +2271,14 @@ class SplitterPaneComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: SplitterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
-        <div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], usesOnChanges: true, ngImport: i0, template: `
+        @if (!collapsed) {
+          <ng-content></ng-content>
+        }
+        @if (overlayContent) {
+          <div class="k-splitter-overlay k-overlay"></div>
+        }
+        `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterPaneComponent, decorators: [{
             type: Component,
@@ -2236,11 +2286,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     exportAs: 'kendoSplitterPane',
                     selector: 'kendo-splitter-pane',
                     template: `
-        <ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
-        <div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
-    `,
-                    standalone: true,
-                    imports: [NgIf]
+        @if (!collapsed) {
+          <ng-content></ng-content>
+        }
+        @if (overlayContent) {
+          <div class="k-splitter-overlay k-overlay"></div>
+        }
+        `,
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: SplitterService }], propDecorators: { order: [{
                 type: Input
@@ -2493,7 +2546,7 @@ class SplitterBarComponent {
         return panes.length === 2 && panes[1].collapsed;
     }
     onKeyDown(event) {
-        const keyCode = normalizeNumpadKeys(event);
+        const keyCode = normalizeKeys(event);
         const shouldToggle = event.ctrlKey || event.metaKey;
         if (keyCode === Keys.Enter || keyCode === Keys.NumpadEnter) {
             event.preventDefault();
@@ -2521,47 +2574,55 @@ class SplitterBarComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
-        <div *ngIf="shouldShowIcon('prev')" class="k-collapse-prev" (click)="togglePrevious()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
+        @if (shouldShowIcon('prev')) {
+          <div class="k-collapse-prev" (click)="togglePrevious()">
             <kendo-icon-wrapper
-                size="xsmall"
-                [name]="previousArrowClass()"
-                [svgIcon]="previousSVGArrowClass()"
+              size="xsmall"
+              [name]="previousArrowClass()"
+              [svgIcon]="previousSVGArrowClass()"
             ></kendo-icon-wrapper>
-        </div>
+          </div>
+        }
         <div class="k-resize-handle"></div>
-        <div *ngIf="shouldShowIcon('next')" class="k-collapse-next" (click)="toggleNext()">
+        @if (shouldShowIcon('next')) {
+          <div class="k-collapse-next" (click)="toggleNext()">
             <kendo-icon-wrapper
-                size="xsmall"
-                [name]="nextArrowClass()"
-                [svgIcon]="nextSVGArrowClass()"
+              size="xsmall"
+              [name]="nextArrowClass()"
+              [svgIcon]="nextSVGArrowClass()"
             ></kendo-icon-wrapper>
-        </div>
-    `, isInline: true, dependencies: [{ 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"] }] });
+          </div>
+        }
+        `, isInline: true, dependencies: [{ 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: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
                     template: `
-        <div *ngIf="shouldShowIcon('prev')" class="k-collapse-prev" (click)="togglePrevious()">
+        @if (shouldShowIcon('prev')) {
+          <div class="k-collapse-prev" (click)="togglePrevious()">
             <kendo-icon-wrapper
-                size="xsmall"
-                [name]="previousArrowClass()"
-                [svgIcon]="previousSVGArrowClass()"
+              size="xsmall"
+              [name]="previousArrowClass()"
+              [svgIcon]="previousSVGArrowClass()"
             ></kendo-icon-wrapper>
-        </div>
+          </div>
+        }
         <div class="k-resize-handle"></div>
-        <div *ngIf="shouldShowIcon('next')" class="k-collapse-next" (click)="toggleNext()">
+        @if (shouldShowIcon('next')) {
+          <div class="k-collapse-next" (click)="toggleNext()">
             <kendo-icon-wrapper
-                size="xsmall"
-                [name]="nextArrowClass()"
-                [svgIcon]="nextSVGArrowClass()"
+              size="xsmall"
+              [name]="nextArrowClass()"
+              [svgIcon]="nextSVGArrowClass()"
             ></kendo-icon-wrapper>
-        </div>
-    `,
+          </div>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent]
+                    imports: [IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1$1.DraggableDirective, decorators: [{
                     type: Host
@@ -2778,7 +2839,7 @@ class SplitterComponent {
         this.splitterService.fixedHeight = getComputedStyle(this.element.nativeElement).getPropertyValue('height') !== 'auto';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
             SplitterService,
             LocalizationService,
             {
@@ -2787,24 +2848,23 @@ class SplitterComponent {
             }
         ], queries: [{ propertyName: "panes", predicate: SplitterPaneComponent }], viewQueries: [{ propertyName: "splitbars", predicate: SplitterBarComponent, descendants: true }], exportAs: ["kendoSplitter"], usesOnChanges: true, ngImport: i0, template: `
       <ng-content select="kendo-splitter-pane"></ng-content>
-      <ng-container *ngFor="
-        let pane of panes;
-        let index = index;
-        let last = last;
-      ">
-        <kendo-splitter-bar
-          kendoDraggable
-          *ngIf="!last"
-          [index]="index"
-          [orientation]="orientation"
-          [ngClass]="pane.splitterBarClass || splitterBarClass"
+      @for (
+        pane of panes; track
+        pane; let index = $index; let last = $last) {
+        @if (!last) {
+          <kendo-splitter-bar
+            kendoDraggable
+            [index]="index"
+            [orientation]="orientation"
+            [ngClass]="pane.splitterBarClass || splitterBarClass"
           [ngStyle]="{
             width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
             height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
           }">
-        </kendo-splitter-bar>
-      </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+          </kendo-splitter-bar>
+        }
+      }
+      `, isInline: true, dependencies: [{ kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
@@ -2821,26 +2881,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
       <ng-content select="kendo-splitter-pane"></ng-content>
-      <ng-container *ngFor="
-        let pane of panes;
-        let index = index;
-        let last = last;
-      ">
-        <kendo-splitter-bar
-          kendoDraggable
-          *ngIf="!last"
-          [index]="index"
-          [orientation]="orientation"
-          [ngClass]="pane.splitterBarClass || splitterBarClass"
+      @for (
+        pane of panes; track
+        pane; let index = $index; let last = $last) {
+        @if (!last) {
+          <kendo-splitter-bar
+            kendoDraggable
+            [index]="index"
+            [orientation]="orientation"
+            [ngClass]="pane.splitterBarClass || splitterBarClass"
           [ngStyle]="{
             width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
             height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
           }">
-        </kendo-splitter-bar>
-      </ng-container>
-    `,
+          </kendo-splitter-bar>
+        }
+      }
+      `,
                     standalone: true,
-                    imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
+                    imports: [SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: SplitterPaneComponent, decorators: [{
                     type: Optional
@@ -3156,7 +3215,7 @@ class SelectEvent extends PreventableEvent$1 {
  */
 const isTabElement = (target) => {
     const targetId = target.getAttribute('id');
-    if (isPresent(targetId) || targetId.indexOf('k-tabstrip-tab-') >= 0) {
+    if (isPresent(targetId) || targetId?.indexOf('k-tabstrip-tab-') >= 0) {
         return true;
     }
     return false;
@@ -3281,7 +3340,7 @@ class TabStripService {
             return;
         }
         // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
-        const code = normalizeNumpadKeys(event);
+        const code = normalizeKeys(event);
         if (this.shouldHandleKey(code)) {
             event.preventDefault();
         }
@@ -3858,28 +3917,33 @@ class TabComponent {
         this.tabClose.emit(closeArgs);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
-        <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
-            <span class="k-link" *ngIf="!tab.tabTitle">
-                <span class="k-link-text">{{ tab.title }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+        @if (!tab.tabTemplate) {
+          @if (!tab.tabTitle) {
+            <span class="k-link">
+              <span class="k-link-text">{{ tab.title }}</span>
             </span>
-            <span class="k-link" *ngIf="tab.tabTitle">
-                <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
-                </ng-template>
+          }
+          @if (tab.tabTitle) {
+            <span class="k-link">
+              <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
+              </ng-template>
             </span>
-        </ng-container>
+          }
+        } @else {
+          <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
+          </ng-template>
+        }
 
-        <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
-        </ng-template>
-        
-        <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
-                *ngIf="tabClosable"
-                (click)="closeTab(index)" [title]="closeButtonTitle">
-                <kendo-icon-wrapper
-                    [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
-                    innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
-            </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        @if (tabClosable) {
+          <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
+            (click)="closeTab(index)" [title]="closeButtonTitle">
+            <kendo-icon-wrapper
+              [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
+            innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
+          </span>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TabComponent, decorators: [{
             type: Component,
@@ -3887,29 +3951,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripTab]',
                     template: `
-        <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
-            <span class="k-link" *ngIf="!tab.tabTitle">
-                <span class="k-link-text">{{ tab.title }}</span>
+        @if (!tab.tabTemplate) {
+          @if (!tab.tabTitle) {
+            <span class="k-link">
+              <span class="k-link-text">{{ tab.title }}</span>
             </span>
-            <span class="k-link" *ngIf="tab.tabTitle">
-                <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
-                </ng-template>
+          }
+          @if (tab.tabTitle) {
+            <span class="k-link">
+              <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
+              </ng-template>
             </span>
-        </ng-container>
+          }
+        } @else {
+          <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
+          </ng-template>
+        }
 
-        <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
-        </ng-template>
-        
-        <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
-                *ngIf="tabClosable"
-                (click)="closeTab(index)" [title]="closeButtonTitle">
-                <kendo-icon-wrapper
-                    [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
-                    innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
-            </span>
-    `,
+        @if (tabClosable) {
+          <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
+            (click)="closeTab(index)" [title]="closeButtonTitle">
+            <kendo-icon-wrapper
+              [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
+            innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
+          </span>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
+                    imports: [NgTemplateOutlet, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { tab: [{
                 type: Input
@@ -4492,7 +4561,7 @@ class TabStripComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable", "class.k-tabstrip-scrollable-overlay": "this.tabStripScrollableOverlay" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable", "class.k-tabstrip-scrollable-overlay": "this.tabStripScrollableOverlay" } }, providers: [
             TabStripService,
             ScrollService,
             LocalizationService,
@@ -4502,67 +4571,69 @@ class TabStripComponent {
             }
         ], queries: [{ propertyName: "tabs", predicate: TabStripTabComponent }], viewQueries: [{ propertyName: "tablist", first: true, predicate: ["tablist"], descendants: true }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true }, { propertyName: "tabHeaderContainers", predicate: ["tabHeaderContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoTabStrip"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTabStripLocalizedMessages
-            i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
-            closeTitle="Close"
-
-            i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
-            previousTabButton="Previous Tab"
-
-            i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
-            nextTabButton="Next Tab"
-        >
-        </ng-container>
-        <ng-container *ngIf="!tabsAtBottom">
-            <ng-container *ngTemplateOutlet="heading"></ng-container>
-            <ng-container *ngIf="showContentArea">
-                <ng-container *ngTemplateOutlet="content"></ng-container>
-            </ng-container>
-        </ng-container>
-
-        <ng-container *ngIf="tabsAtBottom">
-        <ng-container *ngIf="showContentArea">
-                <ng-container *ngTemplateOutlet="content"></ng-container>
-            </ng-container>
-            <ng-container *ngTemplateOutlet="heading"></ng-container>
+          i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
+          closeTitle="Close"
+        
+          i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
+          previousTabButton="Previous Tab"
+        
+          i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
+          nextTabButton="Next Tab"
+          >
         </ng-container>
+        @if (!tabsAtBottom) {
+          <ng-container *ngTemplateOutlet="heading"></ng-container>
+          @if (showContentArea) {
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+          }
+        }
+        
+        @if (tabsAtBottom) {
+          @if (showContentArea) {
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+          }
+          <ng-container *ngTemplateOutlet="heading"></ng-container>
+        }
         <ng-template #heading>
-            <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
-                <span
-                    role="button"
-                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
-                    #prevScrollButton
-                    kendoTabStripScrollableButton
-                    [scrollable]="scrollable"
-                    [tabPosition]="tabPosition"
-                    [prev]="true"
-                    [title]="localization.get('previousTabButton')"
-                    (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+          <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
+            @if (hasScrollButtons.visible && hasScrollButtons.position !== 'end') {
+              <span
+                role="button"
+                #prevScrollButton
+                kendoTabStripScrollableButton
+                [scrollable]="scrollable"
+                [tabPosition]="tabPosition"
+                [prev]="true"
+                [title]="localization.get('previousTabButton')"
+                (tabScroll)="tabScroll.emit($event)"
+                class="k-icon-button k-button k-button-flat k-button-flat-base"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
                         'k-button-md': size === 'medium' || !size,
                         'k-button-lg': size === 'large'
                     }"
-                    (onClick)="onScrollButtonClick($event)"></span>
-                <span
-                    role="button"
-                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'start'"
-                    #nextScrollButton
-                    kendoTabStripScrollableButton
-                    [scrollable]="scrollable"
-                    [tabPosition]="tabPosition"
-                    [prev]="false"
-                    [title]="localization.get('nextTabButton')"
-                    (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+              (onClick)="onScrollButtonClick($event)"></span>
+            }
+            @if (hasScrollButtons.visible && hasScrollButtons.position === 'start') {
+              <span
+                role="button"
+                #nextScrollButton
+                kendoTabStripScrollableButton
+                [scrollable]="scrollable"
+                [tabPosition]="tabPosition"
+                [prev]="false"
+                [title]="localization.get('nextTabButton')"
+                (tabScroll)="tabScroll.emit($event)"
+                class="k-icon-button k-button k-button-flat k-button-flat-base"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
                         'k-button-md': size === 'medium' || !size,
                         'k-button-lg': size === 'large'
                     }"
-                    (onClick)="onScrollButtonClick($event)"></span>
-                <ul role="tablist" #tablist
-                    class="k-reset k-tabstrip-items"
+              (onClick)="onScrollButtonClick($event)"></span>
+            }
+            <ul role="tablist" #tablist
+              class="k-reset k-tabstrip-items"
                     [ngClass]="{
                         'k-tabstrip-items-start': tabAlignment === 'start',
                         'k-tabstrip-items-center': tabAlignment === 'center',
@@ -4571,86 +4642,93 @@ class TabStripComponent {
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
-                    [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
-                >
-                    <ng-container *ngFor="let tab of tabs; let i = index;">
-                        <li
-                            #tabHeaderContainer
-                            kendoTabStripTab
-                            [class.k-first]="i === 0"
-                            [class.k-last]="i === tabs.length - 1"
-                            [ngClass]="tab.cssClass"
-                            [ngStyle]="tab.cssStyle"
-                            [tab]="tab"
-                            [index]="i"
-                            role="tab"
-                            [tabStripClosable]="closable"
-                            [tabStripCloseIcon]="closeIcon"
-                            [customTabstripCloseIcon]="closeIconClass"
-                            [closeSVGIcon]="closeSVGIcon"
-                            (tabClose)="tabClose.emit($event)"
-                            (click)="onTabClick($event, i)"
-                            [id]="getTabId(i)"
-                            [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
-                    </ng-container>
-                </ul>
-                <span
-                    role="button"
-                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'end'"
-                    #prevScrollButton
-                    kendoTabStripScrollableButton
-                    [scrollable]="scrollable"
-                    [tabPosition]="tabPosition"
-                    [prev]="true"
-                    [title]="localization.get('previousTabButton')"
-                    (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
+              >
+              @for (tab of tabs; track tab; let i = $index) {
+                <li
+                  #tabHeaderContainer
+                  kendoTabStripTab
+                  [class.k-first]="i === 0"
+                  [class.k-last]="i === tabs.length - 1"
+                  [ngClass]="tab.cssClass"
+                  [ngStyle]="tab.cssStyle"
+                  [tab]="tab"
+                  [index]="i"
+                  role="tab"
+                  [tabStripClosable]="closable"
+                  [tabStripCloseIcon]="closeIcon"
+                  [customTabstripCloseIcon]="closeIconClass"
+                  [closeSVGIcon]="closeSVGIcon"
+                  (tabClose)="tabClose.emit($event)"
+                  (click)="onTabClick($event, i)"
+                  [id]="getTabId(i)"
+                [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
+              }
+            </ul>
+            @if (hasScrollButtons.visible && hasScrollButtons.position === 'end') {
+              <span
+                role="button"
+                #prevScrollButton
+                kendoTabStripScrollableButton
+                [scrollable]="scrollable"
+                [tabPosition]="tabPosition"
+                [prev]="true"
+                [title]="localization.get('previousTabButton')"
+                (tabScroll)="tabScroll.emit($event)"
+                class="k-icon-button k-button k-button-flat k-button-flat-base"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
                         'k-button-md': size === 'medium' || !size,
                         'k-button-lg': size === 'large'
                     }"
-                    (onClick)="onScrollButtonClick($event)"></span>
-                <span
-                    role="button"
-                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'start'"
-                    #nextScrollButton
-                    kendoTabStripScrollableButton
-                    [scrollable]="scrollable"
-                    [tabPosition]="tabPosition"
-                    [prev]="false"
-                    [title]="localization.get('nextTabButton')"
-                    (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+              (onClick)="onScrollButtonClick($event)"></span>
+            }
+            @if (hasScrollButtons.visible && hasScrollButtons.position !== 'start') {
+              <span
+                role="button"
+                #nextScrollButton
+                kendoTabStripScrollableButton
+                [scrollable]="scrollable"
+                [tabPosition]="tabPosition"
+                [prev]="false"
+                [title]="localization.get('nextTabButton')"
+                (tabScroll)="tabScroll.emit($event)"
+                class="k-icon-button k-button k-button-flat k-button-flat-base"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
                         'k-button-md': size === 'medium' || !size,
                         'k-button-lg': size === 'large'
                     }"
-                    (onClick)="onScrollButtonClick($event)"></span>
-            </div>
+              (onClick)="onScrollButtonClick($event)"></span>
+            }
+          </div>
         </ng-template>
         <ng-template #content>
-            <ng-template ngFor let-tab [ngForOf]="tabs" let-i="index">
-                <div
-                    [@state]="tab.selected && animate ? 'active' : 'inactive'"
-                    *ngIf="tab.selected || keepTabContent"
-                    [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
-                    [tabIndex]="0"
-                    role="tabpanel"
-                    [id]="getTabPanelId(i)"
-                    [attr.aria-hidden]="!tab.selected"
-                    [attr.aria-labelledby]="getTabId(i)"
-                    [attr.aria-disabled]="tab.disabled"
+          @for (tab of tabs; track tab; let i = $index) {
+            @if (tab.selected || keepTabContent) {
+              <div
+                [@state]="tab.selected && animate ? 'active' : 'inactive'"
+                [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
+                [tabIndex]="0"
+                role="tabpanel"
+                [id]="getTabPanelId(i)"
+                [attr.aria-hidden]="!tab.selected"
+                [attr.aria-labelledby]="getTabId(i)"
+                [attr.aria-disabled]="tab.disabled"
                 >
-                    <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
-                    </ng-template>
-                </div>
-            </ng-template>
+                <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
+                </ng-template>
+              </div>
+            }
+          }
         </ng-template>
-        <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }], animations: [
+        @if (isScrollable) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { kind: "component", type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }], animations: [
             trigger('state', [
                 state('active', style({ opacity: 1 })),
                 transition('* => active', [
@@ -4685,67 +4763,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-tabstrip',
                     template: `
         <ng-container kendoTabStripLocalizedMessages
-            i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
-            closeTitle="Close"
-
-            i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
-            previousTabButton="Previous Tab"
-
-            i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
-            nextTabButton="Next Tab"
-        >
-        </ng-container>
-        <ng-container *ngIf="!tabsAtBottom">
-            <ng-container *ngTemplateOutlet="heading"></ng-container>
-            <ng-container *ngIf="showContentArea">
-                <ng-container *ngTemplateOutlet="content"></ng-container>
-            </ng-container>
-        </ng-container>
-
-        <ng-container *ngIf="tabsAtBottom">
-        <ng-container *ngIf="showContentArea">
-                <ng-container *ngTemplateOutlet="content"></ng-container>
-            </ng-container>
-            <ng-container *ngTemplateOutlet="heading"></ng-container>
+          i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
+          closeTitle="Close"
+        
+          i18n-previousTabButton="kendo.tabstrip.previousTabButton|The title for the **Previous Tab** button when the Tabstrip is scrollable."
+          previousTabButton="Previous Tab"
+        
+          i18n-nextTabButton="kendo.tabstrip.nextTabButton|The title for the **Next Tab** button when the Tabstrip is scrollable."
+          nextTabButton="Next Tab"
+          >
         </ng-container>
+        @if (!tabsAtBottom) {
+          <ng-container *ngTemplateOutlet="heading"></ng-container>
+          @if (showContentArea) {
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+          }
+        }
+        
+        @if (tabsAtBottom) {
+          @if (showContentArea) {
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+          }
+          <ng-container *ngTemplateOutlet="heading"></ng-container>
+        }
         <ng-template #heading>
-            <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
-                <span
-                    role="button"
-                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
-                    #prevScrollButton
-                    kendoTabStripScrollableButton
-                    [scrollable]="scrollable"
-                    [tabPosition]="tabPosition"
-                    [prev]="true"
-                    [title]="localization.get('previousTabButton')"
-                    (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+          <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
+            @if (hasScrollButtons.visible && hasScrollButtons.position !== 'end') {
+              <span
+                role="button"
+                #prevScrollButton
+                kendoTabStripScrollableButton
+                [scrollable]="scrollable"
+                [tabPosition]="tabPosition"
+                [prev]="true"
+                [title]="localization.get('previousTabButton')"
+                (tabScroll)="tabScroll.emit($event)"
+                class="k-icon-button k-button k-button-flat k-button-flat-base"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
                         'k-button-md': size === 'medium' || !size,
                         'k-button-lg': size === 'large'
                     }"
-                    (onClick)="onScrollButtonClick($event)"></span>
-                <span
-                    role="button"
-                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'start'"
-                    #nextScrollButton
-                    kendoTabStripScrollableButton
-                    [scrollable]="scrollable"
-                    [tabPosition]="tabPosition"
-                    [prev]="false"
-                    [title]="localization.get('nextTabButton')"
-                    (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+              (onClick)="onScrollButtonClick($event)"></span>
+            }
+            @if (hasScrollButtons.visible && hasScrollButtons.position === 'start') {
+              <span
+                role="button"
+                #nextScrollButton
+                kendoTabStripScrollableButton
+                [scrollable]="scrollable"
+                [tabPosition]="tabPosition"
+                [prev]="false"
+                [title]="localization.get('nextTabButton')"
+                (tabScroll)="tabScroll.emit($event)"
+                class="k-icon-button k-button k-button-flat k-button-flat-base"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
                         'k-button-md': size === 'medium' || !size,
                         'k-button-lg': size === 'large'
                     }"
-                    (onClick)="onScrollButtonClick($event)"></span>
-                <ul role="tablist" #tablist
-                    class="k-reset k-tabstrip-items"
+              (onClick)="onScrollButtonClick($event)"></span>
+            }
+            <ul role="tablist" #tablist
+              class="k-reset k-tabstrip-items"
                     [ngClass]="{
                         'k-tabstrip-items-start': tabAlignment === 'start',
                         'k-tabstrip-items-center': tabAlignment === 'center',
@@ -4754,88 +4834,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
-                    [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
-                >
-                    <ng-container *ngFor="let tab of tabs; let i = index;">
-                        <li
-                            #tabHeaderContainer
-                            kendoTabStripTab
-                            [class.k-first]="i === 0"
-                            [class.k-last]="i === tabs.length - 1"
-                            [ngClass]="tab.cssClass"
-                            [ngStyle]="tab.cssStyle"
-                            [tab]="tab"
-                            [index]="i"
-                            role="tab"
-                            [tabStripClosable]="closable"
-                            [tabStripCloseIcon]="closeIcon"
-                            [customTabstripCloseIcon]="closeIconClass"
-                            [closeSVGIcon]="closeSVGIcon"
-                            (tabClose)="tabClose.emit($event)"
-                            (click)="onTabClick($event, i)"
-                            [id]="getTabId(i)"
-                            [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
-                    </ng-container>
-                </ul>
-                <span
-                    role="button"
-                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position === 'end'"
-                    #prevScrollButton
-                    kendoTabStripScrollableButton
-                    [scrollable]="scrollable"
-                    [tabPosition]="tabPosition"
-                    [prev]="true"
-                    [title]="localization.get('previousTabButton')"
-                    (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+              [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
+              >
+              @for (tab of tabs; track tab; let i = $index) {
+                <li
+                  #tabHeaderContainer
+                  kendoTabStripTab
+                  [class.k-first]="i === 0"
+                  [class.k-last]="i === tabs.length - 1"
+                  [ngClass]="tab.cssClass"
+                  [ngStyle]="tab.cssStyle"
+                  [tab]="tab"
+                  [index]="i"
+                  role="tab"
+                  [tabStripClosable]="closable"
+                  [tabStripCloseIcon]="closeIcon"
+                  [customTabstripCloseIcon]="closeIconClass"
+                  [closeSVGIcon]="closeSVGIcon"
+                  (tabClose)="tabClose.emit($event)"
+                  (click)="onTabClick($event, i)"
+                  [id]="getTabId(i)"
+                [attr.aria-controls]="(showContentArea && tab.selected) ? getTabPanelId(i) : undefined"></li>
+              }
+            </ul>
+            @if (hasScrollButtons.visible && hasScrollButtons.position === 'end') {
+              <span
+                role="button"
+                #prevScrollButton
+                kendoTabStripScrollableButton
+                [scrollable]="scrollable"
+                [tabPosition]="tabPosition"
+                [prev]="true"
+                [title]="localization.get('previousTabButton')"
+                (tabScroll)="tabScroll.emit($event)"
+                class="k-icon-button k-button k-button-flat k-button-flat-base"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
                         'k-button-md': size === 'medium' || !size,
                         'k-button-lg': size === 'large'
                     }"
-                    (onClick)="onScrollButtonClick($event)"></span>
-                <span
-                    role="button"
-                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'start'"
-                    #nextScrollButton
-                    kendoTabStripScrollableButton
-                    [scrollable]="scrollable"
-                    [tabPosition]="tabPosition"
-                    [prev]="false"
-                    [title]="localization.get('nextTabButton')"
-                    (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-flat k-button-flat-base"
+              (onClick)="onScrollButtonClick($event)"></span>
+            }
+            @if (hasScrollButtons.visible && hasScrollButtons.position !== 'start') {
+              <span
+                role="button"
+                #nextScrollButton
+                kendoTabStripScrollableButton
+                [scrollable]="scrollable"
+                [tabPosition]="tabPosition"
+                [prev]="false"
+                [title]="localization.get('nextTabButton')"
+                (tabScroll)="tabScroll.emit($event)"
+                class="k-icon-button k-button k-button-flat k-button-flat-base"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
                         'k-button-md': size === 'medium' || !size,
                         'k-button-lg': size === 'large'
                     }"
-                    (onClick)="onScrollButtonClick($event)"></span>
-            </div>
+              (onClick)="onScrollButtonClick($event)"></span>
+            }
+          </div>
         </ng-template>
         <ng-template #content>
-            <ng-template ngFor let-tab [ngForOf]="tabs" let-i="index">
-                <div
-                    [@state]="tab.selected && animate ? 'active' : 'inactive'"
-                    *ngIf="tab.selected || keepTabContent"
-                    [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
-                    [tabIndex]="0"
-                    role="tabpanel"
-                    [id]="getTabPanelId(i)"
-                    [attr.aria-hidden]="!tab.selected"
-                    [attr.aria-labelledby]="getTabId(i)"
-                    [attr.aria-disabled]="tab.disabled"
+          @for (tab of tabs; track tab; let i = $index) {
+            @if (tab.selected || keepTabContent) {
+              <div
+                [@state]="tab.selected && animate ? 'active' : 'inactive'"
+                [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
+                [tabIndex]="0"
+                role="tabpanel"
+                [id]="getTabPanelId(i)"
+                [attr.aria-hidden]="!tab.selected"
+                [attr.aria-labelledby]="getTabId(i)"
+                [attr.aria-disabled]="tab.disabled"
                 >
-                    <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
-                    </ng-template>
-                </div>
-            </ng-template>
+                <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
+                </ng-template>
+              </div>
+            }
+          }
         </ng-template>
-        <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `,
+        @if (isScrollable) {
+          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
+        }
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `,
                     standalone: true,
-                    imports: [LocalizedTabStripMessagesDirective, NgIf, NgTemplateOutlet, NgClass, TabStripScrollableButtonComponent, NgFor, TabComponent, NgStyle, ResizeSensorComponent, WatermarkOverlayComponent]
+                    imports: [LocalizedTabStripMessagesDirective, NgTemplateOutlet, NgClass, TabStripScrollableButtonComponent, TabComponent, NgStyle, ResizeSensorComponent, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TabStripService }, { type: ScrollService }, { type: i0.NgZone }], propDecorators: { height: [{
                 type: Input
@@ -5438,8 +5525,9 @@ class DrawerItemComponent {
         return this.viewItem.item;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerItemComponent, deps: [{ token: DrawerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DrawerItemComponent, isStandalone: true, selector: "[kendoDrawerItem]", inputs: { viewItem: "viewItem", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
-        <ng-template *ngIf="itemTemplate; else defaultTemplate"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerItemComponent, isStandalone: true, selector: "[kendoDrawerItem]", inputs: { viewItem: "viewItem", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
+        @if (itemTemplate) {
+          <ng-template
             [ngTemplateOutlet]="itemTemplate"
             [ngTemplateOutletContext]="{
                 $implicit: item,
@@ -5447,41 +5535,45 @@ class DrawerItemComponent {
                 hasChildren: viewItem.hasChildren,
                 level: viewItem.level
             }">
-        </ng-template>
-
-        <ng-template #defaultTemplate>
-            <ng-container *ngIf="expanded">
-                <kendo-icon-wrapper
-                    *ngIf="item.icon || item.iconClass || item.svgIcon"
-                    [name]="iconClasses"
-                    [customFontClass]="customIconClasses"
-                    [svgIcon]="item.svgIcon"
-                    [innerCssClass]="innerCssClasses"
+          </ng-template>
+        } @else {
+          @if (expanded) {
+            @if (item.icon || item.iconClass || item.svgIcon) {
+              <kendo-icon-wrapper
+                [name]="iconClasses"
+                [customFontClass]="customIconClasses"
+                [svgIcon]="item.svgIcon"
+                [innerCssClass]="innerCssClasses"
                 >
-                </kendo-icon-wrapper>
-
-                <span class="k-item-text">{{ item.text }}</span>
-                <span *ngIf="viewItem.hasChildren" class="k-spacer"></span>
-                <kendo-icon-wrapper
-                    *ngIf="viewItem.hasChildren"
-                    [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
-                    innerCssClass="k-drawer-toggle"
-                    [svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
+              </kendo-icon-wrapper>
+            }
+            <span class="k-item-text">{{ item.text }}</span>
+            @if (viewItem.hasChildren) {
+              <span class="k-spacer"></span>
+            }
+            @if (viewItem.hasChildren) {
+              <kendo-icon-wrapper
+                [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
+                innerCssClass="k-drawer-toggle"
+                [svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
                 >
-                </kendo-icon-wrapper>
-            </ng-container>
-            <ng-container *ngIf="mini && !expanded">
-                <kendo-icon-wrapper
-                    *ngIf="item.icon || item.iconClass || item.svgIcon"
-                    [name]="iconClasses"
-                    [customFontClass]="customIconClasses"
-                    [svgIcon]="item.svgIcon"
-                    [innerCssClass]="innerCssClasses"
+              </kendo-icon-wrapper>
+            }
+          }
+          @if (mini && !expanded) {
+            @if (item.icon || item.iconClass || item.svgIcon) {
+              <kendo-icon-wrapper
+                [name]="iconClasses"
+                [customFontClass]="customIconClasses"
+                [svgIcon]="item.svgIcon"
+                [innerCssClass]="innerCssClasses"
                 >
-                </kendo-icon-wrapper>
-            </ng-container>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+              </kendo-icon-wrapper>
+            }
+          }
+        }
+        
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: DrawerItemComponent, decorators: [{
             type: Component,
@@ -5489,7 +5581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoDrawerItem]',
                     template: `
-        <ng-template *ngIf="itemTemplate; else defaultTemplate"
+        @if (itemTemplate) {
+          <ng-template
             [ngTemplateOutlet]="itemTemplate"
             [ngTemplateOutletContext]="{
                 $implicit: item,
@@ -5497,43 +5590,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 hasChildren: viewItem.hasChildren,
                 level: viewItem.level
             }">
-        </ng-template>
-
-        <ng-template #defaultTemplate>
-            <ng-container *ngIf="expanded">
-                <kendo-icon-wrapper
-                    *ngIf="item.icon || item.iconClass || item.svgIcon"
-                    [name]="iconClasses"
-                    [customFontClass]="customIconClasses"
-                    [svgIcon]="item.svgIcon"
-                    [innerCssClass]="innerCssClasses"
+          </ng-template>
+        } @else {
+          @if (expanded) {
+            @if (item.icon || item.iconClass || item.svgIcon) {
+              <kendo-icon-wrapper
+                [name]="iconClasses"
+                [customFontClass]="customIconClasses"
+                [svgIcon]="item.svgIcon"
+                [innerCssClass]="innerCssClasses"
                 >
-                </kendo-icon-wrapper>
-
-                <span class="k-item-text">{{ item.text }}</span>
-                <span *ngIf="viewItem.hasChildren" class="k-spacer"></span>
-                <kendo-icon-wrapper
-                    *ngIf="viewItem.hasChildren"
-                    [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
-                    innerCssClass="k-drawer-toggle"
-                    [svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
+              </kendo-icon-wrapper>
+            }
+            <span class="k-item-text">{{ item.text }}</span>
+            @if (viewItem.hasChildren) {
+              <span class="k-spacer"></span>
+            }
+            @if (viewItem.hasChildren) {
+              <kendo-icon-wrapper
+                [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
+                innerCssClass="k-drawer-toggle"
+                [svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
                 >
-                </kendo-icon-wrapper>
-            </ng-container>
-            <ng-container *ngIf="mini && !expanded">
-                <kendo-icon-wrapper
-                    *ngIf="item.icon || item.iconClass || item.svgIcon"
-                    [name]="iconClasses"
-                    [customFontClass]="customIconClasses"
-                    [svgIcon]="item.svgIcon"
-                    [innerCssClass]="innerCssClasses"
+              </kendo-icon-wrapper>
+            }
+          }
+          @if (mini && !expanded) {
+            @if (item.icon || item.iconClass || item.svgIcon) {
+              <kendo-icon-wrapper
+                [name]="iconClasses"
+                [customFontClass]="customIconClasses"
+                [svgIcon]="item.svgIcon"
+                [innerCssClass]="innerCssClasses"
                 >
-                </kendo-icon-wrapper>
-            </ng-container>
-        </ng-template>
-    `,
+              </kendo-icon-wrapper>
+            }
+          }
+        }
+        
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
+                    imports: [NgTemplateOutlet, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: DrawerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { viewItem: [{
                 type: Input
@@ -5606,7 +5703,7 @@ class DrawerListComponent {
             const nativeElement = this.element.nativeElement;
             this.subscriptions.add(this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this)));
             this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', (e) => {
-                const code = normalizeNumpadKeys(e);
+                const code = normalizeKeys(e);
                 const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
                 const isArrowUpOrDown = code === Keys.ArrowUp || code === Keys.ArrowDown;
                 if (isEnterOrSpace) {
@@ -5665,7 +5762,7 @@ class DrawerListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerListComponent, deps: [{ token: DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DrawerListComponent, isStandalone: true, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                role=\"menuitem\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                role=\"separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerListComponent, isStandalone: true, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        @for (v of view; track identifyItem(idx, v); let idx = $index) {\n          @if (!v.item.separator) {\n            <li kendoDrawerItem\n              class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n              role=\"menuitem\"\n              [viewItem]=\"v\"\n              [index]=\"idx\"\n              [mini]=\"mini\"\n              [expanded]=\"expanded\"\n              [itemTemplate]=\"itemTemplate\"\n              [attr.data-kendo-drawer-index]=\"v.index\"\n              [ngClass]=\"v.item.cssClass\"\n              [ngStyle]=\"v.item.cssStyle\"\n              [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n            </li>\n          }\n          @if (v.item.separator) {\n            <li\n              role=\"separator\"\n              class=\"k-drawer-item k-drawer-separator\"\n              [ngClass]=\"v.item.cssClass\"\n              [ngStyle]=\"v.item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerListComponent, decorators: [{
             type: Component,
@@ -5673,32 +5770,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoDrawerList]',
                     template: `
-        <ng-container *ngFor="let v of view; trackBy:identifyItem; let idx = index">
-            <li *ngIf="!v.item.separator" kendoDrawerItem
-                class="k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}"
-                role="menuitem"
-                [viewItem]="v"
-                [index]="idx"
-                [mini]="mini"
-                [expanded]="expanded"
-                [itemTemplate]="itemTemplate"
-                [attr.${DRAWER_ITEM_INDEX}]="v.index"
-                [ngClass]="v.item.cssClass"
-                [ngStyle]="v.item.cssStyle"
-                [tabindex]="v.index === 0 ? '0' : '-1'">
+        @for (v of view; track identifyItem(idx, v); let idx = $index) {
+          @if (!v.item.separator) {
+            <li kendoDrawerItem
+              class="k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}"
+              role="menuitem"
+              [viewItem]="v"
+              [index]="idx"
+              [mini]="mini"
+              [expanded]="expanded"
+              [itemTemplate]="itemTemplate"
+              [attr.${DRAWER_ITEM_INDEX}]="v.index"
+              [ngClass]="v.item.cssClass"
+              [ngStyle]="v.item.cssStyle"
+              [tabindex]="v.index === 0 ? '0' : '-1'">
             </li>
-
-            <li *ngIf="v.item.separator"
-                role="separator"
-                class="k-drawer-item k-drawer-separator"
-                [ngClass]="v.item.cssClass"
-                [ngStyle]="v.item.cssStyle">
-                &nbsp;
+          }
+          @if (v.item.separator) {
+            <li
+              role="separator"
+              class="k-drawer-item k-drawer-separator"
+              [ngClass]="v.item.cssClass"
+              [ngStyle]="v.item.cssStyle">
+              &nbsp;
             </li>
-        </ng-container>
-    `,
+          }
+        }
+        `,
                     standalone: true,
-                    imports: [NgFor, NgIf, DrawerItemComponent, NgClass, NgStyle]
+                    imports: [DrawerItemComponent, NgClass, NgStyle]
                 }]
         }], ctorParameters: () => [{ type: DrawerService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { itemTemplate: [{
                 type: Input
@@ -6008,7 +6108,7 @@ class DrawerComponent {
         return player;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AnimationBuilder }, { token: i1.LocalizationService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             DrawerService,
             {
@@ -6016,35 +6116,42 @@ class DrawerComponent {
                 useValue: 'kendo.drawer'
             }
         ], queries: [{ propertyName: "drawerTemplate", first: true, predicate: DrawerTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: DrawerHeaderTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: DrawerItemTemplateDirective, descendants: true }], exportAs: ["kendoDrawer"], usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-drawer-wrapper" *ngIf="expanded || mini" [style.width.px]="drawerWidth">
-            <ng-container *ngIf="!drawerTemplate">
-                <ng-template *ngIf="headerTemplate"
-                    [ngTemplateOutlet]="headerTemplate?.templateRef">
+        @if (expanded || mini) {
+          <div class="k-drawer-wrapper" [style.width.px]="drawerWidth">
+            @if (!drawerTemplate) {
+              @if (headerTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="headerTemplate?.templateRef">
                 </ng-template>
-
-                <ul kendoDrawerList
-                    role="menubar"
-                    aria-orientation="vertical"
-                    (select)="onSelect($event)"
-                    [mini]="mini"
-                    [expanded]="expanded"
-                    [view]="viewItems"
-                    [itemTemplate]="itemTemplate?.templateRef"
-                    class="k-drawer-items">
-                </ul>
-
-                <ng-template *ngIf="footerTemplate"
-                    [ngTemplateOutlet]="footerTemplate?.templateRef">
+              }
+              <ul kendoDrawerList
+                role="menubar"
+                aria-orientation="vertical"
+                (select)="onSelect($event)"
+                [mini]="mini"
+                [expanded]="expanded"
+                [view]="viewItems"
+                [itemTemplate]="itemTemplate?.templateRef"
+                class="k-drawer-items">
+              </ul>
+              @if (footerTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="footerTemplate?.templateRef">
                 </ng-template>
-            </ng-container>
-
-            <ng-template *ngIf="drawerTemplate"
+              }
+            }
+            @if (drawerTemplate) {
+              <ng-template
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
-            </ng-template>
-        </div>
-
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+              </ng-template>
+            }
+          </div>
+        }
+        
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
@@ -6060,37 +6167,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     selector: 'kendo-drawer',
                     template: `
-        <div class="k-drawer-wrapper" *ngIf="expanded || mini" [style.width.px]="drawerWidth">
-            <ng-container *ngIf="!drawerTemplate">
-                <ng-template *ngIf="headerTemplate"
-                    [ngTemplateOutlet]="headerTemplate?.templateRef">
+        @if (expanded || mini) {
+          <div class="k-drawer-wrapper" [style.width.px]="drawerWidth">
+            @if (!drawerTemplate) {
+              @if (headerTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="headerTemplate?.templateRef">
                 </ng-template>
-
-                <ul kendoDrawerList
-                    role="menubar"
-                    aria-orientation="vertical"
-                    (select)="onSelect($event)"
-                    [mini]="mini"
-                    [expanded]="expanded"
-                    [view]="viewItems"
-                    [itemTemplate]="itemTemplate?.templateRef"
-                    class="k-drawer-items">
-                </ul>
-
-                <ng-template *ngIf="footerTemplate"
-                    [ngTemplateOutlet]="footerTemplate?.templateRef">
+              }
+              <ul kendoDrawerList
+                role="menubar"
+                aria-orientation="vertical"
+                (select)="onSelect($event)"
+                [mini]="mini"
+                [expanded]="expanded"
+                [view]="viewItems"
+                [itemTemplate]="itemTemplate?.templateRef"
+                class="k-drawer-items">
+              </ul>
+              @if (footerTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="footerTemplate?.templateRef">
                 </ng-template>
-            </ng-container>
-
-            <ng-template *ngIf="drawerTemplate"
+              }
+            }
+            @if (drawerTemplate) {
+              <ng-template
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
-            </ng-template>
-        </div>
-
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `,
+              </ng-template>
+            }
+          </div>
+        }
+        
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent]
+                    imports: [NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.AnimationBuilder }, { type: i1.LocalizationService }, { type: DrawerService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -6223,16 +6337,18 @@ class DrawerContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerContainerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DrawerContainerComponent, isStandalone: true, selector: "kendo-drawer-container", host: { properties: { "class.k-drawer-container": "this.hostClass", "class.k-drawer-overlay": "this.overlayClass", "class.k-drawer-mini": "this.miniClass", "class.k-drawer-push": "this.pushClass", "class.k-drawer-expanded": "this.isExpandedClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerContainerComponent, isStandalone: true, selector: "kendo-drawer-container", host: { properties: { "class.k-drawer-container": "this.hostClass", "class.k-drawer-overlay": "this.overlayClass", "class.k-drawer-mini": "this.miniClass", "class.k-drawer-push": "this.pushClass", "class.k-drawer-expanded": "this.isExpandedClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.drawer.container'
             }
         ], queries: [{ propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], ngImport: i0, template: `
-        <div class="k-overlay" *ngIf="overlay" (click)="closeDrawer()"></div>
+        @if (overlay) {
+          <div class="k-overlay" (click)="closeDrawer()"></div>
+        }
         <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component,
@@ -6246,11 +6362,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-        <div class="k-overlay" *ngIf="overlay" (click)="closeDrawer()"></div>
+        @if (overlay) {
+          <div class="k-overlay" (click)="closeDrawer()"></div>
+        }
         <ng-content></ng-content>
-    `,
-                    standalone: true,
-                    imports: [NgIf]
+        `,
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -6528,7 +6645,7 @@ class StepperService {
     keydown(e) {
         const current = this.focusedStep || this.currentStep;
         // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
-        const code = normalizeNumpadKeys(e);
+        const code = normalizeKeys(e);
         const handler = this.handlers[code];
         if (!isPresent(current)) {
             return;
@@ -6807,65 +6924,80 @@ class StepperStepComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperStepComponent, deps: [{ token: StepperService }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepperStepComponent, isStandalone: true, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperStepComponent, isStandalone: true, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <a href='#' class='k-step-link' #stepLink
-            [attr.tabindex]='tabIndexAttr'
-            [attr.title]='step.label'
-            [attr.aria-disabled]='step.disabled'
-            [attr.aria-current]='index === current ? "step" : null'
-            (focus)='onFocus()'
-        >
-            <ng-template *ngIf='stepTemplate'
-                [ngTemplateOutlet]='stepTemplate'
-                [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
+          [attr.tabindex]='tabIndexAttr'
+          [attr.title]='step.label'
+          [attr.aria-disabled]='step.disabled'
+          [attr.aria-current]='index === current ? "step" : null'
+          (focus)='onFocus()'
+          >
+          @if (stepTemplate) {
+            <ng-template
+              [ngTemplateOutlet]='stepTemplate'
+              [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
             </ng-template>
-
-            <ng-container *ngIf='!stepTemplate'>
-                <span *ngIf='showIndicator'
-                    class='k-step-indicator'
-                    aria-hidden='true'
-                    [style.transition-duration.ms]='transitionDuration'
+          }
+        
+          @if (!stepTemplate) {
+            @if (showIndicator) {
+              <span
+                class='k-step-indicator'
+                aria-hidden='true'
+                [style.transition-duration.ms]='transitionDuration'
                 >
-                    <ng-template *ngIf='indicatorTemplate'
-                        [ngTemplateOutlet]='indicatorTemplate'
-                        [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
-                    </ng-template>
-
-                    <ng-container *ngIf='!indicatorTemplate'>
-                        <kendo-icon-wrapper
-                            *ngIf='showIndicatorIcon'
-                            [name]='indicatorIconClass'
-                            [customFontClass]='customIndicatorIconClass'
-                            [svgIcon]='SVGIndicatorIcon'
-                            innerCssClass='k-step-indicator-icon'
-                        >
-                        </kendo-icon-wrapper>
-                        <span class='k-step-indicator-text' *ngIf='!showIndicatorIcon'>{{ indicatorText }}</span>
-                    </ng-container>
-                </span>
-
-                <span class='k-step-label' *ngIf='showLabel'>
-                    <ng-template *ngIf='labelTemplate'
-                        [ngTemplateOutlet]='labelTemplate'
-                        [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
-                    </ng-template>
-
-                    <ng-container *ngIf='!labelTemplate'>
-                        <span class='k-step-text' *ngIf='showLabelText'>{{ step.label }}</span>
-                        <kendo-icon-wrapper
-                            *ngIf='showLabelIcon'
-                            aria-hidden='true'
-                            [name]='validationIconClasses'
-                            [customFontClass]='customValidationIconClasses'
-                            [svgIcon]='validationSVGIcon'
-                        >
-                        </kendo-icon-wrapper>
-                        <span class='k-step-label-optional' *ngIf='step.optional'>({{optionalText}})</span>
-                    </ng-container>
-                </span>
-            </ng-container>
+                @if (indicatorTemplate) {
+                  <ng-template
+                    [ngTemplateOutlet]='indicatorTemplate'
+                    [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
+                  </ng-template>
+                }
+                @if (!indicatorTemplate) {
+                  @if (showIndicatorIcon) {
+                    <kendo-icon-wrapper
+                      [name]='indicatorIconClass'
+                      [customFontClass]='customIndicatorIconClass'
+                      [svgIcon]='SVGIndicatorIcon'
+                      innerCssClass='k-step-indicator-icon'
+                      >
+                    </kendo-icon-wrapper>
+                  }
+                  @if (!showIndicatorIcon) {
+                    <span class='k-step-indicator-text'>{{ indicatorText }}</span>
+                  }
+                }
+              </span>
+            }
+            @if (showLabel) {
+              <span class='k-step-label'>
+                @if (labelTemplate) {
+                  <ng-template
+                    [ngTemplateOutlet]='labelTemplate'
+                    [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
+                  </ng-template>
+                }
+                @if (!labelTemplate) {
+                  @if (showLabelText) {
+                    <span class='k-step-text'>{{ step.label }}</span>
+                  }
+                  @if (showLabelIcon) {
+                    <kendo-icon-wrapper
+                      aria-hidden='true'
+                      [name]='validationIconClasses'
+                      [customFontClass]='customValidationIconClasses'
+                      [svgIcon]='validationSVGIcon'
+                      >
+                    </kendo-icon-wrapper>
+                  }
+                  @if (step.optional) {
+                    <span class='k-step-label-optional'>({{optionalText}})</span>
+                  }
+                }
+              </span>
+            }
+          }
         </a>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: StepperStepComponent, decorators: [{
             type: Component,
@@ -6874,65 +7006,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoStepperStep]',
                     template: `
         <a href='#' class='k-step-link' #stepLink
-            [attr.tabindex]='tabIndexAttr'
-            [attr.title]='step.label'
-            [attr.aria-disabled]='step.disabled'
-            [attr.aria-current]='index === current ? "step" : null'
-            (focus)='onFocus()'
-        >
-            <ng-template *ngIf='stepTemplate'
-                [ngTemplateOutlet]='stepTemplate'
-                [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
+          [attr.tabindex]='tabIndexAttr'
+          [attr.title]='step.label'
+          [attr.aria-disabled]='step.disabled'
+          [attr.aria-current]='index === current ? "step" : null'
+          (focus)='onFocus()'
+          >
+          @if (stepTemplate) {
+            <ng-template
+              [ngTemplateOutlet]='stepTemplate'
+              [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
             </ng-template>
-
-            <ng-container *ngIf='!stepTemplate'>
-                <span *ngIf='showIndicator'
-                    class='k-step-indicator'
-                    aria-hidden='true'
-                    [style.transition-duration.ms]='transitionDuration'
+          }
+        
+          @if (!stepTemplate) {
+            @if (showIndicator) {
+              <span
+                class='k-step-indicator'
+                aria-hidden='true'
+                [style.transition-duration.ms]='transitionDuration'
                 >
-                    <ng-template *ngIf='indicatorTemplate'
-                        [ngTemplateOutlet]='indicatorTemplate'
-                        [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
-                    </ng-template>
-
-                    <ng-container *ngIf='!indicatorTemplate'>
-                        <kendo-icon-wrapper
-                            *ngIf='showIndicatorIcon'
-                            [name]='indicatorIconClass'
-                            [customFontClass]='customIndicatorIconClass'
-                            [svgIcon]='SVGIndicatorIcon'
-                            innerCssClass='k-step-indicator-icon'
-                        >
-                        </kendo-icon-wrapper>
-                        <span class='k-step-indicator-text' *ngIf='!showIndicatorIcon'>{{ indicatorText }}</span>
-                    </ng-container>
-                </span>
-
-                <span class='k-step-label' *ngIf='showLabel'>
-                    <ng-template *ngIf='labelTemplate'
-                        [ngTemplateOutlet]='labelTemplate'
-                        [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
-                    </ng-template>
-
-                    <ng-container *ngIf='!labelTemplate'>
-                        <span class='k-step-text' *ngIf='showLabelText'>{{ step.label }}</span>
-                        <kendo-icon-wrapper
-                            *ngIf='showLabelIcon'
-                            aria-hidden='true'
-                            [name]='validationIconClasses'
-                            [customFontClass]='customValidationIconClasses'
-                            [svgIcon]='validationSVGIcon'
-                        >
-                        </kendo-icon-wrapper>
-                        <span class='k-step-label-optional' *ngIf='step.optional'>({{optionalText}})</span>
-                    </ng-container>
-                </span>
-            </ng-container>
+                @if (indicatorTemplate) {
+                  <ng-template
+                    [ngTemplateOutlet]='indicatorTemplate'
+                    [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
+                  </ng-template>
+                }
+                @if (!indicatorTemplate) {
+                  @if (showIndicatorIcon) {
+                    <kendo-icon-wrapper
+                      [name]='indicatorIconClass'
+                      [customFontClass]='customIndicatorIconClass'
+                      [svgIcon]='SVGIndicatorIcon'
+                      innerCssClass='k-step-indicator-icon'
+                      >
+                    </kendo-icon-wrapper>
+                  }
+                  @if (!showIndicatorIcon) {
+                    <span class='k-step-indicator-text'>{{ indicatorText }}</span>
+                  }
+                }
+              </span>
+            }
+            @if (showLabel) {
+              <span class='k-step-label'>
+                @if (labelTemplate) {
+                  <ng-template
+                    [ngTemplateOutlet]='labelTemplate'
+                    [ngTemplateOutletContext]='{ $implicit: step, index: index }'>
+                  </ng-template>
+                }
+                @if (!labelTemplate) {
+                  @if (showLabelText) {
+                    <span class='k-step-text'>{{ step.label }}</span>
+                  }
+                  @if (showLabelIcon) {
+                    <kendo-icon-wrapper
+                      aria-hidden='true'
+                      [name]='validationIconClasses'
+                      [customFontClass]='customValidationIconClasses'
+                      [svgIcon]='validationSVGIcon'
+                      >
+                    </kendo-icon-wrapper>
+                  }
+                  @if (step.optional) {
+                    <span class='k-step-label-optional'>({{optionalText}})</span>
+                  }
+                }
+              </span>
+            }
+          }
         </a>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
+                    imports: [NgTemplateOutlet, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: StepperService }, { type: i1.LocalizationService }, { type: i0.NgZone }], propDecorators: { step: [{
                 type: Input
@@ -7068,7 +7215,7 @@ class StepperListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepperListComponent, isStandalone: true, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [successSVGIcon]='successSVGIcon'\n                [errorIcon]='errorIcon'\n                [errorSVGIcon]='errorSVGIcon'\n                [svgIcon]='svgIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-disabled]='step.disabled'\n                [class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperListComponent, isStandalone: true, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        @for (step of steps; track step; let idx = $index) {\n          <li kendoStepperStep\n            [attr.data-kendo-stepper-index]='idx'\n            [type]='stepType'\n            [step]='step'\n            [index]='idx'\n            [current]='currentStep'\n            [successIcon]='successIcon'\n            [successSVGIcon]='successSVGIcon'\n            [errorIcon]='errorIcon'\n            [errorSVGIcon]='errorSVGIcon'\n            [svgIcon]='svgIcon'\n            [indicatorTemplate]='indicatorTemplate'\n            [labelTemplate]='labelTemplate'\n            [stepTemplate]='stepTemplate'\n            class='k-step'\n            [class.k-step-first]='idx === 0'\n            [class.k-step-last]='idx === steps.length - 1'\n            [class.k-step-done]='idx < currentStep'\n            [class.k-step-current]='idx === currentStep'\n            [class.k-step-optional]='step.optional'\n            [class.k-disabled]='step.disabled'\n            [class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'\n            [ngClass]='step.cssClass'\n            [ngStyle]='step.cssStyle'\n            [style.max-width.%] = 'maxStepWidth'\n            [style.max-height.%] = 'maxStepHeight'\n            >\n          </li>\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperListComponent, decorators: [{
             type: Component,
@@ -7076,39 +7223,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoStepperList]',
                     template: `
-        <ng-container *ngFor='let step of steps; let idx = index'>
-            <li kendoStepperStep
-                [attr.${STEPPER_STEP_INDEX}]='idx'
-                [type]='stepType'
-                [step]='step'
-                [index]='idx'
-                [current]='currentStep'
-                [successIcon]='successIcon'
-                [successSVGIcon]='successSVGIcon'
-                [errorIcon]='errorIcon'
-                [errorSVGIcon]='errorSVGIcon'
-                [svgIcon]='svgIcon'
-                [indicatorTemplate]='indicatorTemplate'
-                [labelTemplate]='labelTemplate'
-                [stepTemplate]='stepTemplate'
-                class='k-step'
-                [class.k-step-first]='idx === 0'
-                [class.k-step-last]='idx === steps.length - 1'
-                [class.k-step-done]='idx < currentStep'
-                [class.k-step-current]='idx === currentStep'
-                [class.k-step-optional]='step.optional'
-                [class.k-disabled]='step.disabled'
-                [class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'
-                [ngClass]='step.cssClass'
-                [ngStyle]='step.cssStyle'
-                [style.max-width.%] = 'maxStepWidth'
-                [style.max-height.%] = 'maxStepHeight'
+        @for (step of steps; track step; let idx = $index) {
+          <li kendoStepperStep
+            [attr.${STEPPER_STEP_INDEX}]='idx'
+            [type]='stepType'
+            [step]='step'
+            [index]='idx'
+            [current]='currentStep'
+            [successIcon]='successIcon'
+            [successSVGIcon]='successSVGIcon'
+            [errorIcon]='errorIcon'
+            [errorSVGIcon]='errorSVGIcon'
+            [svgIcon]='svgIcon'
+            [indicatorTemplate]='indicatorTemplate'
+            [labelTemplate]='labelTemplate'
+            [stepTemplate]='stepTemplate'
+            class='k-step'
+            [class.k-step-first]='idx === 0'
+            [class.k-step-last]='idx === steps.length - 1'
+            [class.k-step-done]='idx < currentStep'
+            [class.k-step-current]='idx === currentStep'
+            [class.k-step-optional]='step.optional'
+            [class.k-disabled]='step.disabled'
+            [class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'
+            [ngClass]='step.cssClass'
+            [ngStyle]='step.cssStyle'
+            [style.max-width.%] = 'maxStepWidth'
+            [style.max-height.%] = 'maxStepHeight'
             >
-            </li>
-        </ng-container>
-    `,
+          </li>
+        }
+        `,
                     standalone: true,
-                    imports: [NgFor, StepperStepComponent, NgClass, NgStyle]
+                    imports: [StepperStepComponent, NgClass, NgStyle]
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: StepperService }, { type: i0.ElementRef }], propDecorators: { linear: [{
                 type: Input
@@ -7444,7 +7591,7 @@ class StepperComponent {
         return this.orientation === 'horizontal';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: StepperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", svgIcon: "svgIcon", successSVGIcon: "successSVGIcon", errorSVGIcon: "errorSVGIcon", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", svgIcon: "svgIcon", successSVGIcon: "successSVGIcon", errorSVGIcon: "errorSVGIcon", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
             LocalizationService,
             StepperService,
             {
@@ -7453,33 +7600,34 @@ class StepperComponent {
             }
         ], queries: [{ propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true }, { propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true }], exportAs: ["kendoStepper"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoStepperLocalizedMessages
-            i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
-            optional="Optional"
-         >
+          i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
+          optional="Optional"
+          >
         </ng-container>
         <ol kendoStepperList
-            [stepType]='stepType'
-            [linear]='linear'
-            [orientation]='orientation'
-            [steps]='steps'
-            [currentStep]='currentStep'
-            [successIcon]='successIcon'
-            [successSVGIcon]='successSVGIcon'
-            [errorIcon]='errorIcon'
-            [errorSVGIcon]='errorSVGIcon'
-            [svgIcon]="svgIcon"
-            [indicatorTemplate]='indicatorTemplate?.templateRef'
-            [labelTemplate]='labelTemplate?.templateRef'
-            [stepTemplate]='stepTemplate?.templateRef'
-            class='k-step-list'
-            [class.k-step-list-horizontal]='isHorizontal'
-            [class.k-step-list-vertical]='!isHorizontal'
-            [ngStyle]='stepsListStyling'
-            (listKeydown)="onListKeydown($event)"
-            (listClick)="onListClick($event)">
+          [stepType]='stepType'
+          [linear]='linear'
+          [orientation]='orientation'
+          [steps]='steps'
+          [currentStep]='currentStep'
+          [successIcon]='successIcon'
+          [successSVGIcon]='successSVGIcon'
+          [errorIcon]='errorIcon'
+          [errorSVGIcon]='errorSVGIcon'
+          [svgIcon]="svgIcon"
+          [indicatorTemplate]='indicatorTemplate?.templateRef'
+          [labelTemplate]='labelTemplate?.templateRef'
+          [stepTemplate]='stepTemplate?.templateRef'
+          class='k-step-list'
+          [class.k-step-list-horizontal]='isHorizontal'
+          [class.k-step-list-vertical]='!isHorizontal'
+          [ngStyle]='stepsListStyling'
+          (listKeydown)="onListKeydown($event)"
+          (listClick)="onListClick($event)">
         </ol>
-
-        <kendo-progressbar *ngIf='steps.length > 0'
+        
+        @if (steps.length > 0) {
+          <kendo-progressbar
             [attr.aria-hidden]='true'
             [animation]='progressAnimation'
             [max]='steps.length - 1'
@@ -7488,8 +7636,9 @@ class StepperComponent {
             [reverse]='!isHorizontal'
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
-        </kendo-progressbar>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }] });
+          </kendo-progressbar>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -7506,33 +7655,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-stepper',
                     template: `
         <ng-container kendoStepperLocalizedMessages
-            i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
-            optional="Optional"
-         >
+          i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
+          optional="Optional"
+          >
         </ng-container>
         <ol kendoStepperList
-            [stepType]='stepType'
-            [linear]='linear'
-            [orientation]='orientation'
-            [steps]='steps'
-            [currentStep]='currentStep'
-            [successIcon]='successIcon'
-            [successSVGIcon]='successSVGIcon'
-            [errorIcon]='errorIcon'
-            [errorSVGIcon]='errorSVGIcon'
-            [svgIcon]="svgIcon"
-            [indicatorTemplate]='indicatorTemplate?.templateRef'
-            [labelTemplate]='labelTemplate?.templateRef'
-            [stepTemplate]='stepTemplate?.templateRef'
-            class='k-step-list'
-            [class.k-step-list-horizontal]='isHorizontal'
-            [class.k-step-list-vertical]='!isHorizontal'
-            [ngStyle]='stepsListStyling'
-            (listKeydown)="onListKeydown($event)"
-            (listClick)="onListClick($event)">
+          [stepType]='stepType'
+          [linear]='linear'
+          [orientation]='orientation'
+          [steps]='steps'
+          [currentStep]='currentStep'
+          [successIcon]='successIcon'
+          [successSVGIcon]='successSVGIcon'
+          [errorIcon]='errorIcon'
+          [errorSVGIcon]='errorSVGIcon'
+          [svgIcon]="svgIcon"
+          [indicatorTemplate]='indicatorTemplate?.templateRef'
+          [labelTemplate]='labelTemplate?.templateRef'
+          [stepTemplate]='stepTemplate?.templateRef'
+          class='k-step-list'
+          [class.k-step-list-horizontal]='isHorizontal'
+          [class.k-step-list-vertical]='!isHorizontal'
+          [ngStyle]='stepsListStyling'
+          (listKeydown)="onListKeydown($event)"
+          (listClick)="onListClick($event)">
         </ol>
-
-        <kendo-progressbar *ngIf='steps.length > 0'
+        
+        @if (steps.length > 0) {
+          <kendo-progressbar
             [attr.aria-hidden]='true'
             [animation]='progressAnimation'
             [max]='steps.length - 1'
@@ -7541,10 +7691,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [reverse]='!isHorizontal'
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
-        </kendo-progressbar>
-    `,
+          </kendo-progressbar>
+        }
+        `,
                     standalone: true,
-                    imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle, NgIf, ProgressBarComponent]
+                    imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle, ProgressBarComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: StepperService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -7983,7 +8134,7 @@ class AvatarComponent {
         return this.localization.get(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -7991,35 +8142,37 @@ class AvatarComponent {
             }
         ], ngImport: i0, template: `
         <ng-container kendoAvatarLocalizedMessages
-            i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
-            avatarAlt="Avatar"
-        >
-        </ng-container>
-
-        <ng-content *ngIf="customAvatar"></ng-content>
-
-        <ng-container *ngIf="imageSrc">
-            <span class="k-avatar-image">
-                <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
-            </span>
-        </ng-container>
-
-        <ng-container *ngIf="initials">
-            <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
+          i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
+          avatarAlt="Avatar"
+          >
         </ng-container>
-
-        <ng-container *ngIf="icon || iconClass || svgIcon">
-            <span class="k-avatar-icon">
-                <kendo-icon-wrapper
-                    [ngStyle]="cssStyle"
-                    [name]="icon"
-                    [customFontClass]="iconClass"
-                    [svgIcon]="svgIcon"
-                >
-                </kendo-icon-wrapper>
-            </span>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
+        
+        @if (customAvatar) {
+          <ng-content></ng-content>
+        }
+        
+        @if (imageSrc) {
+          <span class="k-avatar-image">
+            <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
+          </span>
+        }
+        
+        @if (initials) {
+          <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
+        }
+        
+        @if (icon || iconClass || svgIcon) {
+          <span class="k-avatar-icon">
+            <kendo-icon-wrapper
+              [ngStyle]="cssStyle"
+              [name]="icon"
+              [customFontClass]="iconClass"
+              [svgIcon]="svgIcon"
+              >
+            </kendo-icon-wrapper>
+          </span>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
@@ -8034,37 +8187,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-avatar',
                     template: `
         <ng-container kendoAvatarLocalizedMessages
-            i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
-            avatarAlt="Avatar"
-        >
-        </ng-container>
-
-        <ng-content *ngIf="customAvatar"></ng-content>
-
-        <ng-container *ngIf="imageSrc">
-            <span class="k-avatar-image">
-                <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
-            </span>
+          i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
+          avatarAlt="Avatar"
+          >
         </ng-container>
-
-        <ng-container *ngIf="initials">
-            <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
-        </ng-container>
-
-        <ng-container *ngIf="icon || iconClass || svgIcon">
-            <span class="k-avatar-icon">
-                <kendo-icon-wrapper
-                    [ngStyle]="cssStyle"
-                    [name]="icon"
-                    [customFontClass]="iconClass"
-                    [svgIcon]="svgIcon"
-                >
-                </kendo-icon-wrapper>
-            </span>
-        </ng-container>
-    `,
+        
+        @if (customAvatar) {
+          <ng-content></ng-content>
+        }
+        
+        @if (imageSrc) {
+          <span class="k-avatar-image">
+            <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
+          </span>
+        }
+        
+        @if (initials) {
+          <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
+        }
+        
+        @if (icon || iconClass || svgIcon) {
+          <span class="k-avatar-icon">
+            <kendo-icon-wrapper
+              [ngStyle]="cssStyle"
+              [name]="icon"
+              [customFontClass]="iconClass"
+              [svgIcon]="svgIcon"
+              >
+            </kendo-icon-wrapper>
+          </span>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective]
+                    imports: [NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -8439,57 +8594,67 @@ class CardActionsComponent {
         this.action.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardActionsComponent, isStandalone: true, selector: "kendo-card-actions", inputs: { orientation: "orientation", layout: "layout", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.k-actions": "this.hostClass", "class.k-card-actions": "this.hostClass", "class.k-actions-stretched": "this.stretchedClass", "class.k-actions-start": "this.startClass", "class.k-actions-end": "this.endClass", "class.k-actions-center": "this.centerClass", "class.k-actions-vertical": "this.verticalClass", "class.k-actions-horizontal": "this.horizontalClass" } }, ngImport: i0, template: `
-        <ng-content *ngIf="!actionsArray && !actionsTemplate"></ng-content>
-
-        <ng-container *ngIf="actionsArray">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardActionsComponent, isStandalone: true, selector: "kendo-card-actions", inputs: { orientation: "orientation", layout: "layout", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.k-actions": "this.hostClass", "class.k-card-actions": "this.hostClass", "class.k-actions-stretched": "this.stretchedClass", "class.k-actions-start": "this.startClass", "class.k-actions-end": "this.endClass", "class.k-actions-center": "this.centerClass", "class.k-actions-vertical": "this.verticalClass", "class.k-actions-horizontal": "this.horizontalClass" } }, ngImport: i0, template: `
+        @if (!actionsArray && !actionsTemplate) {
+          <ng-content></ng-content>
+        }
+        
+        @if (actionsArray) {
+          @for (action of actionsArray; track action) {
             <button
-                type="button"
-                class="k-button k-button-md k-rounded-md"
-                [class.k-button-solid]="!action.flat"
-                [class.k-button-flat]="action.flat"
-                [class.k-button-solid-base]="!action.primary && !action.flat"
-                [class.k-button-solid-primary]="action.primary && !action.flat"
-                [class.k-button-flat-base]="!action.primary && action.flat"
-                [class.k-button-flat-primary]="action.primary && action.flat"
-                (click)="onClick(action)"
-                *ngFor="let action of actionsArray"
-            >
-                <span class="k-button-text">{{ action.text }}</span>
+              type="button"
+              class="k-button k-button-md k-rounded-md"
+              [class.k-button-solid]="!action.flat"
+              [class.k-button-flat]="action.flat"
+              [class.k-button-solid-base]="!action.primary && !action.flat"
+              [class.k-button-solid-primary]="action.primary && !action.flat"
+              [class.k-button-flat-base]="!action.primary && action.flat"
+              [class.k-button-flat-primary]="action.primary && action.flat"
+              (click)="onClick(action)"
+              >
+              <span class="k-button-text">{{ action.text }}</span>
             </button>
-        </ng-container>
-
-        <ng-template [ngTemplateOutlet]="actionsTemplate" *ngIf="actionsTemplate"></ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+          }
+        }
+        
+        @if (actionsTemplate) {
+          <ng-template [ngTemplateOutlet]="actionsTemplate"></ng-template>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-card-actions',
                     template: `
-        <ng-content *ngIf="!actionsArray && !actionsTemplate"></ng-content>
-
-        <ng-container *ngIf="actionsArray">
+        @if (!actionsArray && !actionsTemplate) {
+          <ng-content></ng-content>
+        }
+        
+        @if (actionsArray) {
+          @for (action of actionsArray; track action) {
             <button
-                type="button"
-                class="k-button k-button-md k-rounded-md"
-                [class.k-button-solid]="!action.flat"
-                [class.k-button-flat]="action.flat"
-                [class.k-button-solid-base]="!action.primary && !action.flat"
-                [class.k-button-solid-primary]="action.primary && !action.flat"
-                [class.k-button-flat-base]="!action.primary && action.flat"
-                [class.k-button-flat-primary]="action.primary && action.flat"
-                (click)="onClick(action)"
-                *ngFor="let action of actionsArray"
-            >
-                <span class="k-button-text">{{ action.text }}</span>
+              type="button"
+              class="k-button k-button-md k-rounded-md"
+              [class.k-button-solid]="!action.flat"
+              [class.k-button-flat]="action.flat"
+              [class.k-button-solid-base]="!action.primary && !action.flat"
+              [class.k-button-solid-primary]="action.primary && !action.flat"
+              [class.k-button-flat-base]="!action.primary && action.flat"
+              [class.k-button-flat-primary]="action.primary && action.flat"
+              (click)="onClick(action)"
+              >
+              <span class="k-button-text">{{ action.text }}</span>
             </button>
-        </ng-container>
-
-        <ng-template [ngTemplateOutlet]="actionsTemplate" *ngIf="actionsTemplate"></ng-template>
-    `,
+          }
+        }
+        
+        @if (actionsTemplate) {
+          <ng-template [ngTemplateOutlet]="actionsTemplate"></ng-template>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgFor, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -9087,7 +9252,7 @@ class ExpansionPanelComponent {
         this.renderer.removeClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i1$2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExpansionPanelComponent, isStandalone: true, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelComponent, isStandalone: true, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -9095,42 +9260,47 @@ class ExpansionPanelComponent {
             }
         ], queries: [{ propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true, static: true }], exportAs: ["kendoExpansionPanel"], ngImport: i0, template: `
         <div
-            #header
-            [class.k-expander-header]="true"
-            [class.k-disabled]="disabled"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-expanded]="expanded && !disabled"
-            role="button"
-            tabindex="0"
-            [attr.aria-controls]="contentWrapperId"
-            (click)="onHeaderClick($event)"
-        >
-            <ng-container *ngIf="!titleTemplate">
-                <div *ngIf="title" class="k-expander-title">{{ title }}</div>
-                <span class="k-spacer"></span>
-                <div *ngIf="subtitle" class="k-expander-sub-title">
-                    {{ subtitle }}
-                </div>
-            </ng-container>
+          #header
+          [class.k-expander-header]="true"
+          [class.k-disabled]="disabled"
+          [attr.aria-disabled]="disabled"
+          [attr.aria-expanded]="expanded && !disabled"
+          role="button"
+          tabindex="0"
+          [attr.aria-controls]="contentWrapperId"
+          (click)="onHeaderClick($event)"
+          >
+          @if (!titleTemplate) {
+            @if (title) {
+              <div class="k-expander-title">{{ title }}</div>
+            }
+            <span class="k-spacer"></span>
+            @if (subtitle) {
+              <div class="k-expander-sub-title">
+                {{ subtitle }}
+              </div>
+            }
+          }
+          @if (titleTemplate) {
             <ng-template
-                *ngIf="titleTemplate"
-                [ngTemplateOutlet]="titleTemplate?.templateRef">
+              [ngTemplateOutlet]="titleTemplate?.templateRef">
             </ng-template>
-            <span class="k-expander-indicator">
-                <kendo-icon-wrapper
-                    [name]="expanderIndicatorClasses"
-                    [customFontClass]="customExpanderIndicatorClasses"
-                    [svgIcon]="expanderSvgIcon"
-                >
-                </kendo-icon-wrapper>
-            </span>
+          }
+          <span class="k-expander-indicator">
+            <kendo-icon-wrapper
+              [name]="expanderIndicatorClasses"
+              [customFontClass]="customExpanderIndicatorClasses"
+              [svgIcon]="expanderSvgIcon"
+              >
+            </kendo-icon-wrapper>
+          </span>
         </div>
         <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
-            <div class="k-expander-content" [attr.aria-hidden]="!expanded">
-                <ng-content></ng-content>
-            </div>
+          <div class="k-expander-content" [attr.aria-hidden]="!expanded">
+            <ng-content></ng-content>
+          </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: ExpansionPanelComponent, decorators: [{
             type: Component,
@@ -9146,44 +9316,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-expansionpanel',
                     template: `
         <div
-            #header
-            [class.k-expander-header]="true"
-            [class.k-disabled]="disabled"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-expanded]="expanded && !disabled"
-            role="button"
-            tabindex="0"
-            [attr.aria-controls]="contentWrapperId"
-            (click)="onHeaderClick($event)"
-        >
-            <ng-container *ngIf="!titleTemplate">
-                <div *ngIf="title" class="k-expander-title">{{ title }}</div>
-                <span class="k-spacer"></span>
-                <div *ngIf="subtitle" class="k-expander-sub-title">
-                    {{ subtitle }}
-                </div>
-            </ng-container>
+          #header
+          [class.k-expander-header]="true"
+          [class.k-disabled]="disabled"
+          [attr.aria-disabled]="disabled"
+          [attr.aria-expanded]="expanded && !disabled"
+          role="button"
+          tabindex="0"
+          [attr.aria-controls]="contentWrapperId"
+          (click)="onHeaderClick($event)"
+          >
+          @if (!titleTemplate) {
+            @if (title) {
+              <div class="k-expander-title">{{ title }}</div>
+            }
+            <span class="k-spacer"></span>
+            @if (subtitle) {
+              <div class="k-expander-sub-title">
+                {{ subtitle }}
+              </div>
+            }
+          }
+          @if (titleTemplate) {
             <ng-template
-                *ngIf="titleTemplate"
-                [ngTemplateOutlet]="titleTemplate?.templateRef">
+              [ngTemplateOutlet]="titleTemplate?.templateRef">
             </ng-template>
-            <span class="k-expander-indicator">
-                <kendo-icon-wrapper
-                    [name]="expanderIndicatorClasses"
-                    [customFontClass]="customExpanderIndicatorClasses"
-                    [svgIcon]="expanderSvgIcon"
-                >
-                </kendo-icon-wrapper>
-            </span>
+          }
+          <span class="k-expander-indicator">
+            <kendo-icon-wrapper
+              [name]="expanderIndicatorClasses"
+              [customFontClass]="customExpanderIndicatorClasses"
+              [svgIcon]="expanderSvgIcon"
+              >
+            </kendo-icon-wrapper>
+          </span>
         </div>
         <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
-            <div class="k-expander-content" [attr.aria-hidden]="!expanded">
-                <ng-content></ng-content>
-            </div>
+          <div class="k-expander-content" [attr.aria-hidden]="!expanded">
+            <ng-content></ng-content>
+          </div>
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
+                    imports: [NgTemplateOutlet, IconWrapperComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i1$2.AnimationBuilder }], propDecorators: { title: [{
                 type: Input
@@ -9935,7 +10110,7 @@ class TileLayoutKeyboardNavigationService {
         this.localizationSubscription.unsubscribe();
     }
     onKeyDown(event, elem, focusableItems, settings) {
-        const keyCode = normalizeNumpadKeys(event);
+        const keyCode = normalizeKeys(event);
         const isTileFocused = document.activeElement === elem;
         const focusedTile = settings.items.find(item => item.elem.nativeElement === elem);
         const col = getCurrentCol(focusedTile, settings, this.rtl);
@@ -10384,43 +10559,49 @@ class TileLayoutItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
-        <kendo-tilelayout-item-header *ngIf="title">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
+        @if (title) {
+          <kendo-tilelayout-item-header>
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
-        </kendo-tilelayout-item-header>
+          </kendo-tilelayout-item-header>
+        }
         <ng-content></ng-content>
-        <ng-container *ngIf="resizable">
+        @if (resizable) {
+          @for (dir of resizeDirections; track dir) {
             <div
-                *ngFor="let dir of resizeDirections"
-                class="k-resize-handle k-cursor-{{dir}}-resize"
-                kendoTileLayoutResizeHandle
-                [rtl]="rtl"
-                [resizeDirection]="dir">
+              class="k-resize-handle k-cursor-{{dir}}-resize"
+              kendoTileLayoutResizeHandle
+              [rtl]="rtl"
+              [resizeDirection]="dir">
             </div>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
+          }
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item',
                     template: `
-        <kendo-tilelayout-item-header *ngIf="title">
+        @if (title) {
+          <kendo-tilelayout-item-header>
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
-        </kendo-tilelayout-item-header>
+          </kendo-tilelayout-item-header>
+        }
         <ng-content></ng-content>
-        <ng-container *ngIf="resizable">
+        @if (resizable) {
+          @for (dir of resizeDirections; track dir) {
             <div
-                *ngFor="let dir of resizeDirections"
-                class="k-resize-handle k-cursor-{{dir}}-resize"
-                kendoTileLayoutResizeHandle
-                [rtl]="rtl"
-                [resizeDirection]="dir">
+              class="k-resize-handle k-cursor-{{dir}}-resize"
+              kendoTileLayoutResizeHandle
+              [rtl]="rtl"
+              [resizeDirection]="dir">
             </div>
-        </ng-container>
-    `,
+          }
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, TileLayoutItemHeaderComponent, NgFor, TileLayoutResizeHandleDirective]
+                    imports: [TileLayoutItemHeaderComponent, TileLayoutResizeHandleDirective]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: TileLayoutDraggingService }, { type: TileLayoutKeyboardNavigationService }], propDecorators: { title: [{
                 type: Input
@@ -10751,7 +10932,7 @@ class TileLayoutComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TileLayoutComponent, isStandalone: true, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TileLayoutComponent, isStandalone: true, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             TileLayoutDraggingService,
             TileLayoutKeyboardNavigationService,
@@ -10762,16 +10943,18 @@ class TileLayoutComponent {
         ], queries: [{ propertyName: "items", predicate: TileLayoutItemComponent }], viewQueries: [{ propertyName: "hint", first: true, predicate: ["hint"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
         <div #hint class="k-layout-item-hint"
-            [style.display]="'none'"
-            [style.order]="targetOrder"
-            [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
-            [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
-            [style.gridColumnStart]="currentColStart"
-            [style.gridRowStart]="currentRowStart"
-            [style.zIndex]="'1'">
+          [style.display]="'none'"
+          [style.order]="targetOrder"
+          [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
+          [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
+          [style.gridColumnStart]="currentColStart"
+          [style.gridRowStart]="currentRowStart"
+          [style.zIndex]="'1'">
         </div>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutComponent, decorators: [{
             type: Component,
@@ -10789,18 +10972,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     template: `
         <ng-content></ng-content>
         <div #hint class="k-layout-item-hint"
-            [style.display]="'none'"
-            [style.order]="targetOrder"
-            [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
-            [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
-            [style.gridColumnStart]="currentColStart"
-            [style.gridRowStart]="currentRowStart"
-            [style.zIndex]="'1'">
+          [style.display]="'none'"
+          [style.order]="targetOrder"
+          [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
+          [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
+          [style.gridColumnStart]="currentColStart"
+          [style.gridRowStart]="currentRowStart"
+          [style.zIndex]="'1'">
         </div>
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `,
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, WatermarkOverlayComponent]
+                    imports: [WatermarkOverlayComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: TileLayoutDraggingService }, { type: TileLayoutKeyboardNavigationService }], propDecorators: { columns: [{
                 type: Input
@@ -11725,101 +11910,118 @@ class TimelineCardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineCardComponent, deps: [{ token: i0.ElementRef }, { token: TimelineService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineCardComponent, isStandalone: true, selector: "kendo-timeline-card", inputs: { event: "event", expanded: "expanded", collapsible: "collapsible", reversed: "reversed", orientation: "orientation", navigable: "navigable", tabIndex: "tabIndex", animationDuration: "animationDuration", index: "index", eventWidth: "eventWidth", eventHeight: "eventHeight", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate", calloutStyle: "calloutStyle" }, host: { listeners: { "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-timeline-card": "this.hostClass", "class.k-collapsed": "this.collapsedClass" } }, providers: [], viewQueries: [{ propertyName: "calloutElementRef", first: true, predicate: ["callout"], descendants: true }], exportAs: ["kendoTimelineCard"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineCardComponent, isStandalone: true, selector: "kendo-timeline-card", inputs: { event: "event", expanded: "expanded", collapsible: "collapsible", reversed: "reversed", orientation: "orientation", navigable: "navigable", tabIndex: "tabIndex", animationDuration: "animationDuration", index: "index", eventWidth: "eventWidth", eventHeight: "eventHeight", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate", calloutStyle: "calloutStyle" }, host: { listeners: { "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-timeline-card": "this.hostClass", "class.k-collapsed": "this.collapsedClass" } }, providers: [], viewQueries: [{ propertyName: "calloutElementRef", first: true, predicate: ["callout"], descendants: true }], exportAs: ["kendoTimelineCard"], usesOnChanges: true, ngImport: i0, template: `
         <kendo-card
-            [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
-            [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
-            class="k-card-with-callout k-card-vertical"
-            (click)="toggle()"
-            [attr.role]="role"
-            [attr.aria-live]="ariaLive"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.tabindex]="tabIndex"
-        >
-            <span
-                #callout
-                class="k-timeline-card-callout k-card-callout"
+          [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
+          [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
+          class="k-card-with-callout k-card-vertical"
+          (click)="toggle()"
+          [attr.role]="role"
+          [attr.aria-live]="ariaLive"
+          [attr.aria-expanded]="ariaExpanded"
+          [attr.tabindex]="tabIndex"
+          >
+          <span
+            #callout
+            class="k-timeline-card-callout k-card-callout"
                 [ngClass]="{
                     'k-callout-n': orientation === 'horizontal',
                     'k-callout-w': orientation === 'vertical' && !this.reversed,
                     'k-callout-e': orientation === 'vertical' && this.reversed
                 }"
             >
-            </span>
-            <div *ngIf="event" class="k-card-inner">
-                <kendo-card-header>
-                    <ng-template
-                        *ngIf="headerTemplate"
-                        [ngTemplateOutlet]="headerTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+          </span>
+          @if (event) {
+            <div class="k-card-inner">
+              <kendo-card-header>
+                @if (headerTemplate) {
+                  <ng-template
+                    [ngTemplateOutlet]="headerTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{ $implicit: event, index: index}">
                     >
-                    </ng-template>
-
-                    <div kendoCardTitle *ngIf="!headerTemplate">
-                        <span class="k-event-title">{{ event.title }}</span>
-                        <button 
-                            kendoButton
-                            *ngIf="collapsible && orientation === 'vertical'"
-                            [icon]="calloutFontIcon"
-                            [svgIcon]="calloutSvgIcon"
-                            class="k-event-collapse"
-                            fillMode="flat"
-                            [attr.aria-hidden]="true"
-                            tabindex="-1"
-                            type="button"
-                        ></button>
-                    </div>
-                    <div kendoCardSubtitle  *ngIf="!headerTemplate">{{ event.subtitle }}</div>
-                </kendo-card-header>
-
+                  </ng-template>
+                }
+                @if (!headerTemplate) {
+                  <div kendoCardTitle>
+                    <span class="k-event-title">{{ event.title }}</span>
+                    @if (collapsible && orientation === 'vertical') {
+                      <button
+                        kendoButton
+                        [icon]="calloutFontIcon"
+                        [svgIcon]="calloutSvgIcon"
+                        class="k-event-collapse"
+                        fillMode="flat"
+                        [attr.aria-hidden]="true"
+                        tabindex="-1"
+                        type="button"
+                      ></button>
+                    }
+                  </div>
+                }
+                @if (!headerTemplate) {
+                  <div kendoCardSubtitle >{{ event.subtitle }}</div>
+                }
+              </kendo-card-header>
+              @if (event.description || event.images) {
                 <kendo-card-body
-                    *ngIf="event.description || event.images"
-                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                    (@toggle.start)="animationStart()"
-                    (@toggle.done)="animationDone($event)"
-                >
+                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                  (@toggle.start)="animationStart()"
+                  (@toggle.done)="animationDone($event)"
+                  >
+                  @if (bodyTemplate) {
                     <ng-template
-                        *ngIf="bodyTemplate"
-                        [ngTemplateOutlet]="bodyTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                    >
+                      [ngTemplateOutlet]="bodyTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                      >
                     </ng-template>
-
-                    <div *ngIf="!bodyTemplate" class="k-card-description">
-                        <p *ngIf="event.description">{{ event.description }}</p>
-                        <ng-container *ngFor="let image of event.images">
-                            <img *ngIf="image.alt" kendoCardMedia [src]="image.src" [alt]="image.alt" />
-                            <img *ngIf="!image.alt" kendoCardMedia [src]="image.src" />
-                        </ng-container>
+                  }
+                  @if (!bodyTemplate) {
+                    <div class="k-card-description">
+                      @if (event.description) {
+                        <p>{{ event.description }}</p>
+                      }
+                      @for (image of event.images; track image) {
+                        @if (image.alt) {
+                          <img kendoCardMedia [src]="image.src" [alt]="image.alt" />
+                        }
+                        @if (!image.alt) {
+                          <img kendoCardMedia [src]="image.src" />
+                        }
+                      }
                     </div>
+                  }
                 </kendo-card-body>
-
+              }
+              @if (event.actions) {
                 <kendo-card-actions
-                    *ngIf="event.actions"
-                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                >
+                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                  >
+                  @if (actionsTemplate) {
                     <ng-template
-                        *ngIf="actionsTemplate"
-                        [ngTemplateOutlet]="actionsTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                    >
+                      [ngTemplateOutlet]="actionsTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                      >
                     </ng-template>
-
-                    <ng-container *ngIf="!actionsTemplate">
-                        <a *ngFor="let action of event.actions"
-                            [href]="action.url"
-                            [target]="action.target === 'blank' ? '_blank' : '_self'"
-                            (click)="onActionClick($event)"
-                            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
-                            role="button"
+                  }
+                  @if (!actionsTemplate) {
+                    @for (action of event.actions; track action) {
+                      <a
+                        [href]="action.url"
+                        [target]="action.target === 'blank' ? '_blank' : '_self'"
+                        (click)="onActionClick($event)"
+                        class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
+                        role="button"
                         >
-                            {{ action.text }}
-                        </a>
-                    </ng-container>
+                        {{ action.text }}
+                      </a>
+                    }
+                  }
                 </kendo-card-actions>
+              }
             </div>
+          }
         </kendo-card>
-    `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { 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: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { 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: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { 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: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
             trigger('toggle', [
                 state('collapsed', style({
                     height: '0',
@@ -11862,101 +12064,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-timeline-card',
                     template: `
         <kendo-card
-            [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
-            [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
-            class="k-card-with-callout k-card-vertical"
-            (click)="toggle()"
-            [attr.role]="role"
-            [attr.aria-live]="ariaLive"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.tabindex]="tabIndex"
-        >
-            <span
-                #callout
-                class="k-timeline-card-callout k-card-callout"
+          [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
+          [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
+          class="k-card-with-callout k-card-vertical"
+          (click)="toggle()"
+          [attr.role]="role"
+          [attr.aria-live]="ariaLive"
+          [attr.aria-expanded]="ariaExpanded"
+          [attr.tabindex]="tabIndex"
+          >
+          <span
+            #callout
+            class="k-timeline-card-callout k-card-callout"
                 [ngClass]="{
                     'k-callout-n': orientation === 'horizontal',
                     'k-callout-w': orientation === 'vertical' && !this.reversed,
                     'k-callout-e': orientation === 'vertical' && this.reversed
                 }"
             >
-            </span>
-            <div *ngIf="event" class="k-card-inner">
-                <kendo-card-header>
-                    <ng-template
-                        *ngIf="headerTemplate"
-                        [ngTemplateOutlet]="headerTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+          </span>
+          @if (event) {
+            <div class="k-card-inner">
+              <kendo-card-header>
+                @if (headerTemplate) {
+                  <ng-template
+                    [ngTemplateOutlet]="headerTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{ $implicit: event, index: index}">
                     >
-                    </ng-template>
-
-                    <div kendoCardTitle *ngIf="!headerTemplate">
-                        <span class="k-event-title">{{ event.title }}</span>
-                        <button 
-                            kendoButton
-                            *ngIf="collapsible && orientation === 'vertical'"
-                            [icon]="calloutFontIcon"
-                            [svgIcon]="calloutSvgIcon"
-                            class="k-event-collapse"
-                            fillMode="flat"
-                            [attr.aria-hidden]="true"
-                            tabindex="-1"
-                            type="button"
-                        ></button>
-                    </div>
-                    <div kendoCardSubtitle  *ngIf="!headerTemplate">{{ event.subtitle }}</div>
-                </kendo-card-header>
-
+                  </ng-template>
+                }
+                @if (!headerTemplate) {
+                  <div kendoCardTitle>
+                    <span class="k-event-title">{{ event.title }}</span>
+                    @if (collapsible && orientation === 'vertical') {
+                      <button
+                        kendoButton
+                        [icon]="calloutFontIcon"
+                        [svgIcon]="calloutSvgIcon"
+                        class="k-event-collapse"
+                        fillMode="flat"
+                        [attr.aria-hidden]="true"
+                        tabindex="-1"
+                        type="button"
+                      ></button>
+                    }
+                  </div>
+                }
+                @if (!headerTemplate) {
+                  <div kendoCardSubtitle >{{ event.subtitle }}</div>
+                }
+              </kendo-card-header>
+              @if (event.description || event.images) {
                 <kendo-card-body
-                    *ngIf="event.description || event.images"
-                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                    (@toggle.start)="animationStart()"
-                    (@toggle.done)="animationDone($event)"
-                >
+                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                  (@toggle.start)="animationStart()"
+                  (@toggle.done)="animationDone($event)"
+                  >
+                  @if (bodyTemplate) {
                     <ng-template
-                        *ngIf="bodyTemplate"
-                        [ngTemplateOutlet]="bodyTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                    >
+                      [ngTemplateOutlet]="bodyTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                      >
                     </ng-template>
-
-                    <div *ngIf="!bodyTemplate" class="k-card-description">
-                        <p *ngIf="event.description">{{ event.description }}</p>
-                        <ng-container *ngFor="let image of event.images">
-                            <img *ngIf="image.alt" kendoCardMedia [src]="image.src" [alt]="image.alt" />
-                            <img *ngIf="!image.alt" kendoCardMedia [src]="image.src" />
-                        </ng-container>
+                  }
+                  @if (!bodyTemplate) {
+                    <div class="k-card-description">
+                      @if (event.description) {
+                        <p>{{ event.description }}</p>
+                      }
+                      @for (image of event.images; track image) {
+                        @if (image.alt) {
+                          <img kendoCardMedia [src]="image.src" [alt]="image.alt" />
+                        }
+                        @if (!image.alt) {
+                          <img kendoCardMedia [src]="image.src" />
+                        }
+                      }
                     </div>
+                  }
                 </kendo-card-body>
-
+              }
+              @if (event.actions) {
                 <kendo-card-actions
-                    *ngIf="event.actions"
-                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
-                >
+                  [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                  >
+                  @if (actionsTemplate) {
                     <ng-template
-                        *ngIf="actionsTemplate"
-                        [ngTemplateOutlet]="actionsTemplate?.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
-                    >
+                      [ngTemplateOutlet]="actionsTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                      >
                     </ng-template>
-
-                    <ng-container *ngIf="!actionsTemplate">
-                        <a *ngFor="let action of event.actions"
-                            [href]="action.url"
-                            [target]="action.target === 'blank' ? '_blank' : '_self'"
-                            (click)="onActionClick($event)"
-                            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
-                            role="button"
+                  }
+                  @if (!actionsTemplate) {
+                    @for (action of event.actions; track action) {
+                      <a
+                        [href]="action.url"
+                        [target]="action.target === 'blank' ? '_blank' : '_self'"
+                        (click)="onActionClick($event)"
+                        class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
+                        role="button"
                         >
-                            {{ action.text }}
-                        </a>
-                    </ng-container>
+                        {{ action.text }}
+                      </a>
+                    }
+                  }
                 </kendo-card-actions>
+              }
             </div>
+          }
         </kendo-card>
-    `,
+        `,
                     standalone: true,
-                    imports: [CardComponent, NgStyle, NgClass, NgIf, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, ButtonComponent, CardSubtitleDirective, CardBodyComponent, NgFor, CardMediaDirective, CardActionsComponent]
+                    imports: [CardComponent, NgStyle, NgClass, CardHeaderComponent, NgTemplateOutlet, CardTitleDirective, ButtonComponent, CardSubtitleDirective, CardBodyComponent, CardMediaDirective, CardActionsComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: TimelineService }, { type: i0.Renderer2 }], propDecorators: { event: [{
                 type: Input
@@ -12123,13 +12342,7 @@ class TimelineHorizontalComponent {
                     }
                     this.trackItems.push(event);
                 });
-                this.visibleEvents = this.trackItems
-                    .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
-                    .filter(event => !event.isFlag);
-                this.selectedEvent = this.events[0];
-                this.cdr.detectChanges();
-                this.calloutStyle = this.calloutOffset;
-                this.focusTrackItem(0);
+                this.navigateToFirstInterval();
             }
         }
     }
@@ -12289,7 +12502,7 @@ class TimelineHorizontalComponent {
         if (!this.navigable) {
             return;
         }
-        const code = normalizeNumpadKeys(event);
+        const code = normalizeKeys(event);
         event.preventDefault();
         if (code === Keys.Home) {
             this.onHomeKey();
@@ -12464,105 +12677,112 @@ class TimelineHorizontalComponent {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineHorizontalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: TimelineService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineHorizontalComponent, isStandalone: true, selector: "kendo-timeline-horizontal", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventHeight: "eventHeight", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "trackElementRef", first: true, predicate: ["track"], descendants: true }, { propertyName: "scrollableTrackElementRef", first: true, predicate: ["scrollableTrack"], descendants: true }, { propertyName: "cardElementRefs", predicate: ["card"], descendants: true, read: ElementRef }, { propertyName: "circleElementRefs", predicate: ["trackCircle"], descendants: true }, { propertyName: "flagElementRefs", predicate: ["trackFlag"], descendants: true }, { propertyName: "cardComponents", predicate: TimelineCardComponent, descendants: true }], exportAs: ["kendoTimelineHorizontal"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineHorizontalComponent, isStandalone: true, selector: "kendo-timeline-horizontal", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventHeight: "eventHeight", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "trackElementRef", first: true, predicate: ["track"], descendants: true }, { propertyName: "scrollableTrackElementRef", first: true, predicate: ["scrollableTrack"], descendants: true }, { propertyName: "cardElementRefs", predicate: ["card"], descendants: true, read: ElementRef }, { propertyName: "circleElementRefs", predicate: ["trackCircle"], descendants: true }, { propertyName: "flagElementRefs", predicate: ["trackFlag"], descendants: true }, { propertyName: "cardComponents", predicate: TimelineCardComponent, descendants: true }], exportAs: ["kendoTimelineHorizontal"], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-timeline-track-wrap" #track>
-            <button
-                kendoButton
-                [svgIcon]="svgLeftIcon"
-                icon="caret-alt-left"
-                class="k-timeline-arrow k-timeline-arrow-left"
-                rounded="full"
-                [title]="previousTitle"
-                (click)="previousClick()"
-                [disabled]="isFirstRange"
-                tabindex="-1"
-                type="button"
-            ></button>
-            <button
-                kendoButton
-                [svgIcon]="svgRightIcon"
-                icon="caret-alt-right"
-                class="k-timeline-arrow k-timeline-arrow-right"
-                rounded="full"
-                [title]="nextTitle"
-                (click)="nextClick()"
-                [disabled]="isLastRange"
-                tabindex="-1"
-                type="button"
-            ></button>
-            <div class="k-timeline-track">
-                <ul class="k-timeline-scrollable-wrap"
-                    #scrollableTrack
-                    [attr.role]="'tablist'"
-                    [attr.tabindex]="'0'"
-                    [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
-                    (@trackSlide.done)="onSlideDone()"
-                    (transitionend)="onTrackTransitionEnd()"
-                >
-                    <ng-container *ngFor="let event of trackItems; let index = index">
-                        <li
-                            #trackFlag
-                            *ngIf="event.isFlag"
-                            class="k-timeline-flag-wrap k-timeline-track-item"
-                            [attr.role]="'none'"
-                            [attr.aria-hidden]="true"
-                            [ngStyle]="tabStyle()"
-                        >
-                            <span class="k-timeline-flag">{{ event.isFlag }}</span>
-                        </li>
-                        <li
-                            *ngIf="!event.isFlag"
-                            #trackCircle
-                            class="k-timeline-track-item"
-                            [attr.role]="'tab'"
-                            (click)="navigateToEvent(index)"
-                            [ngStyle]="tabStyle()"
-                        >
-                            <div class="k-timeline-date-wrap">
-                                <span *ngIf="showDateLabels" class="k-timeline-date">
-                                    {{ event.date | kendoDate: dateFormat }}
-                                </span>
-                            </div>
-                            <span class="k-timeline-circle"></span>
-                        </li>
-                    </ng-container>
-                </ul>
-            </div>
+          <button
+            kendoButton
+            [svgIcon]="svgLeftIcon"
+            icon="caret-alt-left"
+            class="k-timeline-arrow k-timeline-arrow-left"
+            rounded="full"
+            [title]="previousTitle"
+            (click)="previousClick()"
+            [disabled]="isFirstRange"
+            tabindex="-1"
+            type="button"
+          ></button>
+          <button
+            kendoButton
+            [svgIcon]="svgRightIcon"
+            icon="caret-alt-right"
+            class="k-timeline-arrow k-timeline-arrow-right"
+            rounded="full"
+            [title]="nextTitle"
+            (click)="nextClick()"
+            [disabled]="isLastRange"
+            tabindex="-1"
+            type="button"
+          ></button>
+          <div class="k-timeline-track">
+            <ul class="k-timeline-scrollable-wrap"
+              #scrollableTrack
+              [attr.role]="'tablist'"
+              [attr.tabindex]="'0'"
+              [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
+              (@trackSlide.done)="onSlideDone()"
+              (transitionend)="onTrackTransitionEnd()"
+              >
+              @for (event of trackItems; track event; let index = $index) {
+                @if (event.isFlag) {
+                  <li
+                    #trackFlag
+                    class="k-timeline-flag-wrap k-timeline-track-item"
+                    [attr.role]="'none'"
+                    [attr.aria-hidden]="true"
+                    [ngStyle]="tabStyle()"
+                    >
+                    <span class="k-timeline-flag">{{ event.isFlag }}</span>
+                  </li>
+                }
+                @if (!event.isFlag) {
+                  <li
+                    #trackCircle
+                    class="k-timeline-track-item"
+                    [attr.role]="'tab'"
+                    (click)="navigateToEvent(index)"
+                    [ngStyle]="tabStyle()"
+                    >
+                    <div class="k-timeline-date-wrap">
+                      @if (showDateLabels) {
+                        <span class="k-timeline-date">
+                          {{ event.date | kendoDate: dateFormat }}
+                        </span>
+                      }
+                    </div>
+                    <span class="k-timeline-circle"></span>
+                  </li>
+                }
+              }
+            </ul>
+          </div>
         </div>
         <div class="k-timeline-events-list">
+          @if (selectedEvent) {
             <ul
-                *ngIf="selectedEvent"
-                class="k-timeline-scrollable-wrap"
-                [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
-                (@eventsSlide.done)="onSlideDone()"
-                [ngStyle]="{'transform-origin': 'left top'}"
-            >
-                <li *ngFor="let event of eventsInInterval; let index = index"
-                    #card
-                    class="k-timeline-event"
-                    (transitionend)="onTransitionEnd()"
-                >
-                    <kendo-timeline-card
-                        [event]="selectedCardIndex === index ? selectedEvent : null"
-                        [expanded]="true"
-                        [collapsible]="collapsibleEvents"
-                        [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
-                        [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
-                        [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
-                        [navigable]="navigable"
-                        [index]="selectedEventIndex"
-                        [headerTemplate]="headerTemplate"
-                        [bodyTemplate]="bodyTemplate"
-                        [actionsTemplate]="actionsTemplate"
-                        [eventHeight]="eventHeight"
-                        orientation="horizontal"
+              class="k-timeline-scrollable-wrap"
+              [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
+              (@eventsSlide.done)="onSlideDone()"
+              [ngStyle]="{'transform-origin': 'left top'}"
+              >
+              @for (event of eventsInInterval; track event; let index = $index) {
+                <li
+                  #card
+                  class="k-timeline-event"
+                  (transitionend)="onTransitionEnd()"
+                  >
+                  <kendo-timeline-card
+                    [event]="selectedCardIndex === index ? selectedEvent : null"
+                    [expanded]="true"
+                    [collapsible]="collapsibleEvents"
+                    [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
+                    [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
+                    [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
+                    [navigable]="navigable"
+                    [index]="selectedEventIndex"
+                    [headerTemplate]="headerTemplate"
+                    [bodyTemplate]="bodyTemplate"
+                    [actionsTemplate]="actionsTemplate"
+                    [eventHeight]="eventHeight"
+                    orientation="horizontal"
                     >
-                    </kendo-timeline-card>
+                  </kendo-timeline-card>
                 </li>
+              }
             </ul>
-            <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
+          }
+          <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
         </div>
-    `, 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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
+        `, 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: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
             trigger('trackSlide', [
                 state('left', style({
                     transform: `translateX({{transformValue}}%)`,
@@ -12613,105 +12833,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-timeline-horizontal',
                     template: `
         <div class="k-timeline-track-wrap" #track>
-            <button
-                kendoButton
-                [svgIcon]="svgLeftIcon"
-                icon="caret-alt-left"
-                class="k-timeline-arrow k-timeline-arrow-left"
-                rounded="full"
-                [title]="previousTitle"
-                (click)="previousClick()"
-                [disabled]="isFirstRange"
-                tabindex="-1"
-                type="button"
-            ></button>
-            <button
-                kendoButton
-                [svgIcon]="svgRightIcon"
-                icon="caret-alt-right"
-                class="k-timeline-arrow k-timeline-arrow-right"
-                rounded="full"
-                [title]="nextTitle"
-                (click)="nextClick()"
-                [disabled]="isLastRange"
-                tabindex="-1"
-                type="button"
-            ></button>
-            <div class="k-timeline-track">
-                <ul class="k-timeline-scrollable-wrap"
-                    #scrollableTrack
-                    [attr.role]="'tablist'"
-                    [attr.tabindex]="'0'"
-                    [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
-                    (@trackSlide.done)="onSlideDone()"
-                    (transitionend)="onTrackTransitionEnd()"
-                >
-                    <ng-container *ngFor="let event of trackItems; let index = index">
-                        <li
-                            #trackFlag
-                            *ngIf="event.isFlag"
-                            class="k-timeline-flag-wrap k-timeline-track-item"
-                            [attr.role]="'none'"
-                            [attr.aria-hidden]="true"
-                            [ngStyle]="tabStyle()"
-                        >
-                            <span class="k-timeline-flag">{{ event.isFlag }}</span>
-                        </li>
-                        <li
-                            *ngIf="!event.isFlag"
-                            #trackCircle
-                            class="k-timeline-track-item"
-                            [attr.role]="'tab'"
-                            (click)="navigateToEvent(index)"
-                            [ngStyle]="tabStyle()"
-                        >
-                            <div class="k-timeline-date-wrap">
-                                <span *ngIf="showDateLabels" class="k-timeline-date">
-                                    {{ event.date | kendoDate: dateFormat }}
-                                </span>
-                            </div>
-                            <span class="k-timeline-circle"></span>
-                        </li>
-                    </ng-container>
-                </ul>
-            </div>
+          <button
+            kendoButton
+            [svgIcon]="svgLeftIcon"
+            icon="caret-alt-left"
+            class="k-timeline-arrow k-timeline-arrow-left"
+            rounded="full"
+            [title]="previousTitle"
+            (click)="previousClick()"
+            [disabled]="isFirstRange"
+            tabindex="-1"
+            type="button"
+          ></button>
+          <button
+            kendoButton
+            [svgIcon]="svgRightIcon"
+            icon="caret-alt-right"
+            class="k-timeline-arrow k-timeline-arrow-right"
+            rounded="full"
+            [title]="nextTitle"
+            (click)="nextClick()"
+            [disabled]="isLastRange"
+            tabindex="-1"
+            type="button"
+          ></button>
+          <div class="k-timeline-track">
+            <ul class="k-timeline-scrollable-wrap"
+              #scrollableTrack
+              [attr.role]="'tablist'"
+              [attr.tabindex]="'0'"
+              [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
+              (@trackSlide.done)="onSlideDone()"
+              (transitionend)="onTrackTransitionEnd()"
+              >
+              @for (event of trackItems; track event; let index = $index) {
+                @if (event.isFlag) {
+                  <li
+                    #trackFlag
+                    class="k-timeline-flag-wrap k-timeline-track-item"
+                    [attr.role]="'none'"
+                    [attr.aria-hidden]="true"
+                    [ngStyle]="tabStyle()"
+                    >
+                    <span class="k-timeline-flag">{{ event.isFlag }}</span>
+                  </li>
+                }
+                @if (!event.isFlag) {
+                  <li
+                    #trackCircle
+                    class="k-timeline-track-item"
+                    [attr.role]="'tab'"
+                    (click)="navigateToEvent(index)"
+                    [ngStyle]="tabStyle()"
+                    >
+                    <div class="k-timeline-date-wrap">
+                      @if (showDateLabels) {
+                        <span class="k-timeline-date">
+                          {{ event.date | kendoDate: dateFormat }}
+                        </span>
+                      }
+                    </div>
+                    <span class="k-timeline-circle"></span>
+                  </li>
+                }
+              }
+            </ul>
+          </div>
         </div>
         <div class="k-timeline-events-list">
+          @if (selectedEvent) {
             <ul
-                *ngIf="selectedEvent"
-                class="k-timeline-scrollable-wrap"
-                [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
-                (@eventsSlide.done)="onSlideDone()"
-                [ngStyle]="{'transform-origin': 'left top'}"
-            >
-                <li *ngFor="let event of eventsInInterval; let index = index"
-                    #card
-                    class="k-timeline-event"
-                    (transitionend)="onTransitionEnd()"
-                >
-                    <kendo-timeline-card
-                        [event]="selectedCardIndex === index ? selectedEvent : null"
-                        [expanded]="true"
-                        [collapsible]="collapsibleEvents"
-                        [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
-                        [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
-                        [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
-                        [navigable]="navigable"
-                        [index]="selectedEventIndex"
-                        [headerTemplate]="headerTemplate"
-                        [bodyTemplate]="bodyTemplate"
-                        [actionsTemplate]="actionsTemplate"
-                        [eventHeight]="eventHeight"
-                        orientation="horizontal"
+              class="k-timeline-scrollable-wrap"
+              [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
+              (@eventsSlide.done)="onSlideDone()"
+              [ngStyle]="{'transform-origin': 'left top'}"
+              >
+              @for (event of eventsInInterval; track event; let index = $index) {
+                <li
+                  #card
+                  class="k-timeline-event"
+                  (transitionend)="onTransitionEnd()"
+                  >
+                  <kendo-timeline-card
+                    [event]="selectedCardIndex === index ? selectedEvent : null"
+                    [expanded]="true"
+                    [collapsible]="collapsibleEvents"
+                    [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
+                    [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
+                    [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
+                    [navigable]="navigable"
+                    [index]="selectedEventIndex"
+                    [headerTemplate]="headerTemplate"
+                    [bodyTemplate]="bodyTemplate"
+                    [actionsTemplate]="actionsTemplate"
+                    [eventHeight]="eventHeight"
+                    orientation="horizontal"
                     >
-                    </kendo-timeline-card>
+                  </kendo-timeline-card>
                 </li>
+              }
             </ul>
-            <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
+          }
+          <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [ButtonComponent, NgFor, NgIf, NgStyle, TimelineCardComponent, DatePipe, ResizeSensorComponent]
+                    imports: [ButtonComponent, NgStyle, TimelineCardComponent, DatePipe, ResizeSensorComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: TimelineService }, { type: i1.LocalizationService }], propDecorators: { events: [{
                 type: Input
@@ -12822,40 +13049,46 @@ class TimelineVerticalComponent {
         this.renderer.setAttribute(cardElement, 'aria-describedby', dateLabelId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineVerticalComponent, isStandalone: true, selector: "kendo-timeline-vertical", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventWidth: "eventWidth", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "cards", predicate: ["card"], descendants: true }, { propertyName: "dateElementRefs", predicate: ["dateWrap"], descendants: true }, { propertyName: "innerDateElementRefs", predicate: ["innerDate"], descendants: true }], exportAs: ["kendoTimelineVertical"], ngImport: i0, template: `
-        <ul *ngIf="events && events.length > 0">
-            <ng-container *ngFor="let event of events; let i = index">
-                <li class="k-timeline-flag-wrap" *ngIf="event.flag">
-                    <span class="k-timeline-flag">{{ event.flag }}</span>
-                </li>
-                <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
-                    <div class="k-timeline-date-wrap" #dateWrap>
-                        <span *ngIf="showDateLabels" class="k-timeline-date" #innerDate>
-                            {{ event.date | kendoDate: dateFormat }}
-                        </span>
-                    </div>
-                    <span class="k-timeline-circle"></span>
-                    <kendo-timeline-card
-                        #card
-                        [event]="event"
-                        [expanded]="event.expanded || !collapsibleEvents"
-                        [collapsible]="collapsibleEvents"
-                        [reversed]="alterMode && i % 2 === 0"
-                        [tabIndex]="'0'"
-                        [navigable]="navigable"
-                        [animationDuration]="animationDuration"
-                        [headerTemplate]="headerTemplate"
-                        [bodyTemplate]="bodyTemplate"
-                        [actionsTemplate]="actionsTemplate"
-                        [index]="i"
-                        [eventWidth]="eventWidth"
-                        orientation="vertical"
-                    >
-                    </kendo-timeline-card>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineVerticalComponent, isStandalone: true, selector: "kendo-timeline-vertical", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventWidth: "eventWidth", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "cards", predicate: ["card"], descendants: true }, { propertyName: "dateElementRefs", predicate: ["dateWrap"], descendants: true }, { propertyName: "innerDateElementRefs", predicate: ["innerDate"], descendants: true }], exportAs: ["kendoTimelineVertical"], ngImport: i0, template: `
+        @if (events && events.length > 0) {
+          <ul>
+            @for (event of events; track event; let i = $index) {
+              @if (event.flag) {
+                <li class="k-timeline-flag-wrap">
+                  <span class="k-timeline-flag">{{ event.flag }}</span>
                 </li>
-            </ng-container>
-        </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }] });
+              }
+              <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
+                <div class="k-timeline-date-wrap" #dateWrap>
+                  @if (showDateLabels) {
+                    <span class="k-timeline-date" #innerDate>
+                      {{ event.date | kendoDate: dateFormat }}
+                    </span>
+                  }
+                </div>
+                <span class="k-timeline-circle"></span>
+                <kendo-timeline-card
+                  #card
+                  [event]="event"
+                  [expanded]="event.expanded || !collapsibleEvents"
+                  [collapsible]="collapsibleEvents"
+                  [reversed]="alterMode && i % 2 === 0"
+                  [tabIndex]="'0'"
+                  [navigable]="navigable"
+                  [animationDuration]="animationDuration"
+                  [headerTemplate]="headerTemplate"
+                  [bodyTemplate]="bodyTemplate"
+                  [actionsTemplate]="actionsTemplate"
+                  [index]="i"
+                  [eventWidth]="eventWidth"
+                  orientation="vertical"
+                  >
+                </kendo-timeline-card>
+              </li>
+            }
+          </ul>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
             type: Component,
@@ -12864,41 +13097,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     exportAs: 'kendoTimelineVertical',
                     selector: 'kendo-timeline-vertical',
                     template: `
-        <ul *ngIf="events && events.length > 0">
-            <ng-container *ngFor="let event of events; let i = index">
-                <li class="k-timeline-flag-wrap" *ngIf="event.flag">
-                    <span class="k-timeline-flag">{{ event.flag }}</span>
-                </li>
-                <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
-                    <div class="k-timeline-date-wrap" #dateWrap>
-                        <span *ngIf="showDateLabels" class="k-timeline-date" #innerDate>
-                            {{ event.date | kendoDate: dateFormat }}
-                        </span>
-                    </div>
-                    <span class="k-timeline-circle"></span>
-                    <kendo-timeline-card
-                        #card
-                        [event]="event"
-                        [expanded]="event.expanded || !collapsibleEvents"
-                        [collapsible]="collapsibleEvents"
-                        [reversed]="alterMode && i % 2 === 0"
-                        [tabIndex]="'0'"
-                        [navigable]="navigable"
-                        [animationDuration]="animationDuration"
-                        [headerTemplate]="headerTemplate"
-                        [bodyTemplate]="bodyTemplate"
-                        [actionsTemplate]="actionsTemplate"
-                        [index]="i"
-                        [eventWidth]="eventWidth"
-                        orientation="vertical"
-                    >
-                    </kendo-timeline-card>
+        @if (events && events.length > 0) {
+          <ul>
+            @for (event of events; track event; let i = $index) {
+              @if (event.flag) {
+                <li class="k-timeline-flag-wrap">
+                  <span class="k-timeline-flag">{{ event.flag }}</span>
                 </li>
-            </ng-container>
-        </ul>
-    `,
+              }
+              <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
+                <div class="k-timeline-date-wrap" #dateWrap>
+                  @if (showDateLabels) {
+                    <span class="k-timeline-date" #innerDate>
+                      {{ event.date | kendoDate: dateFormat }}
+                    </span>
+                  }
+                </div>
+                <span class="k-timeline-circle"></span>
+                <kendo-timeline-card
+                  #card
+                  [event]="event"
+                  [expanded]="event.expanded || !collapsibleEvents"
+                  [collapsible]="collapsibleEvents"
+                  [reversed]="alterMode && i % 2 === 0"
+                  [tabIndex]="'0'"
+                  [navigable]="navigable"
+                  [animationDuration]="animationDuration"
+                  [headerTemplate]="headerTemplate"
+                  [bodyTemplate]="bodyTemplate"
+                  [actionsTemplate]="actionsTemplate"
+                  [index]="i"
+                  [eventWidth]="eventWidth"
+                  orientation="vertical"
+                  >
+                </kendo-timeline-card>
+              </li>
+            }
+          </ul>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgFor, NgClass, TimelineCardComponent, DatePipe]
+                    imports: [NgClass, TimelineCardComponent, DatePipe]
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { events: [{
                 type: Input
@@ -12987,7 +13226,8 @@ class TimelineComponent {
         this.originalData = events;
         this._events = processItems(this.originalData, this.modelFields);
         this._events.sort((a, b) => {
-            return a.date.getTime() - b.date.getTime();
+            const order = this.eventsOrder === 'asc' ? 1 : -1;
+            return order * (a.date.getTime() - b.date.getTime());
         });
         if (this._events.length > 0) {
             let flag = this._events[0].date.getFullYear() - 1;
@@ -13052,6 +13292,26 @@ class TimelineComponent {
      * @default true
      */
     animation;
+    /**
+     * Specifies the order of the Timeline events.
+     * `asc` - chronological order
+     * `desc` - reverse-chronological order
+     *
+     * @default 'asc'
+     */
+    set eventsOrder(order) {
+        if (order === this._eventsOrder) {
+            return;
+        }
+        this._eventsOrder = order;
+        this._events = [...this._events].sort((a, b) => {
+            const sortOrder = order === 'asc' ? 1 : -1;
+            return sortOrder * (a.date.getTime() - b.date.getTime());
+        });
+    }
+    get eventsOrder() {
+        return this._eventsOrder;
+    }
     /**
      * Sets a specific width for the event.
      * This setting is supported only in `vertical` mode.
@@ -13179,6 +13439,7 @@ class TimelineComponent {
     _eventHeight = DEFAULT_EVENT_HEIGHT;
     _dateFormat = DEFAULT_DATE_FORMAT;
     originalData = [];
+    _eventsOrder = 'asc';
     subscriptions = new Subscription();
     constructor(timelineService) {
         this.timelineService = timelineService;
@@ -13240,7 +13501,7 @@ class TimelineComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, deps: [{ token: TimelineService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineComponent, isStandalone: true, selector: "kendo-timeline", inputs: { events: "events", modelFields: "modelFields", orientation: "orientation", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animation: "animation", eventWidth: "eventWidth", eventHeight: "eventHeight", dateFormat: "dateFormat" }, outputs: { onToggle: "onToggle", onActionClick: "onActionClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-timeline": "this.hostClass", "class.k-timeline-vertical": "this.verticalClass", "class.k-timeline-horizontal": "this.horizontalClass", "class.k-timeline-alternating": "this.alternatingClass", "class.k-timeline-collapsible": "this.collapsibleClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineComponent, isStandalone: true, selector: "kendo-timeline", inputs: { events: "events", modelFields: "modelFields", orientation: "orientation", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animation: "animation", eventsOrder: "eventsOrder", eventWidth: "eventWidth", eventHeight: "eventHeight", dateFormat: "dateFormat" }, outputs: { onToggle: "onToggle", onActionClick: "onActionClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-timeline": "this.hostClass", "class.k-timeline-vertical": "this.verticalClass", "class.k-timeline-horizontal": "this.horizontalClass", "class.k-timeline-alternating": "this.alternatingClass", "class.k-timeline-collapsible": "this.collapsibleClass" } }, providers: [
             TimelineService,
             LocalizationService,
             {
@@ -13249,17 +13510,17 @@ class TimelineComponent {
             }
         ], queries: [{ propertyName: "cardHeaderTemplate", predicate: TimelineCardHeaderTemplateDirective }, { propertyName: "cardBodyTemplate", predicate: TimelineCardBodyTemplateDirective }, { propertyName: "cardActionsTemplate", predicate: TimelineCardActionsTemplateDirective }], viewQueries: [{ propertyName: "timelineHorizontal", first: true, predicate: TimelineHorizontalComponent, descendants: true }, { propertyName: "timelineVertical", first: true, predicate: TimelineVerticalComponent, descendants: true }], exportAs: ["kendoTimeline"], ngImport: i0, template: `
         <ng-container kendoTimelineLocalizedMessages
-            i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
-            previous="previous"
-        >
+          i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
+          previous="previous"
+          >
         </ng-container>
         <ng-container kendoTimelineLocalizedMessages
-            i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
-            next="next"
-        >
+          i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
+          next="next"
+          >
         </ng-container>
-        <kendo-timeline-vertical
-            *ngIf="orientation === 'vertical'"
+        @if (orientation === 'vertical') {
+          <kendo-timeline-vertical
             [events]="events"
             [alterMode]="alterMode"
             [collapsibleEvents]="collapsibleEvents"
@@ -13271,10 +13532,11 @@ class TimelineComponent {
             [headerTemplate]="headerTemplate"
             [bodyTemplate]="bodyTemplate"
             [actionsTemplate]="actionsTemplate"
-        >
-        </kendo-timeline-vertical>
-        <kendo-timeline-horizontal
-            *ngIf="orientation === 'horizontal'"
+            >
+          </kendo-timeline-vertical>
+        }
+        @if (orientation === 'horizontal') {
+          <kendo-timeline-horizontal
             [events]="events"
             [collapsibleEvents]="false"
             [navigable]="navigable"
@@ -13285,9 +13547,10 @@ class TimelineComponent {
             [headerTemplate]="headerTemplate"
             [bodyTemplate]="bodyTemplate"
             [actionsTemplate]="actionsTemplate"
-        >
-        </kendo-timeline-horizontal>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }] });
+            >
+          </kendo-timeline-horizontal>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }, { kind: "component", type: TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
@@ -13304,17 +13567,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-timeline',
                     template: `
         <ng-container kendoTimelineLocalizedMessages
-            i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
-            previous="previous"
-        >
+          i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
+          previous="previous"
+          >
         </ng-container>
         <ng-container kendoTimelineLocalizedMessages
-            i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
-            next="next"
-        >
+          i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
+          next="next"
+          >
         </ng-container>
-        <kendo-timeline-vertical
-            *ngIf="orientation === 'vertical'"
+        @if (orientation === 'vertical') {
+          <kendo-timeline-vertical
             [events]="events"
             [alterMode]="alterMode"
             [collapsibleEvents]="collapsibleEvents"
@@ -13326,10 +13589,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [headerTemplate]="headerTemplate"
             [bodyTemplate]="bodyTemplate"
             [actionsTemplate]="actionsTemplate"
-        >
-        </kendo-timeline-vertical>
-        <kendo-timeline-horizontal
-            *ngIf="orientation === 'horizontal'"
+            >
+          </kendo-timeline-vertical>
+        }
+        @if (orientation === 'horizontal') {
+          <kendo-timeline-horizontal
             [events]="events"
             [collapsibleEvents]="false"
             [navigable]="navigable"
@@ -13340,11 +13604,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [headerTemplate]="headerTemplate"
             [bodyTemplate]="bodyTemplate"
             [actionsTemplate]="actionsTemplate"
-        >
-        </kendo-timeline-horizontal>
-    `,
+            >
+          </kendo-timeline-horizontal>
+        }
+        `,
                     standalone: true,
-                    imports: [LocalizedTimelineMessagesDirective, NgIf, TimelineVerticalComponent, TimelineHorizontalComponent]
+                    imports: [LocalizedTimelineMessagesDirective, TimelineVerticalComponent, TimelineHorizontalComponent]
                 }]
         }], ctorParameters: () => [{ type: TimelineService }], propDecorators: { events: [{
                 type: Input
@@ -13362,6 +13627,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], animation: [{
                 type: Input
+            }], eventsOrder: [{
+                type: Input
             }], eventWidth: [{
                 type: Input
             }], eventHeight: [{