@progress/kendo-angular-toolbar 19.0.0-develop.9 → 19.0.1-develop.1

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

@@ -8,18 +8,21 @@ 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";
+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.
      */
@@ -185,6 +200,10 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         svgIcon: null,
         imageUrl: ''
     };
+    /**
+     * @hidden
+     */
+    hasBadgeContainer = false;
     /**
      * @hidden
      */
@@ -192,17 +211,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,25 +280,60 @@ 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
+            <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"
@@ -286,7 +352,6 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
                 (blur)="onBlur()"
             >
                 {{ toolbarOptions.text }}
-                <kendo-badge *ngIf="showBadge"></kendo-badge>
             </button>
         </ng-template>
         <ng-template #popupTemplate>
@@ -314,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"
@@ -341,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,
@@ -351,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"
@@ -376,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>
@@ -404,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"
@@ -433,9 +593,9 @@ 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 }]; }, 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

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

@@ -9,13 +9,16 @@ import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNext
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgClass, NgIf, NgFor } from '@angular/common';
 import { take } from 'rxjs/operators';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
+import * as i1 from "../toolbar.component";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons).
  */
 export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     zone;
     renderer;
+    host;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
      * @default false
@@ -28,7 +31,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     title = '';
     // showText and showIcon showIcon should be declared first
     /**
-     * Defines the location of the button text that will be displayed.
+     * Specifies the button text visibility.
      */
     set showText(value) {
         this._showText = value;
@@ -38,9 +41,14 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         return this._showText;
     }
     /**
-     * Defines the location of the button icon that will be displayed.
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        this._showIcon = value;
+    }
+    get showIcon() {
+        return this._showIcon;
+    }
     /**
      * Sets the text of the DropDownButton
      * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons)).
@@ -215,26 +223,40 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _data;
     _popupSettings = { animate: true, popupClass: '' };
     focusedIndex = -1;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
+    propertyChangeSub;
     getNextKey;
     getPrevKey;
-    constructor(zone, renderer) {
+    constructor(zone, renderer, host) {
         super();
         this.zone = zone;
         this.renderer = renderer;
+        this.host = host;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
+        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`];
-            if (dropDownButton) {
-                this.renderer.addClass(dropDownButton.button.nativeElement, 'k-toolbar-menu-button');
+            const dropdownButton = this[`${this.location}DropDownButton`];
+            if (dropdownButton?.button) {
+                this.renderer.addClass(dropdownButton.button.nativeElement, 'k-toolbar-menu-button');
             }
         });
     }
@@ -246,6 +268,12 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             .toArray()
             .findIndex(b => b.nativeElement.contains(ev.target));
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     /**
      * @hidden
      */
@@ -288,7 +316,6 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -307,10 +334,10 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "sectionDropDownButton", first: true, predicate: ["sectionDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton #toolbarDropDownButton
@@ -321,6 +348,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -386,6 +414,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -418,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}"
@@ -483,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}"
@@ -501,7 +532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ToolBarComponent }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input