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

package/codemods/v19/toolbar-button-showicon.js

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../template-transformer/index");
+const utils_1 = require("../utils");
+const fs = __importStar(require("fs"));
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (filePath.endsWith('.html')) {
+        let updatedContent = fileInfo.source;
+        updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showIcon', 'overflow', 'menu');
+        updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showIcon', 'both', 'always');
+        // Only write to file once after all transformations
+        fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, index_1.templateTransformer)(rootSource, j, (root) => {
+        (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showIcon', 'overflow', 'menu');
+        (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showIcon', 'both', 'always');
+    });
+    (0, utils_1.tsPropertyValueTransformer)(rootSource, j, 'DisplayMode', 'overflow', 'menu');
+    (0, utils_1.tsPropertyValueTransformer)(rootSource, j, 'DisplayMode', 'both', 'always');
+    return rootSource.toSource();
+}
+exports.default = default_1;

package/codemods/v19/toolbar-button-showtext.js

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../template-transformer/index");
+const utils_1 = require("../utils");
+const fs = __importStar(require("fs"));
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (filePath.endsWith('.html')) {
+        let updatedContent = fileInfo.source;
+        updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showText', 'overflow', 'menu');
+        updatedContent = (0, utils_1.htmlAttributeValueTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-toolbar-button', 'showText', 'both', 'always');
+        // Only write to file once after all transformations
+        fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, index_1.templateTransformer)(rootSource, j, (root) => {
+        (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showText', 'overflow', 'menu');
+        (0, utils_1.templateAttributeValueTransformer)(root, 'kendo-toolbar-button', 'showText', 'both', 'always');
+    });
+    (0, utils_1.tsPropertyValueTransformer)(rootSource, j, 'DisplayMode', 'overflow', 'menu');
+    (0, utils_1.tsPropertyValueTransformer)(rootSource, j, 'DisplayMode', 'both', 'always');
+    return rootSource.toSource();
+}
+exports.default = default_1;

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: 1745498572,
-    version: '19.0.0-develop.3',
+    publishDate: 1747923818,
+    version: '19.0.0-develop.31',
     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

@@ -21,7 +21,7 @@ import { take, takeUntil } from 'rxjs/operators';
 import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent, ButtonGroupComponent } from '@progress/kendo-angular-buttons';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
 import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
 import { ToolbarToolsService } from './tools/tools.service';
@@ -178,6 +178,36 @@ 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.
+     */
+    set showIcon(value) {
+        if (this._showIcon === value) {
+            return;
+        }
+        const normalizedValue = this.normalizeDisplayValue(value);
+        this._showIcon = value;
+        this.propertyChange.emit({
+            property: 'showIcon',
+            value: normalizedValue
+        });
+    }
+    /**
+     * Specifies the text visibility for all tools in the ToolBar.
+     * This can be overridden by the `showText` property of each tool.
+     */
+    set showText(value) {
+        if (this._showText === value) {
+            return;
+        }
+        const normalizedValue = this.normalizeDisplayValue(value);
+        this._showText = value;
+        this.propertyChange.emit({
+            property: 'showText',
+            value: normalizedValue
+        });
+    }
     /**
      * Fires when the overflow popup of the ToolBar is opened.
      */
@@ -234,6 +264,10 @@ export class ToolBarComponent {
      * @hidden
      */
     nextButtonIcon = caretAltRightIcon;
+    /**
+     * @hidden
+     */
+    propertyChange = new EventEmitter();
     hostClass = true;
     get scrollableClass() {
         return this.isScrollMode;
@@ -252,6 +286,8 @@ export class ToolBarComponent {
     cachedGap;
     _size = DEFAULT_SIZE;
     _fillMode = DEFAULT_FILL_MODE;
+    _showText = 'always';
+    _showIcon = 'always';
     overflowButtonClickedTime = null;
     showAutoButtons = false;
     scrollButtonStateChangeSub;
@@ -789,10 +825,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 +863,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;
@@ -953,8 +989,14 @@ export class ToolBarComponent {
             }
         });
     }
+    normalizeDisplayValue(value) {
+        if (typeof value === 'boolean') {
+            return value ? 'always' : 'never';
+        }
+        return value;
+    }
     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,
@@ -1380,7 +1422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-resize-sensor *ngIf="overflowEnabled" #resizeSensor></kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ButtonGroupComponent, ToolbarScrollableButtonComponent]
+                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent, ToolbarScrollableButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.RefreshService }, { type: i4.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ToolbarToolsService }, { type: i6.ScrollService }]; }, propDecorators: { overflow: [{
                 type: Input
@@ -1397,6 +1439,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,16 +10,19 @@ 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;
@@ -29,9 +32,15 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         return this._showText;
     }
     /**
-     * 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;
+    }
     /**
      * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
      */
@@ -42,6 +51,12 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
     get text() {
         return this._text;
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     /**
      * Specifies custom inline CSS styles of the Button.
      */
@@ -192,17 +207,29 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
     toolbarButtonElement;
     sectionButtonElement;
     overflowButtonElement;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
-    constructor(element, zone) {
+    propertyChangeSub;
+    constructor(element, zone, host) {
         super();
         this.element = element;
         this.zone = zone;
+        this.host = host;
         this.isBuiltInTool = true;
+        this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
+            if (change.property === 'showText' || change.property === 'showIcon') {
+                this[change.property] = change.value;
+            }
+        });
     }
     ngOnInit() {
         this.setTextDisplayMode();
     }
+    ngOnDestroy() {
+        this.propertyChangeSub.unsubscribe();
+        this.propertyChangeSub = null;
+    }
     /**
      * @hidden
      */
@@ -249,16 +276,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
@@ -268,6 +298,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
+                [size]="size"
                 [ngStyle]="style"
                 [ngClass]="className"
                 [attr.title]="title"
@@ -321,6 +352,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
+                [size]="size"
                 [ngStyle]="style"
                 [ngClass]="className"
                 [attr.title]="title"
@@ -358,6 +390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
+                [size]="size"
                 [ngStyle]="style"
                 [ngClass]="className"
                 [attr.title]="title"
@@ -411,6 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
+                [size]="size"
                 [ngStyle]="style"
                 [ngClass]="className"
                 [attr.title]="title"
@@ -435,7 +469,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-buttongroup.component.mjs

@@ -10,13 +10,16 @@ import { makePeeker, getIndexOfFocused, seekFocusedIndex, getNextKey, getPrevKey
 import { ButtonGroupComponent, ButtonComponent } from '@progress/kendo-angular-buttons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgFor, NgStyle, NgClass, NgIf } from '@angular/common';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../toolbar.component";
 /**
  * Represents the Kendo UI Toolbar ButtonGroup for Angular.
  */
 export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     localization;
+    host;
     /**
      * By default, the ButtonGroup is enabled. To disable the whole group of buttons, set its `disabled`
      * attribute to `true`. To disable a specific button, set the `disabled` attribute of the button to
@@ -73,9 +76,10 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     focusedIndex = -1;
     getNextKey;
     getPrevKey;
-    constructor(localization) {
+    constructor(localization, host) {
         super();
         this.localization = localization;
+        this.host = host;
         this.getNextKey = getNextKey(this.localization.rtl);
         this.getPrevKey = getPrevKey(this.localization.rtl);
         this.isBuiltInTool = true;
@@ -170,13 +174,19 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
             return button.overflowOptions.svgIcon;
         }
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     focusButton(index, ev) {
         // Guard against focusing twice on mousedown.
         if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
             this.buttonElements[index]?.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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(function () { return 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
@@ -197,6 +207,7 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                     [ngClass]="button.className"
                     [attr.title]="button.title"
                     [disabled]="button.disabled"
+                    [size]="size"
                     [togglable]="button.togglable"
                     [selected]="button.selected"
                     [attr.aria-pressed]="button.selected ? true : false"
@@ -258,6 +269,7 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                     [ngClass]="button.className"
                     [attr.title]="button.title"
                     [disabled]="button.disabled"
+                    [size]="size"
                     [togglable]="button.togglable"
                     [selected]="button.selected"
                     [attr.aria-pressed]="button.selected ? true : false"
@@ -303,6 +315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [ngClass]="button.className"
                     [attr.title]="button.title"
                     [disabled]="button.disabled"
+                    [size]="size"
                     [togglable]="button.togglable"
                     [selected]="button.selected"
                     [attr.aria-pressed]="button.selected ? true : false"
@@ -364,6 +377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [ngClass]="button.className"
                     [attr.title]="button.title"
                     [disabled]="button.disabled"
+                    [size]="size"
                     [togglable]="button.togglable"
                     [selected]="button.selected"
                     [attr.aria-pressed]="button.selected ? true : false"
@@ -385,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [ButtonGroupComponent, NgFor, ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ToolBarComponent }]; }, propDecorators: { disabled: [{
                 type: Input
             }], fillMode: [{
                 type: Input