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

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export 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/'
 };

package/esm2022/renderer.component.mjs

@@ -42,14 +42,8 @@ export 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) => {
@@ -57,6 +51,18 @@ export 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;
@@ -93,12 +99,6 @@ export 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();
         }
@@ -111,6 +111,9 @@ export class ToolBarRendererComponent {
         if (this.isSpacer) {
             return MIN_SPACER_WIDTH;
         }
+        if (!this.internalComponentRef) {
+            return;
+        }
         return this.tool.overflows ? 0 : outerWidth(this.internalComponentRef);
     }
     isDisplayed() {

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';
@@ -182,29 +182,31 @@ export 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.
@@ -262,6 +264,10 @@ export class ToolBarComponent {
      * @hidden
      */
     nextButtonIcon = caretAltRightIcon;
+    /**
+     * @hidden
+     */
+    propertyChange = new EventEmitter();
     hostClass = true;
     get scrollableClass() {
         return this.isScrollMode;
@@ -280,6 +286,8 @@ export class ToolBarComponent {
     cachedGap;
     _size = DEFAULT_SIZE;
     _fillMode = DEFAULT_FILL_MODE;
+    _showText = 'always';
+    _showIcon = 'always';
     overflowButtonClickedTime = null;
     showAutoButtons = false;
     scrollButtonStateChangeSub;
@@ -981,6 +989,12 @@ 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", 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,
@@ -1408,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

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

@@ -8,7 +8,7 @@ import { getValueForLocation } from '../util';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { take } from 'rxjs/operators';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { BadgeComponent } from '@progress/kendo-angular-indicators';
+import { BadgeComponent, BadgeContainerComponent } from '@progress/kendo-angular-indicators';
 import { NgStyle, NgClass, NgIf } from '@angular/common';
 import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
@@ -29,7 +29,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText || this.host.normalizedShowText;
+        return this._showText;
     }
     /**
      * Specifies the button icon visibility.
@@ -39,7 +39,7 @@ export 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)).
@@ -51,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.
      */
@@ -194,6 +200,10 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         svgIcon: null,
         imageUrl: ''
     };
+    /**
+     * @hidden
+     */
+    hasBadgeContainer = false;
     /**
      * @hidden
      */
@@ -204,16 +214,26 @@ export 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
      */
@@ -275,13 +295,45 @@ export 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: 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
+            <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"
@@ -300,7 +352,6 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
                 (blur)="onBlur()"
             >
                 {{ toolbarOptions.text }}
-                <kendo-badge *ngIf="showBadge"></kendo-badge>
             </button>
         </ng-template>
         <ng-template #popupTemplate>
@@ -328,13 +379,45 @@ export 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"
@@ -355,7 +438,7 @@ export 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,
@@ -365,13 +448,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"
@@ -390,7 +505,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>
@@ -418,13 +532,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"
@@ -447,7 +593,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: i1.ToolBarComponent }]; }, propDecorators: { showText: [{
                 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

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

@@ -38,7 +38,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     get showText() {
-        return this._showText || this.host.normalizedShowText;
+        return this._showText;
     }
     /**
      * Specifies the button icon visibility.
@@ -47,7 +47,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this._showIcon = value;
     }
     get showIcon() {
-        return this._showIcon || this.host.normalizedShowIcon;
+        return this._showIcon;
     }
     /**
      * Sets the text of the DropDownButton
@@ -226,6 +226,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _showText;
     _showIcon;
     _text;
+    propertyChangeSub;
     getNextKey;
     getPrevKey;
     constructor(zone, renderer, host) {
@@ -236,10 +237,21 @@ export 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`];
@@ -256,6 +268,12 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             .toArray()
             .findIndex(b => b.nativeElement.contains(ev.target));
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     /**
      * @hidden
      */
@@ -330,6 +348,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -395,6 +414,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -427,6 +447,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}"
@@ -492,6 +513,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}"