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

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, normalizeOverflowSettings } from './util';
+import { innerWidth, closest, isPresent, getStylingClasses, SIZES } from './util';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from './common/preventable-event';
 import { ToolBarRendererComponent } from './renderer.component';
@@ -20,20 +20,17 @@ 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 { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent, ButtonGroupComponent } from '@progress/kendo-angular-buttons';
+import { moreVerticalIcon } from '@progress/kendo-svg-icons';
+import { ButtonComponent } 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;
@@ -55,27 +52,13 @@ export class ToolBarComponent {
     renderer;
     _cdr;
     toolsService;
-    scrollService;
     get overflowClass() {
         return `k-button-${SIZES[this.size]}`;
     }
     /**
-     * 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
+     * Hides the overflowing tools in a popup.
      */
-    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);
-    }
+    overflow = false;
     /**
      * @hidden
      */
@@ -83,39 +66,10 @@ export class ToolBarComponent {
         this.overflow = value;
     }
     get resizable() {
-        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';
+        return this.overflow;
     }
     /**
-     * Configures the popup of the ToolBar overflow button ([see example](slug:responsive_toolbar#customizing-the-popup)).
+     * Configures the popup of the ToolBar overflow button ([see example]({% slug responsive_toolbar %}#toc-popup-customization)).
      *
      * The available options are:
      * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
@@ -182,15 +136,8 @@ export class ToolBarComponent {
     allTools;
     overflowButton;
     popupTemplate;
-    popupSectionTemplate;
-    scrollContainer;
     resizeSensor;
     container;
-    prevScrollButton;
-    nextScrollButton;
-    startButtonGroup;
-    endButtonGroup;
-    scrollSeparator;
     popupRef;
     direction;
     get appendTo() {
@@ -219,40 +166,17 @@ 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();
     /**
@@ -280,11 +204,12 @@ export class ToolBarComponent {
         return this.direction;
     }
     get resizableClass() {
-        return this.resizable;
+        return this.overflow;
     }
+    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, scrollService) {
+    element, zone, renderer, _cdr, toolsService) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -294,19 +219,13 @@ 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());
         }));
     }
@@ -363,11 +282,9 @@ export class ToolBarComponent {
                 }
             });
         });
-        if (this.overflowEnabled) {
+        if (this.overflow) {
             this.subscriptions.add(merge(this.resizeSensor.resize, this.toolsService.renderedToolsChange).subscribe(() => this.onResize()));
-            if (this.showMenu) {
-                this.navigationService.overflowButton = this.overflowButton;
-            }
+            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(() => {
@@ -378,38 +295,6 @@ 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 => {
@@ -443,10 +328,6 @@ export class ToolBarComponent {
         this.cancelRenderedToolsSubscription$.next();
         this.subscriptions.unsubscribe();
     }
-    /**
-     * @hidden
-     */
-    showOverflowSeparator = false;
     /**
      * @hidden
      */
@@ -459,31 +340,6 @@ 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
      */
@@ -491,17 +347,6 @@ 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
      */
@@ -520,30 +365,17 @@ export class ToolBarComponent {
             this.popupRef = null;
         }
         if (this.popupOpen) {
-            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.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();
             this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)));
             this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)));
         }
@@ -553,51 +385,15 @@ export class ToolBarComponent {
      */
     onResize() {
         if (isDocumentAvailable()) {
-            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();
-                }
-            }
+            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();
+            }
         }
     }
     /**
@@ -605,94 +401,45 @@ export class ToolBarComponent {
      */
     onPopupOpen() {
         this.zone.runOutsideAngular(() => {
-            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();
-                                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(() => {
+            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();
-                                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;
-                    }
-                });
-            }
+                                ev.target.click();
+                                ev.target.focus();
+                            }
+                        });
+                        break;
+                    default:
+                        break;
+                }
+            });
         });
         this.cancelRenderedToolsSubscription$.next();
         this.navigationService.setRenderedTools(this.toolsService.overflowTools);
@@ -715,9 +462,6 @@ export class ToolBarComponent {
         if (this.overflowKeydownListener) {
             this.overflowKeydownListener();
         }
-        if (this.sectionKeydownListener) {
-            this.sectionKeydownListener();
-        }
         this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
     }
     /**
@@ -731,11 +475,6 @@ 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) {
@@ -750,7 +489,7 @@ export class ToolBarComponent {
         return isNaN(this.popupSettings.height) ? this.popupSettings.height : `${this.popupSettings.height}px`;
     }
     get overflowAnchorWidth() {
-        if (!this.showMenu) {
+        if (!this.overflow) {
             return 0;
         }
         if (!this.cachedOverflowAnchorWidth) {
@@ -817,7 +556,7 @@ export class ToolBarComponent {
             return r.tool === tool;
         });
         const width = renderedElement.width;
-        tool.overflows = this.showMenu;
+        tool.overflows = this.overflow;
         this.refreshService.refresh(tool);
         return width;
     }
@@ -839,17 +578,11 @@ export class ToolBarComponent {
         this.refreshService.refresh(tool);
         return renderedElement.width; // returns 0 if `overflows` is true
     }
-    setPopupContentDimensions(isSection) {
+    setPopupContentDimensions() {
         const popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
-        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';
-        }
+        popupContentContainer.style.width = this.popupWidth;
+        popupContentContainer.style.height = this.popupHeight;
+        popupContentContainer.style.overflow = 'auto';
     }
     destroyPopup() {
         if (this.popupRef) {
@@ -869,10 +602,7 @@ export class ToolBarComponent {
         }
     }
     normalizePopupClasses(classList) {
-        let classes = ['k-toolbar-popup'];
-        if (this.normalizedOverflow.mode === 'menu') {
-            classes.push('k-menu-popup');
-        }
+        let classes = ['k-menu-popup', 'k-toolbar-popup'];
         if (!classList) {
             return classes;
         }
@@ -889,204 +619,62 @@ export class ToolBarComponent {
         }
         return classes;
     }
-    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: [
+    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: [
             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: "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: `
+        ], 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: `
         <ng-container kendoToolbarLocalizedMessages
-            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"
+        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
+        moreToolsTitle="More tools"
         >
         </ng-container>
-        <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 *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>
-        <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]="overflowButtonIcon('font')"
-            [svgIcon]="overflowButtonIcon('svg')"
+            icon="more-vertical"
+            [svgIcon]="moreVerticalIcon"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
-            [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
-            *ngIf="showMenu"
+            aria-haspopup="menu"
+            *ngIf="overflow"
             [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 
@@ -1094,7 +682,7 @@ export class ToolBarComponent {
                         kendoToolbarRenderer
                         [tool]="tool"
                         location="overflow"
-                        [resizable]="resizable"
+                        [resizable]="overflow"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
                     <ng-template #popupWrapper>
@@ -1105,29 +693,9 @@ 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="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"] }] });
+        <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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -1138,7 +706,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NavigationService,
                         LocalizationService,
                         ToolbarToolsService,
-                        ScrollService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.toolbar'
@@ -1147,162 +714,50 @@ 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-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"
+        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
+        moreToolsTitle="More tools"
         >
         </ng-container>
-        <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 *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>
-        <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]="overflowButtonIcon('font')"
-            [svgIcon]="overflowButtonIcon('svg')"
+            icon="more-vertical"
+            [svgIcon]="moreVerticalIcon"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
             [attr.aria-expanded]="popupOpen"
             [id]="overflowBtnId"
-            [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
-            *ngIf="showMenu"
+            aria-haspopup="menu"
+            *ngIf="overflow"
             [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 
@@ -1310,7 +765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoToolbarRenderer
                         [tool]="tool"
                         location="overflow"
-                        [resizable]="resizable"
+                        [resizable]="overflow"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
                     <ng-template #popupWrapper>
@@ -1321,33 +776,13 @@ 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="overflowEnabled" #resizeSensor></kendo-resize-sensor>
+        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ButtonGroupComponent, ToolbarScrollableButtonComponent]
+                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
                 }]
-        }], 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: [{
+        }], 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: [{
                 type: Input
             }], resizable: [{
                 type: Input
@@ -1375,42 +810,15 @@ 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']]