@progress/kendo-angular-toolbar 17.0.0-develop.9 → 17.0.1-develop.1

package/{esm2020 → esm2022}/toolbar.module.mjs

@@ -31,11 +31,11 @@ import * as i9 from "./tools/toolbar-tool.component";
  * - `ToolBarSeparatorComponent`—The Separator Tool component class.
  */
 export class ToolBarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, imports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent], exports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ToolBarComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i8.ToolBarSplitButtonComponent] });
 }
-ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, imports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent], exports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent, i9.ToolBarToolComponent] });
-ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ToolBarComponent, i2.ToolbarCustomMessagesComponent, i3.ToolBarButtonComponent, i4.ToolBarButtonGroupComponent, i5.ToolBarDropDownButtonComponent, i6.ToolBarSeparatorComponent, i7.ToolBarSpacerComponent, i8.ToolBarSplitButtonComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_TOOLBAR],

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();
     }
@@ -204,12 +226,6 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         this.getButton().tabIndex = -1;
         return false;
     }
-    /**
-     * @hidden
-     */
-    get toolbarButtonClass() {
-        return this.toggleable ? 'k-toolbar-toggle-button' : 'k-toolbar-button';
-    }
     /**
      * @hidden
      */
@@ -236,13 +252,13 @@ 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
-                [class]="toolbarButtonClass"
+                [class.k-toolbar-button]="!toggleable"
+                [class.k-toolbar-toggle-button]="toggleable"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
@@ -291,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',
@@ -301,7 +318,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
-                [class]="toolbarButtonClass"
+                [class.k-toolbar-button]="!toggleable"
+                [class.k-toolbar-toggle-button]="toggleable"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
@@ -393,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,18 +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;
-        /**
-         * 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
      */
@@ -36,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);
@@ -46,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
      */
@@ -142,12 +170,11 @@ 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", 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-solid"
+                class="k-toolbar-button-group k-button-group-{{fillMode}}"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -207,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',
@@ -216,7 +244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-solid"
+                class="k-toolbar-button-group k-button-group-{{fillMode}}"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -281,18 +309,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
                 type: Input
+            }], fillMode: [{
+                type: Input
             }], selection: [{
                 type: Input
             }], width: [{
                 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 }]