@progress/kendo-angular-toolbar 25.3.1-develop.2 → 25.4.0-develop.1

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

@@ -3,15 +3,15 @@
 * 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, signal, computed, afterNextRender, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, signal, afterNextRender, inject, ElementRef, Input, ViewChild, Directive, Output, forwardRef, HostBinding, ChangeDetectionStrategy, Component, computed, ViewContainerRef, HostListener, ContentChildren, isDevMode, ViewChildren, NgModule } from '@angular/core';
 import * as i2 from '@progress/kendo-angular-popup';
 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 { filter, takeUntil } from 'rxjs/operators';
 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';
@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1791536933,
-    version: '25.3.1-develop.2',
+    publishDate: 1791873159,
+    version: '25.4.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -52,8 +52,8 @@ const DEFAULT_SCROLL_SPEED = 100;
  * @hidden
  */
 class ScrollService {
-    ngZone;
     localization;
+    ngZone;
     owner;
     position = 0;
     scrollButtonActiveStateChange = new Subject();
@@ -73,9 +73,9 @@ class ScrollService {
     get toolsOverflow() {
         return this.scrollContainerOverflowSize > 0;
     }
-    constructor(ngZone, localization) {
-        this.ngZone = ngZone;
+    constructor(localization, ngZone) {
         this.localization = localization;
+        this.ngZone = ngZone;
     }
     toggleScrollButtonsState() {
         const toolbar = this.owner;
@@ -89,7 +89,7 @@ class ScrollService {
         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));
+            this.toggleButtonActiveState('prev', calculatedPrevButtonActive);
         }
         if (calculatedNextButtonActive !== currentNextButtonActive) {
             this.ngZone.run(() => this.toggleButtonActiveState('next', calculatedNextButtonActive));
@@ -154,12 +154,12 @@ class ScrollService {
         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: "21.2.23", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScrollService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScrollService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScrollService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }] });
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }] });
 
 /**
  * @hidden
@@ -416,19 +416,19 @@ const normalizeOverflowSettings = (overflow) => {
  * @hidden
  */
 class NavigationService {
-    zone;
     scrollService;
+    injector;
     overflowButton;
     focused = { renderedTool: null, index: -1 };
-    renderedTools = [];
+    renderedTools = signal([], ...(ngDevMode ? [{ debugName: "renderedTools" }] : /* istanbul ignore next */ []));
     isPopupFocused = false;
     isOverflowButtonFocused = false;
-    constructor(zone, scrollService) {
-        this.zone = zone;
+    constructor(scrollService, injector) {
         this.scrollService = scrollService;
+        this.injector = injector;
     }
     setRenderedTools(rts) {
-        this.renderedTools = rts;
+        this.renderedTools.set(rts);
     }
     click({ context, event: ev }) {
         if (this.focused.renderedTool !== context && ev) {
@@ -518,11 +518,11 @@ class NavigationService {
         }
     }
     getFocusableTools() {
-        return this.renderedTools.filter(rt => (rt.tool.overflows === this.isPopupFocused) && rt.tool.canFocus());
+        return this.renderedTools().filter(rt => (rt.tool.overflows === this.isPopupFocused) && rt.tool.canFocus());
     }
     focus(renderedTool, ev) {
-        // running the code below in onStable fixes issue #2939
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        // running the code below in afterNextRender fixes issue #2939
+        afterNextRender(() => {
             if (!renderedTool) {
                 const focusableRTs = this.getFocusableTools();
                 const lastFocusedRT = focusableRTs.find(rt => rt === this.focused.renderedTool) || focusableRTs[0];
@@ -544,7 +544,7 @@ class NavigationService {
                 }
                 this.blurOverflowButton();
             }
-        });
+        }, { injector: this.injector });
     }
     blurOverflowButton() {
         if (this.overflowButton) {
@@ -563,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: "21.2.23", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationService, deps: [{ token: ScrollService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: ScrollService }] });
+        }], ctorParameters: () => [{ type: ScrollService }, { type: i0.Injector }] });
 
 /**
  * Represents the base ToolBar Tool component for Angular.
@@ -597,11 +597,36 @@ class ToolBarToolComponent {
     toolbarTemplate;
     sectionTemplate;
     popupTemplate;
-    tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
-    overflows = true;
-    visibility;
+    //Focus movement inside the toolbar is managed using roving tabindex.
+    set tabIndex(value) {
+        this._tabIndex.set(value);
+    }
+    get tabIndex() {
+        return this._tabIndex();
+    }
     element;
-    isBuiltInTool = false;
+    set overflows(value) {
+        this._overflows.set(value);
+    }
+    get overflows() {
+        return this._overflows();
+    }
+    set visibility(value) {
+        this._visibility.set(value);
+    }
+    get visibility() {
+        return this._visibility();
+    }
+    set isBuiltInTool(value) {
+        this._isBuiltInTool.set(value);
+    }
+    get isBuiltInTool() {
+        return this._isBuiltInTool();
+    }
+    _isBuiltInTool = signal(false, ...(ngDevMode ? [{ debugName: "_isBuiltInTool" }] : /* istanbul ignore next */ []));
+    _location = signal(null, ...(ngDevMode ? [{ debugName: "_location" }] : /* istanbul ignore next */ []));
+    _overflows = signal(true, ...(ngDevMode ? [{ debugName: "_overflows" }] : /* istanbul ignore next */ []));
+    _visibility = signal(null, ...(ngDevMode ? [{ debugName: "_visibility" }] : /* istanbul ignore next */ []));
     /**
      * @hidden
      */
@@ -609,7 +634,12 @@ class ToolBarToolComponent {
     /**
      * @hidden
      */
-    location;
+    set location(value) {
+        this._location.set(value);
+    }
+    get location() {
+        return this._location();
+    }
     constructor() {
         this.element = inject(ElementRef);
     }
@@ -650,6 +680,7 @@ class ToolBarToolComponent {
     handleKey(_ev) {
         return false;
     }
+    _tabIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_tabIndex" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "sectionTemplate", first: true, predicate: ["sectionTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0 });
 }
@@ -745,11 +776,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
 class ToolbarToolsService {
     renderedToolsChange = new Subject();
     overflowToolsChange = new Subject();
-    renderedTools = [];
-    overflowTools = [];
-    allTools = [];
+    renderedTools = signal([], ...(ngDevMode ? [{ debugName: "renderedTools" }] : /* istanbul ignore next */ []));
+    overflowTools = signal([], ...(ngDevMode ? [{ debugName: "overflowTools" }] : /* istanbul ignore next */ []));
+    allTools = signal([], ...(ngDevMode ? [{ debugName: "allTools" }] : /* istanbul ignore next */ []));
     reset() {
-        this.renderedTools = this.overflowTools = this.allTools = [];
+        this.renderedTools.set([]);
+        this.overflowTools.set([]);
+        this.allTools.set([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolbarToolsService });
@@ -768,9 +801,24 @@ class ToolBarRendererComponent {
     refreshService;
     toolsService;
     viewContainer;
-    tool;
-    location;
-    resizable;
+    set tool(value) {
+        this._tool.set(value);
+    }
+    get tool() {
+        return this._tool();
+    }
+    set location(value) {
+        this._location.set(value);
+    }
+    get location() {
+        return this._location();
+    }
+    set resizable(value) {
+        this._resizable.set(value);
+    }
+    get resizable() {
+        return this._resizable();
+    }
     rendererClick = new EventEmitter();
     template;
     element;
@@ -779,6 +827,9 @@ class ToolBarRendererComponent {
     }
     refreshSubscription;
     internalComponentRef;
+    _tool = signal(null, ...(ngDevMode ? [{ debugName: "_tool" }] : /* istanbul ignore next */ []));
+    _location = signal(null, ...(ngDevMode ? [{ debugName: "_location" }] : /* istanbul ignore next */ []));
+    _resizable = signal(false, ...(ngDevMode ? [{ debugName: "_resizable" }] : /* istanbul ignore next */ []));
     constructor(renderer, rendererService, refreshService, toolsService, viewContainer) {
         this.renderer = renderer;
         this.rendererService = rendererService;
@@ -800,6 +851,13 @@ class ToolBarRendererComponent {
     ngOnDestroy() {
         this.refreshSubscription?.unsubscribe();
         this.internalComponentRef?.removeEventListener('click', this.onClick);
+        if (this.location === 'toolbar') {
+            this.toolsService.renderedTools.set(this.toolsService.renderedTools().filter(t => t !== this));
+            this.toolsService.renderedToolsChange.next(this.toolsService.renderedTools());
+        }
+        else {
+            this.toolsService.overflowTools.set(this.toolsService.overflowTools().filter(t => t !== this));
+        }
     }
     ngAfterViewInit() {
         const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
@@ -899,19 +957,22 @@ class ToolBarRendererComponent {
     };
     updateTools() {
         this.tool.location = this.location;
-        const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
-        const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
+        const isInToolbar = this.toolsService.renderedTools().some(t => t.tool === this.tool);
+        const isInPopup = this.toolsService.overflowTools().some(t => t.tool === this.tool);
         if (this.location === 'toolbar') {
-            isInPopup && (this.toolsService.overflowTools = this.toolsService.overflowTools.filter(t => t.tool !== this.tool));
-            !isInToolbar && this.toolsService.renderedTools.push(this);
+            if (isInPopup) {
+                this.toolsService.overflowTools.set(this.toolsService.overflowTools().filter(t => t.tool !== this.tool));
+            }
+            if (!isInToolbar) {
+                this.toolsService.renderedTools.update(tools => [...tools, this]);
+                this.toolsService.renderedToolsChange.next(this.toolsService.renderedTools());
+            }
         }
         else {
             if (!isInPopup) {
-                this.toolsService.overflowTools.push(this);
-                this.toolsService.overflowTools.sort((t1, t2) => {
-                    // ensures correct navigation order in Popup
-                    return this.toolsService.allTools.indexOf(t1.tool) - this.toolsService.allTools.indexOf(t2.tool);
-                });
+                this.toolsService.overflowTools.update(tools => 
+                // ensures correct navigation order in Popup
+                [...tools, this].sort((t1, t2) => this.toolsService.allTools().indexOf(t1.tool) - this.toolsService.allTools().indexOf(t2.tool)));
             }
         }
     }
@@ -946,15 +1007,33 @@ class ToolbarMessages extends ComponentMessages {
     /**
      * Sets the title of the **More Tools** button in a responsive ToolBar.
      */
-    moreToolsTitle;
+    set moreToolsTitle(value) {
+        this._moreToolsTitle.set(value);
+    }
+    get moreToolsTitle() {
+        return this._moreToolsTitle();
+    }
     /**
      * Sets the title for the **Previous Tool** button when the ToolBar is scrollable.
      */
-    previousToolButton;
+    set previousToolButton(value) {
+        this._previousToolButton.set(value);
+    }
+    get previousToolButton() {
+        return this._previousToolButton();
+    }
     /**
      * Sets the title for the **Next Tool** button when the ToolBar is scrollable.
      */
-    nextToolButton;
+    set nextToolButton(value) {
+        this._nextToolButton.set(value);
+    }
+    get nextToolButton() {
+        return this._nextToolButton();
+    }
+    _moreToolsTitle = signal(null, ...(ngDevMode ? [{ debugName: "_moreToolsTitle" }] : /* istanbul ignore next */ []));
+    _previousToolButton = signal(null, ...(ngDevMode ? [{ debugName: "_previousToolButton" }] : /* istanbul ignore next */ []));
+    _nextToolButton = signal(null, ...(ngDevMode ? [{ debugName: "_nextToolButton" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: ToolbarMessages, isStandalone: true, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle", previousToolButton: "previousToolButton", nextToolButton: "nextToolButton" }, usesInheritance: true, ngImport: i0 });
 }
@@ -1012,8 +1091,8 @@ const DIRECTION_CLASSES = {
 class ToolbarScrollableButtonComponent {
     host;
     renderer;
-    ngZone;
     localization;
+    ngZone;
     get prevClass() {
         return this.prev;
     }
@@ -1036,11 +1115,11 @@ class ToolbarScrollableButtonComponent {
     chevronLeftIcon = chevronLeftIcon;
     chevronRightIcon = chevronRightIcon;
     subs = new Subscription();
-    constructor(host, renderer, ngZone, localization) {
+    constructor(host, renderer, localization, ngZone) {
         this.host = host;
         this.renderer = renderer;
-        this.ngZone = ngZone;
         this.localization = localization;
+        this.ngZone = ngZone;
     }
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -1099,7 +1178,7 @@ class ToolbarScrollableButtonComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolbarScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolbarScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: ToolbarScrollableButtonComponent, isStandalone: true, selector: "[kendoToolbarScrollableButton]", inputs: { prev: "prev", overflow: "overflow" }, outputs: { onClick: "onClick" }, host: { properties: { "class.k-toolbar-prev": "this.prevClass", "class.k-toolbar-next": "this.nextClass", "attr.role": "this.role" } }, ngImport: i0, template: `
         <kendo-icon-wrapper
             [name]="iconClass"
@@ -1108,7 +1187,7 @@ class ToolbarScrollableButtonComponent {
             innerCssClass="k-button-icon"
         >
         </kendo-icon-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolbarScrollableButtonComponent, decorators: [{
             type: Component,
@@ -1124,9 +1203,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
     `,
                     selector: '[kendoToolbarScrollableButton]',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [IconWrapperComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { prevClass: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }], propDecorators: { prevClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar-prev']
             }], nextClass: [{
@@ -1182,11 +1262,12 @@ class ToolBarComponent {
     refreshService;
     navigationService;
     element;
-    zone;
     renderer;
     _cdr;
     toolsService;
     scrollService;
+    injector;
+    zone;
     get overflowClass() {
         return this.size ? `k-button-${SIZES[this.size]}` : '';
     }
@@ -1199,19 +1280,19 @@ class ToolBarComponent {
         if (this.isScrollMode) {
             this.removeSubscriptions(['scrollButtonStateChangeSub', 'scrollContainerScrollSub']);
         }
-        this._overflow = overflow;
+        this._overflow.set(overflow);
         if (this.isScrollMode) {
             this.handleScrollModeUpdates();
         }
         this.setScrollableOverlayClasses();
-        this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+        afterNextRender(() => this.onResize(), { injector: this.injector });
     }
     get overflow() {
-        return this._overflow;
+        return this._overflow();
     }
     get showScrollButtons() {
         const buttonsVisibility = this.normalizedOverflow.scrollButtons;
-        const showAuto = buttonsVisibility === 'auto' && this.showAutoButtons;
+        const showAuto = buttonsVisibility === 'auto' && this._showAutoButtons();
         const showAlways = buttonsVisibility === 'visible';
         return this.isScrollMode && (showAuto || showAlways);
     }
@@ -1244,7 +1325,9 @@ class ToolBarComponent {
     /**
      * @hidden
      */
-    scrollButtonClasses = [];
+    get scrollButtonClasses() {
+        return this._scrollButtonClasses();
+    }
     /**
      * @hidden
      */
@@ -1263,10 +1346,10 @@ class ToolBarComponent {
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/responsive-toolbar#customizing-the-popup)).
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({}, getInitialPopupSettings(this.localization.rtl), settings);
+        this._popupSettings.set(Object.assign({}, getInitialPopupSettings(this.localization.rtl), settings));
     }
     get popupSettings() {
-        return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
+        return this._popupSettings() || getInitialPopupSettings(this.localization.rtl);
     }
     /**
      * Sets the fill mode for the ToolBar.
@@ -1275,11 +1358,10 @@ class ToolBarComponent {
      */
     set fillMode(fillMode) {
         this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
-        this.updateScrollButtonClasses();
+        this._fillMode.set(fillMode);
     }
     get fillMode() {
-        return this._fillMode;
+        return this._fillMode();
     }
     /**
      * Sets the `tabindex` attribute of the ToolBar.
@@ -1287,18 +1369,23 @@ class ToolBarComponent {
      *
      * @default 0
      */
-    tabindex = 0;
+    set tabindex(value) {
+        this._tabindex.set(value);
+        this.element.nativeElement.setAttribute('tabindex', value.toString());
+    }
+    get tabindex() {
+        return this._tabindex();
+    }
     /**
      * Sets the size for all ToolBar elements.
      * Use this property to control the padding of the ToolBar elements. The default value is set by the Kendo theme.
      */
     set size(size) {
         this.handleClasses(size, 'size');
-        this._size = size;
-        this.updateScrollButtonClasses();
+        this._size.set(size);
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * @hidden
@@ -1315,11 +1402,11 @@ class ToolBarComponent {
      * @default 'always'
      */
     set showIcon(value) {
-        if (this._showIcon === value) {
+        if (this._showIcon() === value) {
             return;
         }
         const normalizedValue = this.normalizeDisplayValue(value);
-        this._showIcon = value;
+        this._showIcon.set(value);
         this.propertyChange.emit({
             property: 'showIcon',
             value: normalizedValue
@@ -1331,11 +1418,11 @@ class ToolBarComponent {
      * @default 'always'
      */
     set showText(value) {
-        if (this._showText === value) {
+        if (this._showText() === value) {
             return;
         }
         const normalizedValue = this.normalizeDisplayValue(value);
-        this._showText = value;
+        this._showText.set(value);
         this.propertyChange.emit({
             property: 'showText',
             value: normalizedValue
@@ -1371,8 +1458,16 @@ class ToolBarComponent {
     startButtonGroup;
     endButtonGroup;
     scrollSeparator;
-    popupRef;
-    direction;
+    set popupRef(value) {
+        this._popupRef.set(value);
+    }
+    get popupRef() {
+        return this._popupRef();
+    }
+    _popupRef = signal(null, ...(ngDevMode ? [{ debugName: "_popupRef" }] : /* istanbul ignore next */ []));
+    get direction() {
+        return this._direction();
+    }
     get appendTo() {
         const { appendTo } = this.popupSettings;
         if (!appendTo || appendTo === 'root') {
@@ -1397,7 +1492,7 @@ class ToolBarComponent {
         this.toggle(open);
     }
     get popupOpen() {
-        return this._open;
+        return this._open();
     }
     /**
      * @hidden
@@ -1418,21 +1513,32 @@ class ToolBarComponent {
     get sectionClass() {
         return this.normalizedOverflow.mode === 'section';
     }
-    _overflow = false;
-    _popupSettings;
-    cachedOverflowAnchorWidth;
-    _open;
+    _overflow = signal(false, ...(ngDevMode ? [{ debugName: "_overflow" }] : /* istanbul ignore next */ []));
+    _popupSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : /* istanbul ignore next */ []));
+    cachedOverflowAnchorWidth = signal(null, ...(ngDevMode ? [{ debugName: "cachedOverflowAnchorWidth" }] : /* istanbul ignore next */ []));
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+    _direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : /* istanbul ignore next */ []));
+    _tabindex = signal(0, ...(ngDevMode ? [{ debugName: "_tabindex" }] : /* istanbul ignore next */ []));
     toolbarKeydownListener;
     overflowKeydownListener;
     sectionKeydownListener;
     cancelRenderedToolsSubscription$ = new Subject();
-    cachedGap;
-    _size = undefined;
-    _fillMode = undefined;
-    _showText = 'always';
-    _showIcon = 'always';
-    overflowButtonClickedTime = null;
-    showAutoButtons = false;
+    cachedGap = signal(null, ...(ngDevMode ? [{ debugName: "cachedGap" }] : /* istanbul ignore next */ []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : /* istanbul ignore next */ []));
+    _scrollButtonClasses = computed(() => {
+        const size = SIZES[this._size()];
+        const fillMode = this._fillMode();
+        return [
+            size && `k-button-${size}`,
+            fillMode && `k-button-${fillMode}`
+        ].filter(Boolean);
+    }, ...(ngDevMode ? [{ debugName: "_scrollButtonClasses" }] : /* istanbul ignore next */ []));
+    _showText = signal('always', ...(ngDevMode ? [{ debugName: "_showText" }] : /* istanbul ignore next */ []));
+    _showIcon = signal('always', ...(ngDevMode ? [{ debugName: "_showIcon" }] : /* istanbul ignore next */ []));
+    overflowButtonClickedTime = signal(null, ...(ngDevMode ? [{ debugName: "overflowButtonClickedTime" }] : /* istanbul ignore next */ []));
+    _showAutoButtons = signal(false, ...(ngDevMode ? [{ debugName: "_showAutoButtons" }] : /* istanbul ignore next */ []));
+    _showOverflowSeparator = signal(false, ...(ngDevMode ? [{ debugName: "_showOverflowSeparator" }] : /* istanbul ignore next */ []));
     scrollButtonStateChangeSub;
     scrollContainerScrollSub;
     /**
@@ -1485,37 +1591,38 @@ class ToolBarComponent {
     licenseMessage;
     constructor(localization, popupService, refreshService, navigationService, 
     // Needs to be public as it is being accessed in the Editor component
-    element, zone, renderer, _cdr, toolsService, scrollService) {
+    element, renderer, _cdr, toolsService, scrollService, injector, zone) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
         this.navigationService = navigationService;
         this.element = element;
-        this.zone = zone;
         this.renderer = renderer;
         this._cdr = _cdr;
         this.toolsService = toolsService;
         this.scrollService = scrollService;
+        this.injector = injector;
+        this.zone = zone;
         const isValid = validatePackage(packageMetadata);
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this._direction.set(localization.rtl ? 'rtl' : 'ltr');
         this.scrollService.owner = this;
     }
     ngAfterContentInit() {
-        this.toolsService.allTools = this.allTools.toArray();
+        this.toolsService.allTools.set(this.allTools.toArray());
         this.subscriptions.add(this.allTools.changes.subscribe(() => {
             this.toolsService.reset();
-            this.toolsService.allTools = this.allTools.toArray();
+            this.toolsService.allTools.set(this.allTools.toArray());
             this.allTools.forEach((tool) => {
                 this.refreshService.refresh(tool);
             });
-            this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+            afterNextRender(() => this.onResize(), { injector: this.injector });
         }));
     }
     ngAfterViewInit() {
-        this.toolsService.renderedToolsChange.next(this.toolsService.renderedTools);
-        this.toolsService.overflowToolsChange.next(this.toolsService.overflowTools);
+        this.toolsService.renderedToolsChange.next(this.toolsService.renderedTools());
+        this.toolsService.overflowToolsChange.next(this.toolsService.overflowTools());
         const element = this.element.nativeElement;
         if (!element.getAttribute('tabindex')) {
             this.element.nativeElement.setAttribute('tabindex', '0');
@@ -1579,13 +1686,19 @@ class ToolBarComponent {
             }
             // because of https://github.com/telerik/kendo-angular-buttons/pull/276
             // button icons are not rendered until onResize() is called
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    this.zone.run(() => {
-                        this.onResize();
+            afterNextRender(() => {
+                this.zone.run(() => {
+                    this.onResize();
+                });
+                // check if still needed after the Editor migration
+                this.zone.runOutsideAngular(() => {
+                    setTimeout(() => {
+                        this.zone.run(() => {
+                            this.onResize();
+                        });
                     });
                 });
-            });
+            }, { injector: this.injector });
         }
         if (this.isScrollMode) {
             this.handleScrollModeUpdates();
@@ -1595,11 +1708,11 @@ class ToolBarComponent {
                 this.focusedByPointer = true;
             }
         }));
-        this.navigationService.setRenderedTools(this.toolsService.renderedTools);
+        this.navigationService.setRenderedTools(this.toolsService.renderedTools());
     }
     ngOnInit() {
-        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
-        this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
+        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => this._direction.set(rtl ? 'rtl' : 'ltr')));
+        afterNextRender(() => this.onResize(), { injector: this.injector });
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => this.subscriptions.add(fromEvent(document, 'click')
                 .pipe(filter(() => !!this.popupRef), filter((ev) => !this.popupRef.popup.instance.container.nativeElement.contains(ev.target)), filter((ev) => !this.overflowButton.nativeElement.contains(ev.target)))
@@ -1610,12 +1723,6 @@ class ToolBarComponent {
             })));
         }
     }
-    ngOnChanges(changes) {
-        if (changes['tabindex']) {
-            // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-            this.element.nativeElement.setAttribute('tabindex', changes['tabindex'].currentValue.toString());
-        }
-    }
     ngOnDestroy() {
         this.destroyPopup();
         if (this.toolbarKeydownListener) {
@@ -1627,7 +1734,9 @@ class ToolBarComponent {
     /**
      * @hidden
      */
-    showOverflowSeparator = false;
+    get showOverflowSeparator() {
+        return this._showOverflowSeparator();
+    }
     /**
      * @hidden
      */
@@ -1689,13 +1798,13 @@ class ToolBarComponent {
     showPopup() {
         this.popupOpen = !this.popupOpen;
         this.navigationService.click({ context: undefined, event: undefined });
-        this.overflowButtonClickedTime = Date.now();
+        this.overflowButtonClickedTime.set(Date.now());
     }
     /**
      * Toggles the visibility of the overflow popup.
      */
     toggle(popupOpen) {
-        this._open = popupOpen !== undefined ? popupOpen : !this.popupOpen;
+        this._open.set(popupOpen !== undefined ? popupOpen : !this.popupOpen);
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
@@ -1739,7 +1848,7 @@ class ToolBarComponent {
                 this.shrink(containerWidth, this.childrenWidth);
                 this.stretch(containerWidth, this.childrenWidth);
                 this.displayAnchor();
-                const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
+                const isImmediateResize = (Date.now() - this.overflowButtonClickedTime()) < immediateResizeThreshold;
                 if (this.popupOpen && !isImmediateResize) {
                     const eventArgs = new PreventableEvent();
                     this.close.emit(eventArgs);
@@ -1753,7 +1862,7 @@ class ToolBarComponent {
                 if (this.normalizedOverflow.scrollButtons === 'auto') {
                     const containerWidth = innerWidth(this.element.nativeElement);
                     let scrollButtonsWidth = 0;
-                    if (this.showAutoButtons) {
+                    if (this._showAutoButtons()) {
                         const separatorWidth = this.scrollSeparator.nativeElement.getBoundingClientRect().width + 2 * this.gap;
                         if (this.hasScrollButtons.position === 'split') {
                             scrollButtonsWidth = innerWidth(this.prevScrollButton.nativeElement) + innerWidth(this.nextScrollButton.nativeElement) + 2 * separatorWidth;
@@ -1766,8 +1875,8 @@ class ToolBarComponent {
                         }
                     }
                     const shouldShowButtons = (this.childrenWidth + scrollButtonsWidth) > containerWidth;
-                    if (shouldShowButtons !== this.showAutoButtons) {
-                        this.showAutoButtons = shouldShowButtons;
+                    if (shouldShowButtons !== this._showAutoButtons()) {
+                        this._showAutoButtons.set(shouldShowButtons);
                         this.cdr.detectChanges();
                     }
                     this.scrollService.toggleScrollButtonsState();
@@ -1884,11 +1993,13 @@ class ToolBarComponent {
             }
         });
         this.cancelRenderedToolsSubscription$.next(undefined);
-        this.navigationService.setRenderedTools(this.toolsService.overflowTools);
+        this.navigationService.setRenderedTools(this.toolsService.overflowTools());
         this.navigationService.moveFocusToPopup();
         this.toolsService.overflowToolsChange
             .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
-            .subscribe((rts) => this.navigationService.setRenderedTools(rts));
+            .subscribe((rts) => {
+            this.navigationService.setRenderedTools(rts);
+        });
         this.renderer.setAttribute(this.overflowButton.nativeElement, 'aria-controls', this.popupId);
     }
     /**
@@ -1896,7 +2007,7 @@ class ToolBarComponent {
      */
     onPopupClose() {
         this.cancelRenderedToolsSubscription$.next(undefined);
-        this.navigationService.setRenderedTools(this.toolsService.renderedTools);
+        this.navigationService.setRenderedTools(this.toolsService.renderedTools());
         this.toolsService.renderedToolsChange
             .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
             .subscribe((rts) => this.navigationService.setRenderedTools(rts));
@@ -1921,22 +2032,21 @@ class ToolBarComponent {
         const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
         this.overflowButton && this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
         const isVisible = visibility === 'visible';
-        if (isVisible !== this.showOverflowSeparator) {
-            this.showOverflowSeparator = isVisible;
-            this.cdr.detectChanges();
+        if (isVisible !== this._showOverflowSeparator()) {
+            this._showOverflowSeparator.set(isVisible);
         }
         if (!isVisible) {
             this.destroyPopup();
         }
     }
     get popupWidth() {
-        if (!this.popupSettings || !this.popupSettings.width) {
+        if (!this.popupSettings?.width) {
             return 'auto';
         }
         return isNaN(this.popupSettings.width) ? this.popupSettings.width : `${this.popupSettings.width}px`;
     }
     get popupHeight() {
-        if (!this.popupSettings || !this.popupSettings.height) {
+        if (!this.popupSettings?.height) {
             return;
         }
         return isNaN(this.popupSettings.height) ? this.popupSettings.height : `${this.popupSettings.height}px`;
@@ -1945,21 +2055,21 @@ class ToolBarComponent {
         if (!this.showMenu) {
             return 0;
         }
-        if (!this.cachedOverflowAnchorWidth) {
-            this.cachedOverflowAnchorWidth = this.overflowButton.nativeElement.offsetWidth;
+        if (!this.cachedOverflowAnchorWidth()) {
+            this.cachedOverflowAnchorWidth.set(this.overflowButton.nativeElement.offsetWidth);
         }
-        return this.cachedOverflowAnchorWidth;
+        return this.cachedOverflowAnchorWidth();
     }
     get gap() {
-        if (isPresent(this.cachedGap)) {
-            return this.cachedGap;
+        if (isPresent(this.cachedGap())) {
+            return this.cachedGap();
         }
         const computedGap = getComputedStyle(this.element.nativeElement).gap;
-        this.cachedGap = isPresent(computedGap) ? parseInt(computedGap, 10) : 0;
-        return this.cachedGap;
+        this.cachedGap.set(isPresent(computedGap) ? parseInt(computedGap, 10) : 0);
+        return this.cachedGap();
     }
     get childrenWidth() {
-        const width = this.toolsService.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
+        const width = this.toolsService.renderedTools().reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
         return Math.ceil(width);
     }
     get visibleTools() {
@@ -2005,7 +2115,7 @@ class ToolBarComponent {
         if (!tool) {
             return null;
         }
-        const renderedElement = this.toolsService.renderedTools.find((r) => {
+        const renderedElement = this.toolsService.renderedTools().find((r) => {
             return r.tool === tool;
         });
         if (!isPresent(renderedElement)) {
@@ -2021,8 +2131,8 @@ class ToolBarComponent {
         if (!tool) {
             return null;
         }
-        const renderedElement = this.toolsService.renderedTools.find((r) => r.tool === tool);
-        if (!isPresent(renderedElement)) {
+        const renderedElement = this.toolsService.renderedTools().find((r) => r.tool === tool);
+        if (!renderedElement) {
             return 0;
         }
         tool.overflows = false;
@@ -2054,16 +2164,9 @@ class ToolBarComponent {
             this.popupSubs.unsubscribe();
             this.popupRef.close();
             this.popupRef = null;
-            this._open = false;
+            this._open.set(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);
@@ -2168,7 +2271,7 @@ class ToolBarComponent {
         }
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }, { token: ScrollService }, { token: i0.Injector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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,
@@ -2180,7 +2283,7 @@ class ToolBarComponent {
                 useValue: 'kendo.toolbar'
             },
             provideComponentName('toolbar')
-        ], 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: `
+        ], 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"], 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"
@@ -2378,7 +2481,7 @@ class ToolBarComponent {
         @if (showLicenseWatermark) {
             <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ToolbarScrollableButtonComponent, selector: "[kendoToolbarScrollableButton]", inputs: ["prev", "overflow"], outputs: ["onClick"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ToolbarScrollableButtonComponent, selector: "[kendoToolbarScrollableButton]", inputs: ["prev", "overflow"], outputs: ["onClick"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -2597,9 +2700,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }
     `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, ToolBarRendererComponent, ButtonComponent, NgClass, ResizeSensorComponent, ToolbarScrollableButtonComponent, WatermarkOverlayComponent]
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }, { type: ScrollService }], propDecorators: { overflow: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }, { type: ScrollService }, { type: i0.Injector }, { type: i0.NgZone }], propDecorators: { overflow: [{
                 type: Input
             }], resizable: [{
                 type: Input
@@ -2701,8 +2805,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  */
 class ToolBarButtonComponent extends ToolBarToolComponent {
     element;
-    zone;
+    injector;
     host;
+    cdr;
     // showText and showIcon showIcon should be declared first
     /**
      * Specifies the button text visibility.
@@ -2710,11 +2815,11 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * @default 'always'
      */
     set showText(value) {
-        this._showText = value;
+        this._showText.set(value);
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText();
     }
     /**
      * Specifies the button icon visibility.
@@ -2722,22 +2827,22 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * @default 'always'
      */
     set showIcon(value) {
-        this._showIcon = value;
+        this._showIcon.set(value);
         this.setIconDisplayMode();
     }
     get showIcon() {
-        return this._showIcon;
+        return this._showIcon();
     }
     /**
      * Specifies the text of the Button
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      */
     set text(text) {
-        this._text = text;
+        this._text.set(text);
         this.setTextDisplayMode();
     }
     get text() {
-        return this._text;
+        return this._text();
     }
     /**
      * @hidden
@@ -2748,30 +2853,55 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     /**
      * Specifies custom inline CSS styles for the Button.
      */
-    style;
+    set style(value) {
+        this._style.set(value);
+    }
+    get style() {
+        return this._style();
+    }
     /**
      * Specifies custom CSS class names to be added to the Button.
      */
-    className;
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
     /**
      * Specifies the `title` attribute of the Button.
      *
      * @remarks
      * This property is related to accessibility.
      */
-    title;
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * Disables the Button when set to `true`
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      */
-    disabled;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Provides visual styling to indicate if the Button is active
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#toggle-buttons)).
      * For toggleable buttons, set this to `true`.
      * @default false
      */
-    toggleable = false;
+    set toggleable(value) {
+        this._toggleable.set(value);
+    }
+    get toggleable() {
+        return this._toggleable();
+    }
     /**
      * @hidden
      */
@@ -2794,26 +2924,46 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * Use with the `toggleable` property.
      * @default false
      */
-    selected = false;
+    set selected(value) {
+        this._selected.set(value);
+    }
+    get selected() {
+        return this._selected();
+    }
     /**
      * Specifies the background and border styles of the Button. The default value is set by the Kendo theme.
      */
-    fillMode = undefined;
+    set fillMode(value) {
+        this._fillMode.set(value);
+    }
+    get fillMode() {
+        return this._fillMode();
+    }
     /**
      * Specifies the border radius of the Button. The default value is set by the Kendo theme.
      */
-    rounded = undefined;
+    set rounded(value) {
+        this._rounded.set(value);
+    }
+    get rounded() {
+        return this._rounded();
+    }
     /**
      * Specifies the predefined theme color of the Button. The default value is set by the Kendo theme.
      */
-    themeColor = undefined;
+    set themeColor(value) {
+        this._themeColor.set(value);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * Defines the name for an existing icon in a Kendo UI theme
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#buttons)).
      * The icon is rendered inside the Button by a `span.k-icon` element.
      */
     set icon(icon) {
-        this._icon = icon;
+        this._icon.set(icon);
         this.setIconDisplayMode();
     }
     /**
@@ -2821,7 +2971,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * Allows the usage of custom icons.
      */
     set iconClass(iconClass) {
-        this._iconClass = iconClass;
+        this._iconClass.set(iconClass);
         this.setIconDisplayMode();
     }
     /**
@@ -2829,12 +2979,12 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * 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._icon;
-        const isIconClassSet = this._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._svgIcon = icon;
+        this._svgIcon.set(icon);
         this.setIconDisplayMode();
     }
     /**
@@ -2842,7 +2992,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * The URL can be relative or absolute.
      */
     set imageUrl(imageUrl) {
-        this._imageUrl = imageUrl;
+        this._imageUrl.set(imageUrl);
         this.setIconDisplayMode();
     }
     /**
@@ -2858,20 +3008,18 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * The event argument is the new selected state (Boolean).
      */
     selectedChange = new EventEmitter();
-    toolbarOptions = {
-        text: '',
-        icon: '',
-        iconClass: '',
-        svgIcon: null,
-        imageUrl: '',
-    };
-    overflowOptions = {
-        text: '',
-        icon: '',
-        iconClass: '',
-        svgIcon: null,
-        imageUrl: '',
-    };
+    set toolbarOptions(value) {
+        this._toolbarOptions.set(value);
+    }
+    get toolbarOptions() {
+        return this._toolbarOptions();
+    }
+    set overflowOptions(value) {
+        this._overflowOptions.set(value);
+    }
+    get overflowOptions() {
+        return this._overflowOptions();
+    }
     /**
      * @hidden
      */
@@ -2880,22 +3028,59 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     showBadge = false;
+    /**
+     * @hidden
+     */
+    set location(value) {
+        super.location = value;
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    get location() {
+        return super.location;
+    }
     toolbarButtonElement;
     sectionButtonElement;
     overflowButtonElement;
-    _showText;
-    _showIcon;
-    _text;
-    _icon;
-    _iconClass;
-    _svgIcon;
-    _imageUrl;
+    _icon = signal(null, ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
+    _iconClass = signal(null, ...(ngDevMode ? [{ debugName: "_iconClass" }] : /* istanbul ignore next */ []));
+    _svgIcon = signal(null, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : /* istanbul ignore next */ []));
+    _imageUrl = signal(null, ...(ngDevMode ? [{ debugName: "_imageUrl" }] : /* istanbul ignore next */ []));
+    _showText = signal(null, ...(ngDevMode ? [{ debugName: "_showText" }] : /* istanbul ignore next */ []));
+    _showIcon = signal(null, ...(ngDevMode ? [{ debugName: "_showIcon" }] : /* istanbul ignore next */ []));
+    _text = signal(null, ...(ngDevMode ? [{ debugName: "_text" }] : /* istanbul ignore next */ []));
+    _style = signal(null, ...(ngDevMode ? [{ debugName: "_style" }] : /* istanbul ignore next */ []));
+    _className = signal(null, ...(ngDevMode ? [{ debugName: "_className" }] : /* istanbul ignore next */ []));
+    _title = signal(null, ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _toggleable = signal(false, ...(ngDevMode ? [{ debugName: "_toggleable" }] : /* istanbul ignore next */ []));
+    _selected = signal(false, ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : /* istanbul ignore next */ []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : /* istanbul ignore next */ []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : /* istanbul ignore next */ []));
     propertyChangeSub;
-    constructor(element, zone, host) {
+    _overflowOptions = signal({
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    }, ...(ngDevMode ? [{ debugName: "_overflowOptions" }] : /* istanbul ignore next */ []));
+    _toolbarOptions = signal({
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    }, ...(ngDevMode ? [{ debugName: "_toolbarOptions" }] : /* istanbul ignore next */ []));
+    constructor(element, injector, host, cdr) {
         super();
         this.element = element;
-        this.zone = zone;
+        this.injector = injector;
         this.host = host;
+        this.cdr = cdr;
         this.isBuiltInTool = true;
         this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
             if (change.property === 'showText' || change.property === 'showIcon') {
@@ -2910,17 +3095,6 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.propertyChangeSub.unsubscribe();
         this.propertyChangeSub = null;
     }
-    ngOnChanges(changes) {
-        if (changes['rounded']) {
-            this.rounded = changes['rounded'].currentValue;
-        }
-        if (changes['themeColor']) {
-            this.themeColor = changes['themeColor'].currentValue;
-        }
-        if (changes['showText']) {
-            this.showText = changes['showText'].currentValue;
-        }
-    }
     /**
      * @hidden
      */
@@ -2975,22 +3149,22 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
-        });
+        }, { injector: this.injector });
     }
     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: "21.2.23", 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: "21.2.23", 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: `
+        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: "21.2.23", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: ToolBarComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
           @if (hasBadgeContainer) {
             <kendo-badge-container>
@@ -3162,7 +3336,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
             </button>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
@@ -3344,9 +3518,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         </ng-template>
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonComponent, NgStyle, NgClass, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: ToolBarComponent }], propDecorators: { showText: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }, { type: ToolBarComponent }, { type: i0.ChangeDetectorRef }], propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input
@@ -3421,28 +3596,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
 class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     localization;
     host;
+    cdr;
     /**
      * When `true`, disables the whole group of buttons.
      * If you set the `disabled` property of the group, it overrides the `disabled` property of individual buttons.
      */
-    disabled;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * @hidden
      *
      * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
      * @default undefined
      */
-    fillMode = undefined;
+    set fillMode(value) {
+        this._fillMode.set(value);
+    }
+    get fillMode() {
+        return this._fillMode();
+    }
     /**
      * Sets the selection mode of the ButtonGroup.
      * @default 'multiple'
      */
-    selection = 'multiple';
+    set selection(value) {
+        this._selection.set(value);
+    }
+    get selection() {
+        return this._selection();
+    }
     /**
      * Sets the width of the ButtonGroup.
      * When you set the width of the ButtonGroup, the buttons have the same width and resize to fill the group wrapper.
      */
-    width;
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
     /**
      * @hidden
      */
@@ -3455,6 +3651,19 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     sectionButtonGroup;
     overflowListItems;
     buttonComponents;
+    /**
+     * @hidden
+     */
+    set location(value) {
+        super.location = value;
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    get location() {
+        return super.location;
+    }
     get buttonElements() {
         if (this.overflows && this.location === 'overflow') {
             return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))].map(el => el.nativeElement);
@@ -3470,13 +3679,18 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 .map(b => b.element);
         }
     }
-    focusedIndex = -1;
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : /* istanbul ignore next */ []));
+    _selection = signal('multiple', ...(ngDevMode ? [{ debugName: "_selection" }] : /* istanbul ignore next */ []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
     getNextKey;
     getPrevKey;
-    constructor(localization, host) {
+    constructor(localization, host, cdr) {
         super();
         this.localization = localization;
         this.host = host;
+        this.cdr = cdr;
         this.getNextKey = getNextKey(this.localization.rtl);
         this.getPrevKey = getPrevKey(this.localization.rtl);
         this.isBuiltInTool = true;
@@ -3486,7 +3700,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      */
     onFocus() {
         // triggered on tabin
-        this.focusedIndex = 0;
+        this.focusedIndex.set(0);
     }
     /**
      * @hidden
@@ -3522,8 +3736,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      */
     onButtonClick(ev) {
-        this.focusedIndex = this.buttonElements.findIndex(be => be === ev.target || be.contains(ev.target));
-        this.focusButton(this.focusedIndex, ev);
+        this.focusedIndex.set(this.buttonElements.findIndex(be => be === ev.target || be.contains(ev.target)));
+        this.focusButton(this.focusedIndex(), ev);
     }
     /**
      * @hidden
@@ -3537,8 +3751,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     focus(ev = {}) {
         const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
         const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
-        this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
-        this.focusButton(this.focusedIndex, ev);
+        this.focusedIndex.set(getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev));
+        this.focusButton(this.focusedIndex(), ev);
     }
     /**
      * @hidden
@@ -3547,10 +3761,10 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         const nextKey = this.getNextKey((this.overflows && this.location === 'overflow'));
         const prevKey = this.getPrevKey((this.overflows && this.location === 'overflow'));
         const peekAtIndex = makePeeker(this.buttonElements);
-        const isUnmodified = areEqual(this.focusedIndex);
-        this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
-        this.focusButton(this.focusedIndex, ev);
-        return !isUnmodified(this.focusedIndex);
+        const isUnmodified = areEqual(this.focusedIndex());
+        this.focusedIndex.set(seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex(), ev));
+        this.focusButton(this.focusedIndex(), ev);
+        return !isUnmodified(this.focusedIndex());
     }
     /**
      * @hidden
@@ -3586,7 +3800,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
             this.buttonElements[index]?.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }, { token: ToolBarComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
           <kendo-buttongroup
@@ -3697,7 +3911,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
             }
           </kendo-buttongroup>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
@@ -3817,9 +4031,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         </ng-template>
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonGroupComponent, ButtonComponent, NgStyle, NgClass, IconWrapperComponent]
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: ToolBarComponent }], propDecorators: { disabled: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: ToolBarComponent }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
             }], fillMode: [{
                 type: Input
@@ -3858,14 +4073,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  *
  */
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
-    zone;
-    renderer;
     host;
+    cdr;
     /**
      * Shows the default arrow icon or lets you provide a custom one.
      * @default false
      */
-    arrowIcon = false;
+    set arrowIcon(value) {
+        this._arrowIcon.set(value);
+    }
+    get arrowIcon() {
+        return this._arrowIcon();
+    }
     /**
      * Sets the `title` attribute of the underlying button element.
      * @default ''
@@ -3873,46 +4092,51 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    title = '';
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     // showText and showIcon showIcon should be declared first
     /**
      * Controls the button text visibility.
      * @default 'always'
      */
     set showText(value) {
-        this._showText = value;
+        this._showText.set(value);
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText();
     }
     /**
      * Controls the button icon visibility.
      * @default 'always'
      */
     set showIcon(value) {
-        this._showIcon = value;
+        this._showIcon.set(value);
         this.setIconDisplayMode();
     }
     get showIcon() {
-        return this._showIcon;
+        return this._showIcon();
     }
     /**
      * Sets the text of the DropDownButton
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#drop-down-buttons)).
      */
     set text(text) {
-        this._text = text;
+        this._text.set(text);
         this.setTextDisplayMode();
     }
     get text() {
-        return this._text;
+        return this._text();
     }
     /**
      * Sets the icon rendered next to the button text.
      */
     set icon(icon) {
-        this._icon = icon;
+        this._icon.set(icon);
         this.setIconDisplayMode();
     }
     /**
@@ -3920,29 +4144,29 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * 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._icon;
-        const isIconClassSet = this._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._svgIcon = icon;
+        this._svgIcon.set(icon);
         this.setIconDisplayMode();
     }
     /**
      * Sets a custom CSS class icon rendered next to the button text.
      */
     set iconClass(iconClass) {
-        this._iconClass = iconClass;
+        this._iconClass.set(iconClass);
         this.setIconDisplayMode();
     }
     /**
      * Sets a URL for the image displayed next to the button text.
      */
     set imageUrl(imageUrl) {
-        this._imageUrl = imageUrl;
+        this._imageUrl.set(imageUrl);
         this.setIconDisplayMode();
     }
     /**
@@ -3950,10 +4174,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * Accepts a `PopupSettings` object that allows you to customize the popup behavior and appearance.
      */
     set popupSettings(settings) {
-        this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
+        this._popupSettings.set(Object.assign({ animate: true, popupClass: '' }, settings));
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * @hidden
@@ -3973,27 +4197,52 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * Sets the fill mode for the button.
      * The fill mode represents the background and border styles. The default value is set by the Kendo theme.
      */
-    fillMode = undefined;
+    set fillMode(value) {
+        this._fillMode.set(value);
+    }
+    get fillMode() {
+        return this._fillMode();
+    }
     /**
      * Sets the predefined theme color for the button.
      * The theme color applies to the background, border, and text
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/buttons/api/dropdownbuttoncomponent#themecolor)). The default value is set by the Kendo theme.
      */
-    themeColor = undefined;
+    set themeColor(value) {
+        this._themeColor.set(value);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * Sets the CSS classes for the main button.
      * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
-    buttonClass;
+    set buttonClass(value) {
+        this._buttonClass.set(value);
+    }
+    get buttonClass() {
+        return this._buttonClass();
+    }
     /**
      * Sets the data item field that repesents the item text.
      * If the data contains only primitive values, do not set this property.
      */
-    textField;
+    set textField(value) {
+        this._textField.set(value);
+    }
+    get textField() {
+        return this._textField();
+    }
     /**
      * When `true`, disables the DropDownButton.
      */
-    disabled;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Sets the data of the DropDownButton
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#drop-down-buttons)).
@@ -4001,13 +4250,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
      * > Provide the data as an array-like list.
      */
     set data(data) {
-        this._data = data || [];
+        this._data.set(data || []);
     }
     get data() {
-        if (!this._data) {
-            this.data = [];
-        }
-        return this._data;
+        return this._data();
     }
     /**
      * Fires each time the user clicks a DropDownButton item.
@@ -4045,24 +4291,43 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
-    _data;
-    _popupSettings = { animate: true, popupClass: '' };
-    focusedIndex = -1;
-    _showText;
-    _showIcon;
-    _text;
-    _icon;
-    _iconClass;
-    _svgIcon;
-    _imageUrl;
+    /**
+     * @hidden
+     */
+    set location(value) {
+        super.location = value;
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    get location() {
+        return super.location;
+    }
+    _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
+    _popupSettings = signal({ animate: true, popupClass: '' }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    _showText = signal(null, ...(ngDevMode ? [{ debugName: "_showText" }] : /* istanbul ignore next */ []));
+    _showIcon = signal(null, ...(ngDevMode ? [{ debugName: "_showIcon" }] : /* istanbul ignore next */ []));
+    _text = signal(null, ...(ngDevMode ? [{ debugName: "_text" }] : /* istanbul ignore next */ []));
+    _arrowIcon = signal(false, ...(ngDevMode ? [{ debugName: "_arrowIcon" }] : /* istanbul ignore next */ []));
+    _title = signal('', ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : /* istanbul ignore next */ []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : /* istanbul ignore next */ []));
+    _buttonClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_buttonClass" }] : /* istanbul ignore next */ []));
+    _textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : /* istanbul ignore next */ []));
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _icon = signal(null, ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
+    _iconClass = signal(null, ...(ngDevMode ? [{ debugName: "_iconClass" }] : /* istanbul ignore next */ []));
+    _svgIcon = signal(null, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : /* istanbul ignore next */ []));
+    _imageUrl = signal(null, ...(ngDevMode ? [{ debugName: "_imageUrl" }] : /* istanbul ignore next */ []));
     propertyChangeSub;
     getNextKey;
     getPrevKey;
-    constructor(zone, renderer, host) {
+    constructor(host, cdr) {
         super();
-        this.zone = zone;
-        this.renderer = renderer;
         this.host = host;
+        this.cdr = cdr;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
@@ -4081,21 +4346,16 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             this.propertyChangeSub = null;
         }
     }
-    ngAfterViewInit() {
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            const dropdownButton = this[`${this.location}DropDownButton`];
-            if (dropdownButton?.button) {
-                this.renderer.addClass(dropdownButton.button.nativeElement, 'k-toolbar-menu-button');
-            }
-        });
+    get toolbarMenuButtonClass() {
+        return this.buttonClass ? `k-toolbar-menu-button ${this.buttonClass}` : 'k-toolbar-menu-button';
     }
     /**
      * @hidden
      */
     onButtonListClick(ev) {
-        this.focusedIndex = this.overflowListItems
+        this.focusedIndex.set(this.overflowListItems
             .toArray()
-            .findIndex(b => b.nativeElement.contains(ev.target));
+            .findIndex(b => b.nativeElement.contains(ev.target)));
     }
     /**
      * @hidden
@@ -4119,8 +4379,8 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             }
         }
         else if (this.overflowButtons.length > 0) {
-            this.focusedIndex = getIndexOfFocused(this.getPrevKey(), this.getNextKey(), this.overflowButtons.map(ob => ob.nativeElement))(ev);
-            this.focusButton(this.focusedIndex, ev);
+            this.focusedIndex.set(getIndexOfFocused(this.getPrevKey(), this.getNextKey(), this.overflowButtons.map(ob => ob.nativeElement))(ev));
+            this.focusButton(this.focusedIndex(), ev);
         }
     }
     /**
@@ -4133,10 +4393,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
         if (this.overflows && this.location !== 'section') {
             const peekAtIndex = makePeeker(this.overflowButtons);
-            const isUnmodified = areEqual(this.focusedIndex);
-            this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
-            this.focusButton(this.focusedIndex, ev);
-            return !isUnmodified(this.focusedIndex);
+            const isUnmodified = areEqual(this.focusedIndex());
+            this.focusedIndex.set(seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex(), ev));
+            this.focusButton(this.focusedIndex(), ev);
+            return !isUnmodified(this.focusedIndex());
         }
     }
     /**
@@ -4168,16 +4428,16 @@ class ToolBarDropDownButtonComponent 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: "21.2.23", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+        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: "21.2.23", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: ToolBarComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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>
           <kendo-dropdownbutton #toolbarDropDownButton
@@ -4186,7 +4446,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             [svgIcon]="toolbarOptions.svgIcon"
             [imageUrl]="toolbarOptions.imageUrl"
             [arrowIcon]="arrowIcon"
-            [buttonClass]="buttonClass"
+            [buttonClass]="toolbarMenuButtonClass"
             [disabled]="disabled"
             [size]="size"
             [tabIndex]="-1"
@@ -4258,7 +4518,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             [svgIcon]="toolbarOptions.svgIcon"
             [imageUrl]="toolbarOptions.imageUrl"
             [arrowIcon]="arrowIcon"
-            [buttonClass]="buttonClass"
+            [buttonClass]="toolbarMenuButtonClass"
             [disabled]="disabled"
             [size]="size"
             [tabIndex]="-1"
@@ -4275,7 +4535,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             {{ toolbarOptions.text }}
           </kendo-dropdownbutton>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
@@ -4291,7 +4551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             [svgIcon]="toolbarOptions.svgIcon"
             [imageUrl]="toolbarOptions.imageUrl"
             [arrowIcon]="arrowIcon"
-            [buttonClass]="buttonClass"
+            [buttonClass]="toolbarMenuButtonClass"
             [disabled]="disabled"
             [size]="size"
             [tabIndex]="-1"
@@ -4363,7 +4623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             [svgIcon]="toolbarOptions.svgIcon"
             [imageUrl]="toolbarOptions.imageUrl"
             [arrowIcon]="arrowIcon"
-            [buttonClass]="buttonClass"
+            [buttonClass]="toolbarMenuButtonClass"
             [disabled]="disabled"
             [size]="size"
             [tabIndex]="-1"
@@ -4382,9 +4642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         </ng-template>
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DropDownButtonComponent, NgClass, IconWrapperComponent]
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: ToolBarComponent }], propDecorators: { arrowIcon: [{
+        }], ctorParameters: () => [{ type: ToolBarComponent }, { type: i0.ChangeDetectorRef }], propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -4455,45 +4716,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  */
 class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     host;
+    cdr;
     // showText and showIcon showIcon should be declared first
     /**
      * Controls the button text visibility.
      * @default 'always'
      */
     set showText(value) {
-        this._showText = value;
+        this._showText.set(value);
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText();
     }
     /**
      * Controls the button icon visibility.
      * @default 'always'
      */
     set showIcon(value) {
-        this._showIcon = value;
+        this._showIcon.set(value);
         this.setIconDisplayMode();
     }
     get showIcon() {
-        return this._showIcon;
+        return this._showIcon();
     }
     /**
      * Sets the text of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      */
     set text(text) {
-        this._text = text;
+        this._text.set(text);
         this.setTextDisplayMode();
     }
     get text() {
-        return this._text;
+        return this._text();
     }
     /**
      * Sets the icon rendered next to the button text
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      */
     set icon(icon) {
-        this._icon = icon;
+        this._icon.set(icon);
         this.setIconDisplayMode();
     }
     /**
@@ -4501,59 +4763,74 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * 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._icon;
-        const isIconClassSet = this._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._svgIcon = icon;
+        this._svgIcon.set(icon);
         this.setIconDisplayMode();
     }
     /**
      * Sets a custom CSS class icon rendered next to the button text.
      */
     set iconClass(iconClass) {
-        this._iconClass = iconClass;
+        this._iconClass.set(iconClass);
         this.setIconDisplayMode();
     }
     /**
      * Sets a URL for the image displayed next to the button text.
      */
     set imageUrl(imageUrl) {
-        this._imageUrl = imageUrl;
+        this._imageUrl.set(imageUrl);
         this.setIconDisplayMode();
     }
     /**
      * When `true`, disables a SplitButton item.
      */
-    disabled;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Configures the popup of the SplitButton.
      * Accepts a `PopupSettings` object that allows you to customize the popup behavior and appearance.
 
      */
     set popupSettings(value) {
-        this._popupSettings = value;
+        this._popupSettings.set(value);
     }
     get popupSettings() {
-        if (!this._popupSettings) {
-            this._popupSettings = { animate: true, popupClass: '' };
+        if (!this._popupSettings()) {
+            this._popupSettings.set({ animate: true, popupClass: '' });
         }
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Sets the fill mode for the button.
      * The fill mode represents the background and border styles. The default value is set by the Kendo theme.
      */
-    fillMode = undefined;
+    set fillMode(value) {
+        this._fillMode.set(value);
+    }
+    get fillMode() {
+        return this._fillMode();
+    }
     /**
      * Sets the predefined theme color for the button.
      * The theme color applies to the background, border, and text. The default value is set by the Kendo theme.
      */
-    themeColor = undefined;
+    set themeColor(value) {
+        this._themeColor.set(value);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * @hidden
      */
@@ -4566,38 +4843,63 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * Sets the CSS classes for the main button.
      * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
-    buttonClass;
+    set buttonClass(value) {
+        this._buttonClass.set(value);
+    }
+    get buttonClass() {
+        return this._buttonClass();
+    }
     /**
      * Sets the CSS classes for the arrow button that opens the popup.
      * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
-    arrowButtonClass;
+    set arrowButtonClass(value) {
+        this._arrowButtonClass.set(value);
+    }
+    get arrowButtonClass() {
+        return this._arrowButtonClass();
+    }
     /**
      * Sets the name of the [font icon](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list) for the arrow button.
      */
-    arrowButtonIcon = 'chevron-down';
+    set arrowButtonIcon(value) {
+        this._arrowButtonIcon.set(value);
+    }
+    get arrowButtonIcon() {
+        return this._arrowButtonIcon();
+    }
     /**
      * Sets the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) for the arrow button.
      */
-    arrowButtonSvgIcon = chevronDownIcon;
+    set arrowButtonSvgIcon(value) {
+        this._arrowButtonSvgIcon.set(value);
+    }
+    get arrowButtonSvgIcon() {
+        return this._arrowButtonSvgIcon();
+    }
     /**
      * Sets the text field for the button-list popup.
      * @default 'text'
      */
-    textField = 'text';
+    set textField(value) {
+        this._textField.set(value);
+    }
+    get textField() {
+        return this._textField();
+    }
     /**
      * Sets the data of the SplitButton ([see example](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types#split-buttons)).
      *
      * > Provide the data as an array-like list.
      */
     set data(data) {
-        this._data = data || [];
+        this._data.set(data || []);
     }
     get data() {
-        if (!this._data) {
-            this.data = [];
+        if (!this._data()) {
+            this._data.set([]);
         }
-        return this._data;
+        return this._data();
     }
     /**
      * Fires when the user clicks the main button.
@@ -4644,16 +4946,24 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     get overflowButtons() {
         return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
-    _data;
-    _popupSettings = { animate: true, popupClass: '' };
-    focusedIndex = -1;
-    _showText;
-    _showIcon;
-    _text;
-    _icon;
-    _iconClass;
-    _svgIcon;
-    _imageUrl;
+    _icon = signal(null, ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
+    _iconClass = signal(null, ...(ngDevMode ? [{ debugName: "_iconClass" }] : /* istanbul ignore next */ []));
+    _svgIcon = signal(null, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : /* istanbul ignore next */ []));
+    _imageUrl = signal(null, ...(ngDevMode ? [{ debugName: "_imageUrl" }] : /* istanbul ignore next */ []));
+    _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
+    _popupSettings = signal({ animate: true, popupClass: '' }, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    _showText = signal(null, ...(ngDevMode ? [{ debugName: "_showText" }] : /* istanbul ignore next */ []));
+    _showIcon = signal(null, ...(ngDevMode ? [{ debugName: "_showIcon" }] : /* istanbul ignore next */ []));
+    _text = signal(null, ...(ngDevMode ? [{ debugName: "_text" }] : /* istanbul ignore next */ []));
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : /* istanbul ignore next */ []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : /* istanbul ignore next */ []));
+    _buttonClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_buttonClass" }] : /* istanbul ignore next */ []));
+    _arrowButtonClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_arrowButtonClass" }] : /* istanbul ignore next */ []));
+    _arrowButtonIcon = signal('chevron-down', ...(ngDevMode ? [{ debugName: "_arrowButtonIcon" }] : /* istanbul ignore next */ []));
+    _arrowButtonSvgIcon = signal(chevronDownIcon, ...(ngDevMode ? [{ debugName: "_arrowButtonSvgIcon" }] : /* istanbul ignore next */ []));
+    _textField = signal('text', ...(ngDevMode ? [{ debugName: "_textField" }] : /* istanbul ignore next */ []));
     propertyChangeSub;
     getNextKey;
     getPrevKey;
@@ -4661,9 +4971,23 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     sectionSplitButton;
     overflowMainButton;
     overflowListItems;
-    constructor(host) {
+    /**
+     * @hidden
+     */
+    set location(value) {
+        super.location = value;
+        this.cdr.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    get location() {
+        return super.location;
+    }
+    constructor(host, cdr) {
         super();
         this.host = host;
+        this.cdr = cdr;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
@@ -4677,14 +5001,14 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     onButtonListClick(ev) {
-        this.focusedIndex = this.overflowButtons.findIndex(b => b.nativeElement.contains(ev.target));
+        this.focusedIndex.set(this.overflowButtons.findIndex(b => b.nativeElement.contains(ev.target)));
     }
     /**
      * @hidden
      */
     onMainButtonClick(ev) {
         this.buttonClick.emit(ev);
-        this.focusedIndex = 0;
+        this.focusedIndex.set(0);
     }
     /**
      * @hidden
@@ -4704,12 +5028,12 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     focus(ev = {}) {
         if (!this.overflows || this.location === 'section') {
             if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-                this[`${this.location}SplitButton`].focus();
+                this[`${this.location}SplitButton`]?.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
-            this.focusedIndex = getIndexOfFocused(this.getPrevKey(), this.getNextKey(), this.overflowButtons.map(ob => ob.nativeElement))(ev);
-            this.focusButton(this.focusedIndex, ev);
+            this.focusedIndex.set(getIndexOfFocused(this.getPrevKey(), this.getNextKey(), this.overflowButtons.map(ob => ob.nativeElement))(ev));
+            this.focusButton(this.focusedIndex(), ev);
         }
     }
     /**
@@ -4722,10 +5046,10 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         if (this.overflows) {
             const peekAtIndex = makePeeker(this.overflowButtons);
-            const isUnmodified = areEqual(this.focusedIndex);
-            this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
-            this.focusButton(this.focusedIndex, ev);
-            return !isUnmodified(this.focusedIndex);
+            const isUnmodified = areEqual(this.focusedIndex());
+            this.focusedIndex.set(seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex(), ev));
+            this.focusButton(this.focusedIndex(), ev);
+            return !isUnmodified(this.focusedIndex());
         }
     }
     /**
@@ -4757,16 +5081,16 @@ class ToolBarSplitButtonComponent 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: "21.2.23", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [{ token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+        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: "21.2.23", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [{ token: ToolBarComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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>
           <kendo-splitbutton
@@ -4871,7 +5195,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             (itemClick)="itemClick.emit($event)"
           ></kendo-splitbutton>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
@@ -4985,9 +5309,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         </ng-template>
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [SplitButtonComponent, NgClass, IconWrapperComponent]
                 }]
-        }], ctorParameters: () => [{ type: ToolBarComponent }], propDecorators: { showText: [{
+        }], ctorParameters: () => [{ type: ToolBarComponent }, { type: i0.ChangeDetectorRef }], propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input
@@ -5105,7 +5430,7 @@ class ToolBarSeparatorComponent extends ToolBarToolComponent {
                 <div class="k-separator k-separator-horizontal"></div>
             </div>
         </ng-template>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
             type: Component,
@@ -5128,7 +5453,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             </div>
         </ng-template>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [], propDecorators: { separator: [{
                 type: ViewChild,
@@ -5188,7 +5514,7 @@ class ToolBarSpacerComponent extends ToolBarToolComponent {
         <ng-template #toolbarTemplate>
             <div class="k-spacer"></div>
         </ng-template>
-    `, isInline: true });
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
             type: Component,
@@ -5201,7 +5527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             <div class="k-spacer"></div>
         </ng-template>
     `,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [] });
 
@@ -5647,7 +5974,9 @@ class FloatingToolBarComponent {
      */
     propertyChange = new EventEmitter();
     dragHandleIcon = handleDragDotsIcon;
-    direction;
+    get direction() {
+        return this._direction();
+    }
     moveMode = computed(() => this.keyboardMoveOrigin() !== null, ...(ngDevMode ? [{ debugName: "moveMode" }] : /* istanbul ignore next */ []));
     popupClass = computed(() => {
         const size = SIZES[this._size()];
@@ -5671,6 +6000,7 @@ class FloatingToolBarComponent {
     get dragHandleTitle() {
         return this.localization.get('dragHandleTitle');
     }
+    _direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : /* istanbul ignore next */ []));
     _anchor = signal(undefined, ...(ngDevMode ? [{ debugName: "_anchor" }] : /* istanbul ignore next */ []));
     _position = signal('top', ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
     _containerAlign = signal({ horizontal: 'center', vertical: 'top' }, ...(ngDevMode ? [{ debugName: "_containerAlign" }] : /* istanbul ignore next */ []));
@@ -5698,14 +6028,14 @@ class FloatingToolBarComponent {
         this.localization = localization;
         this.changeDetectorRef = changeDetectorRef;
         validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this._direction.set(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._direction.set(rtl ? 'rtl' : 'ltr');
             this.changeDetectorRef.markForCheck();
         }));
     }
@@ -5736,7 +6066,7 @@ class FloatingToolBarComponent {
      * Moves the focus into the FloatingToolBar at its current roving tabindex position.
      */
     focus() {
-        this.focusFirstTool();
+        this.toolbarComponent?.element.nativeElement.focus();
     }
     /**
      * Sets the FloatingToolBar position using the provided `top` and `left` coordinates.