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

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

@@ -2,18 +2,22 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, TemplateRef, forwardRef, ViewChild, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import { Component, TemplateRef, forwardRef, ViewChild, Input, Output, EventEmitter, ElementRef, isDevMode, NgZone } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { getValueForLocation } from '../util';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "@angular/common";
 /**
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
  */
 export class ToolBarButtonComponent extends ToolBarToolComponent {
-    constructor() {
+    constructor(element, zone) {
         super();
+        this.element = element;
+        this.zone = zone;
         /**
          * Specifies where button icon should be displayed
          */
@@ -76,12 +80,14 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._showText = 'both';
@@ -132,6 +138,20 @@ export 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.
@@ -172,19 +192,45 @@ export 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
@@ -198,40 +244,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.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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.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: [{
@@ -242,6 +289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
+                [class]="toolbarButtonClass"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
@@ -255,42 +303,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
@@ -320,6 +369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], imageUrl: [{
                 type: Input
             }], click: [{

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

@@ -2,16 +2,17 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, TemplateRef, forwardRef, ViewChild, ContentChildren, QueryList, Input } from '@angular/core';
+import { Component, TemplateRef, forwardRef, ViewChild, ContentChildren, QueryList, Input, ViewChildren } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { ToolBarButtonComponent } from './toolbar-button.component';
-import { ButtonGroupComponent } from '@progress/kendo-angular-buttons';
 import { makePeeker, getIndexOfFocused, seekFocusedIndex, getNextKey, getPrevKey, areEqual } from '../util';
+import { ButtonGroupComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-buttons";
-import * as i3 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@angular/common";
 /**
  * Represents the Kendo UI Toolbar ButtonGroup for Angular.
  */
@@ -36,9 +37,14 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         }
     }
     get buttonElements() {
-        return this.getButtonGroup()
-            .buttons.filter(b => !b.isDisabled)
-            .map(b => b.element);
+        if (this.overflows) {
+            return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))].map(el => el.nativeElement);
+        }
+        else {
+            return this.toolbarButtonGroup
+                .buttons.filter(b => !b.isDisabled)
+                .map(b => b.element);
+        }
     }
     /**
      * @hidden
@@ -60,6 +66,20 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         button.selected = state;
         button.selectedChange.emit(state);
     }
+    /**
+     * @hidden
+     */
+    overflowSelectedChangeHandler(button) {
+        if (this.selection === 'multiple') {
+            button.selected = !button.selected;
+        }
+        else {
+            const filteredButtons = this.buttonComponents.filter(b => b !== button);
+            filteredButtons.forEach(b => b.selected = false);
+            button.selected = !button.selected;
+        }
+        button.selectedChange.emit(button.selected);
+    }
     /**
      * @hidden
      */
@@ -94,8 +114,27 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         this.focusButton(this.focusedIndex, ev);
         return !isUnmodified(this.focusedIndex);
     }
-    getButtonGroup() {
-        return this.overflows ? this.overflowButtonGroup : this.toolbarButtonGroup;
+    /**
+     * @hidden
+     */
+    handleClick(ev, button) {
+        button.click.emit(ev);
+        this.onButtonClick(ev);
+        this.overflowSelectedChangeHandler(button);
+    }
+    /**
+     * @hidden
+     */
+    getIconClasses(button) {
+        if (button.overflowOptions.icon) {
+            return `${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.
@@ -105,9 +144,10 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     }
 }
 ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowButtonGroup", first: true, predicate: ["overflowButtonGroup"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
+                class="k-toolbar-button-group"
                 #toolbarButtonGroup
                 [tabIndex]="-1"
                 [selection]="selection"
@@ -129,6 +169,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)"
@@ -139,37 +180,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: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -179,6 +214,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"
@@ -200,6 +236,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)"
@@ -210,35 +247,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>
     `
                 }]
@@ -256,13 +287,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { static: true }]
-            }], buttonComponents: [{
-                type: ContentChildren,
-                args: [forwardRef(() => ToolBarButtonComponent)]
             }], toolbarButtonGroup: [{
                 type: ViewChild,
                 args: ['toolbarButtonGroup', { static: false }]
-            }], overflowButtonGroup: [{
-                type: ViewChild,
-                args: ['overflowButtonGroup', { static: false }]
+            }], overflowListItems: [{
+                type: ViewChildren,
+                args: ['listItem']
+            }], buttonComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => ToolBarButtonComponent)]
             }] } });

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

@@ -43,6 +43,7 @@ ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             [disabled]="disabled || item.disabled"
             [icon]="item.icon"
             [iconClass]="item.iconClass"
+            [svgIcon]="item.svgIcon"
             [imageUrl]="item.imageUrl"
             [fillMode]="fillMode"
             [themeColor]="fillMode ? themeColor : null"
@@ -67,6 +68,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [disabled]="disabled || item.disabled"
             [icon]="item.icon"
             [iconClass]="item.iconClass"
+            [svgIcon]="item.svgIcon"
             [imageUrl]="item.imageUrl"
             [fillMode]="fillMode"
             [themeColor]="fillMode ? themeColor : null"