@progress/kendo-angular-layout 17.0.0-develop.21 → 17.0.0-develop.22

package/esm2022/tabstrip/models/tabstrip-tab.component.mjs

@@ -0,0 +1,117 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ContentChildren, QueryList } from '@angular/core';
+import { TabContentDirective } from '../directives/tab-content.directive';
+import { TabTitleDirective } from '../directives/tab-title.directive';
+import { TabTemplateDirective } from '../directives/tab.directive';
+import * as i0 from "@angular/core";
+/**
+ * Represents the tab component of the TabStrip.
+ */
+export class TabStripTabComponent {
+    /**
+     * Sets the tab title ([see example](slug:tabs_tabstrip#toc-tab-titles)).
+     */
+    title;
+    /**
+     * Used to disable a tab ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
+     *
+     * Defaults to `false`.
+     */
+    disabled = false;
+    /**
+     * The CSS classes that will be rendered on the `tab` element.
+     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
+     */
+    cssClass;
+    /**
+     * The CSS styles that will be rendered on the `tab` element.
+     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     */
+    cssStyle;
+    /**
+     * Determines which tab will be selected upon the initial loading of the TabStrip
+     * ([see example](slug:tabs_tabstrip#toc-selected-tab)).
+     */
+    selected;
+    /**
+     * When set to `true`, a close button will be rendered inside the tab.
+     * This option overrides the value of the TabStrip `closable` option.
+     */
+    closable;
+    /**
+     * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
+     * This option overrides the value of the TabStrip `closeIcon` option.
+     */
+    closeIcon;
+    /**
+     * Allows the usage of custom icons by defining a custom CSS class, or multiple classes separated by spaces.
+     * This option overrides the value of the TabStrip `closeIcon` option.
+     */
+    closeIconClass;
+    /**
+     * Defines an SVGIcon to be rendered for the close icon.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    closeSVGIcon;
+    get tabContent() {
+        return this._tabContent.first;
+    }
+    get tabTitle() {
+        return this._tabTitleDirective.first;
+    }
+    get tabTemplate() {
+        return this._tabDirective.first;
+    }
+    _tabDirective = new QueryList();
+    _tabContent = new QueryList();
+    // guards against nested tabstrip components; `descendants` is not defined by default;
+    _tabTitleDirective;
+    /**
+     * @hidden
+     *
+     * Currently only disabled tabs can be focused. Otherwise they will be
+     * immediately selected
+     */
+    focused = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripTabComponent, isStandalone: true, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoTabStripTab',
+                    selector: 'kendo-tabstrip-tab',
+                    template: ``,
+                    standalone: true
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], cssStyle: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], closeIcon: [{
+                type: Input
+            }], closeIconClass: [{
+                type: Input
+            }], closeSVGIcon: [{
+                type: Input
+            }], _tabDirective: [{
+                type: ContentChildren,
+                args: [TabTemplateDirective]
+            }], _tabContent: [{
+                type: ContentChildren,
+                args: [TabContentDirective]
+            }], _tabTitleDirective: [{
+                type: ContentChildren,
+                args: [TabTitleDirective]
+            }] } });

package/{esm2020 → esm2022}/tabstrip/rendering/tab.component.mjs

@@ -15,11 +15,15 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TabComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this.tabClose = new EventEmitter();
-        this.hostClasses = true;
-    }
+    localization;
+    tab;
+    index;
+    tabStripClosable;
+    tabStripCloseIcon;
+    customTabstripCloseIcon;
+    closeSVGIcon;
+    tabClose = new EventEmitter();
+    hostClasses = true;
     get activeClass() {
         return this.tab.selected;
     }
@@ -32,6 +36,9 @@ export class TabComponent {
     get tabIndex() {
         return this.tab.selected || this.tab.focused ? 0 : -1;
     }
+    constructor(localization) {
+        this.localization = localization;
+    }
     get tabClosable() {
         if (this.tab.closable !== undefined) {
             return this.tab.closable;
@@ -73,9 +80,8 @@ export class TabComponent {
         const closeArgs = new TabCloseEvent(index, this.tab);
         this.tabClose.emit(closeArgs);
     }
-}
-TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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-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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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-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>
@@ -104,7 +110,8 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             class="k-remove-tab k-icon-button"
         ></button>
     `, 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: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector

package/{esm2020 → esm2022}/tabstrip/scrollable-button.component.mjs

@@ -17,35 +17,21 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TabStripScrollableButtonComponent {
-    constructor(host, renderer, ngZone, localization) {
-        this.host = host;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.localization = localization;
-        this.prev = false;
-        this.tabScroll = new EventEmitter();
-        this.onClick = new EventEmitter();
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.caretAltUpIcon = caretAltUpIcon;
-        this.caretAltDownIcon = caretAltDownIcon;
-        this.subs = new Subscription();
-        this.clickHandler = (scrollEvent) => {
-            const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
-            const isTabStripScrollEventPrevented = tabStripScrollEvent.isDefaultPrevented();
-            if (isTabStripScrollEventPrevented) {
-                return;
-            }
-            const buttonType = this.prev ? 'prev' : 'next';
-            this.onClick.emit(buttonType);
-        };
-    }
+    host;
+    renderer;
+    ngZone;
+    localization;
     get prevClass() {
         return this.prev;
     }
     get nextClass() {
         return !this.prev;
     }
+    prev = false;
+    tabPosition;
+    scrollable;
+    tabScroll = new EventEmitter();
+    onClick = new EventEmitter();
     get hostBoundingClientRect() {
         return this.host.nativeElement.getBoundingClientRect();
     }
@@ -58,6 +44,17 @@ export class TabStripScrollableButtonComponent {
     get svgIcon() {
         return this.scrollButtonSVGIcon;
     }
+    caretAltLeftIcon = caretAltLeftIcon;
+    caretAltRightIcon = caretAltRightIcon;
+    caretAltUpIcon = caretAltUpIcon;
+    caretAltDownIcon = caretAltDownIcon;
+    subs = new Subscription();
+    constructor(host, renderer, ngZone, localization) {
+        this.host = host;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+    }
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
             this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', this.clickHandler));
@@ -69,6 +66,15 @@ export class TabStripScrollableButtonComponent {
     toggle(show) {
         this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
     }
+    clickHandler = (scrollEvent) => {
+        const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
+        const isTabStripScrollEventPrevented = tabStripScrollEvent.isDefaultPrevented();
+        if (isTabStripScrollEventPrevented) {
+            return;
+        }
+        const buttonType = this.prev ? 'prev' : 'next';
+        this.onClick.emit(buttonType);
+    };
     get scrollButtonIconClass() {
         const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
             !this.localization.rtl ?
@@ -129,9 +135,8 @@ export class TabStripScrollableButtonComponent {
         this.tabScroll.emit(scrollEvent);
         return scrollEvent;
     }
-}
-TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripScrollableButtonComponent, isStandalone: true, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripScrollableButtonComponent, isStandalone: true, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
         <kendo-icon-wrapper
             [name]="iconClass"
             [customFontClass]="customIconClass"
@@ -140,7 +145,8 @@ TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
         >
         </kendo-icon-wrapper>
     `, 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: "15.2.10", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
             type: Component,
             args: [{
                     template: `

package/{esm2020 → esm2022}/tabstrip/tabstrip-scroll.service.mjs

@@ -12,12 +12,10 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ScrollService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.position = 0;
-        this.scrollButtonActiveStateChange = new Subject();
-        this.isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`].host.nativeElement.classList.contains('k-disabled');
-    }
+    ngZone;
+    owner;
+    position = 0;
+    scrollButtonActiveStateChange = new Subject();
     get tablistElement() {
         return this.owner.tablist.nativeElement;
     }
@@ -49,6 +47,9 @@ export class ScrollService {
         const nextSize = isTablistHorizontal(this.owner.tabPosition) ? nextRect.width : nextRect.height;
         return prevSize + nextSize;
     }
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+    }
     toggleScrollButtonsState() {
         const tabStrip = this.owner;
         if (!tabStrip.hasScrollButtons) {
@@ -171,9 +172,10 @@ export class ScrollService {
     toggleButtonActiveState(buttonType, active) {
         this.scrollButtonActiveStateChange.next({ buttonType, active });
     }
+    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`].host.nativeElement.classList.contains('k-disabled');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
 }
-ScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/{esm2020 → esm2022}/tabstrip/tabstrip.component.mjs

@@ -30,94 +30,12 @@ import * as i3 from "./tabstrip-scroll.service";
  * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
  */
 export class TabStripComponent {
-    constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
-        this.localization = localization;
-        this.renderer = renderer;
-        this.wrapper = wrapper;
-        this.tabstripService = tabstripService;
-        this.scrollService = scrollService;
-        this.ngZone = ngZone;
-        /**
-         * Enables the tab animation.
-         *
-         * @default true
-         */
-        this.animate = true;
-        /**
-         * Sets the alignment of the tabs.
-         *
-         * @default: 'start'
-         */
-        this.tabAlignment = 'start';
-        /**
-         * Sets the position of the tabs. Defaults to `top`.
-         *
-         * @default 'top'
-         */
-        this.tabPosition = 'top';
-        /**
-         * When set to `true`, the component renders all tabs and they are persisted in the DOM.
-         * By default, `keepTabContent` is `false`.
-         *
-         * @default false
-         */
-        this.keepTabContent = false;
-        /**
-         * When set to `true`, a close button will be rendered inside each tab.
-         * By default, `closable` is `false`.
-         *
-         * @default false
-         */
-        this.closable = false;
-        /**
-         * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
-         */
-        this.closeIcon = 'x';
-        /**
-         * Determines whether the content associated with each tab will be rendered.
-         *
-         * @default true
-         */
-        this.showContentArea = true;
-        /**
-         * Fires each time the user selects a tab ([see example](slug:events_tabstrip)).
-         * The event data contains the index of the selected tab and its title.
-         */
-        this.tabSelect = new EventEmitter();
-        /**
-         * Fires each time the user closes a tab.
-         * The event data contains the index of the closed tab and its instance.
-         */
-        this.tabClose = new EventEmitter();
-        /**
-         * Fires each time the user scrolls the TabStrip list.
-         * The event is preventable.
-         */
-        this.tabScroll = new EventEmitter();
-        this.hostClasses = true;
-        /**
-         * A query list of all declared tabs.
-         */
-        this.tabs = new QueryList();
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this._scrollableSettings = normalizeScrollableSettings(false);
-        this.subscriptions = new Subscription();
-        this.subscriptionsArePresent = false;
-        this.tabStripId = guid();
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.tabstripService.owner = this;
-        this.scrollService.owner = this;
-        this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-            if (this.hasScrollButtons) {
-                const action = activeButtonSettings.active ? 'remove' : 'add';
-                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
-            }
-        }));
-    }
+    localization;
+    renderer;
+    wrapper;
+    tabstripService;
+    scrollService;
+    ngZone;
     /**
      * Sets the height of the TabStrip.
      */
@@ -128,6 +46,38 @@ export class TabStripComponent {
     get height() {
         return this._height;
     }
+    /**
+     * Enables the tab animation.
+     *
+     * @default true
+     */
+    animate = true;
+    /**
+     * Sets the alignment of the tabs.
+     *
+     * @default: 'start'
+     */
+    tabAlignment = 'start';
+    /**
+     * Sets the position of the tabs. Defaults to `top`.
+     *
+     * @default 'top'
+     */
+    tabPosition = 'top';
+    /**
+     * When set to `true`, the component renders all tabs and they are persisted in the DOM.
+     * By default, `keepTabContent` is `false`.
+     *
+     * @default false
+     */
+    keepTabContent = false;
+    /**
+     * When set to `true`, a close button will be rendered inside each tab.
+     * By default, `closable` is `false`.
+     *
+     * @default false
+     */
+    closable = false;
     /**
      * Enables the scrolling of the tab list. When set to `true` and the total size of all tabs
      * is greater than the size of the TabStrip container, scroll buttons will be rendered on each end of the tab list.
@@ -146,6 +96,14 @@ export class TabStripComponent {
     get scrollable() {
         return this._scrollableSettings;
     }
+    /**
+     * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
+     */
+    closeIcon = 'x';
+    /**
+     * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button.
+     */
+    closeIconClass;
     /**
      * Defines an SVGIcon to be rendered for the close icon.
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
@@ -159,6 +117,28 @@ export class TabStripComponent {
     get closeSVGIcon() {
         return this._closeSVGIcon;
     }
+    /**
+     * Determines whether the content associated with each tab will be rendered.
+     *
+     * @default true
+     */
+    showContentArea = true;
+    /**
+     * Fires each time the user selects a tab ([see example](slug:events_tabstrip)).
+     * The event data contains the index of the selected tab and its title.
+     */
+    tabSelect = new EventEmitter();
+    /**
+     * Fires each time the user closes a tab.
+     * The event data contains the index of the closed tab and its instance.
+     */
+    tabClose = new EventEmitter();
+    /**
+     * Fires each time the user scrolls the TabStrip list.
+     * The event is preventable.
+     */
+    tabScroll = new EventEmitter();
+    hostClasses = true;
     get tabsAtTop() {
         return this.tabPosition === 'top';
     }
@@ -177,6 +157,60 @@ export class TabStripComponent {
     get tabStripScrollable() {
         return this._scrollableSettings.enabled;
     }
+    /**
+     * A query list of all declared tabs.
+     */
+    tabs = new QueryList();
+    /**
+     * @hidden
+     */
+    tablist;
+    /**
+     * @hidden
+     */
+    tabHeaderContainers;
+    /**
+     * @hidden
+     */
+    prevScrollButton;
+    /**
+     * @hidden
+     */
+    nextScrollButton;
+    /**
+     * @hidden
+     */
+    localizationChangeSubscription;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    _height;
+    _scrollableSettings = normalizeScrollableSettings(false);
+    subscriptions = new Subscription();
+    subscriptionsArePresent = false;
+    _closeSVGIcon;
+    tabStripId = guid();
+    tabsChangesSub;
+    activeStateChangeSub;
+    constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
+        this.localization = localization;
+        this.renderer = renderer;
+        this.wrapper = wrapper;
+        this.tabstripService = tabstripService;
+        this.scrollService = scrollService;
+        this.ngZone = ngZone;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.tabstripService.owner = this;
+        this.scrollService.owner = this;
+        this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
+            if (this.hasScrollButtons) {
+                const action = activeButtonSettings.active ? 'remove' : 'add';
+                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
+            }
+        }));
+    }
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
@@ -386,17 +420,16 @@ export class TabStripComponent {
             }));
         });
     }
-}
-TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "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" } }, providers: [
-        TabStripService,
-        ScrollService,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.tabstrip'
-        }
-    ], 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "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" } }, providers: [
+            TabStripService,
+            ScrollService,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.tabstrip'
+            }
+        ], 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"
@@ -503,15 +536,16 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></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]" }], animations: [
-        trigger('state', [
-            state('active', style({ opacity: 1 })),
-            transition('* => active', [
-                style({ opacity: 0 }),
-                animate('400ms ease-in')
+            trigger('state', [
+                state('active', style({ opacity: 1 })),
+                transition('* => active', [
+                    style({ opacity: 0 }),
+                    animate('400ms ease-in')
+                ])
             ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripComponent, decorators: [{
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [

package/{esm2020 → esm2022}/tabstrip/tabstrip.service.mjs

@@ -14,6 +14,9 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TabStripService {
+    localization;
+    ngZone;
+    owner;
     constructor(localization, ngZone) {
         this.localization = localization;
         this.ngZone = ngZone;
@@ -143,9 +146,9 @@ export class TabStripService {
         }
         return selectedIndex + 1;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService });
 }
-TabStripService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TabStripService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; } });

package/{esm2020 → esm2022}/tabstrip.module.mjs

@@ -22,11 +22,11 @@ import * as i5 from "./tabstrip/localization/custom-messages.component";
  * - `TabTitleDirective`&mdash;The tab title directive used on the `<ng-template>` tag.
  */
 export class TabStripModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent], exports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent] });
 }
-TabStripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent], exports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent] });
-TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i5.TabStripCustomMessagesComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_TABSTRIP],