@progress/kendo-angular-layout 17.3.0-develop.2 → 18.0.0-develop.10

package/esm2022/index.mjs

@@ -11,6 +11,7 @@ export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
 export * from './panelbar/events';
 export { SplitterComponent } from './splitter/splitter.component';
 export { SplitterPaneComponent } from './splitter/splitter-pane.component';
+// TabStrip exports
 export { TabStripComponent } from './tabstrip/tabstrip.component';
 export { TabStripTabComponent } from './tabstrip/models/tabstrip-tab.component';
 export { TabContentDirective } from './tabstrip/directives/tab-content.directive';

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1736180615,
-    version: '17.3.0-develop.2',
+    publishDate: 1736777760,
+    version: '18.0.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2022/tabstrip/models/scrollable-settings.mjs

@@ -6,12 +6,13 @@ import { BUTTON_SCROLL_SPEED, MOUSE_SCROLL_SPEED } from "../constants";
 /**
  * @hidden
  */
-const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, prevButtonIcon, nextButtonIcon, prevSVGButtonIcon, nextSVGButtonIcon }) => ({
+const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, scrollButtonsPosition = 'split', prevButtonIcon, nextButtonIcon, prevSVGButtonIcon, nextSVGButtonIcon }) => ({
     enabled,
     scrollButtons,
     mouseScroll,
     buttonScrollSpeed,
     mouseScrollSpeed,
+    scrollButtonsPosition,
     prevButtonIcon,
     nextButtonIcon,
     prevSVGButtonIcon,

package/esm2022/tabstrip/models/size.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/tabstrip/rendering/tab.component.mjs

@@ -81,7 +81,7 @@ export class TabComponent {
         this.tabClose.emit(closeArgs);
     }
     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: `
+    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", "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
         <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
             <span class="k-link" *ngIf="!tab.tabTitle">
                 <span class="k-link-text">{{ tab.title }}</span>
@@ -165,6 +165,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-item']
+            }, {
+                type: HostBinding,
+                args: ['class.k-tabstrip-item']
             }], activeClass: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']

package/esm2022/tabstrip/tabstrip-scroll.service.mjs

@@ -6,7 +6,7 @@ import { DEFAULT_SCROLL_BEHAVIOR } from './constants';
 import { Injectable, NgZone } from '@angular/core';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { Subject } from 'rxjs';
-import { getActiveTab, isTablistHorizontal, mouseScrollEnabled } from './util';
+import { getActiveTab, isTablistHorizontal } from './util';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -37,16 +37,6 @@ export class ScrollService {
     get tabsOverflow() {
         return this.tablistOverflowSize > 0;
     }
-    get scrollButtonsSize() {
-        if (!this.owner.hasScrollButtons) {
-            return 0;
-        }
-        const prevRect = this.owner.prevScrollButton.hostBoundingClientRect;
-        const prevSize = isTablistHorizontal(this.owner.tabPosition) ? prevRect.width : prevRect.height;
-        const nextRect = this.owner.nextScrollButton.hostBoundingClientRect;
-        const nextSize = isTablistHorizontal(this.owner.tabPosition) ? nextRect.width : nextRect.height;
-        return prevSize + nextSize;
-    }
     constructor(ngZone) {
         this.ngZone = ngZone;
     }
@@ -58,7 +48,7 @@ export class ScrollService {
         const currentPrevButtonActive = !this.isDisabled('prev');
         const currentNextButtonActive = !this.isDisabled('next');
         const calculatedPrevButtonActive = this.position > 0 && this.tablistOverflowSize > 0;
-        const calculatedNextButtonActive = this.position < this.tablistOverflowSize + this.scrollButtonsSize && this.tablistOverflowSize > 0;
+        const calculatedNextButtonActive = this.position < this.tablistOverflowSize && this.tablistOverflowSize > 0;
         if (calculatedPrevButtonActive !== currentPrevButtonActive) {
             this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
         }
@@ -122,19 +112,8 @@ export class ScrollService {
             return activeTabStart - tablistStart;
         }
     }
-    onMouseScroll(event) {
-        event.preventDefault();
-        if (!mouseScrollEnabled(this.owner.scrollable)) {
-            return;
-        }
-        const direction = event.deltaY < 0 ? 'prev' : 'next';
-        this.calculateListPosition(direction, this.owner.scrollable.mouseScrollSpeed);
-        if (isTablistHorizontal(this.owner.tabPosition)) {
-            this.tablistElement.scrollLeft = this.position;
-        }
-        else {
-            this.tablistElement.scrollTop = this.position;
-        }
+    onScroll(e) {
+        this.position = isTablistHorizontal(this.owner.tabPosition) ? e.target.scrollLeft : e.target.scrollTop;
         this.toggleScrollButtonsState();
     }
     scrollTabs(direction) {
@@ -148,13 +127,12 @@ export class ScrollService {
         this.toggleScrollButtonsState();
     }
     calculateListPosition(direction, scrollSpeed) {
-        const adjustedMaxScroll = this.tablistOverflowSize + this.scrollButtonsSize;
         if (direction === 'prev' && this.position > 0) {
             this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
         }
-        else if (direction === 'next' && this.position < adjustedMaxScroll) {
-            if (this.position + scrollSpeed > adjustedMaxScroll) {
-                this.position = adjustedMaxScroll;
+        else if (direction === 'next' && this.position < this.tablistOverflowSize) {
+            if (this.position + scrollSpeed > this.tablistOverflowSize) {
+                this.position = this.tablistOverflowSize;
                 return;
             }
             this.position += scrollSpeed;
@@ -172,7 +150,7 @@ export class ScrollService {
     toggleButtonActiveState(buttonType, active) {
         this.scrollButtonActiveStateChange.next({ buttonType, active });
     }
-    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`].host.nativeElement.classList.contains('k-disabled');
+    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 });
 }

package/esm2022/tabstrip/tabstrip.component.mjs

@@ -90,12 +90,52 @@ export class TabStripComponent {
         this._scrollableSettings = normalizeScrollableSettings(value);
         if (this.tablist) {
             this.toggleScrollButtons(this.scrollService.tabsOverflow);
-            this.attachWheelHandler(this.tablist.nativeElement);
+            if (this.isScrollable && this.mouseScrollEnabled) {
+                this.attachTablistScrollHandler(this.tablist.nativeElement);
+            }
         }
     }
     get scrollable() {
         return this._scrollableSettings;
     }
+    /**
+     * Specifies the size of the TabStrip.
+     * ([see example](slug:api_layout_tabstripcomponent#toc-size).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
+     */
+    set size(value) {
+        switch (value) {
+            case 'small':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                break;
+            case 'medium':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                break;
+            case 'large':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+                this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                break;
+            case 'none':
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
+                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
+        }
+        this._size = value;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
      */
@@ -157,6 +197,9 @@ export class TabStripComponent {
     get tabStripScrollable() {
         return this._scrollableSettings.enabled;
     }
+    get tabStripScrollableOverlay() {
+        return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
+    }
     /**
      * A query list of all declared tabs.
      */
@@ -193,6 +236,7 @@ export class TabStripComponent {
     tabStripId = guid();
     tabsChangesSub;
     activeStateChangeSub;
+    _size = 'medium';
     constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
         this.localization = localization;
         this.renderer = renderer;
@@ -205,7 +249,7 @@ export class TabStripComponent {
         this.tabstripService.owner = this;
         this.scrollService.owner = this;
         this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-            if (this.hasScrollButtons) {
+            if (this.hasScrollButtons.visible) {
                 const action = activeButtonSettings.active ? 'remove' : 'add';
                 this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
             }
@@ -233,6 +277,7 @@ export class TabStripComponent {
                 this.scrollService.toggleScrollButtonsState();
             });
         });
+        this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -248,7 +293,7 @@ export class TabStripComponent {
                         this.subscriptions = new Subscription();
                         this.subscriptionsArePresent = false;
                         this.activeStateChangeSub = this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-                            if (this.hasScrollButtons) {
+                            if (this.hasScrollButtons.visible) {
                                 const action = activeButtonSettings.active ? 'remove' : 'add';
                                 this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
                             }
@@ -377,7 +422,7 @@ export class TabStripComponent {
             resetTabFocus(this.tabs);
         }));
         if (this.isScrollable && this.mouseScrollEnabled) {
-            this.attachWheelHandler(tablist);
+            this.attachTablistScrollHandler(tablist);
         }
         this.subscriptionsArePresent = true;
     }
@@ -398,30 +443,53 @@ export class TabStripComponent {
                 this.prevScrollButton.toggle(true);
                 this.nextScrollButton.toggle(true);
             }
-            if (scrollButtonsArePresent && alwaysVisible) {
+            if (scrollButtonsArePresent) {
                 this.ngZone.runOutsideAngular(() => {
                     this.scrollService.toggleScrollButtonsState();
                 });
             }
         });
     }
-    attachWheelHandler(tablist) {
+    attachTablistScrollHandler(tablist) {
         this.ngZone.runOutsideAngular(() => {
-            this.subscriptions.add(this.renderer.listen(tablist, 'wheel', (wheelEvent) => {
+            this.subscriptions.add(this.renderer.listen(tablist, 'scroll', (e) => {
                 const scrollEvent = new TabScrollEvent({
-                    originalEvent: wheelEvent
+                    originalEvent: e
                 });
                 this.tabScroll.emit(scrollEvent);
                 const isTabStripScrollEventPrevented = scrollEvent.isDefaultPrevented();
                 if (isTabStripScrollEventPrevented || !this.scrollService.tabsOverflow) {
                     return;
                 }
-                this.scrollService.onMouseScroll(wheelEvent);
+                if (!this.hasScrollButtons.visible) {
+                    this.setScrollableOverlayClasses();
+                }
+                this.scrollService.onScroll(e);
             }));
         });
     }
+    setScrollableOverlayClasses() {
+        const wrapper = this.wrapper.nativeElement;
+        const container = this.tablist?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const scrollOffset = isTablistHorizontal(this.tabPosition) ? container.scrollLeft : container.scrollTop;
+        if (scrollOffset === 0) {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-end');
+            this.renderer.addClass(wrapper, 'k-tabstrip-scrollable-start');
+        }
+        else if (scrollOffset > 0 && scrollOffset < this.scrollService.tablistOverflowSize) {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-end');
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-start');
+        }
+        else {
+            this.renderer.removeClass(wrapper, 'k-tabstrip-scrollable-start');
+            this.renderer.addClass(wrapper, 'k-tabstrip-scrollable-end');
+        }
+    }
     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: [
+    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", 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,
@@ -455,10 +523,10 @@ export class TabStripComponent {
             <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
-            <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
+            <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
                     #prevScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -466,9 +534,30 @@ export class TabStripComponent {
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
-                    (onClick)="onScrollButtonClick($event)">
-                </span>
+                    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"
+                    [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"
                     [ngClass]="{
@@ -476,7 +565,8 @@ export class TabStripComponent {
                         'k-tabstrip-items-center': tabAlignment === 'center', 
                         'k-tabstrip-items-end': tabAlignment === 'end', 
                         'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
-                        'k-tabstrip-items-justify': tabAlignment === 'justify' 
+                        'k-tabstrip-items-justify': tabAlignment === 'justify',
+                        'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
                     [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
                 >
@@ -503,7 +593,24 @@ export class TabStripComponent {
                 </ul>
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *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"
+                    [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"
@@ -511,7 +618,12 @@ export class TabStripComponent {
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
+                    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>
         </ng-template>
@@ -594,10 +706,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <ng-container *ngTemplateOutlet="heading"></ng-container>
         </ng-container>
         <ng-template #heading>
-            <div class="k-tabstrip-items-wrapper" [ngClass]="itemsWrapperClass">
+            <div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
                     #prevScrollButton
                     kendoTabStripScrollableButton
                     [scrollable]="scrollable"
@@ -605,9 +717,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
-                    (onClick)="onScrollButtonClick($event)">
-                </span>
+                    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"
+                    [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"
                     [ngClass]="{
@@ -615,7 +748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         'k-tabstrip-items-center': tabAlignment === 'center', 
                         'k-tabstrip-items-end': tabAlignment === 'end', 
                         'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
-                        'k-tabstrip-items-justify': tabAlignment === 'justify' 
+                        'k-tabstrip-items-justify': tabAlignment === 'justify',
+                        'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
                     [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
                 >
@@ -642,7 +776,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ul>
                 <span
                     role="button"
-                    *ngIf="hasScrollButtons"
+                    *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"
+                    [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"
@@ -650,7 +801,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
+                    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>
         </ng-template>
@@ -692,6 +848,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], scrollable: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], closeIcon: [{
                 type: Input
             }], closeIconClass: [{
@@ -711,7 +869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class.k-tabstrip']
             }, {
                 type: HostBinding,
-                args: ['class.k-header']
+                args: ['class.k-tabstrip-md']
             }], tabsAtTop: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-top']
@@ -730,19 +888,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], tabStripScrollable: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-scrollable']
+            }], tabStripScrollableOverlay: [{
+                type: HostBinding,
+                args: ['class.k-tabstrip-scrollable-overlay']
             }], tabs: [{
                 type: ContentChildren,
                 args: [TabStripTabComponent]
             }], tablist: [{
                 type: ViewChild,
-                args: ['tablist', { static: false }]
+                args: ['tablist']
             }], tabHeaderContainers: [{
                 type: ViewChildren,
                 args: ['tabHeaderContainer', { read: ElementRef }]
             }], prevScrollButton: [{
                 type: ViewChild,
-                args: ['prevScrollButton', { static: false }]
+                args: ['prevScrollButton']
             }], nextScrollButton: [{
                 type: ViewChild,
-                args: ['nextScrollButton', { static: false }]
+                args: ['nextScrollButton']
             }] } });

package/esm2022/tabstrip/util.mjs

@@ -32,7 +32,12 @@ export const isTabClosable = (tab, tabStripClosable) => {
  * Checks if the TabStrip scroll buttons will be rendered. Depends on the value of the TabStrip scrollable settings.
  */
 export const tabStripHasScrollButtons = (scrollableSettings) => {
-    return scrollableSettings.enabled && scrollableSettings.scrollButtons !== 'hidden';
+    const visible = scrollableSettings.enabled && scrollableSettings.scrollButtons !== 'hidden';
+    const position = scrollableSettings.scrollButtonsPosition;
+    return {
+        visible,
+        position
+    };
 };
 /**
  * @hidden