@progress/kendo-angular-toolbar 18.1.0-develop.3 → 18.1.0-develop.30

package/esm2022/toolbar.component.mjs

@@ -12,7 +12,7 @@ import { packageMetadata } from './package-metadata';
 import { RefreshService } from './refresh.service';
 import { NavigationService } from './navigation.service';
 import { ToolBarToolComponent } from './tools/toolbar-tool.component';
-import { innerWidth, closest, isPresent, getStylingClasses, SIZES } from './util';
+import { innerWidth, closest, isPresent, getStylingClasses, SIZES, normalizeOverflowSettings } from './util';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from './common/preventable-event';
 import { ToolBarRendererComponent } from './renderer.component';
@@ -20,17 +20,20 @@ import { Subscription, fromEvent, Subject, merge } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { moreVerticalIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
+import { ButtonComponent, ButtonGroupComponent } from '@progress/kendo-angular-buttons';
 import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
 import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
 import { ToolbarToolsService } from './tools/tools.service';
+import { ScrollService } from './scroll.service';
+import { ToolbarScrollableButtonComponent } from './scrollable-button.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "./refresh.service";
 import * as i4 from "./navigation.service";
 import * as i5 from "./tools/tools.service";
+import * as i6 from "./scroll.service";
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
 const immediateResizeThreshold = 300;
@@ -52,13 +55,27 @@ export class ToolBarComponent {
     renderer;
     _cdr;
     toolsService;
+    scrollService;
     get overflowClass() {
         return `k-button-${SIZES[this.size]}`;
     }
     /**
-     * Hides the overflowing tools in a popup.
+     * Configures the overflow mode. Used to specify how tools will be rendered when the total size of all tools is greater than the size of the Toolbar container.
+     * @default false
      */
-    overflow = false;
+    set overflow(overflow) {
+        this._overflow = overflow;
+        this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+    }
+    get overflow() {
+        return this._overflow;
+    }
+    get show() {
+        const buttonsVisibility = this.normalizedOverflow.scrollButtons;
+        const showAuto = buttonsVisibility === 'auto' && this.showAutoButtons;
+        const showAlways = buttonsVisibility === 'visible';
+        return this.isScrollMode && (showAuto || showAlways);
+    }
     /**
      * @hidden
      */
@@ -66,10 +83,39 @@ export class ToolBarComponent {
         this.overflow = value;
     }
     get resizable() {
-        return this.overflow;
+        return this.showMenu;
+    }
+    /**
+     * @hidden
+     */
+    get hasScrollButtons() {
+        const visible = this.normalizedOverflow.mode === 'scroll' && this.normalizedOverflow.scrollButtons !== 'hidden';
+        const position = this.normalizedOverflow.scrollButtonsPosition;
+        return {
+            visible,
+            position
+        };
+    }
+    /**
+     * @hidden
+     */
+    get isScrollMode() {
+        return this.normalizedOverflow.mode === 'scroll';
+    }
+    /**
+     * @hidden
+     */
+    get showMenu() {
+        return this.normalizedOverflow.mode === 'menu' || this.normalizedOverflow.mode === 'section';
+    }
+    /**
+     * @hidden
+     */
+    get overflowEnabled() {
+        return this.normalizedOverflow.mode !== 'none';
     }
     /**
-     * Configures the popup of the ToolBar overflow button ([see example]({% slug responsive_toolbar %}#toc-popup-customization)).
+     * Configures the popup of the ToolBar overflow button ([see example](slug:responsive_toolbar#customizing-the-popup)).
      *
      * The available options are:
      * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
@@ -136,8 +182,15 @@ export class ToolBarComponent {
     allTools;
     overflowButton;
     popupTemplate;
+    popupSectionTemplate;
+    scrollContainer;
     resizeSensor;
     container;
+    prevScrollButton;
+    nextScrollButton;
+    startButtonGroup;
+    endButtonGroup;
+    scrollSeparator;
     popupRef;
     direction;
     get appendTo() {
@@ -166,17 +219,40 @@ export class ToolBarComponent {
     get popupOpen() {
         return this._open;
     }
+    /**
+     * @hidden
+     */
+    prevButtonIcon = caretAltLeftIcon;
+    /**
+     * @hidden
+     */
+    nextButtonIcon = caretAltRightIcon;
     hostClass = true;
+    get scrollableClass() {
+        return this.isScrollMode;
+    }
+    get sectionClass() {
+        return this.normalizedOverflow.mode === 'section';
+    }
+    _overflow = false;
     _popupSettings;
     cachedOverflowAnchorWidth;
     _open;
     toolbarKeydownListener;
     overflowKeydownListener;
+    sectionKeydownListener;
     cancelRenderedToolsSubscription$ = new Subject();
     cachedGap;
     _size = DEFAULT_SIZE;
     _fillMode = DEFAULT_FILL_MODE;
     overflowButtonClickedTime = null;
+    showAutoButtons = false;
+    /**
+     * @hidden
+     */
+    get normalizedOverflow() {
+        return normalizeOverflowSettings(this.overflow);
+    }
     subscriptions = new Subscription();
     popupSubs = new Subscription();
     /**
@@ -204,12 +280,11 @@ export class ToolBarComponent {
         return this.direction;
     }
     get resizableClass() {
-        return this.overflow;
+        return this.resizable;
     }
-    moreVerticalIcon = moreVerticalIcon;
     constructor(localization, popupService, refreshService, navigationService, 
     // Needs to be public as it is being accessed in the Editor component
-    element, zone, renderer, _cdr, toolsService) {
+    element, zone, renderer, _cdr, toolsService, scrollService) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -219,13 +294,19 @@ export class ToolBarComponent {
         this.renderer = renderer;
         this._cdr = _cdr;
         this.toolsService = toolsService;
+        this.scrollService = scrollService;
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.scrollService.owner = this;
     }
     ngAfterContentInit() {
         this.toolsService.allTools = this.allTools.toArray();
         this.subscriptions.add(this.allTools.changes.subscribe(() => {
+            this.toolsService.reset();
             this.toolsService.allTools = this.allTools.toArray();
+            this.allTools.forEach((tool) => {
+                this.refreshService.refresh(tool);
+            });
             this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
         }));
     }
@@ -282,9 +363,11 @@ export class ToolBarComponent {
                 }
             });
         });
-        if (this.overflow) {
+        if (this.overflowEnabled) {
             this.subscriptions.add(merge(this.resizeSensor.resize, this.toolsService.renderedToolsChange).subscribe(() => this.onResize()));
-            this.navigationService.overflowButton = this.overflowButton;
+            if (this.showMenu) {
+                this.navigationService.overflowButton = this.overflowButton;
+            }
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // button icons are not rendered until onResize() is called
             this.zone.runOutsideAngular(() => {
@@ -295,6 +378,38 @@ export class ToolBarComponent {
                 });
             });
         }
+        if (this.isScrollMode) {
+            if (this.show) {
+                if (this.normalizedOverflow.scrollButtons === 'visible' && !this.scrollService.toolsOverflow) {
+                    this.renderer.addClass(this.nextScrollButton.nativeElement, 'k-disabled');
+                    this.renderer.addClass(this.prevScrollButton.nativeElement, 'k-disabled');
+                }
+                else {
+                    const buttonToDisable = this.direction === 'rtl' ? this.nextScrollButton : this.prevScrollButton;
+                    this.renderer.addClass(buttonToDisable.nativeElement, 'k-disabled');
+                }
+            }
+            if (this.hasScrollButtons.visible) {
+                this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
+                    if (this.show) {
+                        const action = activeButtonSettings.active ? 'remove' : 'add';
+                        const scrollButton = this[`${activeButtonSettings.buttonType}ScrollButton`].nativeElement;
+                        this.renderer[`${action}Class`](scrollButton, 'k-disabled');
+                        action === 'add' && this[`${activeButtonSettings.buttonType}ScrollButton`].nativeElement.blur();
+                    }
+                }));
+            }
+            this.zone.runOutsideAngular(() => {
+                this.subscriptions.add(this.renderer.listen(this.scrollContainer.nativeElement, 'scroll', (e) => {
+                    if (!this.hasScrollButtons.visible) {
+                        this.setScrollableOverlayClasses();
+                    }
+                    else {
+                        this.scrollService.onScroll(e);
+                    }
+                }));
+            });
+        }
         this.navigationService.setRenderedTools(this.toolsService.renderedTools);
         const stylingOptions = ['size', 'fillMode'];
         stylingOptions.forEach(option => {
@@ -328,6 +443,10 @@ export class ToolBarComponent {
         this.cancelRenderedToolsSubscription$.next();
         this.subscriptions.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    showOverflowSeparator = false;
     /**
      * @hidden
      */
@@ -340,6 +459,31 @@ export class ToolBarComponent {
     get cdr() {
         return this._cdr;
     }
+    /**
+     * @hidden
+     */
+    get sectionSizeClass() {
+        return this.size === 'none' ? '' : `k-toolbar-items-list-${SIZES[this.size]}`;
+    }
+    /**
+     * @hidden
+     */
+    getScrollButtonTitle(buttonType) {
+        let currentButton;
+        if (this.localization.rtl) {
+            currentButton = buttonType === 'prev' ? 'nextToolButton' : 'previousToolButton';
+        }
+        else {
+            currentButton = buttonType === 'prev' ? 'previousToolButton' : 'nextToolButton';
+        }
+        return this.localization.get(currentButton);
+    }
+    /**
+     * @hidden
+     */
+    scrollTools(dir) {
+        this.scrollService.scrollTools(dir);
+    }
     /**
      * @hidden
      */
@@ -347,6 +491,17 @@ export class ToolBarComponent {
         this.navigationService.click(data);
         this.element.nativeElement.setAttribute('tabindex', '-1');
     }
+    /**
+     * @hidden
+     */
+    overflowButtonIcon(iconType) {
+        if (iconType === 'svg') {
+            return this.normalizedOverflow.mode === 'section' ? moreHorizontalIcon : moreVerticalIcon;
+        }
+        else {
+            return this.normalizedOverflow.mode === 'section' ? 'more-horizontal' : 'more-vertical';
+        }
+    }
     /**
      * @hidden
      */
@@ -365,17 +520,30 @@ export class ToolBarComponent {
             this.popupRef = null;
         }
         if (this.popupOpen) {
-            this.popupRef = this.popupService.open({
-                anchor: this.overflowButton,
-                anchorAlign: this.popupSettings.anchorAlign,
-                popupAlign: this.popupSettings.popupAlign,
-                content: this.popupTemplate,
-                appendTo: this.appendTo,
-                animate: this.popupSettings.animate,
-                popupClass: this.normalizePopupClasses(this.popupSettings.popupClass),
-                positionMode: 'absolute'
-            });
-            this.setPopupContentDimensions();
+            let settings;
+            const isSection = this.normalizedOverflow.mode === 'section';
+            if (isSection) {
+                settings = {
+                    anchor: this.element.nativeElement,
+                    content: this.popupSectionTemplate,
+                    popupClass: this.normalizePopupClasses(),
+                    positionMode: 'absolute'
+                };
+            }
+            else {
+                settings = {
+                    anchor: this.overflowButton,
+                    anchorAlign: this.popupSettings.anchorAlign,
+                    popupAlign: this.popupSettings.popupAlign,
+                    content: this.popupTemplate,
+                    appendTo: this.appendTo,
+                    animate: this.popupSettings.animate,
+                    popupClass: this.normalizePopupClasses(this.popupSettings.popupClass),
+                    positionMode: 'absolute'
+                };
+            }
+            this.popupRef = this.popupService.open(settings);
+            this.setPopupContentDimensions(isSection);
             this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)));
             this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)));
         }
@@ -385,15 +553,51 @@ export class ToolBarComponent {
      */
     onResize() {
         if (isDocumentAvailable()) {
-            const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
-            this.shrink(containerWidth, this.childrenWidth);
-            this.stretch(containerWidth, this.childrenWidth);
-            this.displayAnchor();
-            this.resizeSensor?.acceptSize();
-            const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
-            if (this.popupOpen && !isImmediateResize) {
-                this.toggle();
+            if (this.showMenu) {
+                const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
+                this.shrink(containerWidth, this.childrenWidth);
+                this.stretch(containerWidth, this.childrenWidth);
+                this.displayAnchor();
+                const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
+                if (this.popupOpen && !isImmediateResize) {
+                    this.toggle();
+                }
             }
+            else if (this.isScrollMode) {
+                if (this.normalizedOverflow.scrollButtons === 'auto') {
+                    const containerWidth = innerWidth(this.element.nativeElement);
+                    let scrollButtonsWidth = 0;
+                    if (this.showAutoButtons) {
+                        const separatorWidth = this.scrollSeparator.nativeElement.getBoundingClientRect().width + 2 * this.gap;
+                        if (this.hasScrollButtons.position === 'split') {
+                            scrollButtonsWidth = innerWidth(this.prevScrollButton.nativeElement) + innerWidth(this.nextScrollButton.nativeElement) + 2 * separatorWidth;
+                        }
+                        else if (this.hasScrollButtons.position === 'end') {
+                            scrollButtonsWidth = innerWidth(this.endButtonGroup.nativeElement) + separatorWidth;
+                        }
+                        else {
+                            scrollButtonsWidth = innerWidth(this.startButtonGroup.nativeElement) + separatorWidth;
+                        }
+                    }
+                    const shouldShowButtons = (this.childrenWidth + scrollButtonsWidth) > containerWidth;
+                    if (shouldShowButtons !== this.showAutoButtons) {
+                        this.showAutoButtons = shouldShowButtons;
+                        this.cdr.detectChanges();
+                    }
+                    this.scrollService.toggleScrollButtonsState();
+                }
+                else if (!this.hasScrollButtons.visible) {
+                    this.setScrollableOverlayClasses();
+                }
+                else if (!this.scrollService.toolsOverflow) {
+                    this.renderer.addClass(this.nextScrollButton.nativeElement, 'k-disabled');
+                    this.renderer.addClass(this.prevScrollButton.nativeElement, 'k-disabled');
+                }
+                else {
+                    this.scrollService.toggleScrollButtonsState();
+                }
+            }
+            this.resizeSensor?.acceptSize();
         }
     }
     /**
@@ -401,45 +605,94 @@ export class ToolBarComponent {
      */
     onPopupOpen() {
         this.zone.runOutsideAngular(() => {
-            this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
-                switch (ev.keyCode) {
-                    case Keys.ArrowUp:
-                        this.zone.run(() => {
-                            ev.preventDefault();
-                            this.navigationService.focusPrev(ev);
-                        });
-                        break;
-                    case Keys.ArrowDown:
-                        this.zone.run(() => {
-                            ev.preventDefault();
-                            this.navigationService.focusNext(ev);
-                        });
-                        break;
-                    case Keys.Escape:
-                        this.zone.run(() => this.toggle(false));
-                        const eventArgs = new PreventableEvent();
-                        this.close.emit(eventArgs);
-                        break;
-                    case Keys.Tab:
-                        this.zone.run(() => {
-                            this.toggle(false);
-                            this.navigationService.resetNavigation();
-                        });
-                        break;
-                    case Keys.Enter:
-                    case Keys.Space:
-                        this.zone.run(() => {
-                            if (ev.target.closest('.k-menu-item')) {
+            if (this.normalizedOverflow.mode === 'section') {
+                this.sectionKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
+                    switch (ev.keyCode) {
+                        case Keys.ArrowLeft:
+                            this.zone.run(() => {
                                 ev.preventDefault();
-                                ev.target.click();
-                                ev.target.focus();
-                            }
-                        });
-                        break;
-                    default:
-                        break;
-                }
-            });
+                                if (this.direction === 'ltr') {
+                                    this.navigationService.focusPrev(ev);
+                                }
+                                else {
+                                    this.navigationService.focusNext(ev);
+                                }
+                                // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
+                                this.element.nativeElement.setAttribute('tabindex', '-1');
+                            });
+                            break;
+                        case Keys.ArrowRight:
+                            this.zone.run(() => {
+                                ev.preventDefault();
+                                if (this.direction === 'ltr') {
+                                    this.navigationService.focusNext(ev);
+                                }
+                                else {
+                                    this.navigationService.focusPrev(ev);
+                                }
+                                // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
+                                this.element.nativeElement.setAttribute('tabindex', '-1');
+                            });
+                            break;
+                        case Keys.Escape: {
+                            this.zone.run(() => this.toggle(false));
+                            const eventArgs = new PreventableEvent();
+                            this.close.emit(eventArgs);
+                            break;
+                        }
+                        case Keys.Tab:
+                            this.zone.run(() => {
+                                this.toggle(false);
+                                this.navigationService.resetNavigation();
+                            });
+                            break;
+                        default:
+                            break;
+                    }
+                });
+            }
+            else {
+                this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
+                    switch (ev.keyCode) {
+                        case Keys.ArrowUp:
+                            this.zone.run(() => {
+                                ev.preventDefault();
+                                this.navigationService.focusPrev(ev);
+                            });
+                            break;
+                        case Keys.ArrowDown:
+                            this.zone.run(() => {
+                                ev.preventDefault();
+                                this.navigationService.focusNext(ev);
+                            });
+                            break;
+                        case Keys.Escape: {
+                            this.zone.run(() => this.toggle(false));
+                            const eventArgs = new PreventableEvent();
+                            this.close.emit(eventArgs);
+                            break;
+                        }
+                        case Keys.Tab:
+                            this.zone.run(() => {
+                                this.toggle(false);
+                                this.navigationService.resetNavigation();
+                            });
+                            break;
+                        case Keys.Enter:
+                        case Keys.Space:
+                            this.zone.run(() => {
+                                if (ev.target.closest('.k-menu-item')) {
+                                    ev.preventDefault();
+                                    ev.target.click();
+                                    ev.target.focus();
+                                }
+                            });
+                            break;
+                        default:
+                            break;
+                    }
+                });
+            }
         });
         this.cancelRenderedToolsSubscription$.next();
         this.navigationService.setRenderedTools(this.toolsService.overflowTools);
@@ -462,6 +715,9 @@ export class ToolBarComponent {
         if (this.overflowKeydownListener) {
             this.overflowKeydownListener();
         }
+        if (this.sectionKeydownListener) {
+            this.sectionKeydownListener();
+        }
         this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
     }
     /**
@@ -475,6 +731,11 @@ export class ToolBarComponent {
     displayAnchor() {
         const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
         this.overflowButton && this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
+        const isVisible = visibility === 'visible';
+        if (isVisible !== this.showOverflowSeparator) {
+            this.showOverflowSeparator = isVisible;
+            this.cdr.detectChanges();
+        }
     }
     get popupWidth() {
         if (!this.popupSettings || !this.popupSettings.width) {
@@ -489,7 +750,7 @@ export class ToolBarComponent {
         return isNaN(this.popupSettings.height) ? this.popupSettings.height : `${this.popupSettings.height}px`;
     }
     get overflowAnchorWidth() {
-        if (!this.overflow) {
+        if (!this.showMenu) {
             return 0;
         }
         if (!this.cachedOverflowAnchorWidth) {
@@ -556,7 +817,7 @@ export class ToolBarComponent {
             return r.tool === tool;
         });
         const width = renderedElement.width;
-        tool.overflows = this.overflow;
+        tool.overflows = this.showMenu;
         this.refreshService.refresh(tool);
         return width;
     }
@@ -578,11 +839,17 @@ export class ToolBarComponent {
         this.refreshService.refresh(tool);
         return renderedElement.width; // returns 0 if `overflows` is true
     }
-    setPopupContentDimensions() {
+    setPopupContentDimensions(isSection) {
         const popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
-        popupContentContainer.style.width = this.popupWidth;
-        popupContentContainer.style.height = this.popupHeight;
-        popupContentContainer.style.overflow = 'auto';
+        if (isSection) {
+            const toolbarWidth = this.element.nativeElement.getBoundingClientRect().width;
+            popupContentContainer.style.width = `${toolbarWidth}px`;
+        }
+        else {
+            popupContentContainer.style.width = this.popupWidth;
+            popupContentContainer.style.height = this.popupHeight;
+            popupContentContainer.style.overflow = 'auto';
+        }
     }
     destroyPopup() {
         if (this.popupRef) {
@@ -602,7 +869,10 @@ export class ToolBarComponent {
         }
     }
     normalizePopupClasses(classList) {
-        let classes = ['k-menu-popup', 'k-toolbar-popup'];
+        let classes = ['k-toolbar-popup'];
+        if (this.normalizedOverflow.mode === 'menu') {
+            classes.push('k-menu-popup');
+        }
         if (!classList) {
             return classes;
         }
@@ -619,62 +889,204 @@ export class ToolBarComponent {
         }
         return classes;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+    setScrollableOverlayClasses() {
+        const wrapper = this.element.nativeElement;
+        const container = this.scrollContainer?.nativeElement;
+        if (!container) {
+            return;
+        }
+        const scrollOffset = container.scrollLeft;
+        const defaultOffset = 1;
+        if (this.scrollService.toolsOverflow) {
+            this.renderer.addClass(wrapper, 'k-toolbar-scrollable-overlay');
+            if (scrollOffset === 0) {
+                this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-end');
+                this.renderer.addClass(wrapper, 'k-toolbar-scrollable-start');
+            }
+            else if ((scrollOffset > 0 && scrollOffset < this.scrollService.scrollContainerOverflowSize - defaultOffset) || (scrollOffset < 0 && Math.abs(scrollOffset) < this.scrollService.scrollContainerOverflowSize - defaultOffset)) {
+                this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-end');
+                this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-start');
+            }
+            else {
+                this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-start');
+                this.renderer.addClass(wrapper, 'k-toolbar-scrollable-end');
+            }
+        }
+        else {
+            this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-overlay');
+            this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-end');
+            this.renderer.removeClass(wrapper, 'k-toolbar-scrollable-start');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }, { token: i6.ScrollService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
             RefreshService,
             NavigationService,
             LocalizationService,
             ToolbarToolsService,
+            ScrollService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.toolbar'
             }
-        ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "popupSectionTemplate", first: true, predicate: ["popupSectionTemplate"], descendants: true, static: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true, read: ElementRef }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true, read: ElementRef }, { propertyName: "startButtonGroup", first: true, predicate: ["startButtonGroup"], descendants: true, read: ElementRef }, { propertyName: "endButtonGroup", first: true, predicate: ["endButtonGroup"], descendants: true, read: ElementRef }, { propertyName: "scrollSeparator", first: true, predicate: ["scrollSeparator"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoToolbarLocalizedMessages
-        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
-        moreToolsTitle="More tools"
+            i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
+            moreToolsTitle="More tools"
+
+            i18n-previousToolButton="kendo.toolbar.previousToolButton|The title for the **Previous Tool** button when the Toolbar is scrollable."
+            previousToolButton="Scroll left"
+
+            i18n-nextToolButton="kendo.toolbar.nextToolButton|The title for the **Next Tool** button when the Toolbar is scrollable."
+            nextToolButton="Scroll right"
         >
         </ng-container>
-        <ng-container *ngFor="let tool of allTools; let index = index"
-            kendoToolbarRenderer
-            [tool]="tool"
-            location="toolbar"
-            [resizable]="overflow"
-            (rendererClick)="onRendererClick($event)"
-            [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-            <ng-template #wrapper>
-                <div class="k-toolbar-item">
-                    <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                </div>
-            </ng-template>
+        <ng-container *ngIf="show && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'start')">
+            <span *ngIf="hasScrollButtons.position === 'split'" #prevScrollButton
+                kendoToolbarScrollableButton
+                [prev]="true"
+                [overflow]="normalizedOverflow"
+                [title]="getScrollButtonTitle('prev')"
+                class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                [ngClass]="{
+                    'k-button-sm': size === 'small',
+                    'k-button-md': size === 'medium' || !size,
+                    'k-button-lg': size === 'large'
+                }"
+                (onClick)="scrollTools($event)">
+            </span>
+            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'start'" #startButtonGroup>
+                <span #prevScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="true"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('prev')"
+                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+                <span #nextScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="false"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('next')"
+                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+            </div>
+            <div class="k-toolbar-separator k-toolbar-button-separator k-separator" #scrollSeparator></div>
         </ng-container>
+        <div class="k-toolbar-items k-toolbar-items-scroll" *ngIf="isScrollMode; else noScroll" #scrollContainer>
+            <ng-container *ngFor="let tool of allTools; let index = index"
+                kendoToolbarRenderer
+                [tool]="tool"
+                location="toolbar"
+                [resizable]="resizable"
+                (rendererClick)="onRendererClick($event)"
+                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+                <ng-template #wrapper>
+                    <div class="k-toolbar-item">
+                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
+                    </div>
+                </ng-template>
+            </ng-container>
+        </div>
+        <ng-template #noScroll>
+            <ng-container *ngFor="let tool of allTools; let index = index"
+                kendoToolbarRenderer
+                [tool]="tool"
+                location="toolbar"
+                [resizable]="resizable"
+                (rendererClick)="onRendererClick($event)"
+                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+                <ng-template #wrapper>
+                    <div class="k-toolbar-item">
+                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
+                    </div>
+                </ng-template>
+            </ng-container>
+        </ng-template>
+        <div class="k-toolbar-separator k-toolbar-button-separator k-separator" *ngIf="showOverflowSeparator"></div>
         <button
             kendoButton
             fillMode="flat"
             #overflowButton
             type="button"
-            icon="more-vertical"
-            [svgIcon]="moreVerticalIcon"
+            [icon]="overflowButtonIcon('font')"
+            [svgIcon]="overflowButtonIcon('svg')"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
-            aria-haspopup="menu"
-            *ngIf="overflow"
+            [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
+            *ngIf="showMenu"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
-            [style.margin-inline-start]="'auto'"
             class="k-toolbar-overflow-button"
             [ngClass]="overflowClass"
             (click)="showPopup()"
         >
         </button>
+        <ng-container *ngIf="show && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'end')">
+            <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+            <span *ngIf="hasScrollButtons.position === 'split'" #nextScrollButton
+                kendoToolbarScrollableButton
+                [prev]="false"
+                [overflow]="normalizedOverflow"
+                [title]="getScrollButtonTitle('next')"
+                class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                [ngClass]="{
+                    'k-button-sm': size === 'small',
+                    'k-button-md': size === 'medium' || !size,
+                    'k-button-lg': size === 'large'
+                }"
+                (onClick)="scrollTools($event)">
+            </span>
+            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'end'" #endButtonGroup>
+                <span #prevScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="true"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('prev')"
+                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+                <span #nextScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="false"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('next')"
+                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+            </div>
+        </ng-container>
         <ng-template #popupTemplate>
             <div
                 class="k-menu-group k-menu-group-md"
                 role="menu"
                 [id]="popupId"
+                [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of overflowTools; let index = index">
                     <ng-template 
@@ -682,7 +1094,7 @@ export class ToolBarComponent {
                         kendoToolbarRenderer
                         [tool]="tool"
                         location="overflow"
-                        [resizable]="overflow"
+                        [resizable]="resizable"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
                     <ng-template #popupWrapper>
@@ -693,9 +1105,29 @@ export class ToolBarComponent {
                 </ng-container>
             </div>
         </ng-template>
+        <ng-template #popupSectionTemplate>
+            <span class="k-toolbar-items-list k-toolbar-items-list-solid"
+                [ngClass]="sectionSizeClass"
+                role="toolbar"
+                [id]="popupId"
+                [attr.dir]="direction === 'rtl' ? 'rtl' : null"
+                [attr.aria-labelledby]="overflowBtnId">
+                <ng-container *ngFor="let tool of overflowTools; let index = index"
+                    kendoToolbarRenderer
+                    [tool]="tool"
+                    location="section"
+                    [resizable]="resizable"
+                    (rendererClick)="onRendererClick($event)"
+                    [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
+                    <ng-template #wrapper>
+                        <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
+                    </ng-template>
+                </ng-container>
+            </span>
+        </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+        <kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ToolbarScrollableButtonComponent, selector: "[kendoToolbarScrollableButton]", inputs: ["prev", "overflow"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -706,6 +1138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NavigationService,
                         LocalizationService,
                         ToolbarToolsService,
+                        ScrollService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.toolbar'
@@ -714,50 +1147,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-toolbar',
                     template: `
         <ng-container kendoToolbarLocalizedMessages
-        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
-        moreToolsTitle="More tools"
+            i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
+            moreToolsTitle="More tools"
+
+            i18n-previousToolButton="kendo.toolbar.previousToolButton|The title for the **Previous Tool** button when the Toolbar is scrollable."
+            previousToolButton="Scroll left"
+
+            i18n-nextToolButton="kendo.toolbar.nextToolButton|The title for the **Next Tool** button when the Toolbar is scrollable."
+            nextToolButton="Scroll right"
         >
         </ng-container>
-        <ng-container *ngFor="let tool of allTools; let index = index"
-            kendoToolbarRenderer
-            [tool]="tool"
-            location="toolbar"
-            [resizable]="overflow"
-            (rendererClick)="onRendererClick($event)"
-            [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-            <ng-template #wrapper>
-                <div class="k-toolbar-item">
-                    <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                </div>
-            </ng-template>
+        <ng-container *ngIf="show && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'start')">
+            <span *ngIf="hasScrollButtons.position === 'split'" #prevScrollButton
+                kendoToolbarScrollableButton
+                [prev]="true"
+                [overflow]="normalizedOverflow"
+                [title]="getScrollButtonTitle('prev')"
+                class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                [ngClass]="{
+                    'k-button-sm': size === 'small',
+                    'k-button-md': size === 'medium' || !size,
+                    'k-button-lg': size === 'large'
+                }"
+                (onClick)="scrollTools($event)">
+            </span>
+            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'start'" #startButtonGroup>
+                <span #prevScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="true"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('prev')"
+                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+                <span #nextScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="false"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('next')"
+                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+            </div>
+            <div class="k-toolbar-separator k-toolbar-button-separator k-separator" #scrollSeparator></div>
         </ng-container>
+        <div class="k-toolbar-items k-toolbar-items-scroll" *ngIf="isScrollMode; else noScroll" #scrollContainer>
+            <ng-container *ngFor="let tool of allTools; let index = index"
+                kendoToolbarRenderer
+                [tool]="tool"
+                location="toolbar"
+                [resizable]="resizable"
+                (rendererClick)="onRendererClick($event)"
+                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+                <ng-template #wrapper>
+                    <div class="k-toolbar-item">
+                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
+                    </div>
+                </ng-template>
+            </ng-container>
+        </div>
+        <ng-template #noScroll>
+            <ng-container *ngFor="let tool of allTools; let index = index"
+                kendoToolbarRenderer
+                [tool]="tool"
+                location="toolbar"
+                [resizable]="resizable"
+                (rendererClick)="onRendererClick($event)"
+                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+                <ng-template #wrapper>
+                    <div class="k-toolbar-item">
+                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
+                    </div>
+                </ng-template>
+            </ng-container>
+        </ng-template>
+        <div class="k-toolbar-separator k-toolbar-button-separator k-separator" *ngIf="showOverflowSeparator"></div>
         <button
             kendoButton
             fillMode="flat"
             #overflowButton
             type="button"
-            icon="more-vertical"
-            [svgIcon]="moreVerticalIcon"
+            [icon]="overflowButtonIcon('font')"
+            [svgIcon]="overflowButtonIcon('svg')"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
-            aria-haspopup="menu"
-            *ngIf="overflow"
+            [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
+            *ngIf="showMenu"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
-            [style.margin-inline-start]="'auto'"
             class="k-toolbar-overflow-button"
             [ngClass]="overflowClass"
             (click)="showPopup()"
         >
         </button>
+        <ng-container *ngIf="show && (hasScrollButtons.position === 'split' || hasScrollButtons.position === 'end')">
+            <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+            <span *ngIf="hasScrollButtons.position === 'split'" #nextScrollButton
+                kendoToolbarScrollableButton
+                [prev]="false"
+                [overflow]="normalizedOverflow"
+                [title]="getScrollButtonTitle('next')"
+                class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                [ngClass]="{
+                    'k-button-sm': size === 'small',
+                    'k-button-md': size === 'medium' || !size,
+                    'k-button-lg': size === 'large'
+                }"
+                (onClick)="scrollTools($event)">
+            </span>
+            <div class="k-button-group k-button-group-solid" *ngIf="hasScrollButtons.position === 'end'" #endButtonGroup>
+                <span #prevScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="true"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('prev')"
+                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+                <span #nextScrollButton
+                    kendoToolbarScrollableButton
+                    [prev]="false"
+                    [overflow]="normalizedOverflow"
+                    [title]="getScrollButtonTitle('next')"
+                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    [ngClass]="{
+                        'k-button-sm': size === 'small',
+                        'k-button-md': size === 'medium' || !size,
+                        'k-button-lg': size === 'large'
+                    }"
+                    (onClick)="scrollTools($event)">
+                </span>
+            </div>
+        </ng-container>
         <ng-template #popupTemplate>
             <div
                 class="k-menu-group k-menu-group-md"
                 role="menu"
                 [id]="popupId"
+                [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of overflowTools; let index = index">
                     <ng-template 
@@ -765,7 +1310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoToolbarRenderer
                         [tool]="tool"
                         location="overflow"
-                        [resizable]="overflow"
+                        [resizable]="resizable"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
                     <ng-template #popupWrapper>
@@ -776,13 +1321,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ng-container>
             </div>
         </ng-template>
+        <ng-template #popupSectionTemplate>
+            <span class="k-toolbar-items-list k-toolbar-items-list-solid"
+                [ngClass]="sectionSizeClass"
+                role="toolbar"
+                [id]="popupId"
+                [attr.dir]="direction === 'rtl' ? 'rtl' : null"
+                [attr.aria-labelledby]="overflowBtnId">
+                <ng-container *ngFor="let tool of overflowTools; let index = index"
+                    kendoToolbarRenderer
+                    [tool]="tool"
+                    location="section"
+                    [resizable]="resizable"
+                    (rendererClick)="onRendererClick($event)"
+                    [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
+                    <ng-template #wrapper>
+                        <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
+                    </ng-template>
+                </ng-container>
+            </span>
+        </ng-template>
         <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
+                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ButtonGroupComponent, ToolbarScrollableButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ToolbarToolsService }]; }, propDecorators: { overflow: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ToolbarToolsService }, { type: i6.ScrollService }]; }, propDecorators: { overflow: [{
                 type: Input
             }], resizable: [{
                 type: Input
@@ -810,15 +1375,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { static: true }]
+            }], popupSectionTemplate: [{
+                type: ViewChild,
+                args: ['popupSectionTemplate', { static: true }]
+            }], scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer', { read: ElementRef, static: false }]
             }], resizeSensor: [{
                 type: ViewChild,
                 args: ['resizeSensor', { static: false }]
             }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
+            }], prevScrollButton: [{
+                type: ViewChild,
+                args: ['prevScrollButton', { read: ElementRef }]
+            }], nextScrollButton: [{
+                type: ViewChild,
+                args: ['nextScrollButton', { read: ElementRef }]
+            }], startButtonGroup: [{
+                type: ViewChild,
+                args: ['startButtonGroup', { read: ElementRef }]
+            }], endButtonGroup: [{
+                type: ViewChild,
+                args: ['endButtonGroup', { read: ElementRef }]
+            }], scrollSeparator: [{
+                type: ViewChild,
+                args: ['scrollSeparator', { read: ElementRef }]
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar']
+            }], scrollableClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-scrollable']
+            }], sectionClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-section']
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]