@progress/kendo-angular-toolbar 11.0.0-develop.99 → 11.0.0

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

@@ -2,14 +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 i2 from "@progress/kendo-angular-icons";
 import * as i3 from "@angular/common";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
@@ -71,12 +70,14 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._popupSettings = { animate: true, popupClass: '' };
@@ -164,13 +165,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 +210,26 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             return !isUnmodified(this.focusedIndex);
         }
     }
+    /**
+     * @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,12 +241,14 @@ 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"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
@@ -243,31 +266,45 @@ 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}"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    ></kendo-icon-wrapper>
+                    <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"
+                >
+                    <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: 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"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], 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.11", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -278,8 +315,10 @@ 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"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
@@ -297,29 +336,43 @@ 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}"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    ></kendo-icon-wrapper>
+                    <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"
+                >
+                    <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>
     `
                 }]
@@ -371,10 +424,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: [{

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

@@ -2,14 +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, TemplateRef, forwardRef, ViewChild, Input, ElementRef, Output, EventEmitter } from '@angular/core';
+import { Component, TemplateRef, forwardRef, ViewChild, Input, ElementRef, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core';
 import { SplitButtonComponent } from '@progress/kendo-angular-buttons';
 import { ToolBarToolComponent } from './toolbar-tool.component';
-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 i2 from "@progress/kendo-angular-icons";
 import * as i3 from "@angular/common";
 /**
  * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
@@ -83,12 +82,14 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._popupSettings = { animate: true, popupClass: '' };
@@ -173,7 +174,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     get overflowButtons() {
-        return [this.overflowSplitButton, ...this.overflowSplitButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
+        return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
     /**
      * @hidden
@@ -223,6 +224,26 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             return !isUnmodified(this.focusedIndex);
         }
     }
+    /**
+     * @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' || ev.type === 'click') {
             this.overflowButtons[index].nativeElement.focus();
@@ -234,14 +255,16 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowSplitButton", first: true, predicate: ["overflowSplitButton"], descendants: true, read: ElementRef }, { propertyName: "overflowSplitButtonButtonList", first: true, predicate: ["overflowSplitButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
+                class="k-toolbar-split-button"
                 [data]="data"
                 [text]="toolbarOptions.text"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
@@ -260,36 +283,49 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             </kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                #overflowSplitButton
-                type="button"
+            <div #overflowMainButton
                 tabindex="-1"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                kendoButton
-                class="k-overflow-button"
-                [disabled]="disabled"
-                [icon]="overflowOptions.icon"
-                [iconClass]="overflowOptions.iconClass"
-                [imageUrl]="overflowOptions.imageUrl"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [ngClass]="buttonClass"
-                (click)="onMainButtonClick($event)"
-            >
-                {{ overflowOptions.text }}
-            </button>
-            <kendo-toolbar-buttonlist
-                #overflowSplitButtonButtonList
-                [data]="data"
-                [disabled]="disabled"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [textField]="textField"
-                (itemClick)="itemClick.emit($event)"
-                (click)="onButtonListClick($event)"
-            >
-            </kendo-toolbar-buttonlist>
+                (click)="onMainButtonClick($event)">
+                <span
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    >
+                    </kendo-icon-wrapper>
+                    <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"
+                >
+                    <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.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: 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.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"], 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.11", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -300,10 +336,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
+                class="k-toolbar-split-button"
                 [data]="data"
                 [text]="toolbarOptions.text"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
@@ -322,34 +360,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                #overflowSplitButton
-                type="button"
+            <div #overflowMainButton
                 tabindex="-1"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                kendoButton
-                class="k-overflow-button"
-                [disabled]="disabled"
-                [icon]="overflowOptions.icon"
-                [iconClass]="overflowOptions.iconClass"
-                [imageUrl]="overflowOptions.imageUrl"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [ngClass]="buttonClass"
-                (click)="onMainButtonClick($event)"
-            >
-                {{ overflowOptions.text }}
-            </button>
-            <kendo-toolbar-buttonlist
-                #overflowSplitButtonButtonList
-                [data]="data"
-                [disabled]="disabled"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [textField]="textField"
-                (itemClick)="itemClick.emit($event)"
-                (click)="onButtonListClick($event)"
-            >
-            </kendo-toolbar-buttonlist>
+                (click)="onMainButtonClick($event)">
+                <span
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    >
+                    </kendo-icon-wrapper>
+                    <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"
+                >
+                    <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>
     `
                 }]
@@ -402,10 +453,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toolbarSplitButton: [{
                 type: ViewChild,
                 args: ['toolbarSplitButton', { static: false }]
-            }], overflowSplitButton: [{
-                type: ViewChild,
-                args: ['overflowSplitButton', { read: ElementRef, static: false }]
-            }], overflowSplitButtonButtonList: [{
+            }], overflowMainButton: [{
                 type: ViewChild,
-                args: ['overflowSplitButtonButtonList', { static: false }]
+                args: ['overflowMainButton', { read: ElementRef }]
+            }], overflowListItems: [{
+                type: ViewChildren,
+                args: ['listItem']
             }] } });

package/esm2020/util.mjs

@@ -185,3 +185,27 @@ export const getValueForLocation = (property, displayMode, overflows) => {
             return property;
     }
 };
+/**
+ * @hidden
+ */
+export const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+            };
+        default:
+            break;
+    }
+};