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

package/esm2022/tabstrip/tabstrip.component.mjs

@@ -20,7 +20,7 @@ import { TabStripScrollableButtonComponent } from './scrollable-button.component
 import { take } from 'rxjs/operators';
 import { guid, isDocumentAvailable, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent, ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { TabComponent } from './rendering/tab.component';
-import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common';
+import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { LocalizedTabStripMessagesDirective } from './localization/localized-messages.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
@@ -506,7 +506,7 @@ export 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: i2.TabStripService }, { token: i3.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,
@@ -516,67 +516,69 @@ export 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',
@@ -585,86 +587,93 @@ export 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', [
@@ -699,67 +708,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',
@@ -768,88 +779,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: i2.TabStripService }, { type: i3.ScrollService }, { type: i0.NgZone }], propDecorators: { height: [{
                 type: Input

package/esm2022/tabstrip/util.mjs

@@ -10,7 +10,7 @@ import { isPresent } from "../common/util";
  */
 export 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;