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

package/common/overflow-mode.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible overflowMode options of the Toolbar. Applicable when there is not enough space to render all tools.
+ */
+export type OverflowMode = 'scroll' | 'section' | 'menu' | 'none';

package/common/overflow-settings.d.ts

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SVGIcon } from "@progress/kendo-svg-icons";
+import { OverflowMode } from "./overflow-mode";
+import { ToolbarScrollButtonsPosition, ToolbarScrollButtonsVisibility } from "./scroll-buttons";
+/**
+ * The settings for the overflow functionality of the Toolbar.
+ */
+export interface ToolbarOverflowSettings {
+    /**
+     * Determines the Toolbar overflow mode.
+     * @default 'none'
+     */
+    mode?: OverflowMode;
+    /**
+     * Determines the Toolbar scroll buttons visibility mode. Applicable when the overflow mode is set to 'scroll'. The possible options are:
+     * - 'auto' (default) - The scroll buttons will be rendered only when the tools list overflows its container.
+     * - 'visible' - The scroll buttons will be always visible.
+     * - 'hidden' - No scroll buttons will be rendered.
+     */
+    scrollButtons?: ToolbarScrollButtonsVisibility;
+    /**
+     * Determines the Toolbar scroll buttons position. Applicable when the overflow mode is set to 'scroll'. The possible options are:
+     * - 'start'—The scroll buttons will be rendered at the start before all tools.
+     * - 'end'—The scroll buttons will be rendered at the end after all tools.
+     * - 'split'(default)—The scroll buttons will be rendered at each side of the tools list.
+     */
+    scrollButtonsPosition?: ToolbarScrollButtonsPosition;
+    /**
+     * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the span element of the prev scroll button. Applicable when the overflow mode is set to 'scroll'.
+     *
+     * Allows the usage of custom icons.
+     */
+    prevButtonIcon?: string;
+    /**
+     * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the span element of the next scroll button. Applicable when the overflow mode is set to 'scroll'.
+     *
+     * Allows the usage of custom icons.
+     */
+    nextButtonIcon?: string;
+    /**
+     * Defines an SVGIcon to be rendered for the previous button icon.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. Applicable when the overflow mode is set to 'scroll'.
+     */
+    prevSVGButtonIcon?: SVGIcon;
+    /**
+     * Defines an SVGIcon to be rendered for the next button icon.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one. Applicable when the overflow mode is set to 'scroll'.
+     */
+    nextSVGButtonIcon?: SVGIcon;
+}

package/common/scroll-buttons.d.ts

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies when the Toolbar scroll buttons will be rendered.
+ */
+export type ToolbarScrollButtonsVisibility = 'hidden' | 'visible' | 'auto';
+/**
+ * The available options for the `scrollButtonsPosition` option.
+ */
+export type ToolbarScrollButtonsPosition = 'start' | 'end' | 'split';

package/esm2022/common/overflow-mode.mjs

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

package/esm2022/common/overflow-settings.mjs

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

package/esm2022/common/scroll-buttons.mjs

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

package/esm2022/localization/messages.mjs

@@ -10,11 +10,19 @@ import * as i0 from "@angular/core";
  */
 export 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;
+    /**
+     * The title for the **Previous Tool** button when the Toolbar is scrollable.
+     */
+    previousToolButton;
+    /**
+     * The title for the **Next Tool** button when the Toolbar is scrollable.
+     */
+    nextToolButton;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle", previousToolButton: "previousToolButton", nextToolButton: "nextToolButton" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, decorators: [{
             type: Directive,
@@ -24,4 +32,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], propDecorators: { moreToolsTitle: [{
                 type: Input
+            }], previousToolButton: [{
+                type: Input
+            }], nextToolButton: [{
+                type: Input
             }] } });

package/esm2022/navigation.service.mjs

@@ -141,9 +141,11 @@ export class NavigationService {
         }
     }
     focusOverflowButton() {
-        this.isOverflowButtonFocused = true;
-        this.overflowButton.nativeElement.tabIndex = 0;
-        this.overflowButton.nativeElement.focus();
+        if (this.overflowButton) {
+            this.isOverflowButtonFocused = true;
+            this.overflowButton.nativeElement.tabIndex = 0;
+            this.overflowButton.nativeElement.focus();
+        }
     }
     isOverflowButtonVisible() {
         return (isPresent(this.overflowButton) &&

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738245757,
-    version: '18.1.0-develop.3',
+    publishDate: 1739264198,
+    version: '18.1.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/renderer.component.mjs

@@ -45,6 +45,7 @@ export class ToolBarRendererComponent {
         if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
             return;
         }
+        this.tool.location = this.location;
         this.internalComponentRef = viewContainerRootNodes[0];
         this.element = this.tool.element;
         this.internalComponentRef.addEventListener('click', this.onClick);
@@ -61,6 +62,11 @@ export class ToolBarRendererComponent {
                 this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
                 this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
             }
+            else if (this.location === 'section') {
+                this.template = this.tool.toolbarTemplate;
+                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+                this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+            }
             else {
                 this.template = this.tool.popupTemplate;
                 this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
@@ -96,6 +102,7 @@ export class ToolBarRendererComponent {
         return this.internalComponentRef?.style?.display !== 'none';
     }
     refresh() {
+        this.tool.location = this.location;
         if (this.resizable && this.internalComponentRef) {
             if (this.location === 'toolbar') {
                 this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
@@ -114,6 +121,7 @@ export class ToolBarRendererComponent {
         this.rendererClick.emit({ context: this, event: ev });
     };
     updateTools() {
+        this.tool.location = this.location;
         const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
         const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
         if (this.location === 'toolbar') {

package/esm2022/scroll.service.mjs

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, NgZone } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { Subject } from 'rxjs';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
+const DEFAULT_SCROLL_SPEED = 100;
+/**
+ * @hidden
+ */
+export class ScrollService {
+    ngZone;
+    localization;
+    owner;
+    position = 0;
+    scrollButtonActiveStateChange = new Subject();
+    get scrollElement() {
+        return this.owner.scrollContainer?.nativeElement;
+    }
+    get scrollContainerOverflowSize() {
+        if (!isDocumentAvailable()) {
+            return 0;
+        }
+        if (!this.scrollElement) {
+            return 0;
+        }
+        const overflowSize = Math.floor(this.scrollElement.scrollWidth - this.scrollElement.getBoundingClientRect().width);
+        return overflowSize < 0 ? 0 : overflowSize;
+    }
+    get toolsOverflow() {
+        return this.scrollContainerOverflowSize > 0;
+    }
+    constructor(ngZone, localization) {
+        this.ngZone = ngZone;
+        this.localization = localization;
+    }
+    toggleScrollButtonsState() {
+        const toolbar = this.owner;
+        if (!toolbar.hasScrollButtons) {
+            return;
+        }
+        const currentPrevButtonActive = !this.isDisabled('prev');
+        const currentNextButtonActive = !this.isDisabled('next');
+        const defaultOffset = 1;
+        const rtlDelta = this.localization.rtl ? -1 : 1;
+        const calculatedPrevButtonActive = (this.position * rtlDelta) > 0 && this.scrollContainerOverflowSize > 0;
+        const calculatedNextButtonActive = (this.position * rtlDelta) < this.scrollContainerOverflowSize - defaultOffset && this.scrollContainerOverflowSize > 0;
+        if (calculatedPrevButtonActive !== currentPrevButtonActive) {
+            this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
+        }
+        if (calculatedNextButtonActive !== currentNextButtonActive) {
+            this.ngZone.run(() => this.toggleButtonActiveState('next', calculatedNextButtonActive));
+        }
+    }
+    onScroll(e) {
+        this.position = e.target.scrollLeft;
+        this.toggleScrollButtonsState();
+    }
+    scrollTools(direction) {
+        this.calculateListPosition(direction, DEFAULT_SCROLL_SPEED);
+        if (this.scrollElement) {
+            this.scrollElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
+        }
+        this.toggleScrollButtonsState();
+    }
+    calculateListPosition(direction, scrollSpeed) {
+        if (direction === 'prev') {
+            if (!this.localization.rtl) {
+                this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
+            }
+            else {
+                this.position = this.position + scrollSpeed >= 0 ? 0 : this.position + scrollSpeed;
+            }
+        }
+        else if (direction === 'next' && this.position < this.scrollContainerOverflowSize) {
+            if (this.position + scrollSpeed > this.scrollContainerOverflowSize) {
+                this.position = this.scrollContainerOverflowSize;
+                return;
+            }
+            if (this.localization.rtl) {
+                this.position -= scrollSpeed;
+            }
+            else {
+                this.position += scrollSpeed;
+            }
+        }
+    }
+    toggleButtonActiveState(buttonType, active) {
+        this.scrollButtonActiveStateChange.next({ buttonType, active });
+    }
+    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.nativeElement.classList.contains('k-disabled');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }]; } });

package/esm2022/scrollable-button.component.mjs

@@ -0,0 +1,162 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ElementRef, HostBinding, Input, Renderer2, NgZone, Output, EventEmitter, HostListener } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+const DIRECTION_CLASSES = {
+    left: 'caret-alt-left',
+    right: 'caret-alt-right'
+};
+/**
+ * @hidden
+ */
+export class ToolbarScrollableButtonComponent {
+    host;
+    renderer;
+    ngZone;
+    localization;
+    get prevClass() {
+        return this.prev;
+    }
+    get nextClass() {
+        return !this.prev;
+    }
+    /**
+     * @hidden
+     */
+    onMouseDown(ev) {
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+    }
+    role = 'button';
+    prev = false;
+    overflow;
+    onClick = new EventEmitter();
+    get iconClass() {
+        return this.scrollButtonIconClass;
+    }
+    get customIconClass() {
+        return this.customScrollButtonIconClass;
+    }
+    get svgIcon() {
+        return this.scrollButtonSVGIcon;
+    }
+    caretAltLeftIcon = caretAltLeftIcon;
+    caretAltRightIcon = caretAltRightIcon;
+    subs = new Subscription();
+    constructor(host, renderer, ngZone, localization) {
+        this.host = host;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', this.clickHandler));
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    clickHandler = () => {
+        const buttonType = this.prev ? 'prev' : 'next';
+        this.onClick.emit(buttonType);
+    };
+    get scrollButtonIconClass() {
+        const defaultPrevIcon = !this.localization.rtl ?
+            DIRECTION_CLASSES.left :
+            DIRECTION_CLASSES.right;
+        const defaultNextIcon = !this.localization.rtl ?
+            DIRECTION_CLASSES.right :
+            DIRECTION_CLASSES.left;
+        if (typeof this.overflow === 'object') {
+            const prevIcon = typeof this.overflow.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
+            const nextIcon = typeof this.overflow.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
+            if (prevIcon && this.prev) {
+                return prevIcon;
+            }
+            else if (nextIcon && !this.prev) {
+                return nextIcon;
+            }
+        }
+    }
+    get customScrollButtonIconClass() {
+        if (typeof this.overflow === 'object') {
+            const prevIcon = this.overflow.prevButtonIcon;
+            const nextIcon = this.overflow.nextButtonIcon;
+            if (prevIcon && this.prev) {
+                return `k-icon ${prevIcon}`;
+            }
+            if (nextIcon && !this.prev) {
+                return `k-icon ${nextIcon}`;
+            }
+        }
+    }
+    get scrollButtonSVGIcon() {
+        const defaultPrevSVGIcon = !this.localization.rtl ?
+            this.caretAltLeftIcon :
+            this.caretAltRightIcon;
+        const defaultNextSVGIcon = !this.localization.rtl ?
+            this.caretAltRightIcon :
+            this.caretAltLeftIcon;
+        if (typeof this.overflow === 'object') {
+            const prevIcon = this.overflow.prevSVGButtonIcon !== undefined ? this.overflow.prevSVGButtonIcon : defaultPrevSVGIcon;
+            const nextIcon = this.overflow.nextSVGButtonIcon !== undefined ? this.overflow.nextSVGButtonIcon : defaultNextSVGIcon;
+            if (prevIcon || nextIcon) {
+                return this.prev ? prevIcon : nextIcon;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarScrollableButtonComponent, isStandalone: true, selector: "[kendoToolbarScrollableButton]", inputs: { prev: "prev", overflow: "overflow" }, outputs: { onClick: "onClick" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "class.k-toolbar-prev": "this.prevClass", "class.k-toolbar-next": "this.nextClass", "attr.role": "this.role" } }, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [customFontClass]="customIconClass"
+            [svgIcon]="svgIcon"
+            innerCssClass="k-button-icon"
+        >
+        </kendo-icon-wrapper>
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarScrollableButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [customFontClass]="customIconClass"
+            [svgIcon]="svgIcon"
+            innerCssClass="k-button-icon"
+        >
+        </kendo-icon-wrapper>
+    `,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoToolbarScrollableButton]',
+                    standalone: true,
+                    imports: [IconWrapperComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { prevClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-prev']
+            }], nextClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-next']
+            }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], prev: [{
+                type: Input
+            }], overflow: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });