@progress/kendo-angular-toolbar 11.0.0-develop.101 → 11.0.0-develop.103

package/common/{constants.d.ts → size.d.ts}

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * @hidden
+ * Represents the possible size options of the Toolbar.
+ * @default `medium`
  */
-export declare const defaultPopupWidth = "150px";
+export declare type ToolbarSize = 'small' | 'medium' | 'large' | 'none';

package/esm2020/common/{constants.mjs → size.mjs}

@@ -2,7 +2,4 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
-export const defaultPopupWidth = '150px';
+export {};

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673510536,
+    publishDate: 1673523460,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/renderer.component.mjs

@@ -22,6 +22,7 @@ export 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) => {
@@ -103,7 +104,7 @@ export 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: i1.RendererService }, { token: i2.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>
@@ -137,6 +138,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']]

package/esm2020/toolbar.component.mjs

@@ -11,14 +11,13 @@ import { packageMetadata } from './package-metadata';
 import { RefreshService } from './refresh.service';
 import { NavigationService } from './navigation.service';
 import { ToolBarToolComponent } from './tools/toolbar-tool.component';
-import { innerWidth, closest, isPresent } from './util';
+import { innerWidth, closest, isPresent, getStylingClasses, SIZES } from './util';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from './common/preventable-event';
 import { Subscription, fromEvent, Subject, merge } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { filter } from 'rxjs/operators';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { defaultPopupWidth } from './common/constants';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
@@ -28,6 +27,7 @@ import * as i5 from "./renderer.component";
 import * as i6 from "@progress/kendo-angular-common";
 import * as i7 from "./localization/localized-toolbar-messages.directive";
 import * as i8 from "@angular/common";
+const DEFAULT_SIZE = 'medium';
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
     anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
@@ -62,8 +62,9 @@ export 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';
@@ -78,6 +79,9 @@ export class ToolBarComponent {
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
+    get overflowClass() {
+        return `k-button-${SIZES[this.size]}`;
+    }
     /**
      * @hidden
      */
@@ -100,6 +104,23 @@ export 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
      */
@@ -221,6 +242,7 @@ export 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')));
@@ -291,7 +313,7 @@ export 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();
@@ -308,7 +330,10 @@ export 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();
+            }
         }
     }
     /**
@@ -317,6 +342,7 @@ export 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(() => {
@@ -339,6 +365,16 @@ export 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;
                 }
@@ -369,11 +405,11 @@ export 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`;
     }
@@ -481,9 +517,37 @@ export 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: i3.RefreshService }, { token: i4.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,
@@ -519,19 +583,19 @@ 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 k-button k-button-flat k-button-flat-base k-icon-button"
+            [ngClass]="overflowClass"
             (click)="showPopup()"
         >
-            <span class="k-icon k-i-more-vertical"></span>
+            <span class="k-button-icon 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)"
@@ -539,13 +603,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: i5.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: i7.LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i5.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: i7.LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -588,19 +651,19 @@ 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 k-button k-button-flat k-button-flat-base k-icon-button"
+            [ngClass]="overflowClass"
             (click)="showPopup()"
         >
-            <span class="k-icon k-i-more-vertical"></span>
+            <span class="k-button-icon 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)"
@@ -608,9 +671,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>
@@ -624,6 +686,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']
@@ -652,10 +716,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: [{

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

@@ -12,8 +12,9 @@ import * as i2 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) {
         super();
+        this.element = element;
         /**
          * Specifies where button icon should be displayed
          */
@@ -172,6 +173,40 @@ 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
+     */
+    getIconClasses() {
+        if (this.overflowOptions.icon) {
+            return `k-icon k-i-${this.overflowOptions.icon}`;
+        }
+        else if (this.overflowOptions.iconClass) {
+            return this.overflowOptions.iconClass;
+        }
+    }
+    /**
+     * @hidden
+     */
+    selectedChangeHandler(state) {
+        this.selected = state;
+        this.selectedChange.emit(state);
+    }
     getButton() {
         return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
     }
@@ -180,11 +215,12 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }], 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: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
+                [class]="toolbarButtonClass"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
@@ -201,37 +237,31 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [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">
+                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    <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"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.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 +272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
+                [class]="toolbarButtonClass"
                 [tabindex]="tabIndex"
                 type="button"
                 kendoButton
@@ -258,39 +289,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [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">
+                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    <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 }]; }, propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input