@progress/kendo-angular-toolbar 17.0.0-develop.9 → 17.0.1-develop.1

package/README.md

@@ -1,34 +1,42 @@
-<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
+<a href="https://www.telerik.com/kendo-angular-ui/components/toolbar" target="_blank">
 <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
 </a>
 
 ## Kendo UI for Angular ToolBar Component
 
-> **Important**
-> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)&mdash;a commercial library.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar).
-> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
->
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar) and speed up your development process!
+> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
+> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
 
-The Kendo UI for Angular Toolbar component provides a collection of various button types, such as a drop-down and a split button, in a single UI element. Beyond supporting various button types, the Angular Toolbar includes ways to organize these buttons into various groups.
+The Kendo UI for Angular ToolBar provides a graphical container for holding button elements and allows users to effortlessly structure and access them. The ToolBar is built from the ground up and specifically for Angular, so that you get a high-performance control which integrates tightly with your application and with the rest of the Kendo UI for Angular components.
 
-This component is part of the Kendo UI for Angular component library. Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+## Key Features
 
-## Resources
+Among the many features which the Kendo UI for Angular ToolBar delivers are:
+
+* Control Types&mdash;The ToolBar features built-in control types, which enable you to display specific tools and controls to the ToolBar container. [Read more about the built-in ToolBar control types...](https://www.telerik.com/kendo-angular-ui/components/toolbar/control-types)
+* Custom Control Types&mdash;The ToolBar allows you to create custom tools that can be added to the ToolBar and Overflow Popup. [Read more about the custom control types of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types)
+* Responsive ToolBar&mdash;The ToolBar provides options to hide the tools that do not fit its width in an overflow popup. [Read more about the responsive behavior of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/responsive-toolbar)
+* Appearance&mdash;The ToolBar provides built-in options that allow you to customize its appearance. [Read more about customizing the appearance of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/appearance)
+* Globalization&mdash;The Kendo UI for Angular ToolBar supports globalization to ensure that it can fit well in any application, no matter what languages and locales need to be supported. Additionally, the ToolBar supports rendering in a right-to-left (RTL) direction. [Read more about the globalization of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/globalization)
+* Accessibility&mdash;The ToolBar is accessible for screen readers and supports WAI-ARIA attributes. [Read more about the accessibility of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/accessibility)
+* Keyboard Navigation&mdash;The ToolBar supports a number of keyboard shortcuts which allow users to accomplish various commands. [Read more about the keyboard navigation of the ToolBar...](https://www.telerik.com/kendo-angular-ui/components/toolbar/keyboard-navigation)
+
+## Support Options
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
-* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
-* [Blogs](http://www.telerik.com/blogs/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
-* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
+For any issues you might encounter while working with the Kendo UI for Angular ToolBar, you have the following support channels available:
 
-## Questions and Feedback
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
+
+## Resources
 
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-toolbar)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular ToolBar](https://www.telerik.com/kendo-angular-ui/components/toolbar/installation/getting-started)
+* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
+* [Blogs](http://www.telerik.com/blogs/kendo-ui)
+* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 

package/common/fillmode.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible fillMode options of the Toolbar.
+ */
+export type ToolbarFillMode = 'solid' | 'flat' | 'outline' | 'none';

package/common/size.d.ts

@@ -6,4 +6,4 @@
  * Represents the possible size options of the Toolbar.
  * @default `medium`
  */
-export declare type ToolbarSize = 'small' | 'medium' | 'large' | 'none';
+export type ToolbarSize = 'small' | 'medium' | 'large' | 'none';

package/direction.d.ts

@@ -5,4 +5,4 @@
 /**
  * @hidden
  */
-export declare type Direction = 'rtl' | 'ltr';
+export type Direction = 'rtl' | 'ltr';

package/display-mode.d.ts

@@ -7,4 +7,4 @@
  *
  * @default 'both'
  */
-export declare type DisplayMode = 'both' | 'toolbar' | 'overflow';
+export type DisplayMode = 'both' | 'toolbar' | 'overflow';

package/{esm2020 → esm2022}/common/preventable-event.mjs

@@ -6,9 +6,7 @@
  * @hidden
  */
 export class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
+    prevented = false;
     /**
      * Prevents the default action for a specified event.
      * In this way, the source component suppresses the built-in behavior that follows the event.

package/{esm2020 → esm2022}/localization/custom-messages.component.mjs

@@ -11,6 +11,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Custom component messages override default component messages.
  */
 export class ToolbarCustomMessagesComponent extends ToolbarMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -18,15 +19,15 @@ export class ToolbarCustomMessagesComponent extends ToolbarMessages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarCustomMessagesComponent, isStandalone: true, selector: "kendo-toolbar-messages", providers: [
+            {
+                provide: ToolbarMessages,
+                useExisting: forwardRef(() => ToolbarCustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-ToolbarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarCustomMessagesComponent, isStandalone: true, selector: "kendo-toolbar-messages", providers: [
-        {
-            provide: ToolbarMessages,
-            useExisting: forwardRef(() => ToolbarCustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/localization/localized-toolbar-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class LocalizedToolbarMessagesDirective extends ToolbarMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedToolbarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedToolbarMessagesDirective, isStandalone: true, selector: "[kendoToolbarLocalizedMessages]", providers: [
+            {
+                provide: ToolbarMessages,
+                useExisting: forwardRef(() => LocalizedToolbarMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedToolbarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedToolbarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedToolbarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedToolbarMessagesDirective, isStandalone: true, selector: "[kendoToolbarLocalizedMessages]", providers: [
-        {
-            provide: ToolbarMessages,
-            useExisting: forwardRef(() => LocalizedToolbarMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedToolbarMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedToolbarMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/localization/messages.mjs

@@ -9,10 +9,14 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ToolbarMessages extends ComponentMessages {
+    /**
+     * The title of the **more tools** button in a responsive ToolBar
+     */
+    moreToolsTitle;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
 }
-ToolbarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ToolbarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/{esm2020 → esm2022}/navigation.service.mjs

@@ -10,12 +10,14 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class NavigationService {
+    zone;
+    overflowButton;
+    focused = { renderedTool: null, index: -1 };
+    renderedTools = [];
+    isPopupFocused = false;
+    isOverflowButtonFocused = false;
     constructor(zone) {
         this.zone = zone;
-        this.focused = { renderedTool: null, index: -1 };
-        this.renderedTools = [];
-        this.isPopupFocused = false;
-        this.isOverflowButtonFocused = false;
     }
     setRenderedTools(rts) {
         this.renderedTools = rts;
@@ -147,9 +149,9 @@ export class NavigationService {
         return (isPresent(this.overflowButton) &&
             window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue('visibility') === 'visible');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/{esm2020 → esm2022}/package-metadata.mjs

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

package/{esm2020 → esm2022}/refresh.service.mjs

@@ -8,15 +8,13 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class RefreshService {
-    constructor() {
-        this.onRefresh = new EventEmitter();
-    }
+    onRefresh = new EventEmitter();
     refresh(tool) {
         this.onRefresh.emit(tool);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefreshService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefreshService });
 }
-RefreshService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-RefreshService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RefreshService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/renderer.component.mjs

@@ -17,19 +17,28 @@ const MIN_SPACER_WIDTH = 18;
  * @hidden
  */
 export class ToolBarRendererComponent {
+    renderer;
+    rendererService;
+    refreshService;
+    toolsService;
+    viewContainer;
+    tool;
+    location;
+    resizable;
+    rendererClick = new EventEmitter();
+    template;
+    element;
+    get isSpacer() {
+        return this.tool && this.tool.__isSpacer;
+    }
+    refreshSubscription;
+    internalComponentRef;
     constructor(renderer, rendererService, refreshService, toolsService, viewContainer) {
         this.renderer = renderer;
         this.rendererService = rendererService;
         this.refreshService = refreshService;
         this.toolsService = toolsService;
         this.viewContainer = viewContainer;
-        this.rendererClick = new EventEmitter();
-        this.onClick = (ev) => {
-            this.rendererClick.emit({ context: this, event: ev });
-        };
-    }
-    get isSpacer() {
-        return this.tool && this.tool.__isSpacer;
     }
     ngOnInit() {
         const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
@@ -101,6 +110,9 @@ export class ToolBarRendererComponent {
     setAttribute(element, attr, value) {
         this.renderer.setAttribute(element, attr, value);
     }
+    onClick = (ev) => {
+        this.rendererClick.emit({ context: this, event: ev });
+    };
     updateTools() {
         const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
         const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
@@ -118,10 +130,10 @@ export class ToolBarRendererComponent {
             }
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }, { token: i3.ToolbarToolsService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
 }
-ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }, { token: i3.ToolbarToolsService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-ToolBarRendererComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
             type: Directive,
             args: [{
                     providers: [RendererService],

package/{esm2020 → esm2022}/renderer.service.mjs

@@ -9,6 +9,8 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class RendererService {
+    element;
+    renderer;
     getElement() {
         return this.element.nativeElement;
     }
@@ -42,9 +44,9 @@ export class RendererService {
     setAttribute(element, attr, value) {
         this.renderer.setAttribute(element, attr, value);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RendererService });
 }
-RendererService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-RendererService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RendererService, decorators: [{
             type: Injectable
         }] });

package/esm2022/tool-options.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/{esm2020 → esm2022}/toolbar.component.mjs

@@ -32,6 +32,7 @@ import * as i3 from "./refresh.service";
 import * as i4 from "./navigation.service";
 import * as i5 from "./tools/tools.service";
 const DEFAULT_SIZE = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
 const immediateResizeThreshold = 300;
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
@@ -42,56 +43,22 @@ const getInitialPopupSettings = (isRtl) => ({
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 export class ToolBarComponent {
-    constructor(localization, popupService, refreshService, navigationService, 
-    // Needs to be public as it is being accessed in the Editor component
-    element, zone, renderer, _cdr, toolsService) {
-        this.localization = localization;
-        this.popupService = popupService;
-        this.refreshService = refreshService;
-        this.navigationService = navigationService;
-        this.element = element;
-        this.zone = zone;
-        this.renderer = renderer;
-        this._cdr = _cdr;
-        this.toolsService = toolsService;
-        /**
-         * Hides the overflowing tools in a popup.
-         */
-        this.overflow = false;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
-         */
-        this.tabindex = 0;
-        /**
-         * Fires when the overflow popup of the ToolBar is opened.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires when the overflow popup of the ToolBar is closed.
-         */
-        this.close = new EventEmitter();
-        this.hostClass = true;
-        this.cancelRenderedToolsSubscription$ = new Subject();
-        this._size = DEFAULT_SIZE;
-        this.overflowButtonClickedTime = null;
-        this.subscriptions = new Subscription();
-        this.popupSubs = new Subscription();
-        this.role = 'toolbar';
-        this.moreVerticalIcon = moreVerticalIcon;
-        /**
-         * @hidden
-         */
-        this.overflowBtnId = guid();
-        /**
-         * @hidden
-         */
-        this.popupId = guid();
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-    }
+    localization;
+    popupService;
+    refreshService;
+    navigationService;
+    element;
+    zone;
+    renderer;
+    _cdr;
+    toolsService;
     get overflowClass() {
         return `k-button-${SIZES[this.size]}`;
     }
+    /**
+     * Hides the overflowing tools in a popup.
+     */
+    overflow = false;
     /**
      * @hidden
      */
@@ -114,6 +81,24 @@ export class ToolBarComponent {
     get popupSettings() {
         return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
     }
+    /**
+     * The fillMode property specifies the background and border styles of the Toolbar
+     * ([see example](slug:appearance_toolbar#toc-fill-mode)).
+     *
+     * @default 'solid'
+     */
+    set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
+     */
+    tabindex = 0;
     /**
      * Specifies the padding of all Toolbar elements.
      *
@@ -140,6 +125,21 @@ export class ToolBarComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Fires when the overflow popup of the ToolBar is opened.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires when the overflow popup of the ToolBar is closed.
+     */
+    close = new EventEmitter();
+    allTools;
+    overflowButton;
+    popupTemplate;
+    resizeSensor;
+    container;
+    popupRef;
+    direction;
     get appendTo() {
         const { appendTo } = this.popupSettings;
         if (!appendTo || appendTo === 'root') {
@@ -166,6 +166,19 @@ export class ToolBarComponent {
     get popupOpen() {
         return this._open;
     }
+    hostClass = true;
+    _popupSettings;
+    cachedOverflowAnchorWidth;
+    _open;
+    toolbarKeydownListener;
+    overflowKeydownListener;
+    cancelRenderedToolsSubscription$ = new Subject();
+    cachedGap;
+    _size = DEFAULT_SIZE;
+    _fillMode = DEFAULT_FILL_MODE;
+    overflowButtonClickedTime = null;
+    subscriptions = new Subscription();
+    popupSubs = new Subscription();
     /**
      * @hidden
      */
@@ -186,12 +199,29 @@ export class ToolBarComponent {
         }
         this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
     }
+    role = 'toolbar';
     get getDir() {
         return this.direction;
     }
     get resizableClass() {
         return this.overflow;
     }
+    moreVerticalIcon = moreVerticalIcon;
+    constructor(localization, popupService, refreshService, navigationService, 
+    // Needs to be public as it is being accessed in the Editor component
+    element, zone, renderer, _cdr, toolsService) {
+        this.localization = localization;
+        this.popupService = popupService;
+        this.refreshService = refreshService;
+        this.navigationService = navigationService;
+        this.element = element;
+        this.zone = zone;
+        this.renderer = renderer;
+        this._cdr = _cdr;
+        this.toolsService = toolsService;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+    }
     ngAfterContentInit() {
         this.toolsService.allTools = this.allTools.toArray();
         this.subscriptions.add(this.allTools.changes.subscribe(changes => {
@@ -266,7 +296,10 @@ export class ToolBarComponent {
             });
         }
         this.navigationService.setRenderedTools(this.toolsService.renderedTools);
-        this.handleClasses(this.size, 'size');
+        const stylingOptions = ['size', 'fillMode'];
+        stylingOptions.forEach(option => {
+            this.handleClasses(this[option], option);
+        });
     }
     ngOnInit() {
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
@@ -431,6 +464,14 @@ export class ToolBarComponent {
         }
         this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
     }
+    /**
+     * @hidden
+     */
+    overflowBtnId = guid();
+    /**
+     * @hidden
+     */
+    popupId = guid();
     displayAnchor() {
         const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
         this.overflowButton && this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
@@ -578,18 +619,17 @@ export class ToolBarComponent {
         }
         return classes;
     }
-}
-ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }, { token: i5.ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, 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", "class.k-toolbar-solid": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
-        RefreshService,
-        NavigationService,
-        LocalizationService,
-        ToolbarToolsService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.toolbar'
-        }
-    ], 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 }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }, { token: i5.ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", 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,
+            ToolbarToolsService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.toolbar'
+            }
+        ], 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 }], 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"
@@ -656,7 +696,8 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBar',
@@ -747,6 +788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], popupSettings: [{
                 type: Input
+            }], fillMode: [{
+                type: Input
             }], tabindex: [{
                 type: Input
             }], size: [{
@@ -776,9 +819,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar']
-            }, {
-                type: HostBinding,
-                args: ['class.k-toolbar-solid']
             }], onFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]