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

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

@@ -3,20 +3,23 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, ElementRef, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ElementRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, isDevMode, NgModule } from '@angular/core';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-import * as i6 from '@progress/kendo-angular-common';
+import * as i7 from '@progress/kendo-angular-common';
 import { Keys, guid, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
+import { moreVerticalIcon } from '@progress/kendo-svg-icons';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@progress/kendo-angular-buttons';
 import { DropDownButtonComponent, ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i2$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 
 /**
  * @hidden
@@ -25,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673466837,
-    version: '',
+    publishDate: 1674032337,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -229,6 +232,30 @@ const getValueForLocation = (property, displayMode, overflows) => {
             return property;
     }
 };
+/**
+ * @hidden
+ */
+const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+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;
+    }
+};
 
 /**
  * @hidden
@@ -462,11 +489,6 @@ class PreventableEvent {
     }
 }
 
-/**
- * @hidden
- */
-const defaultPopupWidth = '150px';
-
 /**
  * @hidden
  */
@@ -522,6 +544,7 @@ class ToolBarRendererComponent {
         this.rendererService = rendererService;
         this.refreshService = refreshService;
         this.rendererClick = new EventEmitter();
+        this.hostClass = true;
         this.rendererService.element = element;
         this.rendererService.renderer = this;
         this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
@@ -603,7 +626,7 @@ class ToolBarRendererComponent {
     }
 }
 ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: RendererService }, { token: RefreshService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-spacer": "this.spacerClass" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
+ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-spacer": "this.spacerClass", "class.k-toolbar-renderer": "this.hostClass" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
         <ng-container *ngIf="location === 'toolbar'">
             <ng-template [ngTemplateOutlet]="template"></ng-template>
         </ng-container>
@@ -637,6 +660,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], spacerClass: [{
                 type: HostBinding,
                 args: ['class.k-spacer']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-renderer']
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -688,6 +714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+const DEFAULT_SIZE = 'medium';
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
     anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
@@ -697,7 +724,9 @@ const getInitialPopupSettings = (isRtl) => ({
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 class ToolBarComponent {
-    constructor(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
+    constructor(localization, popupService, refreshService, navigationService, 
+    // Needs to be public as it is being accessed in the Editor component
+    element, zone, renderer, _cdr) {
         this.localization = localization;
         this.popupService = popupService;
         this.refreshService = refreshService;
@@ -722,11 +751,13 @@ class ToolBarComponent {
          * Fires when the overflow popup of the ToolBar is closed.
          */
         this.close = new EventEmitter();
-        this.hostClasses = true;
+        this.hostClass = true;
         this.cancelRenderedToolsSubscription$ = new Subject();
+        this._size = DEFAULT_SIZE;
         this.subscriptions = new Subscription();
         this.popupSubs = new Subscription();
         this.role = 'toolbar';
+        this.moreVerticalIcon = moreVerticalIcon;
         /**
          * @hidden
          */
@@ -738,6 +769,9 @@ class ToolBarComponent {
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
+    get overflowClass() {
+        return `k-button-${SIZES[this.size]}`;
+    }
     /**
      * @hidden
      */
@@ -760,6 +794,23 @@ class ToolBarComponent {
     get popupSettings() {
         return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
     }
+    /**
+     * Specifies the padding of all Toolbar elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * @hidden
      */
@@ -881,6 +932,7 @@ class ToolBarComponent {
         }
         this.navigationService.setRenderedTools(this.renderedTools.toArray());
         this.subscriptions.add(this.renderedTools.changes.subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray())));
+        this.handleClasses(this.size, 'size');
     }
     ngOnInit() {
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
@@ -951,7 +1003,7 @@ class ToolBarComponent {
                 content: this.popupTemplate,
                 appendTo: this.appendTo,
                 animate: this.popupSettings.animate,
-                popupClass: this.popupSettings.popupClass,
+                popupClass: this.normalizePopupClasses(this.popupSettings.popupClass),
                 positionMode: 'absolute'
             });
             this.setPopupContentDimensions();
@@ -968,7 +1020,10 @@ class ToolBarComponent {
             this.shrink(containerWidth, this.childrenWidth);
             this.stretch(containerWidth, this.childrenWidth);
             this.displayAnchor();
-            this.resizeSensor.acceptSize();
+            this.resizeSensor?.acceptSize();
+            if (this.popupOpen) {
+                this.toggle();
+            }
         }
     }
     /**
@@ -977,6 +1032,7 @@ class ToolBarComponent {
     onPopupOpen() {
         this.zone.runOutsideAngular(() => {
             this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
+                const currentTool = this.overflowRenderedTools.toArray().find(tool => closest(ev.target, (el) => el === tool.element.nativeElement));
                 switch (ev.keyCode) {
                     case Keys.ArrowUp:
                         this.zone.run(() => {
@@ -999,6 +1055,16 @@ class ToolBarComponent {
                             this.navigationService.resetNavigation();
                         });
                         break;
+                    case Keys.Enter:
+                    case Keys.Space:
+                        this.zone.run(() => {
+                            if (currentTool) {
+                                ev.preventDefault();
+                                ev.target.click();
+                                ev.target.focus();
+                            }
+                        });
+                        break;
                     default:
                         break;
                 }
@@ -1029,11 +1095,11 @@ class ToolBarComponent {
     }
     displayAnchor() {
         const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
-        this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
+        this.overflowButton && this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
     }
     get popupWidth() {
         if (!this.popupSettings || !this.popupSettings.width) {
-            return defaultPopupWidth;
+            return 'auto';
         }
         return isNaN(this.popupSettings.width) ? this.popupSettings.width : `${this.popupSettings.width}px`;
     }
@@ -1141,9 +1207,37 @@ class ToolBarComponent {
             this.popupRef = null;
         }
     }
+    handleClasses(value, input) {
+        const elem = this.element.nativeElement;
+        const classes = getStylingClasses('toolbar', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    normalizePopupClasses(classList) {
+        let classes = ['k-menu-popup', 'k-toolbar-popup'];
+        if (!classList) {
+            return classes;
+        }
+        if (typeof classList === 'string') {
+            classes.push(...classList.split(' '));
+        }
+        else if (Array.isArray(classList)) {
+            classes = [...classes, ...classList];
+        }
+        else {
+            for (const cl in classList) {
+                classes.push(classList[cl]);
+            }
+        }
+        return classes;
+    }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
         LocalizationService,
@@ -1151,7 +1245,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             provide: L10N_PREFIX,
             useValue: 'kendo.toolbar'
         }
-    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "renderedTools", predicate: ["toolbarRenderer"], descendants: true }, { propertyName: "overflowRenderedTools", predicate: ["overflowRenderer"], descendants: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "renderedTools", predicate: ["toolbarRenderer"], descendants: true }, { propertyName: "overflowRenderedTools", predicate: ["overflowRenderer"], descendants: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoToolbarLocalizedMessages
         i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
         moreToolsTitle="More tools"
@@ -1167,8 +1261,12 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             ></kendo-toolbar-renderer>
         </ng-container>
         <button
+            kendoButton
+            fillMode="flat"
             #overflowButton
             type="button"
+            icon="more-vertical"
+            [svgIcon]="moreVerticalIcon"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
@@ -1179,19 +1277,18 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-overflow-anchor k-button k-button-flat"
+            class="k-toolbar-overflow-button"
+            [ngClass]="overflowClass"
             (click)="showPopup()"
         >
-            <span class="k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
-            <ul
-                class="k-overflow-container k-list-container k-reset"
+            <div
+                class="k-menu-group k-menu-group-md"
                 role="menu"
                 [id]="popupId"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of allTools; let index = index">
-                    <li class="k-item" role="menuitem">
                         <kendo-toolbar-renderer
                             #overflowRenderer
                             (rendererClick)="onRendererClick($event)"
@@ -1199,13 +1296,12 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                             [resizable]="overflow"
                             [tool]="tool"
                         ></kendo-toolbar-renderer>
-                    </li>
                 </ng-container>
-            </ul>
+            </div>
         </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: i6.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"] }] });
+    `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i1$1.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: 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.11", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1236,8 +1332,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             ></kendo-toolbar-renderer>
         </ng-container>
         <button
+            kendoButton
+            fillMode="flat"
             #overflowButton
             type="button"
+            icon="more-vertical"
+            [svgIcon]="moreVerticalIcon"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
@@ -1248,19 +1348,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-overflow-anchor k-button k-button-flat"
+            class="k-toolbar-overflow-button"
+            [ngClass]="overflowClass"
             (click)="showPopup()"
         >
-            <span class="k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
-            <ul
-                class="k-overflow-container k-list-container k-reset"
+            <div
+                class="k-menu-group k-menu-group-md"
                 role="menu"
                 [id]="popupId"
                 [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of allTools; let index = index">
-                    <li class="k-item" role="menuitem">
                         <kendo-toolbar-renderer
                             #overflowRenderer
                             (rendererClick)="onRendererClick($event)"
@@ -1268,9 +1367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             [resizable]="overflow"
                             [tool]="tool"
                         ></kendo-toolbar-renderer>
-                    </li>
                 </ng-container>
-            </ul>
+            </div>
         </ng-template>
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
@@ -1284,6 +1382,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], tabindex: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], tabIndex: [{
                 type: Input,
                 args: ['tabIndex']
@@ -1296,7 +1396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [ToolBarToolComponent]
             }], overflowButton: [{
                 type: ViewChild,
-                args: ['overflowButton', { static: false }]
+                args: ['overflowButton', { static: false, read: ElementRef }]
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { static: true }]
@@ -1312,10 +1412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], overflowRenderedTools: [{
                 type: ViewChildren,
                 args: ['overflowRenderer']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
+            }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar']
             }], onFocus: [{
@@ -1339,8 +1436,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
  */
 class ToolBarButtonComponent extends ToolBarToolComponent {
-    constructor() {
+    constructor(element, zone) {
         super();
+        this.element = element;
+        this.zone = zone;
         /**
          * Specifies where button icon should be displayed
          */
@@ -1403,12 +1502,14 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._showText = 'both';
@@ -1459,6 +1560,20 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
         this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() &&
+            icon &&
+            (this.toolbarOptions.icon || this.overflowOptions.icon) &&
+            (this.toolbarOptions.iconClass || this.overflowOptions.iconClass)) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+    }
     /**
      * Defines a URL which is used for an `img` element inside the Button.
      * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
@@ -1499,19 +1614,45 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.getButton().tabIndex = -1;
         return false;
     }
+    /**
+     * @hidden
+     */
+    get toolbarButtonClass() {
+        return this.toggleable ? 'k-toolbar-toggle-button' : 'k-toolbar-button';
+    }
+    /**
+     * @hidden
+     */
+    handleClick(ev) {
+        this.click.emit(ev);
+        if (this.toggleable) {
+            this.selected = !this.selected;
+            this.selectedChange.emit(this.selected);
+        }
+    }
+    /**
+     * @hidden
+     */
+    selectedChangeHandler(state) {
+        this.selected = state;
+        this.selectedChange.emit(state);
+    }
     getButton() {
         return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
     }
     setTextDisplayMode() {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        });
     }
 }
-ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
+                [class]="toolbarButtonClass"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
@@ -1525,40 +1666,41 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 (click)="click.emit($event)"
                 (pointerdown)="pointerdown.emit($event)"
-                (selectedChange)="selectedChange.emit($event)"
+                (selectedChange)="selectedChangeHandler($event)"
                 (blur)="onBlur()"
             >
                 {{ toolbarOptions.text }}
             </button>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div
                 #overflowButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                class="k-overflow-button"
-                [ngStyle]="style"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [selected]="selected"
-                [icon]="overflowOptions.icon"
-                [iconClass]="overflowOptions.iconClass"
-                [imageUrl]="overflowOptions.imageUrl"
-                (click)="click.emit($event)"
-                (selectedChange)="selectedChange.emit($event)"
-            >
-                {{ overflowOptions.text }}
-            </button>
+                [ngStyle]="style"
+                (click)="handleClick($event)">
+                <span
+                    class="k-link k-menu-link"
+                    [class.k-selected]="selected"
+                >
+                    <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-template>
-    `, isInline: true, components: [{ type: i1$1.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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1$1.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$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], 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.11", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1569,6 +1711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
+                [class]="toolbarButtonClass"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
@@ -1582,42 +1725,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 (click)="click.emit($event)"
                 (pointerdown)="pointerdown.emit($event)"
-                (selectedChange)="selectedChange.emit($event)"
+                (selectedChange)="selectedChangeHandler($event)"
                 (blur)="onBlur()"
             >
                 {{ toolbarOptions.text }}
             </button>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
+            <div
                 #overflowButton
                 tabindex="-1"
-                type="button"
-                kendoButton
-                class="k-overflow-button"
-                [ngStyle]="style"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [selected]="selected"
-                [icon]="overflowOptions.icon"
-                [iconClass]="overflowOptions.iconClass"
-                [imageUrl]="overflowOptions.imageUrl"
-                (click)="click.emit($event)"
-                (selectedChange)="selectedChange.emit($event)"
-            >
-                {{ overflowOptions.text }}
-            </button>
+                [ngStyle]="style"
+                (click)="handleClick($event)">
+                <span
+                    class="k-link k-menu-link"
+                    [class.k-selected]="selected"
+                >
+                    <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-template>
     `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input
@@ -1647,6 +1791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], imageUrl: [{
                 type: Input
             }], click: [{
@@ -1693,9 +1839,14 @@ 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
@@ -1717,6 +1868,20 @@ 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
      */
@@ -1751,8 +1916,27 @@ 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 `${button.overflowOptions.icon}`;
+        }
+        if (button.overflowOptions.iconClass) {
+            return button.overflowOptions.iconClass;
+        }
+        if (button.overflowOptions.svgIcon) {
+            return button.overflowOptions.svgIcon;
+        }
     }
     focusButton(index, ev) {
         // Guard against focusing twice on mousedown.
@@ -1762,9 +1946,10 @@ 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"
@@ -1786,6 +1971,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                     [themeColor]="button.fillMode ? button.themeColor : null"
                     [icon]="button.toolbarOptions.icon"
                     [iconClass]="button.toolbarOptions.iconClass"
+                    [svgIcon]="button.toolbarOptions.svgIcon"
                     [imageUrl]="button.toolbarOptions.imageUrl"
                     (click)="button.click.emit($event); onButtonClick($event)"
                     (pointerdown)="button.pointerdown.emit($event)"
@@ -1796,37 +1982,31 @@ 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"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
+                            [name]="button.overflowOptions.icon"
+                            [customFontClass]="button.overflowOptions.iconClass"
+                            [svgIcon]="button.overflowOptions.svgIcon"
+                        ></kendo-icon-wrapper>
+                        <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
+                    </span>
+                </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.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: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i1$1.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$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], 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.11", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1836,6 +2016,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"
@@ -1857,6 +2038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [themeColor]="button.fillMode ? button.themeColor : null"
                     [icon]="button.toolbarOptions.icon"
                     [iconClass]="button.toolbarOptions.iconClass"
+                    [svgIcon]="button.toolbarOptions.svgIcon"
                     [imageUrl]="button.toolbarOptions.imageUrl"
                     (click)="button.click.emit($event); onButtonClick($event)"
                     (pointerdown)="button.pointerdown.emit($event)"
@@ -1867,35 +2049,29 @@ 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"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
+                            [name]="button.overflowOptions.icon"
+                            [customFontClass]="button.overflowOptions.iconClass"
+                            [svgIcon]="button.overflowOptions.svgIcon"
+                        ></kendo-icon-wrapper>
+                        <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
+                    </span>
+                </div>
+            </ng-container>
         </ng-template>
     `
                 }]
@@ -1913,102 +2089,15 @@ 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 }]
-            }] } });
-
-/**
- * @hidden
- */
-class ToolBarButtonListComponent {
-    constructor() {
-        this.disabled = false;
-        this.fillMode = 'solid';
-        this.themeColor = 'base';
-        this.itemClick = new EventEmitter();
-    }
-    getText(dataItem) {
-        if (dataItem) {
-            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
-        }
-        return undefined;
-    }
-    onClick(item, index) {
-        const dataItem = this.data[index];
-        if (item.click) {
-            item.click(dataItem);
-        }
-        this.itemClick.emit(dataItem);
-    }
-}
-ToolBarButtonListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: { data: "data", textField: "textField", disabled: "disabled", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "buttons", predicate: ["button"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-        <button
-            #button
-            type="button"
-            tabindex="-1"
-            kendoButton
-            [style.padding-left.px]="16"
-            class="k-overflow-button"
-            *ngFor="let item of data; let i = index"
-            [disabled]="disabled || item.disabled"
-            [icon]="item.icon"
-            [iconClass]="item.iconClass"
-            [imageUrl]="item.imageUrl"
-            [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
-            (click)="onClick(item, i)"
-        >
-            {{ getText(item) }}
-        </button>
-    `, isInline: true, components: [{ type: i1$1.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-toolbar-buttonlist',
-                    template: `
-        <button
-            #button
-            type="button"
-            tabindex="-1"
-            kendoButton
-            [style.padding-left.px]="16"
-            class="k-overflow-button"
-            *ngFor="let item of data; let i = index"
-            [disabled]="disabled || item.disabled"
-            [icon]="item.icon"
-            [iconClass]="item.iconClass"
-            [imageUrl]="item.imageUrl"
-            [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
-            (click)="onClick(item, i)"
-        >
-            {{ getText(item) }}
-        </button>
-    `
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], itemClick: [{
-                type: Output
-            }], buttons: [{
+            }], overflowListItems: [{
                 type: ViewChildren,
-                args: ['button', { read: ElementRef }]
+                args: ['listItem']
+            }], buttonComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => ToolBarButtonComponent)]
             }] } });
 
 /**
@@ -2071,12 +2160,14 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._popupSettings = { animate: true, popupClass: '' };
@@ -2164,13 +2255,13 @@ 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));
     }
@@ -2209,6 +2300,26 @@ 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();
@@ -2220,12 +2331,14 @@ 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"
@@ -2243,31 +2356,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$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i1$1.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: 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$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"], 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: [{
@@ -2278,8 +2405,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"
@@ -2297,29 +2426,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>
     `
                 }]
@@ -2371,12 +2514,12 @@ 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 }]
             }] } });
 
 /**
@@ -2451,12 +2594,14 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._popupSettings = { animate: true, popupClass: '' };
@@ -2541,7 +2686,7 @@ 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
@@ -2591,6 +2736,26 @@ 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();
@@ -2602,14 +2767,16 @@ 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"
@@ -2628,36 +2795,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$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: i1$1.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: 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$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"], 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: [{
@@ -2668,10 +2848,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"
@@ -2690,34 +2872,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>
     `
                 }]
@@ -2770,12 +2965,12 @@ 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']
             }] } });
 
 /**
@@ -2816,6 +3011,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,
@@ -2827,6 +3028,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: [{
@@ -2895,6 +3102,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['popupTemplate', { static: true }]
             }] } });
 
+/**
+ * @hidden
+ */
+class ToolBarButtonListComponent {
+    constructor() {
+        this.disabled = false;
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
+        this.itemClick = new EventEmitter();
+    }
+    getText(dataItem) {
+        if (dataItem) {
+            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
+        }
+        return undefined;
+    }
+    onClick(item, index) {
+        const dataItem = this.data[index];
+        if (item.click) {
+            item.click(dataItem);
+        }
+        this.itemClick.emit(dataItem);
+    }
+}
+ToolBarButtonListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: { data: "data", textField: "textField", disabled: "disabled", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "buttons", predicate: ["button"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+        <button
+            #button
+            type="button"
+            tabindex="-1"
+            kendoButton
+            [style.padding-left.px]="16"
+            class="k-overflow-button"
+            *ngFor="let item of data; let i = index"
+            [disabled]="disabled || item.disabled"
+            [icon]="item.icon"
+            [iconClass]="item.iconClass"
+            [svgIcon]="item.svgIcon"
+            [imageUrl]="item.imageUrl"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (click)="onClick(item, i)"
+        >
+            {{ getText(item) }}
+        </button>
+    `, isInline: true, components: [{ type: i1$1.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-toolbar-buttonlist',
+                    template: `
+        <button
+            #button
+            type="button"
+            tabindex="-1"
+            kendoButton
+            [style.padding-left.px]="16"
+            class="k-overflow-button"
+            *ngFor="let item of data; let i = index"
+            [disabled]="disabled || item.disabled"
+            [icon]="item.icon"
+            [iconClass]="item.iconClass"
+            [svgIcon]="item.svgIcon"
+            [imageUrl]="item.imageUrl"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (click)="onClick(item, i)"
+        >
+            {{ getText(item) }}
+        </button>
+    `
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], buttons: [{
+                type: ViewChildren,
+                args: ['button', { read: ElementRef }]
+            }] } });
+
 /**
  * Custom component messages override default component messages.
  */
@@ -2967,20 +3263,20 @@ ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ToolBarSpacerComponent, ToolBarRendererComponent,
         ToolBarButtonListComponent,
         ToolbarCustomMessagesComponent,
-        LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule], exports: [ToolBarComponent, ToolBarToolComponent,
+        LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule, IconsModule], exports: [ToolBarComponent, ToolBarToolComponent,
         ToolBarButtonComponent,
         ToolBarButtonGroupComponent,
         ToolBarDropDownButtonComponent,
         ToolBarSplitButtonComponent,
         ToolBarSeparatorComponent,
         ToolBarSpacerComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
-ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]] });
+ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ToolBarComponent, TOOLBAR_TOOLS, TOOLBAR_COMMON],
                     exports: [ToolBarComponent, TOOLBAR_TOOLS, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective],
-                    imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]
+                    imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule, IconsModule]
                 }]
         }] });