@progress/kendo-angular-toolbar 11.0.0-develop.102 → 11.0.0-develop.104

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

@@ -2,12 +2,12 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, TemplateRef, forwardRef, ViewChild, ContentChildren, QueryList, Input } from '@angular/core';
+import { Component, TemplateRef, forwardRef, ViewChild, ContentChildren, QueryList, Input, ViewChildren } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { ToolBarButtonComponent } from './toolbar-button.component';
-import { ButtonGroupComponent } from '@progress/kendo-angular-buttons';
 import { makePeeker, getIndexOfFocused, seekFocusedIndex, getNextKey, getPrevKey, areEqual } from '../util';
+import { ButtonGroupComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-buttons";
@@ -36,9 +36,14 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     get buttonElements() {
-        return this.getButtonGroup()
-            .buttons.filter(b => !b.isDisabled)
-            .map(b => b.element);
+        if (this.overflows) {
+            return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))].map(el => el.nativeElement);
+        }
+        else {
+            return this.toolbarButtonGroup
+                .buttons.filter(b => !b.isDisabled)
+                .map(b => b.element);
+        }
     }
     /**
      * @hidden
@@ -60,6 +65,20 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         button.selected = state;
         button.selectedChange.emit(state);
     }
+    /**
+     * @hidden
+     */
+    overflowSelectedChangeHandler(button) {
+        if (this.selection === 'multiple') {
+            button.selected = !button.selected;
+        }
+        else {
+            const filteredButtons = this.buttonComponents.filter(b => b !== button);
+            filteredButtons.forEach(b => b.selected = false);
+            button.selected = !button.selected;
+        }
+        button.selectedChange.emit(button.selected);
+    }
     /**
      * @hidden
      */
@@ -94,8 +113,24 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         this.focusButton(this.focusedIndex, ev);
         return !isUnmodified(this.focusedIndex);
     }
-    getButtonGroup() {
-        return this.overflows ? this.overflowButtonGroup : this.toolbarButtonGroup;
+    /**
+     * @hidden
+     */
+    handleClick(ev, button) {
+        button.click.emit(ev);
+        this.onButtonClick(ev);
+        this.overflowSelectedChangeHandler(button);
+    }
+    /**
+     * @hidden
+     */
+    getIconClasses(button) {
+        if (button.overflowOptions.icon) {
+            return `k-icon k-i-${button.overflowOptions.icon}`;
+        }
+        else if (button.overflowOptions.iconClass) {
+            return button.overflowOptions.iconClass;
+        }
     }
     focusButton(index, ev) {
         // Guard against focusing twice on mousedown.
@@ -105,9 +140,10 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     }
 }
 ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonGroupComponent, 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: "overflowButtonGroup", first: true, predicate: ["overflowButtonGroup"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonGroupComponent, 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"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -139,37 +175,25 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             </kendo-buttongroup>
         </ng-template>
         <ng-template #popupTemplate>
-            <kendo-buttongroup
-                #overflowButtonGroup
-                class="k-overflow-button"
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-            >
-                <span
-                    kendoButton
-                    class="k-overflow-button"
-                    *ngFor="let button of buttonComponents"
+            <ng-container *ngFor="let button of buttonComponents">
+                <div #listItem
+                    tabindex="-1"
+                    role="menuitem"
+                    class="k-item k-menu-item"
+                    [class.k-disabled]="disabled || button.disabled"
                     [ngStyle]="button.style"
                     [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.overflowOptions.icon"
-                    [iconClass]="button.overflowOptions.iconClass"
-                    [imageUrl]="button.overflowOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
-                >
-                    {{ button.overflowOptions.text }}
-                </span>
-            </kendo-buttongroup>
+                    (click)="handleClick($event, button)">
+                    <span
+                        class="k-link k-menu-link"
+                        [class.k-selected]="button.selected">
+                        <span *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass" [ngClass]="getIconClasses(button)"></span>
+                        <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
+                    </span>
+                </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.Button, 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"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i2.Button, 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"] }, { 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.11", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -179,6 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
+                class="k-toolbar-button-group"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -210,35 +235,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-buttongroup>
         </ng-template>
         <ng-template #popupTemplate>
-            <kendo-buttongroup
-                #overflowButtonGroup
-                class="k-overflow-button"
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-            >
-                <span
-                    kendoButton
-                    class="k-overflow-button"
-                    *ngFor="let button of buttonComponents"
+            <ng-container *ngFor="let button of buttonComponents">
+                <div #listItem
+                    tabindex="-1"
+                    role="menuitem"
+                    class="k-item k-menu-item"
+                    [class.k-disabled]="disabled || button.disabled"
                     [ngStyle]="button.style"
                     [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.overflowOptions.icon"
-                    [iconClass]="button.overflowOptions.iconClass"
-                    [imageUrl]="button.overflowOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
-                >
-                    {{ button.overflowOptions.text }}
-                </span>
-            </kendo-buttongroup>
+                    (click)="handleClick($event, button)">
+                    <span
+                        class="k-link k-menu-link"
+                        [class.k-selected]="button.selected">
+                        <span *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass" [ngClass]="getIconClasses(button)"></span>
+                        <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
+                    </span>
+                </div>
+            </ng-container>
         </ng-template>
     `
                 }]
@@ -256,13 +269,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { static: true }]
-            }], buttonComponents: [{
-                type: ContentChildren,
-                args: [forwardRef(() => ToolBarButtonComponent)]
             }], toolbarButtonGroup: [{
                 type: ViewChild,
                 args: ['toolbarButtonGroup', { static: false }]
-            }], overflowButtonGroup: [{
-                type: ViewChild,
-                args: ['overflowButtonGroup', { static: false }]
+            }], overflowListItems: [{
+                type: ViewChildren,
+                args: ['listItem']
+            }], buttonComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => ToolBarButtonComponent)]
             }] } });

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

@@ -2,15 +2,13 @@
 * Copyright © 2023 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 } from '@angular/core';
+import { Component, ElementRef, TemplateRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
-import { ToolBarButtonListComponent } from './toolbar-buttonlist.component';
 import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
-import * as i2 from "./toolbar-buttonlist.component";
-import * as i3 from "@angular/common";
+import * as i2 from "@angular/common";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
@@ -164,13 +162,13 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     get overflowButtons() {
-        return [...this.overflowDropDownButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
+        return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
     /**
      * @hidden
      */
     onButtonListClick(ev) {
-        this.focusedIndex = this.overflowDropDownButtonButtonList.buttons
+        this.focusedIndex = this.overflowListItems
             .toArray()
             .findIndex(b => b.nativeElement.contains(ev.target));
     }
@@ -209,6 +207,47 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             return !isUnmodified(this.focusedIndex);
         }
     }
+    /**
+     * @hidden
+     */
+    getIconClasses(item) {
+        if (item) {
+            if (item.icon) {
+                return `k-icon k-i-${item.icon}`;
+            }
+            else if (item.iconClass) {
+                return item.iconClass;
+            }
+        }
+        else {
+            if (this.overflowOptions.icon) {
+                return `k-icon k-i-${this.overflowOptions.icon}`;
+            }
+            else if (this.overflowOptions.iconClass) {
+                return this.overflowOptions.iconClass;
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    getText(dataItem) {
+        if (dataItem) {
+            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
+        }
+        return undefined;
+    }
+    /**
+     * @hidden
+     */
+    handleClick(ev, item, index) {
+        this.onButtonListClick(ev);
+        const dataItem = this.data[index];
+        if (item.click) {
+            item.click(dataItem);
+        }
+        this.itemClick.emit(dataItem);
+    }
     focusButton(index, ev) {
         if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
             this.overflowButtons[index].nativeElement.focus();
@@ -220,10 +259,11 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", 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: "overflowDropDownButtonButtonList", first: true, predicate: ["overflowDropDownButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", 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"
                 [imageUrl]="toolbarOptions.imageUrl"
@@ -243,31 +283,33 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </kendo-dropdownbutton>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                type="button"
+            <div
                 tabindex="-1"
-                kendoButton
-                class="k-overflow-button"
-                [disabled]="true"
-                [icon]="overflowOptions.icon"
-                [iconClass]="overflowOptions.iconClass"
-                [imageUrl]="overflowOptions.imageUrl"
-                [ngClass]="buttonClass"
-                (click)="itemClick.emit($event)"
-            >
-                {{ overflowOptions.text }}
-            </button>
-            <kendo-toolbar-buttonlist
-                #overflowDropDownButtonButtonList
-                [data]="data"
-                [disabled]="disabled"
-                [textField]="textField"
-                (itemClick)="itemClick.emit($event)"
-                (click)="onButtonListClick($event)"
-            >
-            </kendo-toolbar-buttonlist>
+                role="menuitem"
+                class="k-item k-menu-item k-disabled"
+                [ngClass]="buttonClass">
+                <span
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}">
+                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
+                </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">
+                    <span *ngIf="item.icon || item.iconClass" [ngClass]="getIconClasses(item)"></span>
+                    <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: i1.Button, 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.ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, 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"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -278,6 +320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
+                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [imageUrl]="toolbarOptions.imageUrl"
@@ -297,29 +340,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-dropdownbutton>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                type="button"
+            <div
                 tabindex="-1"
-                kendoButton
-                class="k-overflow-button"
-                [disabled]="true"
-                [icon]="overflowOptions.icon"
-                [iconClass]="overflowOptions.iconClass"
-                [imageUrl]="overflowOptions.imageUrl"
-                [ngClass]="buttonClass"
-                (click)="itemClick.emit($event)"
-            >
-                {{ overflowOptions.text }}
-            </button>
-            <kendo-toolbar-buttonlist
-                #overflowDropDownButtonButtonList
-                [data]="data"
-                [disabled]="disabled"
-                [textField]="textField"
-                (itemClick)="itemClick.emit($event)"
-                (click)="onButtonListClick($event)"
-            >
-            </kendo-toolbar-buttonlist>
+                role="menuitem"
+                class="k-item k-menu-item k-disabled"
+                [ngClass]="buttonClass">
+                <span
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}">
+                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
+                </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">
+                    <span *ngIf="item.icon || item.iconClass" [ngClass]="getIconClasses(item)"></span>
+                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                </span>
+            </div>
+            </ng-container>
         </ng-template>
     `
                 }]
@@ -371,10 +416,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], dropDownButtonComponent: [{
                 type: ViewChild,
                 args: [DropDownButtonComponent, { static: false }]
+            }], overflowListItems: [{
+                type: ViewChildren,
+                args: ['listItem']
             }], toolbarDropDownButton: [{
                 type: ViewChild,
                 args: ['toolbarDropDownButton', { static: false }]
-            }], overflowDropDownButtonButtonList: [{
-                type: ViewChild,
-                args: ['overflowDropDownButtonButtonList', { static: false }]
             }] } });

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

@@ -43,6 +43,12 @@ ToolBarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         <ng-template #toolbarTemplate>
             <div class="k-separator"></div>
         </ng-template>
+
+        <ng-template #popupTemplate>
+            <div class="k-item k-menu-item">
+                <div class="k-separator k-separator-horizontal"></div>
+            </div>
+        </ng-template>
     `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
             type: Component,
@@ -54,6 +60,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-template #toolbarTemplate>
             <div class="k-separator"></div>
         </ng-template>
+
+        <ng-template #popupTemplate>
+            <div class="k-item k-menu-item">
+                <div class="k-separator k-separator-horizontal"></div>
+            </div>
+        </ng-template>
     `
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{