@progress/kendo-angular-layout 17.0.0-develop.9 → 17.0.1-develop.1

package/{esm2020 → esm2022}/tabstrip/directives/tab-content.directive.mjs

@@ -35,13 +35,14 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class TabContentDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TabContentDirective, isStandalone: true, selector: "[kendoTabContent]", ngImport: i0 });
 }
-TabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TabContentDirective, isStandalone: true, selector: "[kendoTabContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTabContent]',

package/{esm2020 → esm2022}/tabstrip/directives/tab-title.directive.mjs

@@ -40,13 +40,14 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class TabTitleDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TabTitleDirective, isStandalone: true, selector: "[kendoTabTitle]", ngImport: i0 });
 }
-TabTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TabTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TabTitleDirective, isStandalone: true, selector: "[kendoTabTitle]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTabTitle]',

package/{esm2020 → esm2022}/tabstrip/directives/tab.directive.mjs

@@ -8,13 +8,14 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class TabTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TabTemplateDirective, isStandalone: true, selector: "[kendoTabTemplate]", ngImport: i0 });
 }
-TabTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TabTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TabTemplateDirective, isStandalone: true, selector: "[kendoTabTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTabTemplate]',

package/{esm2020 → esm2022}/tabstrip/events/select-event.mjs

@@ -8,6 +8,8 @@ import { PreventableEvent } from "@progress/kendo-angular-common";
  * The `select` event fires when a tab is selected (clicked).
  */
 export class SelectEvent extends PreventableEvent {
+    index;
+    title;
     /**
      * Constructs the event arguments for the `select` event.
      * @param index - The index of the selected tab.

package/{esm2020 → esm2022}/tabstrip/events/tabclose-event.mjs

@@ -8,6 +8,8 @@
  *
  */
 export class TabCloseEvent {
+    index;
+    tab;
     /**
      * Constructs the event arguments for the `tabClose` event.
      * @param index - The index of the closed tab.

package/{esm2020 → esm2022}/tabstrip/events/tabscroll-event.mjs

@@ -9,6 +9,10 @@ import { PreventableEvent } from "@progress/kendo-angular-common";
  *
  */
 export class TabScrollEvent extends PreventableEvent {
+    /**
+     * The DOM event that triggered the tab scroll.
+     */
+    originalEvent;
     /**
      * @hidden
      */

package/{esm2020 → esm2022}/tabstrip/localization/custom-messages.component.mjs

@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ([see example]({% slug rtl_layout %})).
  */
 export class TabStripCustomMessagesComponent extends TabStripMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -19,15 +20,15 @@ export class TabStripCustomMessagesComponent extends TabStripMessages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripCustomMessagesComponent, isStandalone: true, selector: "kendo-tabstrip-messages", providers: [
+            {
+                provide: TabStripMessages,
+                useExisting: forwardRef(() => TabStripCustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-TabStripCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabStripCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripCustomMessagesComponent, isStandalone: true, selector: "kendo-tabstrip-messages", providers: [
-        {
-            provide: TabStripMessages,
-            useExisting: forwardRef(() => TabStripCustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/tabstrip/localization/localized-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class LocalizedTabStripMessagesDirective extends TabStripMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedTabStripMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedTabStripMessagesDirective, isStandalone: true, selector: "[kendoTabStripLocalizedMessages]", providers: [
+            {
+                provide: TabStripMessages,
+                useExisting: forwardRef(() => LocalizedTabStripMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedTabStripMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedTabStripMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedTabStripMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedTabStripMessagesDirective, isStandalone: true, selector: "[kendoTabStripLocalizedMessages]", providers: [
-        {
-            provide: TabStripMessages,
-            useExisting: forwardRef(() => LocalizedTabStripMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedTabStripMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedTabStripMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/tabstrip/localization/messages.mjs

@@ -9,10 +9,22 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class TabStripMessages extends ComponentMessages {
+    /**
+     * The title for the **Close** button in the TabStrip tab.
+     */
+    closeTitle;
+    /**
+     * The title for the **Previous Tab** button when the Tabstrip is scrollable.
+     */
+    previousTabButton;
+    /**
+     * The title for the **Next Tab** button when the Tabstrip is scrollable.
+     */
+    nextTabButton;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TabStripMessages, selector: "kendo-tabstrip-messages-base", inputs: { closeTitle: "closeTitle", previousTabButton: "previousTabButton", nextTabButton: "nextTabButton" }, usesInheritance: true, ngImport: i0 });
 }
-TabStripMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TabStripMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TabStripMessages, selector: "kendo-tabstrip-messages-base", inputs: { closeTitle: "closeTitle", previousTabButton: "previousTabButton", nextTabButton: "nextTabButton" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

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 }]; } });