@progress/kendo-angular-toolbar 19.0.0-develop.30 → 19.0.0-develop.32

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

@@ -16,7 +16,7 @@ import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIc
 import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent } from '@progress/kendo-angular-buttons';
 import { NgTemplateOutlet, NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
-import { BadgeComponent } from '@progress/kendo-angular-indicators';
+import { BadgeComponent, BadgeContainerComponent } from '@progress/kendo-angular-indicators';
 
 /**
  * @hidden
@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1747836229,
-    version: '19.0.0-develop.30',
+    publishDate: 1748002104,
+    version: '19.0.0-develop.32',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -634,14 +634,8 @@ class ToolBarRendererComponent {
         this.viewContainer = viewContainer;
     }
     ngOnInit() {
-        const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
-        if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
-            return;
-        }
         this.tool.location = this.location;
-        this.internalComponentRef = viewContainerRootNodes[0];
         this.element = this.tool.element;
-        this.internalComponentRef.addEventListener('click', this.onClick);
         this.rendererService.element = this.element;
         this.rendererService.renderer = this;
         this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
@@ -649,6 +643,18 @@ class ToolBarRendererComponent {
                 this.refresh();
             }
         });
+    }
+    ngOnDestroy() {
+        this.refreshSubscription?.unsubscribe();
+        this.internalComponentRef?.removeEventListener('click', this.onClick);
+    }
+    ngAfterViewInit() {
+        const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
+        if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
+            return;
+        }
+        this.internalComponentRef = viewContainerRootNodes[0];
+        this.internalComponentRef.addEventListener('click', this.onClick);
         if (this.resizable) {
             if (this.location === 'toolbar') {
                 this.template = this.tool.toolbarTemplate;
@@ -685,12 +691,6 @@ class ToolBarRendererComponent {
                 this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
             }
         }
-    }
-    ngOnDestroy() {
-        this.refreshSubscription && this.refreshSubscription.unsubscribe();
-        this.internalComponentRef && this.internalComponentRef.removeEventListener('click', this.onClick);
-    }
-    ngAfterViewInit() {
         if (this.resizable) {
             this.refresh();
         }
@@ -703,6 +703,9 @@ class ToolBarRendererComponent {
         if (this.isSpacer) {
             return MIN_SPACER_WIDTH;
         }
+        if (!this.internalComponentRef) {
+            return;
+        }
         return this.tool.overflows ? 0 : outerWidth(this.internalComponentRef);
     }
     isDisplayed() {
@@ -1235,29 +1238,31 @@ class ToolBarComponent {
      * 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';
+    set showIcon(value) {
+        if (this._showIcon === value) {
+            return;
         }
-        return this.showIcon;
+        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.
      */
-    showText = 'always';
-    /**
-     * @hidden
-     */
-    get normalizedShowText() {
-        if (typeof this.showText === 'boolean') {
-            return this.showText ? 'always' : 'never';
+    set showText(value) {
+        if (this._showText === value) {
+            return;
         }
-        return this.showText;
+        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.
@@ -1315,6 +1320,10 @@ class ToolBarComponent {
      * @hidden
      */
     nextButtonIcon = caretAltRightIcon;
+    /**
+     * @hidden
+     */
+    propertyChange = new EventEmitter();
     hostClass = true;
     get scrollableClass() {
         return this.isScrollMode;
@@ -1333,6 +1342,8 @@ class ToolBarComponent {
     cachedGap;
     _size = DEFAULT_SIZE;
     _fillMode = DEFAULT_FILL_MODE;
+    _showText = 'always';
+    _showIcon = 'always';
     overflowButtonClickedTime = null;
     showAutoButtons = false;
     scrollButtonStateChangeSub;
@@ -2034,6 +2045,12 @@ 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: 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", 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,
@@ -2461,7 +2478,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: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }, { type: ScrollService }]; }, propDecorators: { overflow: [{
                 type: Input
@@ -2564,7 +2581,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText || this.host.normalizedShowText;
+        return this._showText;
     }
     /**
      * Specifies the button icon visibility.
@@ -2574,7 +2591,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     get showIcon() {
-        return this._showIcon || this.host.normalizedShowIcon;
+        return this._showIcon;
     }
     /**
      * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
@@ -2586,6 +2603,12 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     get text() {
         return this._text;
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     /**
      * Specifies custom inline CSS styles of the Button.
      */
@@ -2729,6 +2752,10 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         svgIcon: null,
         imageUrl: ''
     };
+    /**
+     * @hidden
+     */
+    hasBadgeContainer = false;
     /**
      * @hidden
      */
@@ -2739,16 +2766,26 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     _showText;
     _showIcon;
     _text;
+    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
      */
@@ -2810,13 +2847,45 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     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
+            <kendo-badge-container *ngIf="hasBadgeContainer">
+                <button
+                    #toolbarButton
+                    [class.k-toolbar-button]="!toggleable"
+                    [class.k-toolbar-toggle-button]="toggleable"
+                    [tabindex]="tabIndex"
+                    type="button"
+                    kendoButton
+                    [size]="size"
+                    [ngStyle]="style"
+                    [ngClass]="className"
+                    [attr.title]="title"
+                    [disabled]="disabled"
+                    [toggleable]="toggleable"
+                    [fillMode]="fillMode"
+                    [themeColor]="fillMode ? themeColor : null"
+                    [selected]="selected"
+                    [icon]="toolbarOptions.icon"
+                    [iconClass]="toolbarOptions.iconClass"
+                    [svgIcon]="toolbarOptions.svgIcon"
+                    [imageUrl]="toolbarOptions.imageUrl"
+                    (click)="click.emit($event)"
+                    (pointerdown)="pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event)"
+                    (blur)="onBlur()"
+                >
+                    {{ toolbarOptions.text }}
+                </button>
+                <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
+            </kendo-badge-container>
+
+            <button *ngIf="!hasBadgeContainer"
                 #toolbarButton
                 [class.k-toolbar-button]="!toggleable"
                 [class.k-toolbar-toggle-button]="toggleable"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
+                [size]="size"
                 [ngStyle]="style"
                 [ngClass]="className"
                 [attr.title]="title"
@@ -2835,7 +2904,6 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 (blur)="onBlur()"
             >
                 {{ toolbarOptions.text }}
-                <kendo-badge *ngIf="showBadge"></kendo-badge>
             </button>
         </ng-template>
         <ng-template #popupTemplate>
@@ -2863,13 +2931,45 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
             </div>
         </ng-template>
         <ng-template #sectionTemplate>
+            <kendo-badge-container *ngIf="hasBadgeContainer">
+                <button
+                    #sectionButton
+                    [class.k-toolbar-button]="!toggleable"
+                    [class.k-toolbar-toggle-button]="toggleable"
+                    [tabindex]="tabIndex"
+                    type="button"
+                    kendoButton
+                    [size]="size"
+                    [ngStyle]="style"
+                    [ngClass]="className"
+                    [attr.title]="title"
+                    [disabled]="disabled"
+                    [toggleable]="toggleable"
+                    [fillMode]="fillMode"
+                    [themeColor]="fillMode ? themeColor : null"
+                    [selected]="selected"
+                    [icon]="toolbarOptions.icon"
+                    [iconClass]="toolbarOptions.iconClass"
+                    [svgIcon]="toolbarOptions.svgIcon"
+                    [imageUrl]="toolbarOptions.imageUrl"
+                    (click)="click.emit($event)"
+                    (pointerdown)="pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event)"
+                    (blur)="onBlur()"
+                >
+                    {{ toolbarOptions.text }}
+                </button>
+                <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
+            </kendo-badge-container>
             <button
+                *ngIf="!hasBadgeContainer"
                 #sectionButton
                 [class.k-toolbar-button]="!toggleable"
                 [class.k-toolbar-toggle-button]="toggleable"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
+                [size]="size"
                 [ngStyle]="style"
                 [ngClass]="className"
                 [attr.title]="title"
@@ -2890,7 +2990,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 {{ toolbarOptions.text }}
             </button>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
@@ -2900,13 +3000,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-toolbar-button',
                     template: `
         <ng-template #toolbarTemplate>
-            <button
+            <kendo-badge-container *ngIf="hasBadgeContainer">
+                <button
+                    #toolbarButton
+                    [class.k-toolbar-button]="!toggleable"
+                    [class.k-toolbar-toggle-button]="toggleable"
+                    [tabindex]="tabIndex"
+                    type="button"
+                    kendoButton
+                    [size]="size"
+                    [ngStyle]="style"
+                    [ngClass]="className"
+                    [attr.title]="title"
+                    [disabled]="disabled"
+                    [toggleable]="toggleable"
+                    [fillMode]="fillMode"
+                    [themeColor]="fillMode ? themeColor : null"
+                    [selected]="selected"
+                    [icon]="toolbarOptions.icon"
+                    [iconClass]="toolbarOptions.iconClass"
+                    [svgIcon]="toolbarOptions.svgIcon"
+                    [imageUrl]="toolbarOptions.imageUrl"
+                    (click)="click.emit($event)"
+                    (pointerdown)="pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event)"
+                    (blur)="onBlur()"
+                >
+                    {{ toolbarOptions.text }}
+                </button>
+                <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
+            </kendo-badge-container>
+
+            <button *ngIf="!hasBadgeContainer"
                 #toolbarButton
                 [class.k-toolbar-button]="!toggleable"
                 [class.k-toolbar-toggle-button]="toggleable"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
+                [size]="size"
                 [ngStyle]="style"
                 [ngClass]="className"
                 [attr.title]="title"
@@ -2925,7 +3057,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (blur)="onBlur()"
             >
                 {{ toolbarOptions.text }}
-                <kendo-badge *ngIf="showBadge"></kendo-badge>
             </button>
         </ng-template>
         <ng-template #popupTemplate>
@@ -2953,13 +3084,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </div>
         </ng-template>
         <ng-template #sectionTemplate>
+            <kendo-badge-container *ngIf="hasBadgeContainer">
+                <button
+                    #sectionButton
+                    [class.k-toolbar-button]="!toggleable"
+                    [class.k-toolbar-toggle-button]="toggleable"
+                    [tabindex]="tabIndex"
+                    type="button"
+                    kendoButton
+                    [size]="size"
+                    [ngStyle]="style"
+                    [ngClass]="className"
+                    [attr.title]="title"
+                    [disabled]="disabled"
+                    [toggleable]="toggleable"
+                    [fillMode]="fillMode"
+                    [themeColor]="fillMode ? themeColor : null"
+                    [selected]="selected"
+                    [icon]="toolbarOptions.icon"
+                    [iconClass]="toolbarOptions.iconClass"
+                    [svgIcon]="toolbarOptions.svgIcon"
+                    [imageUrl]="toolbarOptions.imageUrl"
+                    (click)="click.emit($event)"
+                    (pointerdown)="pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event)"
+                    (blur)="onBlur()"
+                >
+                    {{ toolbarOptions.text }}
+                </button>
+                <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
+            </kendo-badge-container>
             <button
+                *ngIf="!hasBadgeContainer"
                 #sectionButton
                 [class.k-toolbar-button]="!toggleable"
                 [class.k-toolbar-toggle-button]="toggleable"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
+                [size]="size"
                 [ngStyle]="style"
                 [ngClass]="className"
                 [attr.title]="title"
@@ -2982,7 +3145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
     `,
                     standalone: true,
-                    imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent],
+                    imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: ToolBarComponent }]; }, propDecorators: { showText: [{
                 type: Input
@@ -3040,6 +3203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 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
@@ -3096,9 +3260,10 @@ 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;
@@ -3193,13 +3358,19 @@ 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: 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
@@ -3220,6 +3391,7 @@ 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"
@@ -3281,6 +3453,7 @@ 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"
@@ -3326,6 +3499,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"
@@ -3387,6 +3561,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"
@@ -3408,7 +3583,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: ToolBarComponent }]; }, propDecorators: { disabled: [{
                 type: Input
             }], fillMode: [{
                 type: Input
@@ -3458,7 +3633,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText || this.host.normalizedShowText;
+        return this._showText;
     }
     /**
      * Specifies the button icon visibility.
@@ -3467,7 +3642,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this._showIcon = value;
     }
     get showIcon() {
-        return this._showIcon || this.host.normalizedShowIcon;
+        return this._showIcon;
     }
     /**
      * Sets the text of the DropDownButton
@@ -3646,6 +3821,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _showText;
     _showIcon;
     _text;
+    propertyChangeSub;
     getNextKey;
     getPrevKey;
     constructor(zone, renderer, host) {
@@ -3656,10 +3832,21 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         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() {
+        if (this.propertyChangeSub) {
+            this.propertyChangeSub.unsubscribe();
+            this.propertyChangeSub = null;
+        }
+    }
     ngAfterViewInit() {
         this.zone.onStable.pipe(take(1)).subscribe(() => {
             const dropdownButton = this[`${this.location}DropDownButton`];
@@ -3676,6 +3863,12 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             .toArray()
             .findIndex(b => b.nativeElement.contains(ev.target));
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     /**
      * @hidden
      */
@@ -3750,6 +3943,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -3815,6 +4009,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -3847,6 +4042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -3912,6 +4108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -3996,31 +4193,21 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
      * Specifies the button text visibility.
      */
     set showText(value) {
-        if (!isPresent$1(value)) {
-            this._showText = this.host.normalizedShowText;
-        }
-        else {
-            this._showText = value;
-        }
+        this._showText = value;
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText || this.host.normalizedShowText;
+        return this._showText;
     }
     /**
      * Specifies the button icon visibility.
      */
     set showIcon(value) {
-        if (!isPresent$1(value)) {
-            this._showIcon = this.host.normalizedShowIcon;
-        }
-        else {
-            this._showIcon = value;
-        }
+        this._showIcon = value;
         this.setTextDisplayMode();
     }
     get showIcon() {
-        return this._showIcon || this.host.normalizedShowIcon;
+        return this._showIcon;
     }
     /**
      * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
@@ -4202,6 +4389,12 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     ngOnInit() {
         this.setTextDisplayMode();
     }
+    ngOnDestroy() {
+        if (this.propertyChangeSub) {
+            this.propertyChangeSub.unsubscribe();
+            this.propertyChangeSub = null;
+        }
+    }
     get overflowButtons() {
         return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
@@ -4211,6 +4404,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     _showText;
     _showIcon;
     _text;
+    propertyChangeSub;
     getNextKey;
     getPrevKey;
     toolbarSplitButton;
@@ -4223,6 +4417,11 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
+        this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
+            if (change.property === 'showText' || change.property === 'showIcon') {
+                this[change.property] = change.value;
+            }
+        });
     }
     /**
      * @hidden
@@ -4243,6 +4442,12 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     canFocus() {
         return !this.disabled;
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     /**
      * @hidden
      */
@@ -4317,6 +4522,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
                 [arrowButtonIcon]="arrowButtonIcon"
                 [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
@@ -4386,6 +4592,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
                 [arrowButtonIcon]="arrowButtonIcon"
                 [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
@@ -4421,6 +4628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [arrowButtonIcon]="arrowButtonIcon"
                 [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
@@ -4490,6 +4698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [arrowButtonIcon]="arrowButtonIcon"
                 [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"