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

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

@@ -28,8 +28,8 @@ 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'
 };
 
@@ -3068,7 +3068,12 @@ const isTabClosable = (tab, tabStripClosable) => {
  * Checks if the TabStrip scroll buttons will be rendered. Depends on the value of the TabStrip scrollable settings.
  */
 const tabStripHasScrollButtons = (scrollableSettings) => {
-    return scrollableSettings.enabled && scrollableSettings.scrollButtons !== 'hidden';
+    const visible = scrollableSettings.enabled && scrollableSettings.scrollButtons !== 'hidden';
+    const position = scrollableSettings.scrollButtonsPosition;
+    return {
+        visible,
+        position
+    };
 };
 /**
  * @hidden
@@ -3352,16 +3357,6 @@ 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;
     }
@@ -3373,7 +3368,7 @@ 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));
         }
@@ -3437,19 +3432,8 @@ 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) {
@@ -3463,13 +3447,12 @@ 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;
@@ -3487,7 +3470,7 @@ 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 });
 }
@@ -3498,12 +3481,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * @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,
@@ -3772,7 +3756,7 @@ 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>
@@ -3856,6 +3840,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']
@@ -4004,12 +3991,52 @@ 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.
      */
@@ -4071,6 +4098,9 @@ class TabStripComponent {
     get tabStripScrollable() {
         return this._scrollableSettings.enabled;
     }
+    get tabStripScrollableOverlay() {
+        return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
+    }
     /**
      * A query list of all declared tabs.
      */
@@ -4107,6 +4137,7 @@ class TabStripComponent {
     tabStripId = guid();
     tabsChangesSub;
     activeStateChangeSub;
+    _size = 'medium';
     constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
         this.localization = localization;
         this.renderer = renderer;
@@ -4119,7 +4150,7 @@ 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');
             }
@@ -4147,6 +4178,7 @@ class TabStripComponent {
                 this.scrollService.toggleScrollButtonsState();
             });
         });
+        this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -4162,7 +4194,7 @@ 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');
                             }
@@ -4291,7 +4323,7 @@ class TabStripComponent {
             resetTabFocus(this.tabs);
         }));
         if (this.isScrollable && this.mouseScrollEnabled) {
-            this.attachWheelHandler(tablist);
+            this.attachTablistScrollHandler(tablist);
         }
         this.subscriptionsArePresent = true;
     }
@@ -4312,30 +4344,53 @@ 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: TabStripService }, { token: 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,
@@ -4369,10 +4424,10 @@ 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"
@@ -4380,9 +4435,30 @@ 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]="{
@@ -4390,7 +4466,8 @@ 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'"
                 >
@@ -4417,7 +4494,24 @@ 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"
@@ -4425,7 +4519,12 @@ 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>
@@ -4508,10 +4607,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"
@@ -4519,9 +4618,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]="{
@@ -4529,7 +4649,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'"
                 >
@@ -4556,7 +4677,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"
@@ -4564,7 +4702,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>
@@ -4606,6 +4749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], scrollable: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], closeIcon: [{
                 type: Input
             }], closeIconClass: [{
@@ -4625,7 +4770,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']
@@ -4644,21 +4789,24 @@ 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/index.d.ts

@@ -22,8 +22,9 @@ export { TabAlignment } from './tabstrip/models/tab-alignment';
 export { TabStripScrollButtonsVisibility } from './tabstrip/models/scroll-buttons-visibility';
 export { LocalizedTabStripMessagesDirective } from './tabstrip/localization/localized-messages.directive';
 export { TabStripCustomMessagesComponent } from './tabstrip/localization/custom-messages.component';
-export { TabStripScrollableSettings } from './tabstrip/models/scrollable-settings';
+export { TabStripScrollableSettings, TabStripScrollButtonsPosition } from './tabstrip/models/scrollable-settings';
 export { TabTemplateDirective } from './tabstrip/directives/tab.directive';
+export { TabStripSize } from './tabstrip/models/size';
 export * from './tabstrip/events';
 export { DrawerComponent } from './drawer/drawer.component';
 export { DrawerContainerComponent } from './drawer/drawer-container.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "17.3.0-develop.2",
+  "version": "18.0.0-develop.10",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -39,17 +39,17 @@
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "17.3.0-develop.2",
-    "@progress/kendo-angular-l10n": "17.3.0-develop.2",
-    "@progress/kendo-angular-progressbar": "17.3.0-develop.2",
-    "@progress/kendo-angular-icons": "17.3.0-develop.2",
-    "@progress/kendo-angular-buttons": "17.3.0-develop.2",
-    "@progress/kendo-angular-intl": "17.3.0-develop.2",
+    "@progress/kendo-angular-common": "18.0.0-develop.10",
+    "@progress/kendo-angular-l10n": "18.0.0-develop.10",
+    "@progress/kendo-angular-progressbar": "18.0.0-develop.10",
+    "@progress/kendo-angular-icons": "18.0.0-develop.10",
+    "@progress/kendo-angular-buttons": "18.0.0-develop.10",
+    "@progress/kendo-angular-intl": "18.0.0-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.3.0-develop.2",
+    "@progress/kendo-angular-schematics": "18.0.0-develop.10",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/tabstrip/models/scrollable-settings.d.ts

@@ -14,14 +14,14 @@ export interface TabStripScrollableSettings {
      */
     enabled?: boolean;
     /**
-     * Determines whether the TabStrip scroll buttons visibility mode. The possible options are:
+     * Determines the TabStrip scroll buttons visibility mode. The possible options are:
      * - 'auto'(default) - The scroll buttons will be rendered only when the tabs list overflows its container.
      * - 'visible' - The scroll buttons will be always visible.
      * - 'hidden' - No scroll buttons will be rendered.
      */
     scrollButtons?: TabStripScrollButtonsVisibility;
     /**
-     * Determines whether the TabStrip will be scrolled with the mouse wheel.
+     * Determines whether the TabStrip will be scrolled with the mouse or other pointer devices such as touchpads and touch screens.
      * @default true
      */
     mouseScroll?: boolean;
@@ -31,8 +31,8 @@ export interface TabStripScrollableSettings {
      */
     buttonScrollSpeed?: number;
     /**
-     * Sets the tab list scroll speed in pixels when scrolling via the mouse wheel.
-     * @default 10
+     * Deprecated in v.18.0.0 and will be removed in v.19.0.0 of the `@progress/kendo-angular-layout` package.
+     * The scroll speed will naturally follow the user behavior and concrete device specifics.
      */
     mouseScrollSpeed?: number;
     /**
@@ -57,7 +57,18 @@ export interface TabStripScrollableSettings {
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     nextSVGButtonIcon?: SVGIcon;
+    /**
+     * Determines the TabStrip scroll buttons position. The possible options are:
+     * - 'start'—The scroll buttons will be rendered at the start before all tabs.
+     * - 'end'—The scroll buttons will be rendered at the end after all tabs.
+     * - 'split'(default)—The scroll buttons will be rendered at each side of the tabs.
+     */
+    scrollButtonsPosition?: TabStripScrollButtonsPosition;
 }
+/**
+ * The available options for the `scrollButtonsPosition` option.
+ */
+export type TabStripScrollButtonsPosition = 'start' | 'end' | 'split';
 /**
  * @hidden
  */

package/tabstrip/models/size.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the possible sizes of the TabStrip ([see example](slug:sizing_tabstrip)).
+ */
+export type TabStripSize = 'small' | 'medium' | 'large' | 'none';