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

package/NOTICE.txt

@@ -1,6 +1,6 @@
 Progress Kendo UI for Angular 2023
 
-Copyright (c) 2016-2022 Progress Software Corporation and/or one of its
+Copyright © 2016-2023 Progress Software Corporation and/or one of its
 subsidiaries or affiliates. All rights reserved.
 
 Portions of the Product include certain open source and commercial third-party
@@ -65,7 +65,7 @@ the Product:
 
 (1) 	The Apache Software License, Version 2.0:
 
-Progress Kendo UI for Angular 2022 incorporates TsLib v1.9.3. Such technology
+Progress Kendo UI for Angular 2023 incorporates TsLib v1.9.3. Such technology
 is subject to the following terms and conditions: Apache Software License Version 2.0.
 
                                  Apache License
@@ -290,7 +290,7 @@ is subject to the following terms and conditions: Apache Software License Versio
 
 (2) 	BSD-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates xlf-translate v2.0.4.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates xlf-translate v2.0.4.  Such
 technology is subject to the following terms and conditions:
 
    BSD 3-Clause License
@@ -325,7 +325,7 @@ technology is subject to the following terms and conditions:
 
 (3) 	The ISC License:
 
-(a) Progress Kendo UI for Angular 2022 incorporates glob v7.1.3.  Such technology
+(a) Progress Kendo UI for Angular 2023 incorporates glob v7.1.3.  Such technology
 is subject to the following terms and conditions:
 
     The ISC License
@@ -352,7 +352,7 @@ is subject to the following terms and conditions:
 
 (4)	MIT-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates HammerJS v2.0.8.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates HammerJS v2.0.8.  Such
 technology is subject to the following terms and conditions:
 
    The MIT License (MIT)
@@ -377,7 +377,7 @@ technology is subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(b) Progress Kendo UI for Angular 2022 incorporates prosemirror-commands v1*,
+(b) Progress Kendo UI for Angular 2023 incorporates prosemirror-commands v1*,
 prosemirror-cursor v1*, prosemirror-gapcursor v1*, prosemirror-history v1*,
 prosemirror-inputrules v1*, prosemirror-keymap v1*, prosemirror-model v1*,
 prosemirror-schema-list v1*, prosemirror-state v1*, prosemirror-tables v0.7*,
@@ -404,7 +404,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.
 
-(c) Progress Kendo UI for Angular 2022 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
+(c) Progress Kendo UI for Angular 2023 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
 
    MIT License
 
@@ -428,7 +428,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(d) Progress Kendo UI for Angular 2022 incorporates @types/prosemirror-commands v1*,
+(d) Progress Kendo UI for Angular 2023 incorporates @types/prosemirror-commands v1*,
 @types/prosemirror-dropcursor v1*, @types/prosemirror-gapcursor v1*, @types/prosemirror-history v1*,
 @types/prosemirror-inputrules v1*, @types/prosemirror-keymap v1*, @types/prosemirror-model v1*,
 @types/prosemirror-schema-list v1*, @types/prosemirror-state v1*, @types/prosemirror-tables v0.9*,
@@ -457,7 +457,7 @@ subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
-(e) Progress Kendo UI for Angular 2022 incorporates pako-esm v1.0.0.  Such
+(e) Progress Kendo UI for Angular 2023 incorporates pako-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
   Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -483,7 +483,7 @@ technology is subject to the following terms and conditions:
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 
-(f) Progress Kendo UI for Angular 2022 incorporates jszip-esm v1.0.0.  Such
+(f) Progress Kendo UI for Angular 2023 incorporates jszip-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
     Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -510,7 +510,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(g) Progress Kendo UI for Angular 2022 incorporates data.task v3.1.2.  Such
+(g) Progress Kendo UI for Angular 2023 incorporates data.task v3.1.2.  Such
 technology is subject to the following terms and conditions:
 
     The MIT License
@@ -535,7 +535,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(h) Progress Kendo UI for Angular 2022 incorporates ramda v0.23.  Such technology
+(h) Progress Kendo UI for Angular 2023 incorporates ramda v0.23.  Such technology
 is subject to the following terms and conditions:
 
     The MIT License (MIT)
@@ -560,7 +560,7 @@ is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(i) Progress Kendo UI for Angular 2022 incorporates js-yaml v3.14.0.  Such
+(i) Progress Kendo UI for Angular 2023 incorporates js-yaml v3.14.0.  Such
 technology is subject to the following terms and conditions:
 
     (The MIT License)
@@ -587,7 +587,7 @@ technology is subject to the following terms and conditions:
 
 (5)	UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE:
 
-Progress Kendo UI for Angular 2022 incorporates Unicode CLDR Database v33.
+Progress Kendo UI for Angular 2023 incorporates Unicode CLDR Database v33.
 Such technology is subject to the following terms and conditions:
 
    UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE
@@ -605,7 +605,7 @@ Such technology is subject to the following terms and conditions:
 
    COPYRIGHT AND PERMISSION NOTICE
 
-   Copyright © 1991-2021 Unicode, Inc. All rights reserved.
+   Copyright © 1991-2019 Unicode, Inc. All rights reserved.
    Distributed under the Terms of Use in https://www.unicode.org/copyright.html.
 
    Permission is hereby granted, free of charge, to any person obtaining
@@ -642,7 +642,7 @@ incorporated into the Product:  NONE
 
 3. Special Notices Regarding Progress Products incorporated into the Product:
 
-(a) Progress Kendo UI for Angular 2022 incorporates Kendo UI Licensing CLI v1.1
+(a) Progress Kendo UI for Angular 2023 incorporates Kendo UI Licensing CLI v1.1
 from Progress Software Corporation. See NOTICE.txt text file within product for
 third-party license information.
 
@@ -651,4 +651,4 @@ the release notes or other documentation that accompanies updates received in
 connection with support of the Product.
 
 
-Updated 1/6/2022
+Updated 13.Jan.2023

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: 1673460760,
-    version: '',
+    publishDate: 1674032337,
+    version: '11.0.0',
     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,23 +11,25 @@ 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 { moreVerticalIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "./refresh.service";
 import * as i4 from "./navigation.service";
 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";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@progress/kendo-angular-common";
+import * as i8 from "./localization/localized-toolbar-messages.directive";
+import * as i9 from "@angular/common";
+const DEFAULT_SIZE = 'medium';
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
     anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
@@ -37,7 +39,9 @@ const getInitialPopupSettings = (isRtl) => ({
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 export 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;
@@ -62,11 +66,13 @@ 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';
+        this.moreVerticalIcon = moreVerticalIcon;
         /**
          * @hidden
          */
@@ -78,6 +84,9 @@ export class ToolBarComponent {
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
+    get overflowClass() {
+        return `k-button-${SIZES[this.size]}`;
+    }
     /**
      * @hidden
      */
@@ -100,6 +109,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 +247,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 +318,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 +335,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 +347,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 +370,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 +410,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 +522,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,
@@ -491,7 +560,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"
@@ -507,8 +576,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"
@@ -519,19 +592,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)"
@@ -539,13 +611,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.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: i8.LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -576,8 +647,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"
@@ -588,19 +663,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)"
@@ -608,9 +682,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 +697,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']
@@ -636,7 +711,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 }]
@@ -652,10 +727,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/toolbar.module.mjs

@@ -19,6 +19,7 @@ import { ToolBarRendererComponent } from './renderer.component';
 import { ToolBarButtonListComponent } from './tools/toolbar-buttonlist.component';
 import { LocalizedToolbarMessagesDirective } from './localization/localized-toolbar-messages.directive';
 import { ToolbarCustomMessagesComponent } from './localization/custom-messages.component';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const TOOLBAR_TOOLS = [
     ToolBarToolComponent,
@@ -59,19 +60,19 @@ 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]
                 }]
         }] });