@progress/kendo-angular-toolbar 17.0.0-develop.21 → 17.0.0-develop.22

package/{fesm2020 → fesm2022}/progress-kendo-angular-toolbar.mjs

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, inject, ElementRef, Directive, Input, Output, forwardRef, ViewContainerRef, Component, ContentChildren, ViewChild, HostBinding, HostListener, isDevMode, ViewChildren, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, inject, ElementRef, Directive, ViewChild, Input, Output, forwardRef, ViewContainerRef, Component, ContentChildren, HostBinding, HostListener, isDevMode, ViewChildren, NgModule } from '@angular/core';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { Keys, guid, isDocumentAvailable, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { Keys, isDocumentAvailable, guid, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729874097,
-    version: '17.0.0-develop.21',
+    publishDate: 1730103506,
+    version: '17.0.0-develop.22',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -33,16 +33,14 @@ const packageMetadata = {
  * @hidden
  */
 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
         }] });
 
@@ -269,12 +267,14 @@ const isElementOrTextNode = n => n.nodeType === 1 || n.nodeType === 3;
  * @hidden
  */
 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;
@@ -406,10 +406,10 @@ 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 }]; } });
 
@@ -418,17 +418,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Extend this class to create custom tools.
  */
 class ToolBarToolComponent {
+    toolbarTemplate;
+    popupTemplate;
+    tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
+    overflows = true;
+    visibility;
+    element;
+    isBuiltInTool = false;
     constructor() {
-        this.tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
-        this.overflows = true;
-        this.isBuiltInTool = false;
-        // this should be replaced with showTool: DisplayMode = 'both';
-        /**
-         * @hidden
-         */
-        this.responsive = true;
         this.element = inject(ElementRef);
     }
+    // this should be replaced with showTool: DisplayMode = 'both';
+    /**
+     * @hidden
+     */
+    responsive = true;
     get toolbarDisplay() {
         return this.overflows ? 'none' : 'inline-flex';
     }
@@ -461,15 +465,21 @@ class ToolBarToolComponent {
     handleKey(ev) {
         return false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0 });
 }
-ToolBarToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ToolBarToolComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, decorators: [{
             type: Directive,
             args: [{
                     standalone: true
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { responsive: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], responsive: [{
                 type: Input
             }] } });
 
@@ -477,9 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 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.
@@ -501,6 +509,8 @@ class PreventableEvent {
  * @hidden
  */
 class RendererService {
+    element;
+    renderer;
     getElement() {
         return this.element.nativeElement;
     }
@@ -534,10 +544,10 @@ 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
         }] });
 
@@ -545,17 +555,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class ToolbarToolsService {
-    constructor() {
-        this.renderedToolsChange = new Subject();
-        this.overflowToolsChange = new Subject();
-        this.renderedTools = [];
-        this.overflowTools = [];
-        this.allTools = [];
-    }
+    renderedToolsChange = new Subject();
+    overflowToolsChange = new Subject();
+    renderedTools = [];
+    overflowTools = [];
+    allTools = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService });
 }
-ToolbarToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ToolbarToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService, decorators: [{
             type: Injectable
         }] });
 
@@ -564,19 +572,28 @@ const MIN_SPACER_WIDTH = 18;
  * @hidden
  */
 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);
@@ -648,6 +665,9 @@ 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);
@@ -665,10 +685,10 @@ class ToolBarRendererComponent {
             }
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: RendererService }, { token: RefreshService }, { token: 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: RendererService }, { token: RefreshService }, { token: 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],
@@ -689,10 +709,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 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
@@ -706,19 +730,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 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: [
@@ -745,57 +770,22 @@ const getInitialPopupSettings = (isRtl) => ({
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
 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._fillMode = DEFAULT_FILL_MODE;
-        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
      */
@@ -832,6 +822,10 @@ class ToolBarComponent {
     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.
      *
@@ -858,6 +852,21 @@ 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') {
@@ -884,6 +893,19 @@ 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
      */
@@ -904,12 +926,29 @@ 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 => {
@@ -1152,6 +1191,14 @@ 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);
@@ -1299,18 +1346,17 @@ 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: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: 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", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: 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"
@@ -1377,7 +1423,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',
@@ -1520,85 +1567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
  */
 class ToolBarButtonComponent extends ToolBarToolComponent {
-    constructor(element, zone) {
-        super();
-        this.element = element;
-        this.zone = zone;
-        /**
-         * Specifies where button icon should be displayed
-         */
-        this.showIcon = 'both';
-        /**
-         * Provides visual styling that indicates if the Button is active
-         * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
-         * By default, `toggleable` is set to `false`.
-         */
-        this.toggleable = false;
-        /**
-         * Sets the selected state of the Button.
-         */
-        this.selected = false;
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-         * * `info`&mdash;Applies coloring based on the `info` theme color.
-         * * `success`&mdash; Applies coloring based on the `success` theme color.
-         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-         * * `error`&mdash; Applies coloring based on the `error` theme color.
-         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-         * * `light`&mdash; Applies coloring based on the `light` theme color.
-         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Fires each time the Button is clicked.
-         */
-        this.click = new EventEmitter();
-        /**
-         * Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
-         */
-        this.pointerdown = new EventEmitter();
-        /**
-         * Fires each time the selected state of a Toggle Button is changed.
-         * The event argument is the new selected state (Boolean).
-         */
-        this.selectedChange = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._showText = 'both';
-        this.isBuiltInTool = true;
-    }
+    element;
+    zone;
     // showText and showIcon showIcon should be declared first
     /**
      * Specifies where button text should be displayed
@@ -1610,6 +1580,10 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     get showText() {
         return this._showText;
     }
+    /**
+     * Specifies where button icon should be displayed
+     */
+    showIcon = 'both';
     /**
      * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
      */
@@ -1620,6 +1594,29 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     get text() {
         return this._text;
     }
+    /**
+     * Specifies custom inline CSS styles of the Button.
+     */
+    style;
+    /**
+     * Specifies custom CSS class names that will be added to the Button.
+     */
+    className;
+    /**
+     * Specifies the title of the Button.
+     */
+    title;
+    /**
+     * If `disabled` is set to `true`, the Button is disabled
+     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     */
+    disabled;
+    /**
+     * Provides visual styling that indicates if the Button is active
+     * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
+     * By default, `toggleable` is set to `false`.
+     */
+    toggleable = false;
     /**
      * @hidden
      */
@@ -1637,6 +1634,41 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     set togglable(value) {
         this.toggleable = value;
     }
+    /**
+     * Sets the selected state of the Button.
+     */
+    selected = false;
+    /**
+     * The fillMode property specifies the background and border styles of the Button.
+     *
+     * The available values are:
+     * * `solid` (default)
+     * * `flat`
+     * * `outline`
+     * * `link`
+     * * `null`
+     */
+    fillMode = 'solid';
+    /**
+     * The Button allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+     * * `primary` &mdash;Applies coloring based on the `primary` theme color.
+     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+     * * `info`&mdash;Applies coloring based on the `info` theme color.
+     * * `success`&mdash; Applies coloring based on the `success` theme color.
+     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+     * * `error`&mdash; Applies coloring based on the `error` theme color.
+     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+     * * `light`&mdash; Applies coloring based on the `light` theme color.
+     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+     * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+     */
+    themeColor = 'base';
     /**
      * Defines the name for an existing icon in a Kendo UI theme
      * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
@@ -1678,6 +1710,43 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
         this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
     }
+    /**
+     * Fires each time the Button is clicked.
+     */
+    click = new EventEmitter();
+    /**
+     * Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
+     */
+    pointerdown = new EventEmitter();
+    /**
+     * Fires each time the selected state of a Toggle Button is changed.
+     * The event argument is the new selected state (Boolean).
+     */
+    selectedChange = new EventEmitter();
+    toolbarOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    overflowOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    toolbarButtonElement;
+    overflowButtonElement;
+    _showText = 'both';
+    _text;
+    constructor(element, zone) {
+        super();
+        this.element = element;
+        this.zone = zone;
+        this.isBuiltInTool = true;
+    }
     ngOnInit() {
         this.setTextDisplayMode();
     }
@@ -1736,9 +1805,8 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
             this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
         });
     }
-}
-ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "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
@@ -1792,7 +1860,8 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             </div>
         </ng-template>
     `, isInline: true, dependencies: [{ 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarButton',
@@ -1895,12 +1964,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], selectedChange: [{
                 type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], toolbarButtonElement: [{
                 type: ViewChild,
                 args: ['toolbarButton', { read: ElementRef }]
@@ -1913,24 +1976,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the Kendo UI Toolbar ButtonGroup for Angular.
  */
 class ToolBarButtonGroupComponent extends ToolBarToolComponent {
-    constructor(localization) {
-        super();
-        this.localization = localization;
-        /**
-         * @hidden
-         *
-         * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
-         */
-        this.fillMode = 'solid';
-        /**
-         * By default, the selection mode of the ButtonGroup is set to `multiple`.
-         */
-        this.selection = 'multiple';
-        this.focusedIndex = -1;
-        this.getNextKey = getNextKey(this.localization.rtl);
-        this.getPrevKey = getPrevKey(this.localization.rtl);
-        this.isBuiltInTool = true;
-    }
+    localization;
+    /**
+     * By default, the ButtonGroup is enabled. To disable the whole group of buttons, set its `disabled`
+     * attribute to `true`. To disable a specific button, set the `disabled` attribute of the button to
+     * `true` and leave the `disabled` attribute of the ButtonGroup undefined. If you define the `disabled`
+     * attribute of the ButtonGroup, it will take precedence over the `disabled` attributes of the underlying
+     * buttons and they will be ignored.
+     */
+    disabled;
+    /**
+     * @hidden
+     *
+     * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
+     */
+    fillMode = 'solid';
+    /**
+     * By default, the selection mode of the ButtonGroup is set to `multiple`.
+     */
+    selection = 'multiple';
+    /**
+     * Sets the width of the ButtonGroup.
+     *
+     * If the width of the ButtonGroup is set:
+     * - The buttons resize automatically to fill the full width of the group wrapper.
+     * - The buttons acquire the same width.
+     */
+    width;
     /**
      * @hidden
      */
@@ -1939,6 +2011,9 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
             this.buttonComponents.forEach(b => b.fillMode = look === 'default' ? 'solid' : look);
         }
     }
+    toolbarButtonGroup;
+    overflowListItems;
+    buttonComponents;
     get buttonElements() {
         if (this.overflows) {
             return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))].map(el => el.nativeElement);
@@ -1949,6 +2024,16 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 .map(b => b.element);
         }
     }
+    focusedIndex = -1;
+    getNextKey;
+    getPrevKey;
+    constructor(localization) {
+        super();
+        this.localization = localization;
+        this.getNextKey = getNextKey(this.localization.rtl);
+        this.getPrevKey = getPrevKey(this.localization.rtl);
+        this.isBuiltInTool = true;
+    }
     /**
      * @hidden
      */
@@ -2045,9 +2130,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
             this.buttonElements[index]?.focus();
         }
     }
-}
-ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
                 class="k-toolbar-button-group k-button-group-{{fillMode}}"
@@ -2110,7 +2194,8 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 </div>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarButtonGroup',
@@ -2192,12 +2277,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], look: [{
                 type: Input
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], toolbarButtonGroup: [{
                 type: ViewChild,
                 args: ['toolbarButtonGroup', { static: false }]
@@ -2213,90 +2292,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
-    constructor(renderer) {
-        super();
-        this.renderer = renderer;
-        /**
-         * Allows showing the default arrow icon or providing alternative one instead.
-         * @default false
-         */
-        this.arrowIcon = false;
-        /**
-         * Sets the `title` attribute of the underlying button element.
-         * @default ''
-         */
-        this.title = '';
-        /**
-         * Defines the location of the button icon that will be displayed.
-         */
-        this.showIcon = 'both';
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-         * * `info`&mdash;Applies coloring based on the `info` theme color.
-         * * `success`&mdash; Applies coloring based on the `success` theme color.
-         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-         * * `error`&mdash; Applies coloring based on the `error` theme color.
-         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-         * * `light`&mdash; Applies coloring based on the `light` theme color.
-         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Fires each time the user clicks a DropDownButton item.
-         * The event data contains the data item that is bound to the clicked list item.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.focusedIndex = -1;
-        this._showText = 'both';
-        this.getNextKey = getNextKey();
-        this.getPrevKey = getPrevKey();
-        this.isBuiltInTool = true;
-    }
+    renderer;
+    /**
+     * Allows showing the default arrow icon or providing alternative one instead.
+     * @default false
+     */
+    arrowIcon = false;
+    /**
+     * Sets the `title` attribute of the underlying button element.
+     * @default ''
+     */
+    title = '';
     // showText and showIcon showIcon should be declared first
     /**
      * Defines the location of the button text that will be displayed.
@@ -2308,6 +2314,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     get showText() {
         return this._showText;
     }
+    /**
+     * Defines the location of the button icon that will be displayed.
+     */
+    showIcon = 'both';
     /**
      * Sets the text of the DropDownButton
      * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons).
@@ -2383,6 +2393,51 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     set primary(primary) {
         this.themeColor = primary ? 'primary' : 'base';
     }
+    /**
+     * The fillMode property specifies the background and border styles of the Button.
+     *
+     * The available values are:
+     * * `solid` (default)
+     * * `flat`
+     * * `outline`
+     * * `link`
+     * * `null`
+     */
+    fillMode = 'solid';
+    /**
+     * The Button allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+     * * `primary` &mdash;Applies coloring based on the `primary` theme color.
+     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+     * * `info`&mdash;Applies coloring based on the `info` theme color.
+     * * `success`&mdash; Applies coloring based on the `success` theme color.
+     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+     * * `error`&mdash; Applies coloring based on the `error` theme color.
+     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+     * * `light`&mdash; Applies coloring based on the `light` theme color.
+     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+     * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+     */
+    themeColor = 'base';
+    /**
+     * The CSS classes that will be rendered on the main button.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    buttonClass;
+    /**
+     * Sets the data item field that represents the item text.
+     * If the data contains only primitive values, do not define it.
+     */
+    textField;
+    /**
+     * Sets the disabled state of the DropDownButton.
+     */
+    disabled;
     /**
      * Sets the data of the DropDownButton
      * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons)).
@@ -2398,6 +2453,38 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    /**
+     * Fires each time the user clicks a DropDownButton item.
+     * The event data contains the data item that is bound to the clicked list item.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    dropdownButton;
+    dropDownButtonComponent;
+    overflowListItems;
+    toolbarOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    overflowOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
     ngOnInit() {
         this.setTextDisplayMode();
     }
@@ -2407,6 +2494,21 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
+    toolbarDropDownButton;
+    _data;
+    _popupSettings = { animate: true, popupClass: '' };
+    focusedIndex = -1;
+    _showText = 'both';
+    _text;
+    getNextKey;
+    getPrevKey;
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.getNextKey = getNextKey();
+        this.getPrevKey = getPrevKey();
+        this.isBuiltInTool = true;
+    }
     /**
      * @hidden
      */
@@ -2479,9 +2581,8 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
-}
-ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
@@ -2547,7 +2648,8 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </ng-container>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarDropDownButton',
@@ -2664,12 +2766,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { read: ElementRef, static: true }]
@@ -2688,96 +2784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
  */
 class ToolBarSplitButtonComponent extends ToolBarToolComponent {
-    constructor() {
-        super();
-        /**
-         * Specifies where button icon should be displayed
-         */
-        this.showIcon = 'both';
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly.
-         *
-         * The possible values are:
-         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-         * * `info`&mdash;Applies coloring based on the `info` theme color.
-         * * `success`&mdash; Applies coloring based on the `success` theme color.
-         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-         * * `error`&mdash; Applies coloring based on the `error` theme color.
-         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-         * * `light`&mdash; Applies coloring based on the `light` theme color.
-         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
-         * be rendered for the button which opens the popup.
-         */
-        this.arrowButtonIcon = 'caret-alt-down';
-        /**
-         * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
-         * be rendered for the button which opens the popup.
-         */
-        this.arrowButtonSvgIcon = caretAltDownIcon;
-        /**
-         * Configures the text field of the button-list popup.
-         */
-        this.textField = 'text';
-        /**
-         * Fires each time the user clicks the main button.
-         */
-        this.buttonClick = new EventEmitter();
-        /**
-         * Fires each time the user clicks the drop-down list.
-         * The event data contains the data item that is bound to the clicked list item.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.focusedIndex = -1;
-        this._showText = 'both';
-        this.getNextKey = getNextKey();
-        this.getPrevKey = getPrevKey();
-        this.isBuiltInTool = true;
-    }
     // showText and showIcon showIcon should be declared first
     /**
      * Specifies where button text should be displayed
@@ -2789,6 +2795,10 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     get showText() {
         return this._showText;
     }
+    /**
+     * Specifies where button icon should be displayed
+     */
+    showIcon = 'both';
     /**
      * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons).
      */
@@ -2837,6 +2847,10 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
         this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
     }
+    /**
+     * When set to `true`, disables a SplitButton item.
+     */
+    disabled;
     /**
      * Configures the popup of the SplitButton.
      *
@@ -2853,6 +2867,36 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         return this._popupSettings;
     }
+    /**
+     * The fillMode property specifies the background and border styles of the Button.
+     *
+     * The available values are:
+     * * `solid` (default)
+     * * `flat`
+     * * `outline`
+     * * `link`
+     * * `null`
+     */
+    fillMode = 'solid';
+    /**
+     * The Button allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly.
+     *
+     * The possible values are:
+     * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+     * * `primary` &mdash;Applies coloring based on the `primary` theme color.
+     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+     * * `info`&mdash;Applies coloring based on the `info` theme color.
+     * * `success`&mdash; Applies coloring based on the `success` theme color.
+     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+     * * `error`&mdash; Applies coloring based on the `error` theme color.
+     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+     * * `light`&mdash; Applies coloring based on the `light` theme color.
+     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+     * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+     */
+    themeColor = 'base';
     /**
      * @hidden
      */
@@ -2861,6 +2905,30 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             this.fillMode = look === 'default' ? 'solid' : look;
         }
     }
+    /**
+     * The CSS classes that will be rendered on the main button.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    buttonClass;
+    /**
+     * The CSS classes that will be rendered on the button which opens the popup.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    arrowButtonClass;
+    /**
+     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
+     * be rendered for the button which opens the popup.
+     */
+    arrowButtonIcon = 'caret-alt-down';
+    /**
+     * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
+     * be rendered for the button which opens the popup.
+     */
+    arrowButtonSvgIcon = caretAltDownIcon;
+    /**
+     * Configures the text field of the button-list popup.
+     */
+    textField = 'text';
     /**
      * Sets the data of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
      *
@@ -2875,12 +2943,61 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    /**
+     * Fires each time the user clicks the main button.
+     */
+    buttonClick = new EventEmitter();
+    /**
+     * Fires each time the user clicks the drop-down list.
+     * The event data contains the data item that is bound to the clicked list item.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    toolbarOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    overflowOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
     ngOnInit() {
         this.setTextDisplayMode();
     }
     get overflowButtons() {
         return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
+    _data;
+    _popupSettings = { animate: true, popupClass: '' };
+    focusedIndex = -1;
+    _showText = 'both';
+    _text;
+    getNextKey;
+    getPrevKey;
+    toolbarSplitButton;
+    overflowMainButton;
+    overflowListItems;
+    constructor() {
+        super();
+        this.getNextKey = getNextKey();
+        this.getPrevKey = getPrevKey();
+        this.isBuiltInTool = true;
+    }
     /**
      * @hidden
      */
@@ -2958,9 +3075,8 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
-}
-ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
@@ -3030,8 +3146,9 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarSplitButton',
@@ -3155,12 +3272,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], toolbarSplitButton: [{
                 type: ViewChild,
                 args: ['toolbarSplitButton', { static: false }]
@@ -3176,6 +3287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
  */
 class ToolBarSeparatorComponent extends ToolBarToolComponent {
+    separator;
     constructor() {
         super();
         this.isBuiltInTool = true;
@@ -3205,9 +3317,8 @@ class ToolBarSeparatorComponent extends ToolBarToolComponent {
             this.popupTemplate = this.toolbarTemplate;
         }
     }
-}
-ToolBarSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSeparatorComponent, isStandalone: true, selector: "kendo-toolbar-separator", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "separator", first: true, predicate: ["separator"], descendants: true }], exportAs: ["kendoToolBarSeparator"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSeparatorComponent, isStandalone: true, selector: "kendo-toolbar-separator", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }], viewQueries: [{ propertyName: "separator", first: true, predicate: ["separator"], descendants: true }], exportAs: ["kendoToolBarSeparator"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <div class="k-separator"></div>
         </ng-template>
@@ -3218,7 +3329,8 @@ ToolBarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             </div>
         </ng-template>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarSeparator',
@@ -3237,13 +3349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     `,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], separator: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { separator: [{
                 type: ViewChild,
                 args: ['separator', { static: false }]
             }] } });
@@ -3252,12 +3358,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
  */
 class ToolBarSpacerComponent extends ToolBarToolComponent {
+    /**
+     * @hidden
+     */
+    __isSpacer = true;
     constructor() {
         super();
-        /**
-         * @hidden
-         */
-        this.__isSpacer = true;
         this.isBuiltInTool = true;
     }
     /**
@@ -3285,14 +3391,14 @@ class ToolBarSpacerComponent extends ToolBarToolComponent {
             this.popupTemplate = this.toolbarTemplate;
         }
     }
-}
-ToolBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSpacerComponent, isStandalone: true, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSpacerComponent, isStandalone: true, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <div class="k-spacer"></div>
         </ng-template>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarSpacer',
@@ -3305,18 +3411,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     `,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }] } });
+        }], ctorParameters: function () { return []; } });
 
 /**
  * Custom component messages override default component messages.
  */
 class ToolbarCustomMessagesComponent extends ToolbarMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -3324,15 +3425,15 @@ 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: [
@@ -3376,11 +3477,11 @@ const KENDO_TOOLBAR = [
  * - `ToolBarSeparatorComponent`&mdash;The Separator Tool component class.
  */
 class ToolBarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, imports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent], exports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ToolBarComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSplitButtonComponent] });
 }
-ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, imports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent], exports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent] });
-ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_TOOLBAR],