@progress/kendo-angular-toolbar 17.0.0-develop.6 → 17.0.0-develop.7

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729019952,
-    version: '17.0.0-develop.6',
+    publishDate: 1729052750,
+    version: '17.0.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/toolbar.component.mjs

@@ -580,7 +580,7 @@ export class ToolBarComponent {
     }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-solid": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
         LocalizationService,
@@ -776,6 +776,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar-solid']
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]

package/esm2020/tools/toolbar-buttongroup.component.mjs

@@ -147,7 +147,7 @@ ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.
 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: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
-                class="k-toolbar-button-group"
+                class="k-toolbar-button-group k-button-group-solid"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -216,7 +216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
-                class="k-toolbar-button-group"
+                class="k-toolbar-button-group k-button-group-solid"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"

package/esm2020/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 } from '@angular/core';
+import { Component, ElementRef, TemplateRef, 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,8 +13,9 @@ 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() {
+    constructor(renderer) {
         super();
+        this.renderer = renderer;
         /**
          * Allows showing the default arrow icon or providing alternative one instead.
          * @default false
@@ -200,6 +201,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     ngOnInit() {
         this.setTextDisplayMode();
     }
+    ngAfterViewInit() {
+        this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
+    }
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
@@ -276,12 +280,11 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         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: [], target: i0.ɵɵFactoryTarget.Component });
+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: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
-                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -354,7 +357,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
-                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -420,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input

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

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729019952,
-    version: '17.0.0-develop.6',
+    publishDate: 1729052750,
+    version: '17.0.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1280,7 +1280,7 @@ class ToolBarComponent {
     }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-solid": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
         LocalizationService,
@@ -1476,6 +1476,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar-solid']
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]
@@ -2026,7 +2029,7 @@ ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.
 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: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
-                class="k-toolbar-button-group"
+                class="k-toolbar-button-group k-button-group-solid"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -2095,7 +2098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
-                class="k-toolbar-button-group"
+                class="k-toolbar-button-group k-button-group-solid"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -2187,8 +2190,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
-    constructor() {
+    constructor(renderer) {
         super();
+        this.renderer = renderer;
         /**
          * Allows showing the default arrow icon or providing alternative one instead.
          * @default false
@@ -2374,6 +2378,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     ngOnInit() {
         this.setTextDisplayMode();
     }
+    ngAfterViewInit() {
+        this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
+    }
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
@@ -2450,12 +2457,11 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         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: [], target: i0.ɵɵFactoryTarget.Component });
+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: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
-                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -2528,7 +2534,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
-                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -2594,7 +2599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input

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

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729019952,
-    version: '17.0.0-develop.6',
+    publishDate: 1729052750,
+    version: '17.0.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1277,7 +1277,7 @@ class ToolBarComponent {
     }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "class.k-toolbar-solid": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
         LocalizationService,
@@ -1473,6 +1473,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar-solid']
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]
@@ -2022,7 +2025,7 @@ ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.
 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: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
-                class="k-toolbar-button-group"
+                class="k-toolbar-button-group k-button-group-solid"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -2091,7 +2094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
-                class="k-toolbar-button-group"
+                class="k-toolbar-button-group k-button-group-solid"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -2183,8 +2186,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
-    constructor() {
+    constructor(renderer) {
         super();
+        this.renderer = renderer;
         /**
          * Allows showing the default arrow icon or providing alternative one instead.
          * @default false
@@ -2370,6 +2374,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     ngOnInit() {
         this.setTextDisplayMode();
     }
+    ngAfterViewInit() {
+        this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
+    }
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
@@ -2446,12 +2453,11 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         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: [], target: i0.ɵɵFactoryTarget.Component });
+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: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
-                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -2524,7 +2530,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
-                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -2590,7 +2595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "17.0.0-develop.6",
+  "version": "17.0.0-develop.7",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -29,16 +29,16 @@
     "@angular/core": "15 - 18",
     "@angular/platform-browser": "15 - 18",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "17.0.0-develop.6",
-    "@progress/kendo-angular-common": "17.0.0-develop.6",
-    "@progress/kendo-angular-l10n": "17.0.0-develop.6",
-    "@progress/kendo-angular-icons": "17.0.0-develop.6",
-    "@progress/kendo-angular-popup": "17.0.0-develop.6",
+    "@progress/kendo-angular-buttons": "17.0.0-develop.7",
+    "@progress/kendo-angular-common": "17.0.0-develop.7",
+    "@progress/kendo-angular-l10n": "17.0.0-develop.7",
+    "@progress/kendo-angular-icons": "17.0.0-develop.7",
+    "@progress/kendo-angular-popup": "17.0.0-develop.7",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.0.0-develop.6"
+    "@progress/kendo-angular-schematics": "17.0.0-develop.7"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2015/progress-kendo-angular-toolbar.mjs",

package/tools/toolbar-dropdownbutton.component.d.ts

@@ -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 { ElementRef, TemplateRef, EventEmitter, OnInit, QueryList } from '@angular/core';
+import { ElementRef, TemplateRef, EventEmitter, OnInit, QueryList, Renderer2 } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { PopupSettings } from '../popup-settings';
 import { ArrowIconSettings, ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
@@ -15,6 +15,7 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent implements OnInit {
+    private renderer;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
      * @default false
@@ -150,6 +151,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     toolbarOptions: ToolOptions;
     overflowOptions: ToolOptions;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     private get overflowButtons();
     private toolbarDropDownButton;
     private _data;
@@ -159,7 +161,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     private _text;
     private getNextKey;
     private getPrevKey;
-    constructor();
+    constructor(renderer: Renderer2);
     /**
      * @hidden
      */