@progress/kendo-angular-toolbar 17.0.0-develop.21 → 17.0.0-develop.22

package/{esm2020 → esm2022}/tools/toolbar-button.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, TemplateRef, forwardRef, ViewChild, Input, Output, EventEmitter, ElementRef, isDevMode, NgZone } from '@angular/core';
+import { Component, forwardRef, ViewChild, Input, Output, EventEmitter, ElementRef, isDevMode, NgZone } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { getValueForLocation } from '../util';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
@@ -14,85 +14,8 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
  */
 export class ToolBarButtonComponent extends ToolBarToolComponent {
-    constructor(element, zone) {
-        super();
-        this.element = element;
-        this.zone = zone;
-        /**
-         * Specifies where button icon should be displayed
-         */
-        this.showIcon = 'both';
-        /**
-         * Provides visual styling that indicates if the Button is active
-         * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
-         * By default, `toggleable` is set to `false`.
-         */
-        this.toggleable = false;
-        /**
-         * Sets the selected state of the Button.
-         */
-        this.selected = false;
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` —Applies coloring based on the `base` theme color. (default)
-         * * `primary` —Applies coloring based on the `primary` theme color.
-         * * `secondary`—Applies coloring based on the `secondary` theme color.
-         * * `tertiary`— Applies coloring based on the `tertiary` theme color.
-         * * `info`—Applies coloring based on the `info` theme color.
-         * * `success`— Applies coloring based on the `success` theme color.
-         * * `warning`— Applies coloring based on the `warning` theme color.
-         * * `error`— Applies coloring based on the `error` theme color.
-         * * `dark`— Applies coloring based on the `dark` theme color.
-         * * `light`— Applies coloring based on the `light` theme color.
-         * * `inverse`— Applies coloring based on the `inverse` theme color.
-         * * `null` —Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Fires each time the Button is clicked.
-         */
-        this.click = new EventEmitter();
-        /**
-         * Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
-         */
-        this.pointerdown = new EventEmitter();
-        /**
-         * Fires each time the selected state of a Toggle Button is changed.
-         * The event argument is the new selected state (Boolean).
-         */
-        this.selectedChange = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._showText = 'both';
-        this.isBuiltInTool = true;
-    }
+    element;
+    zone;
     // showText and showIcon showIcon should be declared first
     /**
      * Specifies where button text should be displayed
@@ -104,6 +27,10 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
     get showText() {
         return this._showText;
     }
+    /**
+     * Specifies where button icon should be displayed
+     */
+    showIcon = 'both';
     /**
      * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
      */
@@ -114,6 +41,29 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
     get text() {
         return this._text;
     }
+    /**
+     * Specifies custom inline CSS styles of the Button.
+     */
+    style;
+    /**
+     * Specifies custom CSS class names that will be added to the Button.
+     */
+    className;
+    /**
+     * Specifies the title of the Button.
+     */
+    title;
+    /**
+     * If `disabled` is set to `true`, the Button is disabled
+     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     */
+    disabled;
+    /**
+     * Provides visual styling that indicates if the Button is active
+     * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
+     * By default, `toggleable` is set to `false`.
+     */
+    toggleable = false;
     /**
      * @hidden
      */
@@ -131,6 +81,41 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
     set togglable(value) {
         this.toggleable = value;
     }
+    /**
+     * Sets the selected state of the Button.
+     */
+    selected = false;
+    /**
+     * The fillMode property specifies the background and border styles of the Button.
+     *
+     * The available values are:
+     * * `solid` (default)
+     * * `flat`
+     * * `outline`
+     * * `link`
+     * * `null`
+     */
+    fillMode = 'solid';
+    /**
+     * The Button allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` —Applies coloring based on the `base` theme color. (default)
+     * * `primary` —Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     * * `null` —Removes the default CSS class (no class would be rendered).
+     */
+    themeColor = 'base';
     /**
      * Defines the name for an existing icon in a Kendo UI theme
      * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
@@ -172,6 +157,43 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
         this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
     }
+    /**
+     * Fires each time the Button is clicked.
+     */
+    click = new EventEmitter();
+    /**
+     * Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
+     */
+    pointerdown = new EventEmitter();
+    /**
+     * Fires each time the selected state of a Toggle Button is changed.
+     * The event argument is the new selected state (Boolean).
+     */
+    selectedChange = new EventEmitter();
+    toolbarOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    overflowOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    toolbarButtonElement;
+    overflowButtonElement;
+    _showText = 'both';
+    _text;
+    constructor(element, zone) {
+        super();
+        this.element = element;
+        this.zone = zone;
+        this.isBuiltInTool = true;
+    }
     ngOnInit() {
         this.setTextDisplayMode();
     }
@@ -230,9 +252,8 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
             this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
         });
     }
-}
-ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
+    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 ɵ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: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
@@ -286,7 +307,8 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             </div>
         </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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarButton',
@@ -389,12 +411,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], selectedChange: [{
                 type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], toolbarButtonElement: [{
                 type: ViewChild,
                 args: ['toolbarButton', { read: ElementRef }]

package/{esm2020 → esm2022}/tools/toolbar-buttongroup.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, TemplateRef, forwardRef, ViewChild, ContentChildren, QueryList, Input, ViewChildren } from '@angular/core';
+import { Component, forwardRef, ViewChild, ContentChildren, QueryList, Input, ViewChildren } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { ToolBarButtonComponent } from './toolbar-button.component';
@@ -16,24 +16,33 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Represents the Kendo UI Toolbar ButtonGroup for Angular.
  */
 export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
-    constructor(localization) {
-        super();
-        this.localization = localization;
-        /**
-         * @hidden
-         *
-         * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
-         */
-        this.fillMode = 'solid';
-        /**
-         * By default, the selection mode of the ButtonGroup is set to `multiple`.
-         */
-        this.selection = 'multiple';
-        this.focusedIndex = -1;
-        this.getNextKey = getNextKey(this.localization.rtl);
-        this.getPrevKey = getPrevKey(this.localization.rtl);
-        this.isBuiltInTool = true;
-    }
+    localization;
+    /**
+     * 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
+     * `true` and leave the `disabled` attribute of the ButtonGroup undefined. If you define the `disabled`
+     * attribute of the ButtonGroup, it will take precedence over the `disabled` attributes of the underlying
+     * buttons and they will be ignored.
+     */
+    disabled;
+    /**
+     * @hidden
+     *
+     * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
+     */
+    fillMode = 'solid';
+    /**
+     * By default, the selection mode of the ButtonGroup is set to `multiple`.
+     */
+    selection = 'multiple';
+    /**
+     * Sets the width of the ButtonGroup.
+     *
+     * If the width of the ButtonGroup is set:
+     * - The buttons resize automatically to fill the full width of the group wrapper.
+     * - The buttons acquire the same width.
+     */
+    width;
     /**
      * @hidden
      */
@@ -42,6 +51,9 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
             this.buttonComponents.forEach(b => b.fillMode = look === 'default' ? 'solid' : look);
         }
     }
+    toolbarButtonGroup;
+    overflowListItems;
+    buttonComponents;
     get buttonElements() {
         if (this.overflows) {
             return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))].map(el => el.nativeElement);
@@ -52,6 +64,16 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 .map(b => b.element);
         }
     }
+    focusedIndex = -1;
+    getNextKey;
+    getPrevKey;
+    constructor(localization) {
+        super();
+        this.localization = localization;
+        this.getNextKey = getNextKey(this.localization.rtl);
+        this.getPrevKey = getPrevKey(this.localization.rtl);
+        this.isBuiltInTool = true;
+    }
     /**
      * @hidden
      */
@@ -148,9 +170,8 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
             this.buttonElements[index]?.focus();
         }
     }
-}
-ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+    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 ɵ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: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
                 class="k-toolbar-button-group k-button-group-{{fillMode}}"
@@ -213,7 +234,8 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarButtonGroup',
@@ -295,12 +317,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], look: [{
                 type: Input
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], toolbarButtonGroup: [{
                 type: ViewChild,
                 args: ['toolbarButtonGroup', { static: false }]

package/{esm2020 → esm2022}/tools/toolbar-dropdownbutton.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, TemplateRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode, Renderer2 } from '@angular/core';
+import { Component, ElementRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode, Renderer2 } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
@@ -13,90 +13,17 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
-    constructor(renderer) {
-        super();
-        this.renderer = renderer;
-        /**
-         * Allows showing the default arrow icon or providing alternative one instead.
-         * @default false
-         */
-        this.arrowIcon = false;
-        /**
-         * Sets the `title` attribute of the underlying button element.
-         * @default ''
-         */
-        this.title = '';
-        /**
-         * Defines the location of the button icon that will be displayed.
-         */
-        this.showIcon = 'both';
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` —Applies coloring based on the `base` theme color. (default)
-         * * `primary` —Applies coloring based on the `primary` theme color.
-         * * `secondary`—Applies coloring based on the `secondary` theme color.
-         * * `tertiary`— Applies coloring based on the `tertiary` theme color.
-         * * `info`—Applies coloring based on the `info` theme color.
-         * * `success`— Applies coloring based on the `success` theme color.
-         * * `warning`— Applies coloring based on the `warning` theme color.
-         * * `error`— Applies coloring based on the `error` theme color.
-         * * `dark`— Applies coloring based on the `dark` theme color.
-         * * `light`— Applies coloring based on the `light` theme color.
-         * * `inverse`— Applies coloring based on the `inverse` theme color.
-         * * `null` —Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Fires each time the user clicks a DropDownButton item.
-         * The event data contains the data item that is bound to the clicked list item.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.focusedIndex = -1;
-        this._showText = 'both';
-        this.getNextKey = getNextKey();
-        this.getPrevKey = getPrevKey();
-        this.isBuiltInTool = true;
-    }
+    renderer;
+    /**
+     * Allows showing the default arrow icon or providing alternative one instead.
+     * @default false
+     */
+    arrowIcon = false;
+    /**
+     * Sets the `title` attribute of the underlying button element.
+     * @default ''
+     */
+    title = '';
     // showText and showIcon showIcon should be declared first
     /**
      * Defines the location of the button text that will be displayed.
@@ -108,6 +35,10 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     get showText() {
         return this._showText;
     }
+    /**
+     * Defines the location of the button icon that will be displayed.
+     */
+    showIcon = 'both';
     /**
      * Sets the text of the DropDownButton
      * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons).
@@ -183,6 +114,51 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     set primary(primary) {
         this.themeColor = primary ? 'primary' : 'base';
     }
+    /**
+     * The fillMode property specifies the background and border styles of the Button.
+     *
+     * The available values are:
+     * * `solid` (default)
+     * * `flat`
+     * * `outline`
+     * * `link`
+     * * `null`
+     */
+    fillMode = 'solid';
+    /**
+     * The Button allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` —Applies coloring based on the `base` theme color. (default)
+     * * `primary` —Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     * * `null` —Removes the default CSS class (no class would be rendered).
+     */
+    themeColor = 'base';
+    /**
+     * The CSS classes that will be rendered on the main button.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    buttonClass;
+    /**
+     * Sets the data item field that represents the item text.
+     * If the data contains only primitive values, do not define it.
+     */
+    textField;
+    /**
+     * Sets the disabled state of the DropDownButton.
+     */
+    disabled;
     /**
      * Sets the data of the DropDownButton
      * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons)).
@@ -198,6 +174,38 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    /**
+     * Fires each time the user clicks a DropDownButton item.
+     * The event data contains the data item that is bound to the clicked list item.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    dropdownButton;
+    dropDownButtonComponent;
+    overflowListItems;
+    toolbarOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    overflowOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
     ngOnInit() {
         this.setTextDisplayMode();
     }
@@ -207,6 +215,21 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
+    toolbarDropDownButton;
+    _data;
+    _popupSettings = { animate: true, popupClass: '' };
+    focusedIndex = -1;
+    _showText = 'both';
+    _text;
+    getNextKey;
+    getPrevKey;
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.getNextKey = getNextKey();
+        this.getPrevKey = getPrevKey();
+        this.isBuiltInTool = true;
+    }
     /**
      * @hidden
      */
@@ -279,9 +302,8 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
-}
-ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], 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: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
@@ -347,7 +369,8 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </ng-container>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarDropDownButton',
@@ -464,12 +487,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { read: ElementRef, static: true }]