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

package/index.d.ts

@@ -19,4 +19,7 @@ export { ToolbarCustomMessagesComponent } from './localization/custom-messages.c
 export { RefreshService } from './refresh.service';
 export { ToolbarSize } from './common/size';
 export { ToolbarFillMode } from './common/fillmode';
+export { OverflowMode } from './common/overflow-mode';
+export { ToolbarOverflowSettings } from './common/overflow-settings';
+export { ToolbarScrollButtonsPosition, ToolbarScrollButtonsVisibility } from './common/scroll-buttons';
 export * from './directives';

package/localization/messages.d.ts

@@ -9,9 +9,17 @@ import * as i0 from "@angular/core";
  */
 export declare class ToolbarMessages extends ComponentMessages {
     /**
-     * The title of the **more tools** button in a responsive ToolBar
+     * The title of the **More Tools** button in a responsive ToolBar
      */
     moreToolsTitle: string;
+    /**
+     * The title for the **Previous Tool** button when the Toolbar is scrollable.
+     */
+    previousToolButton: string;
+    /**
+     * The title for the **Next Tool** button when the Toolbar is scrollable.
+     */
+    nextToolButton: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ToolbarMessages, "kendo-toolbar-messages-base", never, { "moreToolsTitle": { "alias": "moreToolsTitle"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ToolbarMessages, "kendo-toolbar-messages-base", never, { "moreToolsTitle": { "alias": "moreToolsTitle"; "required": false; }; "previousToolButton": { "alias": "previousToolButton"; "required": false; }; "nextToolButton": { "alias": "nextToolButton"; "required": false; }; }, {}, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "18.1.0-develop.3",
+  "version": "18.1.0-develop.31",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,7 +25,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1738245757,
+      "publishDate": 1739264198,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -34,17 +34,17 @@
     "@angular/common": "16 - 19",
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
-    "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "18.1.0-develop.3",
-    "@progress/kendo-angular-common": "18.1.0-develop.3",
-    "@progress/kendo-angular-l10n": "18.1.0-develop.3",
-    "@progress/kendo-angular-icons": "18.1.0-develop.3",
-    "@progress/kendo-angular-popup": "18.1.0-develop.3",
+    "@progress/kendo-licensing": "^1.4.0",
+    "@progress/kendo-angular-buttons": "18.1.0-develop.31",
+    "@progress/kendo-angular-common": "18.1.0-develop.31",
+    "@progress/kendo-angular-l10n": "18.1.0-develop.31",
+    "@progress/kendo-angular-icons": "18.1.0-develop.31",
+    "@progress/kendo-angular-popup": "18.1.0-develop.31",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "18.1.0-develop.3"
+    "@progress/kendo-angular-schematics": "18.1.0-develop.31"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-toolbar.mjs",

package/render-location.d.ts

@@ -5,4 +5,4 @@
 /**
  * @hidden
  */
-export type RenderLocation = "toolbar" | "overflow";
+export type RenderLocation = 'toolbar' | 'overflow' | 'section';

package/scroll.service.d.ts

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgZone } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ToolBarComponent } from './toolbar.component';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export type ScrollButtonActiveStateChange = {
+    buttonType: string;
+    active: boolean;
+};
+/**
+ * @hidden
+ */
+export type ScrollButtonType = 'prev' | 'next';
+/**
+ * @hidden
+ */
+export declare class ScrollService {
+    private ngZone;
+    private localization;
+    owner: ToolBarComponent;
+    position: number;
+    scrollButtonActiveStateChange: Subject<ScrollButtonActiveStateChange>;
+    get scrollElement(): HTMLElement;
+    get scrollContainerOverflowSize(): number;
+    get toolsOverflow(): boolean;
+    constructor(ngZone: NgZone, localization: LocalizationService);
+    toggleScrollButtonsState(): void;
+    onScroll(e: Event): void;
+    scrollTools(direction: string): void;
+    calculateListPosition(direction: string, scrollSpeed: number): void;
+    private toggleButtonActiveState;
+    private isDisabled;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ScrollService>;
+}

package/scrollable-button.component.d.ts

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2, NgZone, AfterViewInit, OnDestroy, EventEmitter } from '@angular/core';
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { ToolbarOverflowSettings } from './common/overflow-settings';
+import { ScrollButtonType } from './scroll.service';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class ToolbarScrollableButtonComponent implements AfterViewInit, OnDestroy {
+    host: ElementRef;
+    private renderer;
+    private ngZone;
+    private localization;
+    get prevClass(): boolean;
+    get nextClass(): boolean;
+    /**
+     * @hidden
+     */
+    onMouseDown(ev: any): void;
+    role: string;
+    prev: boolean;
+    overflow: ToolbarOverflowSettings;
+    onClick: EventEmitter<ScrollButtonType>;
+    get iconClass(): string;
+    get customIconClass(): string;
+    get svgIcon(): SVGIcon;
+    caretAltLeftIcon: SVGIcon;
+    caretAltRightIcon: SVGIcon;
+    private subs;
+    constructor(host: ElementRef, renderer: Renderer2, ngZone: NgZone, localization: LocalizationService);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private clickHandler;
+    private get scrollButtonIconClass();
+    private get customScrollButtonIconClass();
+    private get scrollButtonSVGIcon();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarScrollableButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarScrollableButtonComponent, "[kendoToolbarScrollableButton]", never, { "prev": { "alias": "prev"; "required": false; }; "overflow": { "alias": "overflow"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

package/toolbar.component.d.ts

@@ -17,12 +17,16 @@ import { RendererClickPayload } from './common/renderer-click';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ToolbarToolsService } from './tools/tools.service';
 import { ToolbarFillMode } from './common/fillmode';
+import { OverflowMode } from './common/overflow-mode';
+import { ToolbarOverflowSettings } from './common/overflow-settings';
+import { ToolbarScrollButtonsPosition } from './common/scroll-buttons';
+import { ScrollService } from './scroll.service';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 export declare class ToolBarComponent {
-    private localization;
+    localization: LocalizationService;
     private popupService;
     private refreshService;
     private navigationService;
@@ -31,18 +35,41 @@ export declare class ToolBarComponent {
     private renderer;
     private _cdr;
     private toolsService;
+    private scrollService;
     get overflowClass(): string;
     /**
-     * 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: boolean;
+    set overflow(overflow: boolean | OverflowMode | ToolbarOverflowSettings);
+    get overflow(): boolean | OverflowMode | ToolbarOverflowSettings;
+    get show(): boolean;
     /**
      * @hidden
      */
     set resizable(value: boolean);
     get resizable(): boolean;
     /**
-     * Configures the popup of the ToolBar overflow button ([see example]({% slug responsive_toolbar %}#toc-popup-customization)).
+     * @hidden
+     */
+    get hasScrollButtons(): {
+        visible: boolean;
+        position: ToolbarScrollButtonsPosition;
+    };
+    /**
+     * @hidden
+     */
+    get isScrollMode(): boolean;
+    /**
+     * @hidden
+     */
+    get showMenu(): boolean;
+    /**
+     * @hidden
+     */
+    get overflowEnabled(): boolean;
+    /**
+     * 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.
@@ -89,24 +116,48 @@ export declare class ToolBarComponent {
     allTools: QueryList<ToolBarToolComponent>;
     overflowButton: ElementRef;
     popupTemplate: TemplateRef<any>;
+    popupSectionTemplate: TemplateRef<any>;
+    scrollContainer: ElementRef;
     resizeSensor: ResizeSensorComponent;
     container: ViewContainerRef;
+    prevScrollButton: ElementRef;
+    nextScrollButton: ElementRef;
+    startButtonGroup: ElementRef;
+    endButtonGroup: ElementRef;
+    scrollSeparator: ElementRef;
     popupRef: PopupRef;
     direction: Direction;
     get appendTo(): ViewContainerRef;
     set popupOpen(open: boolean);
     get popupOpen(): boolean;
+    /**
+     * @hidden
+     */
+    prevButtonIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    nextButtonIcon: SVGIcon;
     hostClass: boolean;
+    get scrollableClass(): boolean;
+    get sectionClass(): boolean;
+    private _overflow;
     private _popupSettings;
     private cachedOverflowAnchorWidth;
     private _open;
     private toolbarKeydownListener;
     private overflowKeydownListener;
+    private sectionKeydownListener;
     private cancelRenderedToolsSubscription$;
     private cachedGap;
     private _size;
     private _fillMode;
     private overflowButtonClickedTime;
+    private showAutoButtons;
+    /**
+     * @hidden
+     */
+    get normalizedOverflow(): ToolbarOverflowSettings;
     private subscriptions;
     private popupSubs;
     /**
@@ -120,13 +171,16 @@ export declare class ToolBarComponent {
     role: string;
     get getDir(): string;
     get resizableClass(): boolean;
-    moreVerticalIcon: SVGIcon;
-    constructor(localization: LocalizationService, popupService: PopupService, refreshService: RefreshService, navigationService: NavigationService, element: ElementRef, zone: NgZone, renderer: Renderer2, _cdr: ChangeDetectorRef, toolsService: ToolbarToolsService);
+    constructor(localization: LocalizationService, popupService: PopupService, refreshService: RefreshService, navigationService: NavigationService, element: ElementRef, zone: NgZone, renderer: Renderer2, _cdr: ChangeDetectorRef, toolsService: ToolbarToolsService, scrollService: ScrollService);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    showOverflowSeparator: boolean;
     /**
      * @hidden
      */
@@ -135,10 +189,26 @@ export declare class ToolBarComponent {
      * @hidden
      */
     get cdr(): ChangeDetectorRef;
+    /**
+     * @hidden
+     */
+    get sectionSizeClass(): string;
+    /**
+     * @hidden
+     */
+    getScrollButtonTitle(buttonType: string): string;
+    /**
+     * @hidden
+     */
+    scrollTools(dir: string): void;
     /**
      * @hidden
      */
     onRendererClick(data: RendererClickPayload): void;
+    /**
+     * @hidden
+     */
+    overflowButtonIcon(iconType: string): any;
     /**
      * @hidden
      */
@@ -183,6 +253,7 @@ export declare class ToolBarComponent {
     private destroyPopup;
     private handleClasses;
     private normalizePopupClasses;
+    private setScrollableOverlayClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarComponent, "kendo-toolbar", ["kendoToolBar"], { "overflow": { "alias": "overflow"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "open": "open"; "close": "close"; }, ["allTools"], never, true, never>;
 }

package/tools/toolbar-button.component.d.ts

@@ -137,6 +137,7 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     toolbarOptions: ToolOptions;
     overflowOptions: ToolOptions;
     toolbarButtonElement: ElementRef;
+    sectionButtonElement: ElementRef;
     private overflowButtonElement;
     private _showText;
     private _text;

package/tools/toolbar-buttongroup.component.d.ts

@@ -45,6 +45,7 @@ export declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      */
     set look(look: 'default' | 'flat' | 'outline');
     private toolbarButtonGroup;
+    private sectionButtonGroup;
     overflowListItems: QueryList<ElementRef>;
     buttonComponents: QueryList<ToolBarButtonComponent>;
     private get buttonElements();

package/tools/toolbar-dropdownbutton.component.d.ts

@@ -145,7 +145,8 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      */
     close: EventEmitter<PreventableEvent>;
     dropdownButton: ElementRef;
-    dropDownButtonComponent: DropDownButtonComponent;
+    toolbarDropDownButton: DropDownButtonComponent;
+    sectionDropDownButton: DropDownButtonComponent;
     overflowListItems: QueryList<ElementRef>;
     toolbarOptions: ToolOptions;
     overflowOptions: ToolOptions;

package/tools/toolbar-splitbutton.component.d.ts

@@ -156,6 +156,7 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
     private getNextKey;
     private getPrevKey;
     private toolbarSplitButton;
+    private sectionSplitButton;
     private overflowMainButton;
     overflowListItems: QueryList<ElementRef>;
     constructor();

package/tools/toolbar-tool.component.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { TemplateRef, ElementRef } from '@angular/core';
+import { RenderLocation } from '../render-location';
 import * as i0 from "@angular/core";
 /**
  * Represents the Base ToolBar Tool component for Angular.
@@ -10,12 +11,17 @@ import * as i0 from "@angular/core";
  */
 export declare class ToolBarToolComponent {
     toolbarTemplate: TemplateRef<any>;
+    sectionTemplate: TemplateRef<any>;
     popupTemplate: TemplateRef<any>;
     tabIndex: number;
     overflows: boolean;
     visibility: string;
     element: ElementRef;
     isBuiltInTool: boolean;
+    /**
+     * @hidden
+     */
+    location: RenderLocation;
     constructor();
     /**
      * @hidden

package/tools/tools.service.d.ts

@@ -15,6 +15,7 @@ export declare class ToolbarToolsService {
     renderedTools: ToolBarRendererComponent[];
     overflowTools: ToolBarRendererComponent[];
     allTools: ToolBarToolComponent[];
+    reset(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarToolsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarToolsService>;
 }

package/util.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Keys } from '@progress/kendo-angular-common';
 import { DisplayMode } from './display-mode';
+import { ToolbarOverflowSettings } from './common/overflow-settings';
 /**
  * @hidden
  */
@@ -104,3 +105,7 @@ export declare const getStylingClasses: (componentType: any, stylingOption: stri
  * nodeType 1 is Element, nodeType 3 is Text
  */
 export declare const isElementOrTextNode: (n: Node) => boolean;
+/**
+ * @hidden
+ */
+export declare const normalizeOverflowSettings: (overflow: any) => ToolbarOverflowSettings;