@progress/kendo-angular-toolbar 25.3.0-develop.7 → 25.3.0-develop.9

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

@@ -3,16 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, inject, ElementRef, Input, ViewChild, Directive, Output, forwardRef, HostBinding, Component, ViewContainerRef, HostListener, ContentChildren, isDevMode, ViewChildren, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, inject, ElementRef, Input, ViewChild, Directive, Output, forwardRef, HostBinding, Component, ViewContainerRef, HostListener, ContentChildren, isDevMode, ViewChildren, signal, computed, afterNextRender, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i2 from '@progress/kendo-angular-popup';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { normalizeKeys, Keys, isPresent as isPresent$1, isDocumentAvailable, getLicenseMessage, shouldShowValidationUI, guid, parseCSSClassNames, ResizeSensorComponent, WatermarkOverlayComponent, provideComponentName, ResizeBatchService } from '@progress/kendo-angular-common';
+import { PopupComponent, PopupService } from '@progress/kendo-angular-popup';
+import { isDocumentAvailable, normalizeKeys, Keys, isPresent as isPresent$1, getLicenseMessage, shouldShowValidationUI, guid, parseCSSClassNames, ResizeSensorComponent, WatermarkOverlayComponent, provideComponentName, hasObservers, DraggableDirective, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
-import { chevronLeftIcon, chevronRightIcon, moreHorizontalIcon, moreVerticalIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
+import { chevronLeftIcon, chevronRightIcon, moreHorizontalIcon, moreVerticalIcon, chevronDownIcon, handleDragDotsIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent } from '@progress/kendo-angular-buttons';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1791207502,
-    version: '25.3.0-develop.7',
+    publishDate: 1791301982,
+    version: '25.3.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -46,6 +46,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
             type: Injectable
         }] });
 
+const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
+const DEFAULT_SCROLL_SPEED = 100;
+/**
+ * @hidden
+ */
+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();
+    }
+    updateScrollPosition(element) {
+        this.position = element.scrollLeft;
+    }
+    scrollIntoView(element) {
+        const container = this.scrollElement;
+        if (!container || !element || !container.contains(element)) {
+            return;
+        }
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        if (elementRect.left < containerRect.left) {
+            container.scrollLeft += elementRect.left - containerRect.left;
+        }
+        else if (elementRect.right > containerRect.right) {
+            container.scrollLeft += elementRect.right - containerRect.right;
+        }
+    }
+    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) {
+                if (this.localization.rtl) {
+                    this.position = -this.scrollContainerOverflowSize;
+                }
+                else {
+                    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: "20.3.32", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ScrollService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }] });
+
 /**
  * @hidden
  */
@@ -302,13 +417,15 @@ const normalizeOverflowSettings = (overflow) => {
  */
 class NavigationService {
     zone;
+    scrollService;
     overflowButton;
     focused = { renderedTool: null, index: -1 };
     renderedTools = [];
     isPopupFocused = false;
     isOverflowButtonFocused = false;
-    constructor(zone) {
+    constructor(zone, scrollService) {
         this.zone = zone;
+        this.scrollService = scrollService;
     }
     setRenderedTools(rts) {
         this.renderedTools = rts;
@@ -409,18 +526,22 @@ class NavigationService {
             if (!renderedTool) {
                 const focusableRTs = this.getFocusableTools();
                 const lastFocusedRT = focusableRTs.find(rt => rt === this.focused.renderedTool) || focusableRTs[0];
-                // guard against only disabled tools
                 if (lastFocusedRT) {
                     this.focused.renderedTool = lastFocusedRT;
                     this.focused.index = this.getFocusableTools().findIndex(rt => rt === lastFocusedRT);
-                    // if event is undefined, then this means that the tool is the first one in the overflow popup
                     lastFocusedRT.tool.focus(ev);
+                    if (isDocumentAvailable()) {
+                        this.scrollService.scrollIntoView(document.activeElement);
+                    }
                 }
             }
             else if (renderedTool.tool.canFocus && renderedTool.tool.canFocus()) {
                 this.focused.renderedTool = renderedTool;
                 this.focused.index = this.getFocusableTools().findIndex(rt => rt === renderedTool);
                 renderedTool.tool.focus(ev);
+                if (isDocumentAvailable()) {
+                    this.scrollService.scrollIntoView(document.activeElement);
+                }
                 this.blurOverflowButton();
             }
         });
@@ -442,12 +563,12 @@ class NavigationService {
         return (isPresent(this.overflowButton) &&
             window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue('visibility') === 'visible');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: NavigationService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: ScrollService }] });
 
 /**
  * Represents the base ToolBar Tool component for Angular.
@@ -881,107 +1002,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
-const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
-const DEFAULT_SCROLL_SPEED = 100;
-/**
- * @hidden
- */
-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();
-    }
-    updateScrollPosition(element) {
-        this.position = element.scrollLeft;
-    }
-    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) {
-                if (this.localization.rtl) {
-                    this.position = -this.scrollContainerOverflowSize;
-                }
-                else {
-                    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: "20.3.32", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ScrollService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ScrollService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }] });
-
 const DIRECTION_CLASSES = {
     left: 'chevron-left',
     right: 'chevron-right'
@@ -1221,6 +1241,10 @@ class ToolBarComponent {
     get isScrollMode() {
         return this.normalizedOverflow.mode === 'scroll';
     }
+    /**
+     * @hidden
+     */
+    scrollButtonClasses = [];
     /**
      * @hidden
      */
@@ -1252,6 +1276,7 @@ class ToolBarComponent {
     set fillMode(fillMode) {
         this.handleClasses(fillMode, 'fillMode');
         this._fillMode = fillMode;
+        this.updateScrollButtonClasses();
     }
     get fillMode() {
         return this._fillMode;
@@ -1270,6 +1295,7 @@ class ToolBarComponent {
     set size(size) {
         this.handleClasses(size, 'size');
         this._size = size;
+        this.updateScrollButtonClasses();
     }
     get size() {
         return this._size;
@@ -1323,7 +1349,17 @@ class ToolBarComponent {
      * Emits when the overflow popup of the ToolBar closes.
      */
     close = new EventEmitter();
-    allTools;
+    contentTools;
+    /**
+     * @hidden
+     */
+    toolsSource = null;
+    /**
+     * @hidden
+     */
+    get allTools() {
+        return this.toolsSource ?? this.contentTools;
+    }
     overflowButton;
     popupTemplate;
     popupSectionTemplate;
@@ -1972,6 +2008,9 @@ class ToolBarComponent {
         const renderedElement = this.toolsService.renderedTools.find((r) => {
             return r.tool === tool;
         });
+        if (!isPresent(renderedElement)) {
+            return null;
+        }
         const width = renderedElement.width;
         tool.overflows = this.showMenu;
         this.refreshService.refresh(tool);
@@ -1983,6 +2022,9 @@ class ToolBarComponent {
             return null;
         }
         const renderedElement = this.toolsService.renderedTools.find((r) => r.tool === tool);
+        if (!isPresent(renderedElement)) {
+            return 0;
+        }
         tool.overflows = false;
         tool.visibility = 'hidden';
         this.refreshService.refresh(tool);
@@ -2015,6 +2057,13 @@ class ToolBarComponent {
             this._open = false;
         }
     }
+    updateScrollButtonClasses() {
+        const size = SIZES[this._size];
+        this.scrollButtonClasses = [
+            size && `k-button-${size}`,
+            this._fillMode && `k-button-${this._fillMode}`
+        ].filter(Boolean);
+    }
     handleClasses(value, input) {
         const elem = this.element.nativeElement;
         const classes = getStylingClasses('toolbar', input, this[input], value);
@@ -2120,7 +2169,7 @@ class ToolBarComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex", showIcon: "showIcon", showText: "showText" }, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex", showIcon: "showIcon", showText: "showText", toolsSource: "toolsSource" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
             RefreshService,
             NavigationService,
             LocalizationService,
@@ -2131,7 +2180,7 @@ class ToolBarComponent {
                 useValue: 'kendo.toolbar'
             },
             provideComponentName('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: "contentTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "popupSectionTemplate", first: true, predicate: ["popupSectionTemplate"], descendants: true, static: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true, read: ElementRef }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true, read: ElementRef }, { propertyName: "startButtonGroup", first: true, predicate: ["startButtonGroup"], descendants: true, read: ElementRef }, { propertyName: "endButtonGroup", first: true, predicate: ["endButtonGroup"], descendants: true, read: ElementRef }, { propertyName: "scrollSeparator", first: true, predicate: ["scrollSeparator"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoToolbarLocalizedMessages
             i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
             moreToolsTitle="More tools"
@@ -2151,11 +2200,7 @@ class ToolBarComponent {
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
                     class="k-toolbar-prev k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
             }
@@ -2167,11 +2212,7 @@ class ToolBarComponent {
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
                     class="k-toolbar-prev k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
                 <span #nextScrollButton
@@ -2180,11 +2221,7 @@ class ToolBarComponent {
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
                     class="k-toolbar-next k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
@@ -2260,11 +2297,7 @@ class ToolBarComponent {
                 [overflow]="normalizedOverflow"
                 [title]="getScrollButtonTitle('next')"
                 class="k-toolbar-next k-icon-button k-button"
-                [ngClass]="{
-                    'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium',
-                    'k-button-lg': size === 'large'
-                }"
+                [ngClass]="scrollButtonClasses"
                 (onClick)="scrollTools($event)">
             </span>
             }
@@ -2276,11 +2309,7 @@ class ToolBarComponent {
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
                     class="k-toolbar-prev k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
                 <span #nextScrollButton
@@ -2289,11 +2318,7 @@ class ToolBarComponent {
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
                     class="k-toolbar-next k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
@@ -2392,11 +2417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
                     class="k-toolbar-prev k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
             }
@@ -2408,11 +2429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
                     class="k-toolbar-prev k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
                 <span #nextScrollButton
@@ -2421,11 +2438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
                     class="k-toolbar-next k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
@@ -2501,11 +2514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                 [overflow]="normalizedOverflow"
                 [title]="getScrollButtonTitle('next')"
                 class="k-toolbar-next k-icon-button k-button"
-                [ngClass]="{
-                    'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium',
-                    'k-button-lg': size === 'large'
-                }"
+                [ngClass]="scrollButtonClasses"
                 (onClick)="scrollTools($event)">
             </span>
             }
@@ -2517,11 +2526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
                     class="k-toolbar-prev k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
                 <span #nextScrollButton
@@ -2530,11 +2535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
                     class="k-toolbar-next k-icon-button k-button"
-                    [ngClass]="{
-                        'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium',
-                        'k-button-lg': size === 'large'
-                    }"
+                    [ngClass]="scrollButtonClasses"
                     (onClick)="scrollTools($event)">
                 </span>
             </div>
@@ -2621,9 +2622,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                 type: Output
             }], close: [{
                 type: Output
-            }], allTools: [{
+            }], contentTools: [{
                 type: ContentChildren,
                 args: [ToolBarToolComponent]
+            }], toolsSource: [{
+                type: Input
             }], overflowButton: [{
                 type: ViewChild,
                 args: ['overflowButton', { static: false, read: ElementRef }]
@@ -2720,7 +2723,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      */
     set showIcon(value) {
         this._showIcon = value;
-        this.setTextDisplayMode();
+        this.setIconDisplayMode();
     }
     get showIcon() {
         return this._showIcon;
@@ -2810,40 +2813,37 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * The icon is rendered inside the Button by a `span.k-icon` element.
      */
     set icon(icon) {
-        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
+        this._icon = icon;
+        this.setIconDisplayMode();
     }
     /**
      * Defines a CSS class or multiple classes to be applied to a `span` element inside the Button.
      * Allows the usage of custom icons.
      */
     set iconClass(iconClass) {
-        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
+        this._iconClass = iconClass;
+        this.setIconDisplayMode();
     }
     /**
      * Defines an SVGIcon to be rendered within the button.
      * Accepts either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
-        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
-        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
-        if (isDevMode() &&
-            icon &&
-            isIconSet &&
-            isIconClassSet) {
+        const isIconSet = this._icon;
+        const isIconClassSet = this._iconClass;
+        if (isDevMode() && icon && isIconSet && isIconClassSet) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
-        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+        this._svgIcon = icon;
+        this.setIconDisplayMode();
     }
     /**
      * Defines a URL for an image to be rendered inside the Button.
      * The URL can be relative or absolute.
      */
     set imageUrl(imageUrl) {
-        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
+        this._imageUrl = imageUrl;
+        this.setIconDisplayMode();
     }
     /**
      * Fires each time the Button is clicked.
@@ -2863,14 +2863,14 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         icon: '',
         iconClass: '',
         svgIcon: null,
-        imageUrl: ''
+        imageUrl: '',
     };
     overflowOptions = {
         text: '',
         icon: '',
         iconClass: '',
         svgIcon: null,
-        imageUrl: ''
+        imageUrl: '',
     };
     /**
      * @hidden
@@ -2886,6 +2886,10 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     _showText;
     _showIcon;
     _text;
+    _icon;
+    _iconClass;
+    _svgIcon;
+    _imageUrl;
     propertyChangeSub;
     constructor(element, zone, host) {
         super();
@@ -2975,6 +2979,16 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
             this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
         });
     }
+    setIconDisplayMode() {
+        this.toolbarOptions.icon = getValueForLocation(this._icon, this.showIcon, false);
+        this.overflowOptions.icon = getValueForLocation(this._icon, this.showIcon, true);
+        this.toolbarOptions.iconClass = getValueForLocation(this._iconClass, this.showIcon, false);
+        this.overflowOptions.iconClass = getValueForLocation(this._iconClass, this.showIcon, true);
+        this.toolbarOptions.svgIcon = getValueForLocation(this._svgIcon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(this._svgIcon, this.showIcon, true);
+        this.toolbarOptions.imageUrl = getValueForLocation(this._imageUrl, this.showIcon, false);
+        this.overflowOptions.imageUrl = getValueForLocation(this._imageUrl, this.showIcon, true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", rounded: "rounded", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
@@ -3878,6 +3892,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      */
     set showIcon(value) {
         this._showIcon = value;
+        this.setIconDisplayMode();
     }
     get showIcon() {
         return this._showIcon;
@@ -3897,38 +3912,38 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * Sets the icon rendered next to the button text.
      */
     set icon(icon) {
-        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
+        this._icon = icon;
+        this.setIconDisplayMode();
     }
     /**
      * Sets the `SVGIcon` rendered in the button.
      * Accepts an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
-        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
-        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
+        const isIconSet = this._icon;
+        const isIconClassSet = this._iconClass;
         if (isDevMode() &&
             icon &&
             isIconSet &&
             isIconClassSet) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
-        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+        this._svgIcon = icon;
+        this.setIconDisplayMode();
     }
     /**
      * Sets a custom CSS class icon rendered next to the button text.
      */
     set iconClass(iconClass) {
-        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
+        this._iconClass = iconClass;
+        this.setIconDisplayMode();
     }
     /**
      * Sets a URL for the image displayed next to the button text.
      */
     set imageUrl(imageUrl) {
-        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
+        this._imageUrl = imageUrl;
+        this.setIconDisplayMode();
     }
     /**
      * Configures the popup of the DropDownButton.
@@ -4036,6 +4051,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _showText;
     _showIcon;
     _text;
+    _icon;
+    _iconClass;
+    _svgIcon;
+    _imageUrl;
     propertyChangeSub;
     getNextKey;
     getPrevKey;
@@ -4148,6 +4167,16 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
+    setIconDisplayMode() {
+        this.toolbarOptions.icon = getValueForLocation(this._icon, this.showIcon, false);
+        this.overflowOptions.icon = getValueForLocation(this._icon, this.showIcon, true);
+        this.toolbarOptions.iconClass = getValueForLocation(this._iconClass, this.showIcon, false);
+        this.overflowOptions.iconClass = getValueForLocation(this._iconClass, this.showIcon, true);
+        this.toolbarOptions.svgIcon = getValueForLocation(this._svgIcon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(this._svgIcon, this.showIcon, true);
+        this.toolbarOptions.imageUrl = getValueForLocation(this._imageUrl, this.showIcon, false);
+        this.overflowOptions.imageUrl = getValueForLocation(this._imageUrl, this.showIcon, true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "sectionDropDownButton", first: true, predicate: ["sectionDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
@@ -4444,7 +4473,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      */
     set showIcon(value) {
         this._showIcon = value;
-        this.setTextDisplayMode();
+        this.setIconDisplayMode();
     }
     get showIcon() {
         return this._showIcon;
@@ -4464,38 +4493,38 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      */
     set icon(icon) {
-        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
+        this._icon = icon;
+        this.setIconDisplayMode();
     }
     /**
      * Sets the `SVGIcon` rendered in the main button.
      * Accepts an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
-        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
-        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
+        const isIconSet = this._icon;
+        const isIconClassSet = this._iconClass;
         if (isDevMode() &&
             icon &&
             isIconSet &&
             isIconClassSet) {
             throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
-        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+        this._svgIcon = icon;
+        this.setIconDisplayMode();
     }
     /**
      * Sets a custom CSS class icon rendered next to the button text.
      */
     set iconClass(iconClass) {
-        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
+        this._iconClass = iconClass;
+        this.setIconDisplayMode();
     }
     /**
      * Sets a URL for the image displayed next to the button text.
      */
     set imageUrl(imageUrl) {
-        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
+        this._imageUrl = imageUrl;
+        this.setIconDisplayMode();
     }
     /**
      * When `true`, disables a SplitButton item.
@@ -4621,6 +4650,10 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     _showText;
     _showIcon;
     _text;
+    _icon;
+    _iconClass;
+    _svgIcon;
+    _imageUrl;
     propertyChangeSub;
     getNextKey;
     getPrevKey;
@@ -4723,6 +4756,16 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
+    setIconDisplayMode() {
+        this.toolbarOptions.icon = getValueForLocation(this._icon, this.showIcon, false);
+        this.overflowOptions.icon = getValueForLocation(this._icon, this.showIcon, true);
+        this.toolbarOptions.iconClass = getValueForLocation(this._iconClass, this.showIcon, false);
+        this.overflowOptions.iconClass = getValueForLocation(this._iconClass, this.showIcon, true);
+        this.toolbarOptions.svgIcon = getValueForLocation(this._svgIcon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(this._svgIcon, this.showIcon, true);
+        this.toolbarOptions.imageUrl = getValueForLocation(this._imageUrl, this.showIcon, false);
+        this.overflowOptions.imageUrl = getValueForLocation(this._imageUrl, this.showIcon, true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [{ token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "sectionSplitButton", first: true, predicate: ["sectionSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
@@ -5210,6 +5253,952 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
+/**
+ * @hidden
+ */
+class FloatingToolBarMessages extends ComponentMessages {
+    /**
+        * Sets the accessible name of the FloatingToolBar drag handle.
+     */
+    set dragHandleTitle(value) {
+        this._dragHandleTitle.set(value);
+    }
+    get dragHandleTitle() {
+        return this._dragHandleTitle();
+    }
+    /**
+        * Sets the title of the More Tools button in the hosted ToolBar. When unset, the FloatingToolBar's localized default is used.
+     */
+    set moreToolsTitle(value) {
+        this._moreToolsTitle.set(value);
+    }
+    get moreToolsTitle() {
+        return this._moreToolsTitle();
+    }
+    /**
+        * Sets the title of the previous scroll button in the hosted ToolBar. When unset, the FloatingToolBar's localized default is used.
+     */
+    set previousToolButton(value) {
+        this._previousToolButton.set(value);
+    }
+    get previousToolButton() {
+        return this._previousToolButton();
+    }
+    /**
+        * Sets the title of the next scroll button in the hosted ToolBar. When unset, the FloatingToolBar's localized default is used.
+     */
+    set nextToolButton(value) {
+        this._nextToolButton.set(value);
+    }
+    get nextToolButton() {
+        return this._nextToolButton();
+    }
+    _dragHandleTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_dragHandleTitle" }] : []));
+    _moreToolsTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_moreToolsTitle" }] : []));
+    _previousToolButton = signal(undefined, ...(ngDevMode ? [{ debugName: "_previousToolButton" }] : []));
+    _nextToolButton = signal(undefined, ...(ngDevMode ? [{ debugName: "_nextToolButton" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: FloatingToolBarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: FloatingToolBarMessages, isStandalone: true, selector: "kendo-floatingtoolbar-messages-base", inputs: { dragHandleTitle: "dragHandleTitle", moreToolsTitle: "moreToolsTitle", previousToolButton: "previousToolButton", nextToolButton: "nextToolButton" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: FloatingToolBarMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-floatingtoolbar-messages-base'
+                }]
+        }], propDecorators: { dragHandleTitle: [{
+                type: Input
+            }], moreToolsTitle: [{
+                type: Input
+            }], previousToolButton: [{
+                type: Input
+            }], nextToolButton: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedFloatingToolBarMessagesDirective extends FloatingToolBarMessages {
+    service;
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: LocalizedFloatingToolBarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: LocalizedFloatingToolBarMessagesDirective, isStandalone: true, selector: "[kendoFloatingToolBarLocalizedMessages]", providers: [
+            {
+                provide: FloatingToolBarMessages,
+                useExisting: forwardRef(() => LocalizedFloatingToolBarMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: LocalizedFloatingToolBarMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: FloatingToolBarMessages,
+                            useExisting: forwardRef(() => LocalizedFloatingToolBarMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoFloatingToolBarLocalizedMessages]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.LocalizationService }] });
+
+/**
+ * Arguments for the `dragStart` event of the FloatingToolBar.
+ */
+class FloatingToolBarDragStartEvent extends PreventableEvent {
+    sender;
+    top;
+    left;
+    constructor(sender, top, left) {
+        super();
+        this.sender = sender;
+        this.top = top;
+        this.left = left;
+    }
+    /**
+     * Prevents the FloatingToolBar from starting a pointer drag or keyboard move mode.
+     */
+    preventDefault() {
+        super.preventDefault();
+    }
+}
+/**
+ * Arguments for the `move` event of the FloatingToolBar.
+ */
+class FloatingToolBarMoveEvent {
+    sender;
+    top;
+    left;
+    constructor(sender, top, left) {
+        this.sender = sender;
+        this.top = top;
+        this.left = left;
+    }
+}
+/**
+ * Arguments for the `dragEnd` event of the FloatingToolBar.
+ */
+class FloatingToolBarDragEndEvent {
+    sender;
+    top;
+    left;
+    constructor(sender, top, left) {
+        this.sender = sender;
+        this.top = top;
+        this.left = left;
+    }
+}
+
+/**
+ * @hidden
+ */
+const clampToBounds = (point, size, viewport, origin) => {
+    const viewportPoint = origin
+        ? { left: point.left + origin.left, top: point.top + origin.top }
+        : { left: point.left - viewport.scrollX, top: point.top - viewport.scrollY };
+    const maxLeft = Math.max(0, viewport.width - size.width);
+    const maxTop = Math.max(0, viewport.height - size.height);
+    const left = Math.min(Math.max(viewportPoint.left, 0), maxLeft);
+    const top = Math.min(Math.max(viewportPoint.top, 0), maxTop);
+    return origin
+        ? { left: left - origin.left, top: top - origin.top }
+        : { left: left + viewport.scrollX, top: top + viewport.scrollY };
+};
+/**
+ * @hidden
+ */
+const getPositioningOrigin = (offsetParent) => {
+    const isStaticBody = offsetParent === offsetParent?.ownerDocument.body
+        && (getComputedStyle(offsetParent).position || 'static') === 'static';
+    if (!offsetParent || isStaticBody) {
+        return undefined;
+    }
+    const rect = offsetParent.getBoundingClientRect();
+    return {
+        left: rect.left + offsetParent.clientLeft - offsetParent.scrollLeft,
+        top: rect.top + offsetParent.clientTop - offsetParent.scrollTop
+    };
+};
+/**
+ * @hidden
+ */
+const resolveAnchorElement = (anchor) => (anchor instanceof ElementRef ? anchor.nativeElement : anchor) ?? undefined;
+/**
+ * @hidden
+ */
+const containsFocusTarget = (target, hostElement, overflowPopup) => !!target && (hostElement.contains(target) || !!overflowPopup?.contains(target));
+/**
+ * @hidden
+ */
+const preventDefaultAndStopPropagation = (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+};
+const EDITABLE_SELECTOR = 'input, textarea, select, [role="textbox"], [role="searchbox"], [role="combobox"]';
+/**
+ * @hidden
+ */
+const isEditableTarget = (target) => {
+    const element = target;
+    return !!element && (!!element.isContentEditable || !!element.closest?.(EDITABLE_SELECTOR));
+};
+/**
+ * @hidden
+ */
+const ARROW_DELTAS = {
+    ArrowLeft: { left: -1, top: 0 },
+    ArrowRight: { left: 1, top: 0 },
+    ArrowUp: { left: 0, top: -1 },
+    ArrowDown: { left: 0, top: 1 }
+};
+// The Popup's own default, which it treats as "no explicit offset".
+const DEFAULT_OFFSET = { left: -10000, top: 0 };
+const DEFAULT_COLLISION = { horizontal: 'fit', vertical: 'flip' };
+const SIDE_COLLISION = { horizontal: 'flip', vertical: 'fit' };
+// The viewport is the drag boundary, and flipping mid-drag would jump the toolbar away from the pointer.
+const DRAG_COLLISION = { horizontal: 'fit', vertical: 'fit' };
+// Matching point alignments make flipping inert, so a released drag offset can scroll out of view naturally.
+const POSITIONED_COLLISION = { horizontal: 'flip', vertical: 'flip' };
+const DRAG_ALIGN = { horizontal: 'left', vertical: 'top' };
+const ANCHOR_ALIGN = {
+    top: { horizontal: 'center', vertical: 'top' },
+    bottom: { horizontal: 'center', vertical: 'bottom' },
+    left: { horizontal: 'left', vertical: 'center' },
+    right: { horizontal: 'right', vertical: 'center' }
+};
+const POPUP_ALIGN = {
+    top: { horizontal: 'center', vertical: 'bottom' },
+    bottom: { horizontal: 'center', vertical: 'top' },
+    left: { horizontal: 'right', vertical: 'center' },
+    right: { horizontal: 'left', vertical: 'center' }
+};
+/**
+ * @hidden
+ */
+const resolvePopupPosition = (options) => {
+    const { anchor, container, position, containerAlign, margin, dragOffset, dragging } = options;
+    if (dragOffset) {
+        return {
+            anchor: undefined,
+            anchorAlign: DRAG_ALIGN,
+            popupAlign: DRAG_ALIGN,
+            collision: dragging ? DRAG_COLLISION : POSITIONED_COLLISION,
+            margin: undefined,
+            offset: dragOffset
+        };
+    }
+    if (anchor) {
+        return {
+            anchor,
+            anchorAlign: ANCHOR_ALIGN[position],
+            popupAlign: POPUP_ALIGN[position],
+            collision: position === 'left' || position === 'right' ? SIDE_COLLISION : DEFAULT_COLLISION,
+            margin,
+            offset: DEFAULT_OFFSET
+        };
+    }
+    // Aligning the same point of both elements places the toolbar inside its container.
+    return {
+        anchor: container,
+        anchorAlign: containerAlign,
+        popupAlign: containerAlign,
+        collision: DEFAULT_COLLISION,
+        margin,
+        offset: DEFAULT_OFFSET
+    };
+};
+
+/**
+ * Represents the Kendo UI FloatingToolBar component for Angular. Hosts the {@link ToolBarComponent}
+ * inside a floating {@link PopupComponent} container.
+ *
+ * @example
+ * ```html
+ * <kendo-floatingtoolbar>
+ *      <kendo-toolbar-button text="Button"></kendo-toolbar-button>
+ * </kendo-floatingtoolbar>
+ * ```
+ */
+class FloatingToolBarComponent {
+    hostElement;
+    ngZone;
+    injector;
+    renderer;
+    localization;
+    changeDetectorRef;
+    // Re-projected tools never reach the internal ToolBar's own content query.
+    projectedTools;
+    popupComponent;
+    toolbarComponent;
+    dragHandle;
+    /**
+     * Sets the element the FloatingToolBar is positioned against. When not set, the component
+     * is positioned within its containing element based on the `containerAlign` option.
+     */
+    set anchor(value) {
+        if (resolveAnchorElement(this._anchor()) === resolveAnchorElement(value)) {
+            return;
+        }
+        this.cancelActiveDrag();
+        this._dragOffset.set(null);
+        this._anchor.set(value);
+    }
+    get anchor() { return this._anchor(); }
+    /**
+     * Sets the preferred side of the anchor the FloatingToolBar is rendered on.
+     * Collision handling can render the component on the opposite side when the preferred side does not fit.
+     * Applies when `anchor` is set.
+     *
+     * @default 'top'
+     */
+    set position(value) { this._position.set(value); }
+    get position() { return this._position(); }
+    /**
+     * Sets the position of the FloatingToolBar within its containing element.
+     * Applies when `anchor` is not set.
+     *
+     * @default { horizontal: 'center', vertical: 'top' }
+     */
+    set containerAlign(value) { this._containerAlign.set(value); }
+    get containerAlign() { return this._containerAlign(); }
+    /**
+     * Sets the horizontal and vertical spacing in pixels between the FloatingToolBar and the element it is
+     * positioned against. When no anchor is provided, the spacing is applied relative to the containing element.
+     *
+     * @default { horizontal: 0, vertical: 0 }
+     */
+    set margin(value) { this._margin.set(value); }
+    get margin() { return this._margin(); }
+    /**
+     * Sets the width of the FloatingToolBar. Numeric values are treated as pixels.
+     */
+    set width(value) {
+        this._width.set(typeof value === 'number' ? `${value}px` : value);
+        this.updatePopupSize();
+    }
+    get width() { return this._width(); }
+    /**
+     * Sets the maximum width of the FloatingToolBar. Numeric values are treated as pixels.
+     */
+    set maxWidth(value) {
+        this._maxWidth.set(typeof value === 'number' ? `${value}px` : value);
+        this.updatePopupSize();
+    }
+    get maxWidth() { return this._maxWidth(); }
+    /**
+     * Sets how the FloatingToolBar renders tools when their total size is greater than the available width.
+     * @default 'menu'
+     */
+    set overflow(value) { this._overflow.set(value); }
+    get overflow() { return this._overflow(); }
+    /**
+     * Sets the size of the FloatingToolBar and the tools it hosts. The default value is set by the Kendo theme.
+     */
+    set size(value) { this._size.set(value); }
+    get size() { return this._size(); }
+    /**
+     * Sets the background and border styles of the FloatingToolBar. The default value is set by the Kendo theme.
+     */
+    set fillMode(value) { this._fillMode.set(value); }
+    get fillMode() { return this._fillMode(); }
+    /**
+     * Controls whether the user can reposition the FloatingToolBar with the pointer or the keyboard. When enabled, the
+    * component renders a drag handle before the hosted Toolbar.
+    *
+    * Press `M` while a Toolbar tool or the drag handle has focus to enter move mode. Focus moves
+    * to the drag handle, where you can use the arrow keys to move the FloatingToolBar by one pixel at a time.
+    * Move focus away from the drag handle to finish, or press `Escape` to restore the starting position.
+     *
+     * @default false
+     */
+    set draggable(value) {
+        if (!value) {
+            this.cancelActiveDrag();
+        }
+        this._draggable.set(value);
+    }
+    get draggable() { return this._draggable(); }
+    /**
+     * Sets the accessible name of the FloatingToolBar.
+     */
+    set ariaLabel(value) { this._ariaLabel.set(value); }
+    get ariaLabel() { return this._ariaLabel(); }
+    /**
+     * Fires when a pointer drag or the keyboard move mode starts. Cancelable — calling `preventDefault()` keeps the
+     * FloatingToolBar in place.
+     */
+    dragStart = new EventEmitter();
+    /**
+     * Fires when the user moves the FloatingToolBar with the pointer or the keyboard.
+     */
+    move = new EventEmitter();
+    /**
+     * Fires when a pointer drag ends or the keyboard move mode is committed or canceled.
+     */
+    dragEnd = new EventEmitter();
+    /**
+     * @hidden
+     *
+     * Projected tools subscribe to this after resolving this component as their ToolBar host.
+     */
+    propertyChange = new EventEmitter();
+    dragHandleIcon = handleDragDotsIcon;
+    direction;
+    moveMode = computed(() => this.keyboardMoveOrigin() !== null, ...(ngDevMode ? [{ debugName: "moveMode" }] : []));
+    popupClass = computed(() => {
+        const size = SIZES[this._size()];
+        const fillMode = this._fillMode();
+        return [
+            'k-floating-toolbar',
+            size && `k-floating-toolbar-${size}`,
+            fillMode && `k-floating-toolbar-${fillMode}`
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "popupClass" }] : []));
+    popupPosition = computed(() => resolvePopupPosition({
+        anchor: this._anchor(),
+        container: this.containerElement,
+        position: this._position(),
+        containerAlign: this._containerAlign(),
+        margin: this._margin(),
+        dragOffset: this._dragOffset(),
+        dragging: this.pointerDragging() || this.keyboardMoveOrigin() !== null
+    }), ...(ngDevMode ? [{ debugName: "popupPosition" }] : []));
+    popupPositionMode = computed(() => (this._draggable() || this._dragOffset()) ? 'absolute' : 'fixed', ...(ngDevMode ? [{ debugName: "popupPositionMode" }] : []));
+    get dragHandleTitle() {
+        return this.localization.get('dragHandleTitle');
+    }
+    _anchor = signal(undefined, ...(ngDevMode ? [{ debugName: "_anchor" }] : []));
+    _position = signal('top', ...(ngDevMode ? [{ debugName: "_position" }] : []));
+    _containerAlign = signal({ horizontal: 'center', vertical: 'top' }, ...(ngDevMode ? [{ debugName: "_containerAlign" }] : []));
+    _margin = signal({ horizontal: 0, vertical: 0 }, ...(ngDevMode ? [{ debugName: "_margin" }] : []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _maxWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxWidth" }] : []));
+    _overflow = signal('menu', ...(ngDevMode ? [{ debugName: "_overflow" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _draggable = signal(false, ...(ngDevMode ? [{ debugName: "_draggable" }] : []));
+    _ariaLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_ariaLabel" }] : []));
+    _dragOffset = signal(null, ...(ngDevMode ? [{ debugName: "_dragOffset" }] : []));
+    keyboardMoveOrigin = signal(null, ...(ngDevMode ? [{ debugName: "keyboardMoveOrigin" }] : []));
+    preMoveDragOffset = null;
+    pointerDragging = signal(false, ...(ngDevMode ? [{ debugName: "pointerDragging" }] : []));
+    pointerDrag = null;
+    focusReturnTarget = null;
+    isFocusWithinComponent = false;
+    subscriptions = new Subscription();
+    constructor(hostElement, ngZone, injector, renderer, localization, changeDetectorRef) {
+        this.hostElement = hostElement;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        this.renderer = renderer;
+        this.localization = localization;
+        this.changeDetectorRef = changeDetectorRef;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        if (isDocumentAvailable()) {
+            this.focusReturnTarget = document.activeElement;
+        }
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+            this.changeDetectorRef.markForCheck();
+        }));
+    }
+    ngAfterViewInit() {
+        this.updatePopupSize();
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const hostEl = this.hostElement.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(hostEl, 'keydown', (ev) => this.onKeydown(ev)));
+            this.subscriptions.add(this.renderer.listen(hostEl, 'focusin', (ev) => this.onFocusIn(ev)));
+            this.subscriptions.add(this.renderer.listen(hostEl, 'focusout', (ev) => this.onFocusOut(ev)));
+        });
+    }
+    ngOnDestroy() {
+        const keyboardMoveOrigin = this.keyboardMoveOrigin();
+        if (this.pointerDrag?.started || keyboardMoveOrigin) {
+            const activeDragPosition = this._dragOffset() ?? keyboardMoveOrigin;
+            if (activeDragPosition && hasObservers(this.dragEnd)) {
+                this.dragEnd.emit(new FloatingToolBarDragEndEvent(this, activeDragPosition.top, activeDragPosition.left));
+            }
+        }
+        this.restoreFocus();
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * Moves the focus into the FloatingToolBar at its current roving tabindex position.
+     */
+    focus() {
+        this.focusFirstTool();
+    }
+    /**
+     * Sets the FloatingToolBar position using the provided `top` and `left` coordinates.
+     * The position is clamped to the viewport.
+     */
+    setPosition(position) {
+        const popupElement = this.popupComponent?.container.nativeElement;
+        const popupRect = isDocumentAvailable() && popupElement ? popupElement.getBoundingClientRect() : undefined;
+        this._dragOffset.set(this.clampToViewport(position.left, position.top, popupRect?.width ?? 0, popupRect?.height ?? 0));
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    handlePress(ev) {
+        if (this.keyboardMoveOrigin()) {
+            this.finishKeyboardMoveMode();
+        }
+        if (!ev.isTouch) {
+            ev.originalEvent?.preventDefault();
+        }
+        // Recorded on press so the first move keeps its own pointer delta.
+        const { left, top } = this.currentPosition();
+        const { width, height } = this.popupComponent.container.nativeElement.getBoundingClientRect();
+        this.pointerDrag = { startLeft: left, startTop: top, clientX: ev.clientX, clientY: ev.clientY, width, height, started: false };
+    }
+    handleDrag(ev) {
+        const drag = this.pointerDrag;
+        if (!drag) {
+            return;
+        }
+        if (!drag.started) {
+            const start = { left: drag.startLeft, top: drag.startTop };
+            const allowed = !hasObservers(this.dragStart) || this.ngZone.run(() => this.emitDragStart(start));
+            if (!allowed) {
+                this.pointerDrag = null;
+                return;
+            }
+            drag.started = true;
+            this.pointerDragging.set(true);
+        }
+        this.updatePositionAndEmitMove(this.clampToViewport(drag.startLeft + ev.clientX - drag.clientX, drag.startTop + ev.clientY - drag.clientY, drag.width, drag.height));
+    }
+    handleRelease() {
+        const dragStarted = this.pointerDrag?.started;
+        this.pointerDrag = null;
+        this.pointerDragging.set(false);
+        if (dragStarted && hasObservers(this.dragEnd)) {
+            const { left, top } = this.currentPosition();
+            this.ngZone.run(() => this.dragEnd.emit(new FloatingToolBarDragEndEvent(this, top, left)));
+        }
+    }
+    get containerElement() {
+        return isDocumentAvailable() ? this.hostElement.nativeElement.parentElement ?? undefined : undefined;
+    }
+    updatePopupSize() {
+        const popupElement = this.popupComponent?.contentContainer?.nativeElement;
+        if (!popupElement) {
+            return;
+        }
+        const width = this._width();
+        if (isPresent$1(width)) {
+            this.renderer.setStyle(popupElement, 'width', width);
+        }
+        else {
+            this.renderer.removeStyle(popupElement, 'width');
+        }
+        const maxWidth = this._maxWidth();
+        if (isPresent$1(maxWidth)) {
+            this.renderer.setStyle(popupElement, 'max-width', maxWidth);
+        }
+        else {
+            this.renderer.removeStyle(popupElement, 'max-width');
+        }
+    }
+    restoreFocus() {
+        if (!this.isFocusWithinComponent || !this.focusReturnTarget?.isConnected) {
+            return;
+        }
+        const active = document.activeElement;
+        const isFocusTargetWithinComponent = containsFocusTarget(active, this.hostElement.nativeElement, this.toolbarComponent?.popupRef?.popupElement);
+        if (!active || active === document.body || isFocusTargetWithinComponent) {
+            this.focusReturnTarget.focus();
+        }
+    }
+    cancelActiveDrag() {
+        const hasActiveDrag = this.keyboardMoveOrigin() !== null || this.pointerDrag?.started;
+        const position = hasActiveDrag ? this.currentPosition() : null;
+        this.keyboardMoveOrigin.set(null);
+        this.pointerDrag = null;
+        this.pointerDragging.set(false);
+        if (position) {
+            afterNextRender(() => {
+                if (hasObservers(this.dragEnd)) {
+                    this.ngZone.run(() => this.dragEnd.emit(new FloatingToolBarDragEndEvent(this, position.top, position.left)));
+                }
+            }, { injector: this.injector });
+        }
+    }
+    focusFirstTool() {
+        this.projectedTools?.find((item) => item.canFocus() && !item.overflows)?.focus();
+    }
+    onFocusIn(ev) {
+        const related = ev.relatedTarget;
+        const isFocusTargetWithinComponent = containsFocusTarget(related, this.hostElement.nativeElement, this.toolbarComponent?.popupRef?.popupElement);
+        if (!this.isFocusWithinComponent && related && !isFocusTargetWithinComponent) {
+            this.focusReturnTarget = related;
+        }
+        this.isFocusWithinComponent = true;
+        if (ev.target === this.toolbarComponent?.element.nativeElement) {
+            this.focusFirstTool();
+        }
+        if (this.keyboardMoveOrigin() && ev.target !== this.dragHandle?.nativeElement) {
+            this.finishKeyboardMoveMode();
+        }
+    }
+    onFocusOut(ev) {
+        const hostEl = this.hostElement.nativeElement;
+        const related = ev.relatedTarget;
+        if (related) {
+            this.isFocusWithinComponent = containsFocusTarget(related, hostEl, this.toolbarComponent?.popupRef?.popupElement);
+            if (!hostEl.contains(related)) {
+                this.finishKeyboardMoveMode();
+            }
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                if (hostEl.isConnected && !containsFocusTarget(document.activeElement, hostEl, this.toolbarComponent?.popupRef?.popupElement)) {
+                    this.isFocusWithinComponent = false;
+                    this.finishKeyboardMoveMode();
+                }
+            });
+        });
+    }
+    onKeydown(ev) {
+        if (!this.draggable) {
+            return;
+        }
+        const onHandle = ev.target === this.dragHandle?.nativeElement;
+        const key = normalizeKeys(ev);
+        if (this.keyboardMoveOrigin()) {
+            if (onHandle) {
+                this.handleMoveModeKey(ev, key);
+            }
+            return;
+        }
+        const isMoveCommand = key === Keys.KeyM && !ev.ctrlKey && !ev.altKey && !ev.metaKey && !isEditableTarget(ev.target);
+        if (isMoveCommand) {
+            this.enterKeyboardMoveMode(ev, onHandle);
+        }
+    }
+    enterKeyboardMoveMode(ev, onHandle) {
+        const start = this.currentPosition();
+        this.ngZone.run(() => {
+            if (!this.emitDragStart(start)) {
+                return;
+            }
+            preventDefaultAndStopPropagation(ev);
+            this.preMoveDragOffset = this._dragOffset();
+            this.keyboardMoveOrigin.set(start);
+            if (!onHandle) {
+                this.dragHandle?.nativeElement.focus();
+            }
+        });
+    }
+    handleMoveModeKey(ev, key) {
+        const delta = ARROW_DELTAS[ev.key];
+        if (delta) {
+            preventDefaultAndStopPropagation(ev);
+            const current = this.currentPosition();
+            const { width, height } = this.popupComponent.container.nativeElement.getBoundingClientRect();
+            this.updatePositionAndEmitMove(this.clampToViewport(current.left + delta.left, current.top + delta.top, width, height));
+        }
+        else if (key === Keys.Escape) {
+            preventDefaultAndStopPropagation(ev);
+            this.cancelKeyboardMoveMode();
+        }
+    }
+    finishKeyboardMoveMode() {
+        if (!this.keyboardMoveOrigin()) {
+            return;
+        }
+        const { left, top } = this.currentPosition();
+        this.ngZone.run(() => {
+            this.keyboardMoveOrigin.set(null);
+            this.dragEnd.emit(new FloatingToolBarDragEndEvent(this, top, left));
+        });
+    }
+    cancelKeyboardMoveMode() {
+        const origin = this.keyboardMoveOrigin();
+        if (!origin) {
+            return;
+        }
+        const current = this.currentPosition();
+        const moved = current.left !== origin.left || current.top !== origin.top;
+        this.ngZone.run(() => {
+            this.keyboardMoveOrigin.set(null);
+            this._dragOffset.set(this.preMoveDragOffset);
+            if (moved) {
+                this.move.emit(new FloatingToolBarMoveEvent(this, origin.top, origin.left));
+            }
+            this.dragEnd.emit(new FloatingToolBarDragEndEvent(this, origin.top, origin.left));
+        });
+    }
+    emitDragStart({ left, top }) {
+        const event = new FloatingToolBarDragStartEvent(this, top, left);
+        this.dragStart.emit(event);
+        return !event.isDefaultPrevented();
+    }
+    updatePositionAndEmitMove(position) {
+        this._dragOffset.set(position);
+        if (hasObservers(this.move)) {
+            this.ngZone.run(() => this.move.emit(new FloatingToolBarMoveEvent(this, position.top, position.left)));
+        }
+    }
+    currentPosition() {
+        const dragged = this._dragOffset();
+        if (dragged) {
+            return dragged;
+        }
+        const popupElement = this.popupComponent.container.nativeElement;
+        const { left, top } = popupElement.style;
+        const position = { left: parseFloat(left) || 0, top: parseFloat(top) || 0 };
+        if (this.popupPositionMode() === 'absolute' && popupElement.offsetParent) {
+            return position;
+        }
+        const scrollX = isDocumentAvailable() ? window.scrollX || 0 : 0;
+        const scrollY = isDocumentAvailable() ? window.scrollY || 0 : 0;
+        return { left: position.left + scrollX, top: position.top + scrollY };
+    }
+    clampToViewport(left, top, width, height) {
+        if (!isDocumentAvailable()) {
+            return { left, top };
+        }
+        const popupElement = this.popupComponent?.container.nativeElement;
+        const offsetParent = (popupElement?.offsetParent ?? this.hostElement.nativeElement.offsetParent);
+        const { clientWidth, clientHeight } = document.documentElement;
+        const viewport = {
+            width: clientWidth || window.innerWidth,
+            height: clientHeight || window.innerHeight,
+            scrollX: window.scrollX || 0,
+            scrollY: window.scrollY || 0
+        };
+        return clampToBounds({ left, top }, { width, height }, viewport, getPositioningOrigin(offsetParent));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: FloatingToolBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: FloatingToolBarComponent, isStandalone: true, selector: "kendo-floatingtoolbar", inputs: { anchor: "anchor", position: "position", containerAlign: "containerAlign", margin: "margin", width: "width", maxWidth: "maxWidth", overflow: "overflow", size: "size", fillMode: "fillMode", draggable: "draggable", ariaLabel: "ariaLabel" }, outputs: { dragStart: "dragStart", move: "move", dragEnd: "dragEnd" }, host: { properties: { "attr.dir": "this.direction" } }, providers: [
+            LocalizationService,
+            { provide: L10N_PREFIX, useValue: 'kendo.floatingtoolbar' },
+            provideComponentName('floatingtoolbar'),
+            // Re-projected tools resolve their ToolBar host through this element injector.
+            { provide: ToolBarComponent, useExisting: forwardRef(() => FloatingToolBarComponent) }
+        ], queries: [{ propertyName: "projectedTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "popupComponent", first: true, predicate: PopupComponent, descendants: true }, { propertyName: "toolbarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "dragHandle", first: true, predicate: ["dragHandle"], descendants: true }], exportAs: ["kendoFloatingToolBar"], ngImport: i0, template: `
+        <ng-container kendoFloatingToolBarLocalizedMessages
+            i18n-dragHandleTitle="kendo.floatingtoolbar.dragHandleTitle|The title of the drag handle of the FloatingToolBar"
+            dragHandleTitle="Drag to reposition"
+            i18n-moreToolsTitle="kendo.floatingtoolbar.moreToolsTitle|The title of the More Tools button in the hosted FloatingToolBar"
+            moreToolsTitle="More tools"
+            i18n-previousToolButton="kendo.floatingtoolbar.previousToolButton|The title of the previous scroll button in the hosted FloatingToolBar"
+            previousToolButton="Scroll left"
+            i18n-nextToolButton="kendo.floatingtoolbar.nextToolButton|The title of the next scroll button in the hosted FloatingToolBar"
+            nextToolButton="Scroll right">
+        </ng-container>
+        <kendo-popup #popup
+            [animate]="false"
+            [positionMode]="popupPositionMode()"
+            [popupClass]="popupClass()"
+            [anchor]="popupPosition().anchor"
+            [offset]="popupPosition().offset"
+            [anchorAlign]="popupPosition().anchorAlign"
+            [popupAlign]="popupPosition().popupAlign"
+            [collision]="popupPosition().collision"
+            [margin]="popupPosition().margin">
+            @if (draggable) {
+                <div #dragHandle
+                    class="k-floating-toolbar-drag-handle k-touch-action-none"
+                    role="button"
+                    tabindex="0"
+                    [attr.aria-label]="dragHandleTitle"
+                    [attr.aria-pressed]="moveMode()"
+                    kendoDraggable
+                    (kendoPress)="handlePress($event)"
+                    (kendoDrag)="handleDrag($event)"
+                    (kendoRelease)="handleRelease()">
+                    <kendo-icon-wrapper name="handle-drag-dots" [svgIcon]="dragHandleIcon"></kendo-icon-wrapper>
+                </div>
+                <div class="k-separator k-separator-vertical"></div>
+            }
+            <kendo-toolbar
+                [size]="size"
+                [fillMode]="fillMode"
+                [overflow]="overflow"
+                [attr.aria-label]="ariaLabel"
+                [toolsSource]="projectedTools">
+                <kendo-toolbar-messages
+                    [moreToolsTitle]="messageFor('moreToolsTitle')"
+                    [previousToolButton]="messageFor('previousToolButton')"
+                    [nextToolButton]="messageFor('nextToolButton')">
+                </kendo-toolbar-messages>
+                <ng-content></ng-content>
+            </kendo-toolbar>
+        </kendo-popup>
+    `, isInline: true, dependencies: [{ kind: "component", type: PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText", "toolsSource"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolbarCustomMessagesComponent, selector: "kendo-toolbar-messages" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: LocalizedFloatingToolBarMessagesDirective, selector: "[kendoFloatingToolBarLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: FloatingToolBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-floatingtoolbar',
+                    exportAs: 'kendoFloatingToolBar',
+                    standalone: true,
+                    providers: [
+                        LocalizationService,
+                        { provide: L10N_PREFIX, useValue: 'kendo.floatingtoolbar' },
+                        provideComponentName('floatingtoolbar'),
+                        // Re-projected tools resolve their ToolBar host through this element injector.
+                        { provide: ToolBarComponent, useExisting: forwardRef(() => FloatingToolBarComponent) }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [PopupComponent, ToolBarComponent, ToolbarCustomMessagesComponent, IconWrapperComponent, DraggableDirective, LocalizedFloatingToolBarMessagesDirective],
+                    template: `
+        <ng-container kendoFloatingToolBarLocalizedMessages
+            i18n-dragHandleTitle="kendo.floatingtoolbar.dragHandleTitle|The title of the drag handle of the FloatingToolBar"
+            dragHandleTitle="Drag to reposition"
+            i18n-moreToolsTitle="kendo.floatingtoolbar.moreToolsTitle|The title of the More Tools button in the hosted FloatingToolBar"
+            moreToolsTitle="More tools"
+            i18n-previousToolButton="kendo.floatingtoolbar.previousToolButton|The title of the previous scroll button in the hosted FloatingToolBar"
+            previousToolButton="Scroll left"
+            i18n-nextToolButton="kendo.floatingtoolbar.nextToolButton|The title of the next scroll button in the hosted FloatingToolBar"
+            nextToolButton="Scroll right">
+        </ng-container>
+        <kendo-popup #popup
+            [animate]="false"
+            [positionMode]="popupPositionMode()"
+            [popupClass]="popupClass()"
+            [anchor]="popupPosition().anchor"
+            [offset]="popupPosition().offset"
+            [anchorAlign]="popupPosition().anchorAlign"
+            [popupAlign]="popupPosition().popupAlign"
+            [collision]="popupPosition().collision"
+            [margin]="popupPosition().margin">
+            @if (draggable) {
+                <div #dragHandle
+                    class="k-floating-toolbar-drag-handle k-touch-action-none"
+                    role="button"
+                    tabindex="0"
+                    [attr.aria-label]="dragHandleTitle"
+                    [attr.aria-pressed]="moveMode()"
+                    kendoDraggable
+                    (kendoPress)="handlePress($event)"
+                    (kendoDrag)="handleDrag($event)"
+                    (kendoRelease)="handleRelease()">
+                    <kendo-icon-wrapper name="handle-drag-dots" [svgIcon]="dragHandleIcon"></kendo-icon-wrapper>
+                </div>
+                <div class="k-separator k-separator-vertical"></div>
+            }
+            <kendo-toolbar
+                [size]="size"
+                [fillMode]="fillMode"
+                [overflow]="overflow"
+                [attr.aria-label]="ariaLabel"
+                [toolsSource]="projectedTools">
+                <kendo-toolbar-messages
+                    [moreToolsTitle]="messageFor('moreToolsTitle')"
+                    [previousToolButton]="messageFor('previousToolButton')"
+                    [nextToolButton]="messageFor('nextToolButton')">
+                </kendo-toolbar-messages>
+                <ng-content></ng-content>
+            </kendo-toolbar>
+        </kendo-popup>
+    `
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { projectedTools: [{
+                type: ContentChildren,
+                args: [ToolBarToolComponent]
+            }], popupComponent: [{
+                type: ViewChild,
+                args: [PopupComponent]
+            }], toolbarComponent: [{
+                type: ViewChild,
+                args: [ToolBarComponent]
+            }], dragHandle: [{
+                type: ViewChild,
+                args: ['dragHandle']
+            }], anchor: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], containerAlign: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], overflow: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], draggable: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], dragStart: [{
+                type: Output
+            }], move: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }] } });
+
+/**
+ * Represents the custom messages component of the FloatingToolBar.
+ *
+ * Use this component to override default messages for the FloatingToolBar.
+ *
+ * @example
+ * ```html
+ * <kendo-floatingtoolbar>
+ *      <kendo-floatingtoolbar-messages
+ *          dragHandleTitle="Drag to reposition">
+ *      </kendo-floatingtoolbar-messages>
+ * </kendo-floatingtoolbar>
+ * ```
+ */
+class FloatingToolBarCustomMessagesComponent extends FloatingToolBarMessages {
+    service;
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: FloatingToolBarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.32", type: FloatingToolBarCustomMessagesComponent, isStandalone: true, selector: "kendo-floatingtoolbar-messages", providers: [
+            {
+                provide: FloatingToolBarMessages,
+                useExisting: forwardRef(() => FloatingToolBarCustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: FloatingToolBarCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: FloatingToolBarMessages,
+                            useExisting: forwardRef(() => FloatingToolBarCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-floatingtoolbar-messages',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1.LocalizationService }] });
+
 /**
 * Use this utility array to access all `@progress/kendo-angular-toolbar`-related components and directives in a standalone Angular component.
 *
@@ -5240,7 +6229,9 @@ const KENDO_TOOLBAR = [
     ToolBarSeparatorComponent,
     ToolBarSpacerComponent,
     ToolBarSplitButtonComponent,
-    ToolBarToolComponent
+    ToolBarToolComponent,
+    FloatingToolBarComponent,
+    FloatingToolBarCustomMessagesComponent
 ];
 
 // IMPORTANT: NgModule export kept for backwards compatibility
@@ -5259,8 +6250,8 @@ const KENDO_TOOLBAR = [
  */
 class ToolBarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.32", ngImport: i0, type: ToolBarModule, imports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent], exports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ToolBarComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSplitButtonComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.32", ngImport: i0, type: ToolBarModule, imports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, FloatingToolBarComponent, FloatingToolBarCustomMessagesComponent], exports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, FloatingToolBarComponent, FloatingToolBarCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ToolBarComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSplitButtonComponent, FloatingToolBarComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,
@@ -5275,5 +6266,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KENDO_TOOLBAR, LocalizedToolbarMessagesDirective, RefreshService, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarComponent, ToolBarDropDownButtonComponent, ToolBarModule, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, ToolbarCustomMessagesComponent };
+export { FloatingToolBarComponent, FloatingToolBarCustomMessagesComponent, FloatingToolBarDragEndEvent, FloatingToolBarDragStartEvent, FloatingToolBarMessages, FloatingToolBarMoveEvent, KENDO_TOOLBAR, LocalizedFloatingToolBarMessagesDirective, LocalizedToolbarMessagesDirective, RefreshService, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarComponent, ToolBarDropDownButtonComponent, ToolBarModule, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, ToolbarCustomMessagesComponent };