@progress/kendo-angular-toolbar 19.0.0-develop.2 → 19.0.0-develop.20

package/display-mode.d.ts

@@ -3,8 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * The position of the text inside the Toolbar buttons.
+ * Specifies the visibility of the toolbar tool text or icon.
  *
- * @default 'both'
+ * The possible values are:
+ * - `always`—The text or icon is always visible, regardless of the current overflow mode.
+ * - `toolbar`—The text or icon is displayed in the main ToolBar and in the overflow element when `section` overflow mode is used.
+ * - `menu`—The text or icon is displayed only in the overflow popup when `menu` overflow mode is used.
+ * - `never`—The text or icon is never rendered.
+ *
+ * @default 'always'
  */
-export type DisplayMode = 'both' | 'toolbar' | 'overflow';
+export type DisplayMode = 'always' | 'toolbar' | 'menu' | 'never';

package/esm2022/package-metadata.mjs

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

package/esm2022/renderer.component.mjs

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Input, Renderer2 as Renderer, Output, EventEmitter, Directive, ViewContainerRef } from '@angular/core';
+import { isPresent } from '@progress/kendo-angular-common';
 import { ToolBarToolComponent } from './tools/toolbar-tool.component';
 import { RefreshService } from './refresh.service';
 import { RendererService } from './renderer.service';
@@ -59,24 +60,38 @@ export class ToolBarRendererComponent {
         if (this.resizable) {
             if (this.location === 'toolbar') {
                 this.template = this.tool.toolbarTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+                this.hideTool();
             }
             else if (this.location === 'section') {
                 this.template = this.tool.toolbarTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+                if (this.tool.isHidden) {
+                    this.hideTool();
+                }
+                else {
+                    this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+                    this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+                }
             }
             else {
                 this.template = this.tool.popupTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+                if (this.tool.isHidden) {
+                    this.hideTool();
+                }
+                else {
+                    this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+                }
             }
         }
         else {
             this.tool.overflows = false;
             this.template = this.tool.toolbarTemplate;
-            this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
-            this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+            if (this.tool.isHidden) {
+                this.hideTool();
+            }
+            else {
+                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+                this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+            }
         }
     }
     ngOnDestroy() {
@@ -103,7 +118,13 @@ export class ToolBarRendererComponent {
     }
     refresh() {
         this.tool.location = this.location;
-        if (this.resizable && this.internalComponentRef) {
+        if (!isPresent(this.internalComponentRef)) {
+            return;
+        }
+        if (this.tool.isHidden) {
+            this.hideTool();
+        }
+        else if (this.resizable) {
             if (this.location === 'toolbar') {
                 this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
                 this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.toolbarDisplay);
@@ -111,8 +132,12 @@ export class ToolBarRendererComponent {
             else {
                 this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.overflowDisplay);
             }
-            this.updateTools();
         }
+        else {
+            this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+            this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+        }
+        this.updateTools();
     }
     setAttribute(element, attr, value) {
         this.renderer.setAttribute(element, attr, value);
@@ -138,6 +163,10 @@ export class ToolBarRendererComponent {
             }
         }
     }
+    hideTool() {
+        this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
+        this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }, { token: i3.ToolbarToolsService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
 }

package/esm2022/toolbar.component.mjs

@@ -178,6 +178,34 @@ export class ToolBarComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Specifies the icons visibility for all tools in the ToolBar.
+     * This can be overridden by the `showIcon` property of each tool.
+     */
+    showIcon = 'always';
+    /**
+     * @hidden
+     */
+    get normalizedShowIcon() {
+        if (typeof this.showIcon === 'boolean') {
+            return this.showIcon ? 'always' : 'never';
+        }
+        return this.showIcon;
+    }
+    /**
+     * Specifies the text visibility for all tools in the ToolBar.
+     * This can be overridden by the `showText` property of each tool.
+     */
+    showText = 'always';
+    /**
+     * @hidden
+     */
+    get normalizedShowText() {
+        if (typeof this.showText === 'boolean') {
+            return this.showText ? 'always' : 'never';
+        }
+        return this.showText;
+    }
     /**
      * Fires when the overflow popup of the ToolBar is opened.
      */
@@ -789,10 +817,10 @@ export class ToolBarComponent {
         if (containerWidth > childrenWidth) {
             for (let i = this.overflowTools.length - 1; i >= 0; i--) {
                 width = this.showFirstHiddenTool(containerWidth, childrenWidth);
-                if (width) {
+                if (width > 0) {
                     childrenWidth += width + this.gap;
                 }
-                else {
+                else if (width === 0) {
                     break;
                 }
             }
@@ -827,7 +855,7 @@ export class ToolBarComponent {
             tool.overflows = true;
         }
         this.refreshService.refresh(tool);
-        return renderedElement.width; // returns 0 if `overflows` is true
+        return tool.isHidden ? -1 : renderedElement.width; // returns 0 if `overflows` is true and -1 if the tool is hidden
     }
     setPopupContentDimensions(isSection) {
         const popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
@@ -954,7 +982,7 @@ export class ToolBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }, { token: i6.ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex", showIcon: "showIcon", showText: "showText" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
             RefreshService,
             NavigationService,
             LocalizationService,
@@ -1397,6 +1425,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], tabIndex: [{
                 type: Input,
                 args: ['tabIndex']
+            }], showIcon: [{
+                type: Input
+            }], showText: [{
+                type: Input
             }], open: [{
                 type: Output
             }], close: [{

package/esm2022/tools/toolbar-button.component.mjs

@@ -10,28 +10,37 @@ import { take } from 'rxjs/operators';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { BadgeComponent } from '@progress/kendo-angular-indicators';
 import { NgStyle, NgClass, NgIf } from '@angular/common';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
+import * as i1 from "../toolbar.component";
 /**
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
  */
 export class ToolBarButtonComponent extends ToolBarToolComponent {
     element;
     zone;
+    host;
     // showText and showIcon showIcon should be declared first
     /**
-     * Specifies where button text should be displayed
+     * Specifies the button text visibility.
      */
     set showText(value) {
         this._showText = value;
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText || this.host.normalizedShowText;
     }
     /**
-     * Specifies where button icon should be displayed
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        this._showIcon = value;
+        this.setTextDisplayMode();
+    }
+    get showIcon() {
+        return this._showIcon || this.host.normalizedShowIcon;
+    }
     /**
      * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
      */
@@ -192,12 +201,14 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
     toolbarButtonElement;
     sectionButtonElement;
     overflowButtonElement;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
-    constructor(element, zone) {
+    constructor(element, zone, host) {
         super();
         this.element = element;
         this.zone = zone;
+        this.host = host;
         this.isBuiltInTool = true;
     }
     ngOnInit() {
@@ -249,16 +260,19 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selected = state;
         this.selectedChange.emit(state);
     }
+    /**
+     * @hidden
+     */
     getButton() {
         return this[`${this.location}ButtonElement`]?.nativeElement;
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
         this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+            this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", 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>
             <button
@@ -435,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.ToolBarComponent }]; }, propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input

package/esm2022/tools/toolbar-dropdownbutton.component.mjs

@@ -9,13 +9,16 @@ import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNext
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgClass, NgIf, NgFor } from '@angular/common';
 import { take } from 'rxjs/operators';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
+import * as i1 from "../toolbar.component";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons).
  */
 export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     zone;
     renderer;
+    host;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
      * @default false
@@ -28,19 +31,24 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     title = '';
     // showText and showIcon showIcon should be declared first
     /**
-     * Defines the location of the button text that will be displayed.
+     * Specifies the button text visibility.
      */
     set showText(value) {
         this._showText = value;
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText || this.host.normalizedShowText;
     }
     /**
-     * Defines the location of the button icon that will be displayed.
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        this._showIcon = value;
+    }
+    get showIcon() {
+        return this._showIcon || this.host.normalizedShowIcon;
+    }
     /**
      * Sets the text of the DropDownButton
      * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons)).
@@ -215,14 +223,16 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _data;
     _popupSettings = { animate: true, popupClass: '' };
     focusedIndex = -1;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
     getNextKey;
     getPrevKey;
-    constructor(zone, renderer) {
+    constructor(zone, renderer, host) {
         super();
         this.zone = zone;
         this.renderer = renderer;
+        this.host = host;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
@@ -232,9 +242,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
     ngAfterViewInit() {
         this.zone.onStable.pipe(take(1)).subscribe(() => {
-            const dropDownButton = this[`${this.location}DropDownButton`];
-            if (dropDownButton) {
-                this.renderer.addClass(dropDownButton.button.nativeElement, 'k-toolbar-menu-button');
+            const dropdownButton = this[`${this.location}DropDownButton`];
+            if (dropdownButton?.button) {
+                this.renderer.addClass(dropdownButton.button.nativeElement, 'k-toolbar-menu-button');
             }
         });
     }
@@ -288,7 +298,6 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -307,10 +316,10 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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
@@ -501,7 +510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ToolBarComponent }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input

package/esm2022/tools/toolbar-splitbutton.component.mjs

@@ -9,26 +9,46 @@ import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNext
 import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgClass, NgIf, NgFor } from '@angular/common';
+import { isPresent } from '@progress/kendo-angular-common';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
+import * as i1 from "../toolbar.component";
 /**
  * Represents the [Kendo UI ToolBar SplitButton for Angular](slug:controltypes_toolbar#toc-split-buttons).
  */
 export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
+    host;
     // showText and showIcon showIcon should be declared first
     /**
-     * Specifies where button text should be displayed
+     * Specifies the button text visibility.
      */
     set showText(value) {
-        this._showText = value;
+        if (!isPresent(value)) {
+            this._showText = this.host.normalizedShowText;
+        }
+        else {
+            this._showText = value;
+        }
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText || this.host.normalizedShowText;
     }
     /**
-     * Specifies where button icon should be displayed
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        if (!isPresent(value)) {
+            this._showIcon = this.host.normalizedShowIcon;
+        }
+        else {
+            this._showIcon = value;
+        }
+        this.setTextDisplayMode();
+    }
+    get showIcon() {
+        return this._showIcon || this.host.normalizedShowIcon;
+    }
     /**
      * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
      */
@@ -215,7 +235,8 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     _data;
     _popupSettings = { animate: true, popupClass: '' };
     focusedIndex = -1;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
     getNextKey;
     getPrevKey;
@@ -223,8 +244,9 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     sectionSplitButton;
     overflowMainButton;
     overflowListItems;
-    constructor() {
+    constructor(host) {
         super();
+        this.host = host;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
@@ -284,7 +306,6 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -303,10 +324,10 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [{ token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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
@@ -511,7 +532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [SplitButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return [{ type: i1.ToolBarComponent }]; }, propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input

package/esm2022/tools/toolbar-tool.component.mjs

@@ -17,6 +17,10 @@ export class ToolBarToolComponent {
     visibility;
     element;
     isBuiltInTool = false;
+    /**
+     * @hidden
+     */
+    isHidden = false;
     /**
      * @hidden
      */

package/esm2022/util.mjs

@@ -179,8 +179,10 @@ export const getValueForLocation = (property, displayMode, overflows) => {
     switch (displayMode) {
         case 'toolbar':
             return overflows ? undefined : property;
-        case 'overflow':
+        case 'menu':
             return overflows ? property : undefined;
+        case 'never':
+            return;
         default:
             return property;
     }

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

@@ -6,7 +6,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, inject, ElementRef, Directive, ViewChild, Input, Output, forwardRef, Component, HostBinding, ViewContainerRef, ContentChildren, HostListener, isDevMode, ViewChildren, NgModule } from '@angular/core';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { Keys, isDocumentAvailable, guid, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { Keys, isPresent as isPresent$1, isDocumentAvailable, guid, ResizeSensorComponent, 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';
@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745321602,
-    version: '19.0.0-develop.2',
+    publishDate: 1747410189,
+    version: '19.0.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -222,8 +222,10 @@ const getValueForLocation = (property, displayMode, overflows) => {
     switch (displayMode) {
         case 'toolbar':
             return overflows ? undefined : property;
-        case 'overflow':
+        case 'menu':
             return overflows ? property : undefined;
+        case 'never':
+            return;
         default:
             return property;
     }
@@ -447,6 +449,10 @@ class ToolBarToolComponent {
     visibility;
     element;
     isBuiltInTool = false;
+    /**
+     * @hidden
+     */
+    isHidden = false;
     /**
      * @hidden
      */
@@ -646,24 +652,38 @@ class ToolBarRendererComponent {
         if (this.resizable) {
             if (this.location === 'toolbar') {
                 this.template = this.tool.toolbarTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+                this.hideTool();
             }
             else if (this.location === 'section') {
                 this.template = this.tool.toolbarTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+                if (this.tool.isHidden) {
+                    this.hideTool();
+                }
+                else {
+                    this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+                    this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+                }
             }
             else {
                 this.template = this.tool.popupTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+                if (this.tool.isHidden) {
+                    this.hideTool();
+                }
+                else {
+                    this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+                }
             }
         }
         else {
             this.tool.overflows = false;
             this.template = this.tool.toolbarTemplate;
-            this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
-            this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+            if (this.tool.isHidden) {
+                this.hideTool();
+            }
+            else {
+                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+                this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+            }
         }
     }
     ngOnDestroy() {
@@ -690,7 +710,13 @@ class ToolBarRendererComponent {
     }
     refresh() {
         this.tool.location = this.location;
-        if (this.resizable && this.internalComponentRef) {
+        if (!isPresent$1(this.internalComponentRef)) {
+            return;
+        }
+        if (this.tool.isHidden) {
+            this.hideTool();
+        }
+        else if (this.resizable) {
             if (this.location === 'toolbar') {
                 this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
                 this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.toolbarDisplay);
@@ -698,8 +724,12 @@ class ToolBarRendererComponent {
             else {
                 this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.overflowDisplay);
             }
-            this.updateTools();
         }
+        else {
+            this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+            this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
+        }
+        this.updateTools();
     }
     setAttribute(element, attr, value) {
         this.renderer.setAttribute(element, attr, value);
@@ -725,6 +755,10 @@ class ToolBarRendererComponent {
             }
         }
     }
+    hideTool() {
+        this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
+        this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: RendererService }, { token: RefreshService }, { token: ToolbarToolsService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
 }
@@ -1197,6 +1231,34 @@ class ToolBarComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Specifies the icons visibility for all tools in the ToolBar.
+     * This can be overridden by the `showIcon` property of each tool.
+     */
+    showIcon = 'always';
+    /**
+     * @hidden
+     */
+    get normalizedShowIcon() {
+        if (typeof this.showIcon === 'boolean') {
+            return this.showIcon ? 'always' : 'never';
+        }
+        return this.showIcon;
+    }
+    /**
+     * Specifies the text visibility for all tools in the ToolBar.
+     * This can be overridden by the `showText` property of each tool.
+     */
+    showText = 'always';
+    /**
+     * @hidden
+     */
+    get normalizedShowText() {
+        if (typeof this.showText === 'boolean') {
+            return this.showText ? 'always' : 'never';
+        }
+        return this.showText;
+    }
     /**
      * Fires when the overflow popup of the ToolBar is opened.
      */
@@ -1808,10 +1870,10 @@ class ToolBarComponent {
         if (containerWidth > childrenWidth) {
             for (let i = this.overflowTools.length - 1; i >= 0; i--) {
                 width = this.showFirstHiddenTool(containerWidth, childrenWidth);
-                if (width) {
+                if (width > 0) {
                     childrenWidth += width + this.gap;
                 }
-                else {
+                else if (width === 0) {
                     break;
                 }
             }
@@ -1846,7 +1908,7 @@ class ToolBarComponent {
             tool.overflows = true;
         }
         this.refreshService.refresh(tool);
-        return renderedElement.width; // returns 0 if `overflows` is true
+        return tool.isHidden ? -1 : renderedElement.width; // returns 0 if `overflows` is true and -1 if the tool is hidden
     }
     setPopupContentDimensions(isSection) {
         const popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
@@ -1973,7 +2035,7 @@ class ToolBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex", showIcon: "showIcon", showText: "showText" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-scrollable": "this.scrollableClass", "class.k-toolbar-section": "this.sectionClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
             RefreshService,
             NavigationService,
             LocalizationService,
@@ -2416,6 +2478,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], tabIndex: [{
                 type: Input,
                 args: ['tabIndex']
+            }], showIcon: [{
+                type: Input
+            }], showText: [{
+                type: Input
             }], open: [{
                 type: Output
             }], close: [{
@@ -2488,21 +2554,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class ToolBarButtonComponent extends ToolBarToolComponent {
     element;
     zone;
+    host;
     // showText and showIcon showIcon should be declared first
     /**
-     * Specifies where button text should be displayed
+     * Specifies the button text visibility.
      */
     set showText(value) {
         this._showText = value;
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText || this.host.normalizedShowText;
     }
     /**
-     * Specifies where button icon should be displayed
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        this._showIcon = value;
+        this.setTextDisplayMode();
+    }
+    get showIcon() {
+        return this._showIcon || this.host.normalizedShowIcon;
+    }
     /**
      * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
      */
@@ -2663,12 +2736,14 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     toolbarButtonElement;
     sectionButtonElement;
     overflowButtonElement;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
-    constructor(element, zone) {
+    constructor(element, zone, host) {
         super();
         this.element = element;
         this.zone = zone;
+        this.host = host;
         this.isBuiltInTool = true;
     }
     ngOnInit() {
@@ -2720,16 +2795,19 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selected = state;
         this.selectedChange.emit(state);
     }
+    /**
+     * @hidden
+     */
     getButton() {
         return this[`${this.location}ButtonElement`]?.nativeElement;
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
         this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+            this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", 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>
             <button
@@ -2906,7 +2984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: ToolBarComponent }]; }, propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input
@@ -3360,6 +3438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     zone;
     renderer;
+    host;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
      * @default false
@@ -3372,19 +3451,24 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     title = '';
     // showText and showIcon showIcon should be declared first
     /**
-     * Defines the location of the button text that will be displayed.
+     * Specifies the button text visibility.
      */
     set showText(value) {
         this._showText = value;
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText || this.host.normalizedShowText;
     }
     /**
-     * Defines the location of the button icon that will be displayed.
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        this._showIcon = value;
+    }
+    get showIcon() {
+        return this._showIcon || this.host.normalizedShowIcon;
+    }
     /**
      * Sets the text of the DropDownButton
      * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons)).
@@ -3559,14 +3643,16 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _data;
     _popupSettings = { animate: true, popupClass: '' };
     focusedIndex = -1;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
     getNextKey;
     getPrevKey;
-    constructor(zone, renderer) {
+    constructor(zone, renderer, host) {
         super();
         this.zone = zone;
         this.renderer = renderer;
+        this.host = host;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
@@ -3576,9 +3662,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
     ngAfterViewInit() {
         this.zone.onStable.pipe(take(1)).subscribe(() => {
-            const dropDownButton = this[`${this.location}DropDownButton`];
-            if (dropDownButton) {
-                this.renderer.addClass(dropDownButton.button.nativeElement, 'k-toolbar-menu-button');
+            const dropdownButton = this[`${this.location}DropDownButton`];
+            if (dropdownButton?.button) {
+                this.renderer.addClass(dropdownButton.button.nativeElement, 'k-toolbar-menu-button');
             }
         });
     }
@@ -3632,7 +3718,6 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -3651,10 +3736,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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
@@ -3845,7 +3930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: ToolBarComponent }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -3905,21 +3990,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Represents the [Kendo UI ToolBar SplitButton for Angular](slug:controltypes_toolbar#toc-split-buttons).
  */
 class ToolBarSplitButtonComponent extends ToolBarToolComponent {
+    host;
     // showText and showIcon showIcon should be declared first
     /**
-     * Specifies where button text should be displayed
+     * Specifies the button text visibility.
      */
     set showText(value) {
-        this._showText = value;
+        if (!isPresent$1(value)) {
+            this._showText = this.host.normalizedShowText;
+        }
+        else {
+            this._showText = value;
+        }
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText;
+        return this._showText || this.host.normalizedShowText;
     }
     /**
-     * Specifies where button icon should be displayed
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        if (!isPresent$1(value)) {
+            this._showIcon = this.host.normalizedShowIcon;
+        }
+        else {
+            this._showIcon = value;
+        }
+        this.setTextDisplayMode();
+    }
+    get showIcon() {
+        return this._showIcon || this.host.normalizedShowIcon;
+    }
     /**
      * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
      */
@@ -4106,7 +4208,8 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     _data;
     _popupSettings = { animate: true, popupClass: '' };
     focusedIndex = -1;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
     getNextKey;
     getPrevKey;
@@ -4114,8 +4217,9 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     sectionSplitButton;
     overflowMainButton;
     overflowListItems;
-    constructor() {
+    constructor(host) {
         super();
+        this.host = host;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
@@ -4175,7 +4279,6 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -4194,10 +4297,10 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [{ token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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
@@ -4402,7 +4505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [SplitButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return [{ type: ToolBarComponent }]; }, propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input

package/package.json

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

package/renderer.component.d.ts

@@ -41,6 +41,7 @@ export declare class ToolBarRendererComponent implements OnInit, OnDestroy {
     setAttribute(element: HTMLElement, attr: string, value: string): void;
     private onClick;
     private updateTools;
+    private hideTool;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarRendererComponent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ToolBarRendererComponent, "[kendoToolbarRenderer]", never, { "tool": { "alias": "tool"; "required": false; }; "location": { "alias": "location"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; }, { "rendererClick": "rendererClick"; }, never, never, true, never>;
 }

package/toolbar.component.d.ts

@@ -21,6 +21,7 @@ import { OverflowMode } from './common/overflow-mode';
 import { ToolbarOverflowSettings } from './common/overflow-settings';
 import { ToolbarScrollButtonsPosition } from './common/scroll-buttons';
 import { ScrollService } from './scroll.service';
+import { DisplayMode } from './display-mode';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
@@ -28,7 +29,7 @@ import * as i0 from "@angular/core";
 export declare class ToolBarComponent {
     localization: LocalizationService;
     private popupService;
-    private refreshService;
+    refreshService: RefreshService;
     private navigationService;
     element: ElementRef;
     private zone;
@@ -105,6 +106,24 @@ export declare class ToolBarComponent {
      */
     set tabIndex(tabIndex: number);
     get tabIndex(): number;
+    /**
+     * Specifies the icons visibility for all tools in the ToolBar.
+     * This can be overridden by the `showIcon` property of each tool.
+     */
+    showIcon: DisplayMode | boolean;
+    /**
+     * @hidden
+     */
+    get normalizedShowIcon(): DisplayMode;
+    /**
+     * Specifies the text visibility for all tools in the ToolBar.
+     * This can be overridden by the `showText` property of each tool.
+     */
+    showText: DisplayMode | boolean;
+    /**
+     * @hidden
+     */
+    get normalizedShowText(): DisplayMode;
     /**
      * Fires when the overflow popup of the ToolBar is opened.
      */
@@ -260,5 +279,5 @@ export declare class ToolBarComponent {
     private handleScrollModeUpdates;
     private removeSubscriptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarComponent, "kendo-toolbar", ["kendoToolBar"], { "overflow": { "alias": "overflow"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "open": "open"; "close": "close"; }, ["allTools"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarComponent, "kendo-toolbar", ["kendoToolBar"], { "overflow": { "alias": "overflow"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "showText": { "alias": "showText"; "required": false; }; }, { "open": "open"; "close": "close"; }, ["allTools"], never, true, never>;
 }

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

@@ -8,6 +8,7 @@ import { DisplayMode } from '../display-mode';
 import { ToolOptions } from '../tool-options';
 import { ButtonFillMode, ButtonThemeColor } from '@progress/kendo-angular-buttons';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
@@ -15,15 +16,17 @@ import * as i0 from "@angular/core";
 export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     element: ElementRef;
     private zone;
+    host: ToolBarComponent;
     /**
-     * Specifies where button text should be displayed
+     * Specifies the button text visibility.
      */
     set showText(value: DisplayMode);
     get showText(): DisplayMode;
     /**
-     * Specifies where button icon should be displayed
+     * Specifies the button icon visibility.
      */
-    showIcon: DisplayMode;
+    set showIcon(value: DisplayMode);
+    get showIcon(): DisplayMode;
     /**
      * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
      */
@@ -144,8 +147,9 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     sectionButtonElement: ElementRef;
     private overflowButtonElement;
     private _showText;
+    private _showIcon;
     private _text;
-    constructor(element: ElementRef, zone: NgZone);
+    constructor(element: ElementRef, zone: NgZone, host: ToolBarComponent);
     ngOnInit(): void;
     /**
      * @hidden
@@ -171,7 +175,10 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
      * @hidden
      */
     selectedChangeHandler(state: boolean): void;
-    private getButton;
+    /**
+     * @hidden
+     */
+    getButton(): HTMLElement;
     private setTextDisplayMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarButtonComponent, "kendo-toolbar-button", ["kendoToolBarButton"], { "showText": { "alias": "showText"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "style": { "alias": "style"; "required": false; }; "className": { "alias": "className"; "required": false; }; "title": { "alias": "title"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "look": { "alias": "look"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; }, { "click": "click"; "pointerdown": "pointerdown"; "selectedChange": "selectedChange"; }, never, never, true, never>;

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

@@ -10,6 +10,7 @@ import { DisplayMode } from '../display-mode';
 import { ToolOptions } from '../tool-options';
 import { PreventableEvent } from '@progress/kendo-angular-buttons';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons).
@@ -17,6 +18,7 @@ import * as i0 from "@angular/core";
 export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent implements OnInit {
     private zone;
     private renderer;
+    private host;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
      * @default false
@@ -28,14 +30,15 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
      */
     title: string;
     /**
-     * Defines the location of the button text that will be displayed.
+     * Specifies the button text visibility.
      */
     set showText(value: DisplayMode);
     get showText(): DisplayMode;
     /**
-     * Defines the location of the button icon that will be displayed.
+     * Specifies the button icon visibility.
      */
-    showIcon: DisplayMode;
+    set showIcon(value: DisplayMode);
+    get showIcon(): DisplayMode;
     /**
      * Sets the text of the DropDownButton
      * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons)).
@@ -155,10 +158,11 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     private _popupSettings;
     private focusedIndex;
     private _showText;
+    private _showIcon;
     private _text;
     private getNextKey;
     private getPrevKey;
-    constructor(zone: NgZone, renderer: Renderer2);
+    constructor(zone: NgZone, renderer: Renderer2, host: ToolBarComponent);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     /**

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

@@ -10,20 +10,23 @@ import { DisplayMode } from '../display-mode';
 import { ToolOptions } from '../tool-options';
 import { PreventableEvent } from '@progress/kendo-angular-buttons';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar SplitButton for Angular](slug:controltypes_toolbar#toc-split-buttons).
  */
 export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent implements OnInit {
+    private host;
     /**
-     * Specifies where button text should be displayed
+     * Specifies the button text visibility.
      */
     set showText(value: DisplayMode);
     get showText(): DisplayMode;
     /**
-     * Specifies where button icon should be displayed
+     * Specifies the button icon visibility.
      */
-    showIcon: DisplayMode;
+    set showIcon(value: DisplayMode);
+    get showIcon(): DisplayMode;
     /**
      * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
      */
@@ -152,6 +155,7 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
     private _popupSettings;
     private focusedIndex;
     private _showText;
+    private _showIcon;
     private _text;
     private getNextKey;
     private getPrevKey;
@@ -159,7 +163,7 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
     private sectionSplitButton;
     private overflowMainButton;
     overflowListItems: QueryList<ElementRef>;
-    constructor();
+    constructor(host: ToolBarComponent);
     /**
      * @hidden
      */

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

@@ -18,6 +18,10 @@ export declare class ToolBarToolComponent {
     visibility: string;
     element: ElementRef;
     isBuiltInTool: boolean;
+    /**
+     * @hidden
+     */
+    isHidden: boolean;
     /**
      * @hidden
      */