@progress/kendo-angular-toolbar 13.6.0-develop.5 → 13.6.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: 1695831953,
-    version: '13.6.0-develop.5',
+    publishDate: 1695886951,
+    version: '13.6.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/toolbar.component.mjs

@@ -16,7 +16,7 @@ import { innerWidth, closest, isPresent, getStylingClasses, SIZES } from './util
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from './common/preventable-event';
 import { Subscription, fromEvent, Subject, merge } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { take, takeUntil } from 'rxjs/operators';
 import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { moreVerticalIcon } from '@progress/kendo-svg-icons';
@@ -254,6 +254,7 @@ export class ToolBarComponent {
     }
     ngOnInit() {
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => this.subscriptions.add(fromEvent(document, 'click')
                 .pipe(filter(() => !!this.popupRef), filter((ev) => !this.popupRef.popup.instance.container.nativeElement.contains(ev.target)), filter((ev) => !this.overflowButton.nativeElement.contains(ev.target)))
@@ -623,7 +624,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </ng-template>
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: i5.ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i6.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i8.LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i5.ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i6.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i8.LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -228,7 +228,7 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selectedChange.emit(state);
     }
     getButton() {
-        return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
+        return (this.overflowButtonElement || this.toolbarButtonElement).nativeElement;
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
@@ -290,7 +290,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -402,5 +402,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['toolbarButton', { read: ElementRef }]
             }], overflowButtonElement: [{
                 type: ViewChild,
-                args: ['overflowButton', { read: ElementRef, static: false }]
+                args: ['overflowButton', { read: ElementRef }]
             }] } });

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

@@ -205,7 +205,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -51,7 +51,7 @@ ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         >
             {{ getText(item) }}
         </button>
-    `, isInline: true, components: [{ type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -16,6 +16,16 @@ import * as i3 from "@angular/common";
 export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
+        /**
+         * 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.
          */
@@ -268,7 +278,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { 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: `
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolBarDropDownButtonComponent, 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
@@ -277,10 +287,12 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
+                [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [data]="data"
+                [buttonAttributes]="{'title': title}"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
                 [fillMode]="fillMode"
@@ -311,27 +323,28 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 </span>
             </div>
             <ng-container *ngFor="let item of data; let i = index">
-            <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
-            </div>
+                <div #listItem
+                    tabindex="-1"
+                    role="menuitem"
+                    class="k-item k-menu-item"
+                    [class.k-disabled]="disabled || item.disabled"
+                    (click)="handleClick($event, item, i)">
+                    <span
+                        class="k-link k-menu-link"
+                        [ngClass]="item.cssClass"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="item.icon || item.iconClass || item.svgIcon"
+                            [name]="item.icon"
+                            [customFontClass]="item.iconClass"
+                            [svgIcon]="item.svgIcon"
+                        ></kendo-icon-wrapper>
+                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                    </span>
+                </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -347,10 +360,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
+                [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [data]="data"
+                [buttonAttributes]="{'title': title}"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
                 [fillMode]="fillMode"
@@ -381,29 +396,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </span>
             </div>
             <ng-container *ngFor="let item of data; let i = index">
-            <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
-            </div>
+                <div #listItem
+                    tabindex="-1"
+                    role="menuitem"
+                    class="k-item k-menu-item"
+                    [class.k-disabled]="disabled || item.disabled"
+                    (click)="handleClick($event, item, i)">
+                    <span
+                        class="k-link k-menu-link"
+                        [ngClass]="item.cssClass"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="item.icon || item.iconClass || item.svgIcon"
+                            [name]="item.icon"
+                            [customFontClass]="item.iconClass"
+                            [svgIcon]="item.svgIcon"
+                        ></kendo-icon-wrapper>
+                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                    </span>
+                </div>
             </ng-container>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input

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

@@ -357,7 +357,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695831953,
-    version: '13.6.0-develop.5',
+    publishDate: 1695886951,
+    version: '13.6.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -939,6 +939,7 @@ class ToolBarComponent {
     }
     ngOnInit() {
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => this.subscriptions.add(fromEvent(document, 'click')
                 .pipe(filter(() => !!this.popupRef), filter((ev) => !this.popupRef.popup.instance.container.nativeElement.contains(ev.target)), filter((ev) => !this.overflowButton.nativeElement.contains(ev.target)))
@@ -1309,7 +1310,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </ng-template>
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1658,7 +1659,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selectedChange.emit(state);
     }
     getButton() {
-        return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
+        return (this.overflowButtonElement || this.toolbarButtonElement).nativeElement;
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
@@ -1720,7 +1721,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1832,7 +1833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['toolbarButton', { read: ElementRef }]
             }], overflowButtonElement: [{
                 type: ViewChild,
-                args: ['overflowButton', { read: ElementRef, static: false }]
+                args: ['overflowButton', { read: ElementRef }]
             }] } });
 
 /**
@@ -2028,7 +2029,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -2129,6 +2130,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
+        /**
+         * 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.
          */
@@ -2381,7 +2392,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { 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: `
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolBarDropDownButtonComponent, 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
@@ -2390,10 +2401,12 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
+                [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [data]="data"
+                [buttonAttributes]="{'title': title}"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
                 [fillMode]="fillMode"
@@ -2424,27 +2437,28 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 </span>
             </div>
             <ng-container *ngFor="let item of data; let i = index">
-            <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
-            </div>
+                <div #listItem
+                    tabindex="-1"
+                    role="menuitem"
+                    class="k-item k-menu-item"
+                    [class.k-disabled]="disabled || item.disabled"
+                    (click)="handleClick($event, item, i)">
+                    <span
+                        class="k-link k-menu-link"
+                        [ngClass]="item.cssClass"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="item.icon || item.iconClass || item.svgIcon"
+                            [name]="item.icon"
+                            [customFontClass]="item.iconClass"
+                            [svgIcon]="item.svgIcon"
+                        ></kendo-icon-wrapper>
+                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                    </span>
+                </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2460,10 +2474,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
+                [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [data]="data"
+                [buttonAttributes]="{'title': title}"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
                 [fillMode]="fillMode"
@@ -2494,29 +2510,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </span>
             </div>
             <ng-container *ngFor="let item of data; let i = index">
-            <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
-            </div>
+                <div #listItem
+                    tabindex="-1"
+                    role="menuitem"
+                    class="k-item k-menu-item"
+                    [class.k-disabled]="disabled || item.disabled"
+                    (click)="handleClick($event, item, i)">
+                    <span
+                        class="k-link k-menu-link"
+                        [ngClass]="item.cssClass"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="item.icon || item.iconClass || item.svgIcon"
+                            [name]="item.icon"
+                            [customFontClass]="item.iconClass"
+                            [svgIcon]="item.svgIcon"
+                        ></kendo-icon-wrapper>
+                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                    </span>
+                </div>
             </ng-container>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input
@@ -2920,7 +2941,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3234,7 +3255,7 @@ ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         >
             {{ getText(item) }}
         </button>
-    `, isInline: true, components: [{ type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1695831953,
-    version: '13.6.0-develop.5',
+    publishDate: 1695886951,
+    version: '13.6.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -939,6 +939,7 @@ class ToolBarComponent {
     }
     ngOnInit() {
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => this.subscriptions.add(fromEvent(document, 'click')
                 .pipe(filter(() => !!this.popupRef), filter((ev) => !this.popupRef.popup.instance.container.nativeElement.contains(ev.target)), filter((ev) => !this.overflowButton.nativeElement.contains(ev.target)))
@@ -1308,7 +1309,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </ng-template>
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1657,7 +1658,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.selectedChange.emit(state);
     }
     getButton() {
-        return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
+        return (this.overflowButtonElement || this.toolbarButtonElement).nativeElement;
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
@@ -1719,7 +1720,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1831,7 +1832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['toolbarButton', { read: ElementRef }]
             }], overflowButtonElement: [{
                 type: ViewChild,
-                args: ['overflowButton', { read: ElementRef, static: false }]
+                args: ['overflowButton', { read: ElementRef }]
             }] } });
 
 /**
@@ -2026,7 +2027,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -2127,6 +2128,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
+        /**
+         * 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.
          */
@@ -2379,7 +2390,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { 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: `
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolBarDropDownButtonComponent, 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
@@ -2388,10 +2399,12 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
+                [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [data]="data"
+                [buttonAttributes]="{'title': title}"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
                 [fillMode]="fillMode"
@@ -2422,27 +2435,28 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 </span>
             </div>
             <ng-container *ngFor="let item of data; let i = index">
-            <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
-            </div>
+                <div #listItem
+                    tabindex="-1"
+                    role="menuitem"
+                    class="k-item k-menu-item"
+                    [class.k-disabled]="disabled || item.disabled"
+                    (click)="handleClick($event, item, i)">
+                    <span
+                        class="k-link k-menu-link"
+                        [ngClass]="item.cssClass"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="item.icon || item.iconClass || item.svgIcon"
+                            [name]="item.icon"
+                            [customFontClass]="item.iconClass"
+                            [svgIcon]="item.svgIcon"
+                        ></kendo-icon-wrapper>
+                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                    </span>
+                </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2458,10 +2472,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
+                [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
                 [tabIndex]="-1"
                 [data]="data"
+                [buttonAttributes]="{'title': title}"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
                 [fillMode]="fillMode"
@@ -2492,29 +2508,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </span>
             </div>
             <ng-container *ngFor="let item of data; let i = index">
-            <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
-            </div>
+                <div #listItem
+                    tabindex="-1"
+                    role="menuitem"
+                    class="k-item k-menu-item"
+                    [class.k-disabled]="disabled || item.disabled"
+                    (click)="handleClick($event, item, i)">
+                    <span
+                        class="k-link k-menu-link"
+                        [ngClass]="item.cssClass"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="item.icon || item.iconClass || item.svgIcon"
+                            [name]="item.icon"
+                            [customFontClass]="item.iconClass"
+                            [svgIcon]="item.svgIcon"
+                        ></kendo-icon-wrapper>
+                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                    </span>
+                </div>
             </ng-container>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input
@@ -2918,7 +2939,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3232,7 +3253,7 @@ ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         >
             {{ getText(item) }}
         </button>
-    `, isInline: true, components: [{ type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
             type: Component,
             args: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "13.6.0-develop.5",
+  "version": "13.6.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": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "13.6.0-develop.5",
-    "@progress/kendo-angular-common": "13.6.0-develop.5",
-    "@progress/kendo-angular-l10n": "13.6.0-develop.5",
-    "@progress/kendo-angular-icons": "13.6.0-develop.5",
-    "@progress/kendo-angular-popup": "13.6.0-develop.5",
+    "@progress/kendo-angular-buttons": "13.6.0-develop.7",
+    "@progress/kendo-angular-common": "13.6.0-develop.7",
+    "@progress/kendo-angular-l10n": "13.6.0-develop.7",
+    "@progress/kendo-angular-icons": "13.6.0-develop.7",
+    "@progress/kendo-angular-popup": "13.6.0-develop.7",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.6.0-develop.5"
+    "@progress/kendo-angular-schematics": "13.6.0-develop.7"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2015/progress-kendo-angular-toolbar.mjs",

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

@@ -5,7 +5,7 @@
 import { ElementRef, TemplateRef, EventEmitter, OnInit, QueryList } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { PopupSettings } from '../popup-settings';
-import { ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
+import { ArrowIconSettings, ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { DisplayMode } from '../display-mode';
 import { ToolOptions } from '../tool-options';
 import { PreventableEvent } from '@progress/kendo-angular-buttons';
@@ -15,6 +15,16 @@ 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 {
+    /**
+     * Allows showing the default arrow icon or providing alternative one instead.
+     * @default false
+     */
+    arrowIcon: boolean | ArrowIconSettings;
+    /**
+     * Sets the `title` attribute of the underlying button element.
+     * @default ''
+     */
+    title: string;
     /**
      * Defines the location of the button text that will be displayed.
      */
@@ -177,5 +187,5 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     private focusButton;
     private setTextDisplayMode;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarDropDownButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarDropDownButtonComponent, "kendo-toolbar-dropdownbutton", ["kendoToolBarDropDownButton"], { "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"; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarDropDownButtonComponent, "kendo-toolbar-dropdownbutton", ["kendoToolBarDropDownButton"], { "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"; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never>;
 }