@progress/kendo-angular-toolbar 5.0.0-dev.202201190923 → 6.0.0-next.202203010923

package/{dist/fesm2015/index.js → fesm2015/kendo-angular-toolbar.js}

@@ -2,16 +2,21 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata } from 'tslib';
-import { EventEmitter, Injectable, NgZone, Input, Component, Output, ContentChildren, QueryList, ViewChild, ElementRef, TemplateRef, ViewContainerRef, ViewChildren, HostBinding, HostListener, ChangeDetectorRef, Renderer2, forwardRef, Directive, NgModule } from '@angular/core';
-import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
-import { Keys, isDocumentAvailable, ResizeSensorComponent, ResizeSensorModule } from '@progress/kendo-angular-common';
-import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i0 from '@angular/core';
+import { EventEmitter, Injectable, Component, Input, Output, HostListener, Directive, forwardRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, HostBinding, ElementRef, NgModule } from '@angular/core';
+import * as i1 from '@progress/kendo-angular-l10n';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
+import * as i6 from '@progress/kendo-angular-common';
+import { Keys, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
-import { ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent, ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i2 from '@progress/kendo-angular-popup';
+import { PopupModule } from '@progress/kendo-angular-popup';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i1$1 from '@progress/kendo-angular-buttons';
+import { DropDownButtonComponent, ButtonsModule } from '@progress/kendo-angular-buttons';
 
 /**
  * @hidden
@@ -20,7 +25,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642584102,
+    publishDate: 1646126451,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -28,20 +33,19 @@ const packageMetadata = {
 /**
  * @hidden
  */
-let RefreshService = class RefreshService {
-    /**
-     * @hidden
-     */
+class RefreshService {
     constructor() {
         this.onRefresh = new EventEmitter();
     }
     refresh(tool) {
         this.onRefresh.emit(tool);
     }
-};
-RefreshService = __decorate([
-    Injectable()
-], RefreshService);
+}
+RefreshService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RefreshService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RefreshService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RefreshService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RefreshService, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * @hidden
@@ -66,6 +70,15 @@ function innerWidth(element) {
     width -= parseFloat(style.paddingRight) || 0 + parseFloat(style.borderRightWidth) || 0;
     return width;
 }
+/**
+ * @hidden
+ */
+function outerHeight(element) {
+    var width = element.offsetHeight;
+    var style = getComputedStyle(element);
+    width += parseFloat(style.marginTop) || 0 + parseFloat(style.marginBottom) || 0;
+    return width;
+}
 /**
  * @hidden
  */
@@ -220,7 +233,7 @@ const getValueForLocation = (property, displayMode, overflows) => {
 /**
  * @hidden
  */
-let NavigationService = class NavigationService {
+class NavigationService {
     constructor(zone) {
         this.zone = zone;
         this.focused = { renderedTool: null, index: -1 };
@@ -329,21 +342,18 @@ let NavigationService = class NavigationService {
         return (isPresent(this.overflowButton) &&
             window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue('visibility') === 'visible');
     }
-};
-NavigationService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [NgZone])
-], NavigationService);
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
 /**
  * Represents the Base ToolBar Tool component for Angular.
  * Extend this class to create custom tools.
  */
-let ToolBarToolComponent = class ToolBarToolComponent {
-    /**
-     * Represents the Base ToolBar Tool component for Angular.
-     * Extend this class to create custom tools.
-     */
+class ToolBarToolComponent {
     constructor() {
         this.tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
         this.overflows = true;
@@ -387,18 +397,19 @@ let ToolBarToolComponent = class ToolBarToolComponent {
     handleKey(ev) {
         return false;
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarToolComponent.prototype, "responsive", void 0);
-ToolBarToolComponent = __decorate([
-    Component({
-        // tslint:disable-next-line:component-selector
-        selector: 'toolbar-tool',
-        template: ``
-    })
-], ToolBarToolComponent);
+}
+ToolBarToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarToolComponent, selector: "toolbar-tool", inputs: { responsive: "responsive" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'toolbar-tool',
+                    template: ``
+                }]
+        }], propDecorators: { responsive: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
@@ -429,6 +440,213 @@ class PreventableEvent {
  */
 const defaultPopupWidth = '150px';
 
+/**
+ * @hidden
+ */
+class RendererService {
+    getElement() {
+        return this.element.nativeElement;
+    }
+    querySelector(selector) {
+        return this.element.nativeElement.querySelector(selector);
+    }
+    querySelectorAll(selector) {
+        return this.element.nativeElement.querySelectorAll(selector);
+    }
+    findFocusable() {
+        return findFocusable(this.element.nativeElement, false);
+    }
+    findFocusableChild(element) {
+        if (!element) {
+            element = this.findFocusable();
+        }
+        return findFocusableChild(element, false);
+    }
+    findNextFocusableSibling(element) {
+        if (!element) {
+            element = this.findFocusable();
+        }
+        return findFocusableSibling(element, false);
+    }
+    findPrevFocusableSibling(element) {
+        if (!element) {
+            element = this.findFocusable();
+        }
+        return findFocusableSibling(element, false, true);
+    }
+    setAttribute(element, attr, value) {
+        this.renderer.setAttribute(element, attr, value);
+    }
+}
+RendererService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RendererService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RendererService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RendererService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+class ToolBarRendererComponent {
+    constructor(element, renderer, rendererService, refreshService) {
+        this.element = element;
+        this.renderer = renderer;
+        this.rendererService = rendererService;
+        this.refreshService = refreshService;
+        this.rendererClick = new EventEmitter();
+        this.rendererService.element = element;
+        this.rendererService.renderer = this;
+        this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
+            if (this.tool === tool) {
+                this.refresh();
+            }
+        });
+    }
+    onClick(ev) {
+        this.rendererClick.emit({ context: this, event: ev });
+    }
+    ngOnInit() {
+        if (this.resizable) {
+            if (this.location === 'toolbar') {
+                this.template = this.tool.toolbarTemplate;
+                this.renderer.setStyle(this.element.nativeElement, 'visibility', 'hidden');
+                this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
+            }
+            else {
+                this.template = this.tool.popupTemplate;
+                this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
+            }
+        }
+        else {
+            this.tool.overflows = false;
+            this.template = this.tool.toolbarTemplate;
+            this.renderer.setStyle(this.element.nativeElement, 'visibility', 'display');
+            this.renderer.setStyle(this.element.nativeElement, 'display', 'inline-block');
+        }
+    }
+    ngOnDestroy() {
+        this.refreshSubscription.unsubscribe();
+    }
+    ngAfterViewInit() {
+        if (this.resizable) {
+            this.refresh();
+        }
+    }
+    /**
+     * @hidden
+     */
+    get width() {
+        return this.tool.overflows ? 0 : outerWidth(this.element.nativeElement);
+    }
+    /**
+     * @hidden
+     */
+    isDisplayed() {
+        return this.element.nativeElement.style.display !== 'none';
+    }
+    /**
+     * @hidden
+     */
+    refresh() {
+        if (this.resizable) {
+            if (this.location === 'toolbar') {
+                this.renderer.setStyle(this.element.nativeElement, 'visibility', this.tool.visibility);
+                this.renderer.setStyle(this.element.nativeElement, 'display', this.tool.toolbarDisplay);
+            }
+            else {
+                this.renderer.setStyle(this.element.nativeElement, 'display', this.tool.overflowDisplay);
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    setAttribute(element, attr, value) {
+        this.renderer.setAttribute(element, attr, value);
+    }
+}
+ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: RendererService }, { token: RefreshService }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
+        <ng-container *ngIf="location === 'toolbar'">
+            <ng-template [ngTemplateOutlet]="template"></ng-template>
+        </ng-container>
+        <ng-container *ngIf="location === 'overflow' && tool.responsive">
+            <ng-template [ngTemplateOutlet]="template"></ng-template>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarRenderer',
+                    providers: [RendererService],
+                    selector: 'kendo-toolbar-renderer',
+                    template: `
+        <ng-container *ngIf="location === 'toolbar'">
+            <ng-template [ngTemplateOutlet]="template"></ng-template>
+        </ng-container>
+        <ng-container *ngIf="location === 'overflow' && tool.responsive">
+            <ng-template [ngTemplateOutlet]="template"></ng-template>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: RendererService }, { type: RefreshService }]; }, propDecorators: { tool: [{
+                type: Input
+            }], location: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], rendererClick: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * @hidden
+ */
+class ToolbarMessages extends ComponentMessages {
+}
+ToolbarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToolbarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-messages-base'
+                }]
+        }], propDecorators: { moreToolsTitle: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedToolbarMessagesDirective extends ToolbarMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedToolbarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedToolbarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedToolbarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]", providers: [
+        {
+            provide: ToolbarMessages,
+            useExisting: forwardRef(() => LocalizedToolbarMessagesDirective) // eslint-disable-line no-forward-ref
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedToolbarMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: ToolbarMessages,
+                            useExisting: forwardRef(() => LocalizedToolbarMessagesDirective) // eslint-disable-line no-forward-ref
+                        }
+                    ],
+                    selector: '[kendoToolbarLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
     anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
@@ -437,7 +655,7 @@ const getInitialPopupSettings = (isRtl) => ({
 /**
  * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
  */
-let ToolBarComponent = class ToolBarComponent {
+class ToolBarComponent {
     constructor(localization, popupService, refreshService, navigationService, element, cdr, zone, renderer) {
         this.localization = localization;
         this.popupService = popupService;
@@ -836,112 +1054,77 @@ let ToolBarComponent = class ToolBarComponent {
         popupContentContainer.style.height = this.popupHeight;
         popupContentContainer.style.overflow = 'auto';
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarComponent.prototype, "overflow", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], ToolBarComponent.prototype, "resizable", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], ToolBarComponent.prototype, "popupSettings", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ToolBarComponent.prototype, "tabindex", void 0);
-__decorate([
-    Input('tabIndex'),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], ToolBarComponent.prototype, "tabIndex", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarComponent.prototype, "open", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarComponent.prototype, "close", void 0);
-__decorate([
-    ContentChildren(ToolBarToolComponent),
-    __metadata("design:type", QueryList)
-], ToolBarComponent.prototype, "allTools", void 0);
-__decorate([
-    ViewChild('overflowButton', { static: false }),
-    __metadata("design:type", ElementRef)
-], ToolBarComponent.prototype, "overflowButton", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ViewChild('resizeSensor', { static: false }),
-    __metadata("design:type", ResizeSensorComponent)
-], ToolBarComponent.prototype, "resizeSensor", void 0);
-__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    __metadata("design:type", ViewContainerRef)
-], ToolBarComponent.prototype, "container", void 0);
-__decorate([
-    ViewChildren('toolbarRenderer'),
-    __metadata("design:type", QueryList)
-], ToolBarComponent.prototype, "renderedTools", void 0);
-__decorate([
-    ViewChildren('overflowRenderer'),
-    __metadata("design:type", QueryList)
-], ToolBarComponent.prototype, "overflowRenderedTools", void 0);
-__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-toolbar'),
-    __metadata("design:type", Boolean)
-], ToolBarComponent.prototype, "hostClasses", void 0);
-__decorate([
-    HostListener('focus', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ToolBarComponent.prototype, "onFocus", null);
-__decorate([
-    HostListener('focusout', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ToolBarComponent.prototype, "onFocusOut", null);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ToolBarComponent.prototype, "getRole", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ToolBarComponent.prototype, "getDir", null);
-__decorate([
-    HostBinding('class.k-toolbar-resizable'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ToolBarComponent.prototype, "resizableClass", null);
-ToolBarComponent = __decorate([
-    Component({
-        exportAs: 'kendoToolBar',
-        providers: [
-            RefreshService,
-            NavigationService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.toolbar'
-            }
-        ],
-        selector: 'kendo-toolbar',
-        template: `
+}
+ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.getRole", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+        RefreshService,
+        NavigationService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.toolbar'
+        }
+    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "renderedTools", predicate: ["toolbarRenderer"], descendants: true }, { propertyName: "overflowRenderedTools", predicate: ["overflowRenderer"], descendants: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoToolbarLocalizedMessages
+        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
+        moreToolsTitle="More tools"
+        >
+        </ng-container>
+        <ng-container *ngFor="let tool of allTools; let index = index">
+            <kendo-toolbar-renderer
+                #toolbarRenderer
+                (rendererClick)="onRendererClick($event)"
+                [location]="'toolbar'"
+                [resizable]="overflow"
+                [tool]="tool"
+            ></kendo-toolbar-renderer>
+        </ng-container>
+        <button
+            #overflowButton
+            type="button"
+            tabindex="-1"
+            [title]="moreToolsTitle"
+            [attr.aria-label]="moreToolsTitle"
+            *ngIf="overflow"
+            [style.visibility]="displayAnchor"
+            class="k-overflow-anchor k-button"
+            (click)="showPopup()"
+        >
+            <span class="k-icon k-i-more-vertical"></span>
+        </button>
+        <ng-template #popupTemplate>
+            <ul class="k-overflow-container k-list-container k-reset">
+                <ng-container *ngFor="let tool of allTools; let index = index">
+                    <li class="k-item">
+                        <kendo-toolbar-renderer
+                            #overflowRenderer
+                            (rendererClick)="onRendererClick($event)"
+                            [location]="'overflow'"
+                            [resizable]="overflow"
+                            [tool]="tool"
+                        ></kendo-toolbar-renderer>
+                    </li>
+                </ng-container>
+            </ul>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <kendo-resize-sensor *ngIf="overflow" [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBar',
+                    providers: [
+                        RefreshService,
+                        NavigationService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.toolbar'
+                        }
+                    ],
+                    selector: 'kendo-toolbar',
+                    template: `
         <ng-container kendoToolbarLocalizedMessages
         i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
         moreToolsTitle="More tools"
@@ -987,22 +1170,70 @@ ToolBarComponent = __decorate([
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
     `
-    }),
-    __metadata("design:paramtypes", [LocalizationService,
-        PopupService,
-        RefreshService,
-        NavigationService,
-        ElementRef,
-        ChangeDetectorRef,
-        NgZone,
-        Renderer2])
-], ToolBarComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { overflow: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input,
+                args: ['tabIndex']
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], allTools: [{
+                type: ContentChildren,
+                args: [ToolBarToolComponent]
+            }], overflowButton: [{
+                type: ViewChild,
+                args: ['overflowButton', { static: false }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], resizeSensor: [{
+                type: ViewChild,
+                args: ['resizeSensor', { static: false }]
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], renderedTools: [{
+                type: ViewChildren,
+                args: ['toolbarRenderer']
+            }], overflowRenderedTools: [{
+                type: ViewChildren,
+                args: ['overflowRenderer']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-widget']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], getRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], getDir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], resizableClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-resizable']
+            }] } });
 
-var ToolBarButtonComponent_1;
 /**
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
  */
-let ToolBarButtonComponent = ToolBarButtonComponent_1 = class ToolBarButtonComponent extends ToolBarToolComponent {
+class ToolBarButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
         // showText and showIcon showIcon should be declared first
@@ -1162,112 +1393,9 @@ let ToolBarButtonComponent = ToolBarButtonComponent_1 = class ToolBarButtonCompo
     getButton() {
         return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "showText", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "showIcon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "text", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ToolBarButtonComponent.prototype, "style", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ToolBarButtonComponent.prototype, "className", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "title", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarButtonComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarButtonComponent.prototype, "toggleable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "look", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], ToolBarButtonComponent.prototype, "togglable", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarButtonComponent.prototype, "selected", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "fillMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "themeColor", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "icon", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "iconClass", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "imageUrl", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarButtonComponent.prototype, "click", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarButtonComponent.prototype, "pointerdown", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarButtonComponent.prototype, "selectedChange", void 0);
-__decorate([
-    ViewChild('toolbarTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarButtonComponent.prototype, "toolbarTemplate", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarButtonComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ViewChild('toolbarButton', { read: ElementRef, static: false }),
-    __metadata("design:type", ElementRef)
-], ToolBarButtonComponent.prototype, "toolbarButtonElement", void 0);
-__decorate([
-    ViewChild('overflowButton', { read: ElementRef, static: false }),
-    __metadata("design:type", ElementRef)
-], ToolBarButtonComponent.prototype, "overflowButtonElement", void 0);
-ToolBarButtonComponent = ToolBarButtonComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoToolBarButton',
-        // tslint:disable-next-line:no-forward-ref
-        providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent_1) }],
-        selector: 'kendo-toolbar-button',
-        template: `
+}
+ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
@@ -1317,48 +1445,154 @@ ToolBarButtonComponent = ToolBarButtonComponent_1 = __decorate([
                 {{ overflowOptions.text }}
             </button>
         </ng-template>
-    `
-    }),
-    __metadata("design:paramtypes", [])
-], ToolBarButtonComponent);
-
-var ToolBarButtonGroupComponent_1;
-/**
- * Represents the Kendo UI Toolbar ButtonGroup for Angular.
- */
-let ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = class ToolBarButtonGroupComponent extends ToolBarToolComponent {
-    constructor(localization) {
-        super();
-        this.localization = localization;
-        /**
-         * 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);
-    }
-    /**
-     * @hidden
-     */
-    set look(look) {
-        if (look) {
-            this.buttonComponents.forEach(b => b.fillMode = look === 'default' ? 'solid' : look);
-        }
-    }
-    get buttonElements() {
-        return this.getButtonGroup()
-            .buttons.filter(b => !b.isDisabled)
-            .map(b => b.element);
-    }
-    /**
-     * @hidden
-     */
-    onFocus() {
-        // triggered on tabin
-        this.focusedIndex = 0;
-    }
-    /**
+    `, isInline: true, directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarButton',
+                    // eslint-disable-next-line no-forward-ref
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }],
+                    selector: 'kendo-toolbar-button',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <button
+                #toolbarButton
+                [tabindex]="tabIndex"
+                type="button"
+                kendoButton
+                [ngStyle]="style"
+                [ngClass]="className"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [toggleable]="toggleable"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                [selected]="selected"
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [imageUrl]="toolbarOptions.imageUrl"
+                (click)="click.emit($event)"
+                (pointerdown)="pointerdown.emit($event)"
+                (selectedChange)="selectedChange.emit($event)"
+                (blur)="onBlur()"
+            >
+                {{ toolbarOptions.text }}
+            </button>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <button
+                #overflowButton
+                tabindex="-1"
+                type="button"
+                kendoButton
+                class="k-overflow-button"
+                [ngStyle]="style"
+                [ngClass]="className"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [toggleable]="toggleable"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                [selected]="selected"
+                [icon]="overflowOptions.icon"
+                [iconClass]="overflowOptions.iconClass"
+                [imageUrl]="overflowOptions.imageUrl"
+                (click)="click.emit($event)"
+                (selectedChange)="selectedChange.emit($event)"
+            >
+                {{ overflowOptions.text }}
+            </button>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], toggleable: [{
+                type: Input
+            }], look: [{
+                type: Input
+            }], togglable: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], click: [{
+                type: Output
+            }], pointerdown: [{
+                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, static: false }]
+            }], overflowButtonElement: [{
+                type: ViewChild,
+                args: ['overflowButton', { read: ElementRef, static: false }]
+            }] } });
+
+/**
+ * Represents the Kendo UI Toolbar ButtonGroup for Angular.
+ */
+class ToolBarButtonGroupComponent extends ToolBarToolComponent {
+    constructor(localization) {
+        super();
+        this.localization = localization;
+        /**
+         * 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);
+    }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.buttonComponents.forEach(b => b.fillMode = look === 'default' ? 'solid' : look);
+        }
+    }
+    get buttonElements() {
+        return this.getButtonGroup()
+            .buttons.filter(b => !b.isDisabled)
+            .map(b => b.element);
+    }
+    /**
+     * @hidden
+     */
+    onFocus() {
+        // triggered on tabin
+        this.focusedIndex = 0;
+    }
+    /**
      * @hidden
      */
     onNavigate(ev) {
@@ -1414,51 +1648,81 @@ let ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = class ToolBarB
             this.buttonElements[index].focus();
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarButtonGroupComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonGroupComponent.prototype, "selection", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonGroupComponent.prototype, "width", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarButtonGroupComponent.prototype, "look", null);
-__decorate([
-    ViewChild('toolbarTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarButtonGroupComponent.prototype, "toolbarTemplate", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarButtonGroupComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ContentChildren(forwardRef(() => ToolBarButtonComponent)),
-    __metadata("design:type", QueryList)
-], ToolBarButtonGroupComponent.prototype, "buttonComponents", void 0);
-__decorate([
-    ViewChild('toolbarButtonGroup', { static: false }),
-    __metadata("design:type", ButtonGroupComponent)
-], ToolBarButtonGroupComponent.prototype, "toolbarButtonGroup", void 0);
-__decorate([
-    ViewChild('overflowButtonGroup', { static: false }),
-    __metadata("design:type", ButtonGroupComponent)
-], ToolBarButtonGroupComponent.prototype, "overflowButtonGroup", void 0);
-ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoToolBarButtonGroup',
-        // tslint:disable-next-line:no-forward-ref
-        providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent_1) }],
-        selector: 'kendo-toolbar-buttongroup',
-        template: `
+}
+ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowButtonGroup", first: true, predicate: ["overflowButtonGroup"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-buttongroup
+                #toolbarButtonGroup
+                [tabIndex]="-1"
+                [selection]="selection"
+                [disabled]="disabled"
+                [width]="width"
+                (navigate)="onNavigate($event)"
+                (focus)="onFocus()"
+            >
+                <span
+                    kendoButton
+                    *ngFor="let button of buttonComponents"
+                    [ngStyle]="button.style"
+                    [ngClass]="button.className"
+                    [attr.title]="button.title"
+                    [disabled]="button.disabled"
+                    [togglable]="button.togglable"
+                    [selected]="button.selected"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
+                    [icon]="button.toolbarOptions.icon"
+                    [iconClass]="button.toolbarOptions.iconClass"
+                    [imageUrl]="button.toolbarOptions.imageUrl"
+                    (click)="button.click.emit($event); onButtonClick($event)"
+                    (pointerdown)="button.pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event, button)"
+                >
+                    {{ button.toolbarOptions.text }}
+                </span>
+            </kendo-buttongroup>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <kendo-buttongroup
+                #overflowButtonGroup
+                class="k-overflow-button"
+                [tabIndex]="-1"
+                [selection]="selection"
+                [disabled]="disabled"
+                [width]="width"
+            >
+                <span
+                    kendoButton
+                    class="k-overflow-button"
+                    *ngFor="let button of buttonComponents"
+                    [ngStyle]="button.style"
+                    [ngClass]="button.className"
+                    [attr.title]="button.title"
+                    [disabled]="button.disabled"
+                    [togglable]="button.togglable"
+                    [selected]="button.selected"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
+                    [icon]="button.overflowOptions.icon"
+                    [iconClass]="button.overflowOptions.iconClass"
+                    [imageUrl]="button.overflowOptions.imageUrl"
+                    (click)="button.click.emit($event); onButtonClick($event)"
+                    (selectedChange)="selectedChangeHandler($event, button)"
+                >
+                    {{ button.overflowOptions.text }}
+                </span>
+            </kendo-buttongroup>
+        </ng-template>
+    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarButtonGroup',
+                    // eslint-disable-next-line no-forward-ref
+                    providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }],
+                    selector: 'kendo-toolbar-buttongroup',
+                    template: `
         <ng-template #toolbarTemplate>
             <kendo-buttongroup
                 #toolbarButtonGroup
@@ -1523,17 +1787,36 @@ ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = __decorate([
             </kendo-buttongroup>
         </ng-template>
     `
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], ToolBarButtonGroupComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], look: [{
+                type: Input
+            }], toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], buttonComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => ToolBarButtonComponent)]
+            }], toolbarButtonGroup: [{
+                type: ViewChild,
+                args: ['toolbarButtonGroup', { static: false }]
+            }], overflowButtonGroup: [{
+                type: ViewChild,
+                args: ['overflowButtonGroup', { static: false }]
+            }] } });
 
 /**
  * @hidden
  */
-let ToolBarButtonListComponent = class ToolBarButtonListComponent {
-    /**
-     * @hidden
-     */
+class ToolBarButtonListComponent {
     constructor() {
         this.disabled = false;
         this.fillMode = 'solid';
@@ -1553,39 +1836,33 @@ let ToolBarButtonListComponent = class ToolBarButtonListComponent {
         }
         this.itemClick.emit(dataItem);
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], ToolBarButtonListComponent.prototype, "data", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonListComponent.prototype, "textField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarButtonListComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonListComponent.prototype, "fillMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarButtonListComponent.prototype, "themeColor", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarButtonListComponent.prototype, "itemClick", void 0);
-__decorate([
-    ViewChildren('button'),
-    __metadata("design:type", QueryList)
-], ToolBarButtonListComponent.prototype, "buttons", void 0);
-ToolBarButtonListComponent = __decorate([
-    Component({
-        selector: 'kendo-toolbar-buttonlist',
-        template: `
+}
+ToolBarButtonListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: { data: "data", textField: "textField", disabled: "disabled", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "buttons", predicate: ["button"], descendants: true }], ngImport: i0, template: `
+        <button
+            #button
+            type="button"
+            tabindex="-1"
+            kendoButton
+            style="padding-left: 16px"
+            class="k-overflow-button"
+            *ngFor="let item of data; let i = index"
+            [disabled]="disabled || item.disabled"
+            [icon]="item.icon"
+            [iconClass]="item.iconClass"
+            [imageUrl]="item.imageUrl"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (click)="onClick(item, i)"
+        >
+            {{ getText(item) }}
+        </button>
+    `, isInline: true, directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-toolbar-buttonlist',
+                    template: `
         <button
             #button
             type="button"
@@ -1605,14 +1882,28 @@ ToolBarButtonListComponent = __decorate([
             {{ getText(item) }}
         </button>
     `
-    })
-], ToolBarButtonListComponent);
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], buttons: [{
+                type: ViewChildren,
+                args: ['button']
+            }] } });
 
-var ToolBarDropDownButtonComponent_1;
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
-let ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
+class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
         // showText and showIcon showIcon should be declared first
@@ -1809,118 +2100,64 @@ let ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = class To
             this.overflowButtons[index].nativeElement.focus();
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarDropDownButtonComponent.prototype, "showText", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarDropDownButtonComponent.prototype, "showIcon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarDropDownButtonComponent.prototype, "text", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarDropDownButtonComponent.prototype, "icon", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarDropDownButtonComponent.prototype, "iconClass", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarDropDownButtonComponent.prototype, "imageUrl", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], ToolBarDropDownButtonComponent.prototype, "popupSettings", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarDropDownButtonComponent.prototype, "look", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], ToolBarDropDownButtonComponent.prototype, "primary", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarDropDownButtonComponent.prototype, "fillMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarDropDownButtonComponent.prototype, "themeColor", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarDropDownButtonComponent.prototype, "buttonClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarDropDownButtonComponent.prototype, "textField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarDropDownButtonComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], ToolBarDropDownButtonComponent.prototype, "data", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarDropDownButtonComponent.prototype, "itemClick", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarDropDownButtonComponent.prototype, "open", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarDropDownButtonComponent.prototype, "close", void 0);
-__decorate([
-    ViewChild('toolbarTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarDropDownButtonComponent.prototype, "toolbarTemplate", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarDropDownButtonComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ViewChild('dropdownButton', { read: ElementRef, static: true }),
-    __metadata("design:type", ElementRef)
-], ToolBarDropDownButtonComponent.prototype, "dropdownButton", void 0);
-__decorate([
-    ViewChild(DropDownButtonComponent, { static: false }),
-    __metadata("design:type", DropDownButtonComponent)
-], ToolBarDropDownButtonComponent.prototype, "dropDownButtonComponent", void 0);
-__decorate([
-    ViewChild('toolbarDropDownButton', { static: false }),
-    __metadata("design:type", DropDownButtonComponent)
-], ToolBarDropDownButtonComponent.prototype, "toolbarDropDownButton", void 0);
-__decorate([
-    ViewChild('overflowDropDownButtonButtonList', { static: false }),
-    __metadata("design:type", ToolBarButtonListComponent)
-], ToolBarDropDownButtonComponent.prototype, "overflowDropDownButtonButtonList", void 0);
-ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoToolBarDropDownButton',
-        // tslint:disable-next-line:no-forward-ref
-        providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent_1) }],
-        selector: 'kendo-toolbar-dropdownbutton',
-        template: `
+}
+ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", 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: "overflowDropDownButtonButtonList", first: true, predicate: ["overflowDropDownButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-dropdownbutton
+                #toolbarDropDownButton
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [imageUrl]="toolbarOptions.imageUrl"
+                [buttonClass]="buttonClass"
+                [disabled]="disabled"
+                [tabIndex]="-1"
+                [data]="data"
+                [textField]="textField"
+                [popupSettings]="popupSettings"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                (open)="open.emit($event)"
+                (close)="close.emit($event)"
+                (itemClick)="itemClick.emit($event)"
+            >
+                {{ toolbarOptions.text }}
+            </kendo-dropdownbutton>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <button
+                type="button"
+                tabindex="-1"
+                kendoButton
+                class="k-overflow-button"
+                [disabled]="true"
+                [icon]="overflowOptions.icon"
+                [iconClass]="overflowOptions.iconClass"
+                [imageUrl]="overflowOptions.imageUrl"
+                [ngClass]="buttonClass"
+                (click)="itemClick.emit($event)"
+            >
+                {{ overflowOptions.text }}
+            </button>
+            <kendo-toolbar-buttonlist
+                #overflowDropDownButtonButtonList
+                [data]="data"
+                [disabled]="disabled"
+                [textField]="textField"
+                (itemClick)="itemClick.emit($event)"
+                (click)="onButtonListClick($event)"
+            >
+            </kendo-toolbar-buttonlist>
+        </ng-template>
+    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "popupSettings", "textField", "disabled", "data", "size", "shape", "rounded", "fillMode", "themeColor", "buttonClass", "tabIndex"], outputs: ["itemClick", "open", "close", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarDropDownButton',
+                    // eslint-disable-next-line no-forward-ref
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }],
+                    selector: 'kendo-toolbar-dropdownbutton',
+                    template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
@@ -1968,15 +2205,67 @@ ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = __decorate([
             </kendo-toolbar-buttonlist>
         </ng-template>
     `
-    }),
-    __metadata("design:paramtypes", [])
-], ToolBarDropDownButtonComponent);
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], look: [{
+                type: Input
+            }], primary: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], open: [{
+                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 }]
+            }], dropDownButtonComponent: [{
+                type: ViewChild,
+                args: [DropDownButtonComponent, { static: false }]
+            }], toolbarDropDownButton: [{
+                type: ViewChild,
+                args: ['toolbarDropDownButton', { static: false }]
+            }], overflowDropDownButtonButtonList: [{
+                type: ViewChild,
+                args: ['overflowDropDownButtonButtonList', { static: false }]
+            }] } });
 
-var ToolBarSplitButtonComponent_1;
 /**
  * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
  */
-let ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = class ToolBarSplitButtonComponent extends ToolBarToolComponent {
+class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
         // showText and showIcon showIcon should be declared first
@@ -2186,121 +2475,73 @@ let ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = class ToolBarS
             this.overflowButtons[index].nativeElement.focus();
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "showText", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "showIcon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarSplitButtonComponent.prototype, "text", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarSplitButtonComponent.prototype, "icon", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarSplitButtonComponent.prototype, "iconClass", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarSplitButtonComponent.prototype, "imageUrl", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarSplitButtonComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], ToolBarSplitButtonComponent.prototype, "popupSettings", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "fillMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "themeColor", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ToolBarSplitButtonComponent.prototype, "look", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "buttonClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ToolBarSplitButtonComponent.prototype, "arrowButtonClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "arrowButtonIcon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarSplitButtonComponent.prototype, "textField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], ToolBarSplitButtonComponent.prototype, "data", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarSplitButtonComponent.prototype, "buttonClick", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarSplitButtonComponent.prototype, "itemClick", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarSplitButtonComponent.prototype, "open", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarSplitButtonComponent.prototype, "close", void 0);
-__decorate([
-    ViewChild('toolbarTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarSplitButtonComponent.prototype, "toolbarTemplate", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarSplitButtonComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ViewChild('toolbarSplitButton', { static: false }),
-    __metadata("design:type", SplitButtonComponent)
-], ToolBarSplitButtonComponent.prototype, "toolbarSplitButton", void 0);
-__decorate([
-    ViewChild('overflowSplitButton', { read: ElementRef, static: false }),
-    __metadata("design:type", ElementRef)
-], ToolBarSplitButtonComponent.prototype, "overflowSplitButton", void 0);
-__decorate([
-    ViewChild('overflowSplitButtonButtonList', { static: false }),
-    __metadata("design:type", ToolBarButtonListComponent)
-], ToolBarSplitButtonComponent.prototype, "overflowSplitButtonButtonList", void 0);
-ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoToolBarSplitButton',
-        // tslint:disable-next-line:no-forward-ref
-        providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent_1) }],
-        selector: 'kendo-toolbar-splitbutton',
-        template: `
+}
+ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", 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: "overflowSplitButton", first: true, predicate: ["overflowSplitButton"], descendants: true, read: ElementRef }, { propertyName: "overflowSplitButtonButtonList", first: true, predicate: ["overflowSplitButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-splitbutton
+                #toolbarSplitButton
+                [data]="data"
+                [text]="toolbarOptions.text"
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [imageUrl]="toolbarOptions.imageUrl"
+                [buttonClass]="buttonClass"
+                [arrowButtonClass]="arrowButtonClass"
+                [arrowButtonIcon]="arrowButtonIcon"
+                [disabled]="disabled"
+                [tabIndex]="-1"
+                [textField]="textField"
+                [popupSettings]="popupSettings"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                (buttonClick)="buttonClick.emit($event)"
+                (open)="open.emit($event)"
+                (close)="close.emit($event)"
+                (itemClick)="itemClick.emit($event)"
+            >
+            </kendo-splitbutton>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <button
+                #overflowSplitButton
+                type="button"
+                tabindex="-1"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                kendoButton
+                class="k-overflow-button"
+                [disabled]="disabled"
+                [icon]="overflowOptions.icon"
+                [iconClass]="overflowOptions.iconClass"
+                [imageUrl]="overflowOptions.imageUrl"
+                [ngClass]="buttonClass"
+                (click)="buttonClick.emit($event)"
+                (click)="onMainButtonClick($event)"
+            >
+                {{ overflowOptions.text }}
+            </button>
+            <kendo-toolbar-buttonlist
+                #overflowSplitButtonButtonList
+                [data]="data"
+                [disabled]="disabled"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                [textField]="textField"
+                (itemClick)="itemClick.emit($event)"
+                (click)="onButtonListClick($event)"
+            >
+            </kendo-toolbar-buttonlist>
+        </ng-template>
+    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i1$1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarSplitButton',
+                    // eslint-disable-next-line no-forward-ref
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }],
+                    selector: 'kendo-toolbar-splitbutton',
+                    template: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
@@ -2357,15 +2598,68 @@ ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = __decorate([
             </kendo-toolbar-buttonlist>
         </ng-template>
     `
-    }),
-    __metadata("design:paramtypes", [])
-], ToolBarSplitButtonComponent);
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], look: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], arrowButtonClass: [{
+                type: Input
+            }], arrowButtonIcon: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
+            }], open: [{
+                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 }]
+            }], overflowSplitButton: [{
+                type: ViewChild,
+                args: ['overflowSplitButton', { read: ElementRef, static: false }]
+            }], overflowSplitButtonButtonList: [{
+                type: ViewChild,
+                args: ['overflowSplitButtonButtonList', { static: false }]
+            }] } });
 
-var ToolBarSeparatorComponent_1;
 /**
  * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
  */
-let ToolBarSeparatorComponent = ToolBarSeparatorComponent_1 = class ToolBarSeparatorComponent extends ToolBarToolComponent {
+class ToolBarSeparatorComponent extends ToolBarToolComponent {
     constructor() {
         super();
     }
@@ -2394,237 +2688,41 @@ let ToolBarSeparatorComponent = ToolBarSeparatorComponent_1 = class ToolBarSepar
             this.popupTemplate = this.toolbarTemplate;
         }
     }
-};
-__decorate([
-    ViewChild('toolbarTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarSeparatorComponent.prototype, "toolbarTemplate", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ToolBarSeparatorComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ViewChild('separator', { static: false }),
-    __metadata("design:type", ElementRef)
-], ToolBarSeparatorComponent.prototype, "separator", void 0);
-ToolBarSeparatorComponent = ToolBarSeparatorComponent_1 = __decorate([
-    Component({
-        exportAs: 'kendoToolBarSeparator',
-        // tslint:disable-next-line:no-forward-ref
-        providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent_1) }],
-        selector: 'kendo-toolbar-separator',
-        template: `
+}
+ToolBarSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarSeparatorComponent, 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: `
+        <ng-template #toolbarTemplate>
+            <div class="k-separator"></div>
+        </ng-template>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarSeparator',
+                    // eslint-disable-next-line no-forward-ref
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }],
+                    selector: 'kendo-toolbar-separator',
+                    template: `
         <ng-template #toolbarTemplate>
             <div class="k-separator"></div>
         </ng-template>
     `
-    }),
-    __metadata("design:paramtypes", [])
-], ToolBarSeparatorComponent);
-
-/**
- * @hidden
- */
-let RendererService = class RendererService {
-    getElement() {
-        return this.element.nativeElement;
-    }
-    querySelector(selector) {
-        return this.element.nativeElement.querySelector(selector);
-    }
-    querySelectorAll(selector) {
-        return this.element.nativeElement.querySelectorAll(selector);
-    }
-    findFocusable() {
-        return findFocusable(this.element.nativeElement, false);
-    }
-    findFocusableChild(element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableChild(element, false);
-    }
-    findNextFocusableSibling(element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableSibling(element, false);
-    }
-    findPrevFocusableSibling(element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableSibling(element, false, true);
-    }
-    setAttribute(element, attr, value) {
-        this.renderer.setAttribute(element, attr, value);
-    }
-};
-RendererService = __decorate([
-    Injectable()
-], RendererService);
-
-/**
- * @hidden
- */
-let ToolBarRendererComponent = class ToolBarRendererComponent {
-    constructor(element, renderer, rendererService, refreshService) {
-        this.element = element;
-        this.renderer = renderer;
-        this.rendererService = rendererService;
-        this.refreshService = refreshService;
-        this.rendererClick = new EventEmitter();
-        this.rendererService.element = element;
-        this.rendererService.renderer = this;
-        this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
-            if (this.tool === tool) {
-                this.refresh();
-            }
-        });
-    }
-    onClick(ev) {
-        this.rendererClick.emit({ context: this, event: ev });
-    }
-    ngOnInit() {
-        if (this.resizable) {
-            if (this.location === 'toolbar') {
-                this.template = this.tool.toolbarTemplate;
-                this.renderer.setStyle(this.element.nativeElement, 'visibility', 'hidden');
-                this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
-            }
-            else {
-                this.template = this.tool.popupTemplate;
-                this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
-            }
-        }
-        else {
-            this.tool.overflows = false;
-            this.template = this.tool.toolbarTemplate;
-            this.renderer.setStyle(this.element.nativeElement, 'visibility', 'display');
-            this.renderer.setStyle(this.element.nativeElement, 'display', 'inline-block');
-        }
-    }
-    ngOnDestroy() {
-        this.refreshSubscription.unsubscribe();
-    }
-    ngAfterViewInit() {
-        if (this.resizable) {
-            this.refresh();
-        }
-    }
-    /**
-     * @hidden
-     */
-    get width() {
-        return this.tool.overflows ? 0 : outerWidth(this.element.nativeElement);
-    }
-    /**
-     * @hidden
-     */
-    isDisplayed() {
-        return this.element.nativeElement.style.display !== 'none';
-    }
-    /**
-     * @hidden
-     */
-    refresh() {
-        if (this.resizable) {
-            if (this.location === 'toolbar') {
-                this.renderer.setStyle(this.element.nativeElement, 'visibility', this.tool.visibility);
-                this.renderer.setStyle(this.element.nativeElement, 'display', this.tool.toolbarDisplay);
-            }
-            else {
-                this.renderer.setStyle(this.element.nativeElement, 'display', this.tool.overflowDisplay);
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    setAttribute(element, attr, value) {
-        this.renderer.setAttribute(element, attr, value);
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", ToolBarToolComponent)
-], ToolBarRendererComponent.prototype, "tool", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolBarRendererComponent.prototype, "location", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ToolBarRendererComponent.prototype, "resizable", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ToolBarRendererComponent.prototype, "rendererClick", void 0);
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ToolBarRendererComponent.prototype, "onClick", null);
-ToolBarRendererComponent = __decorate([
-    Component({
-        exportAs: 'kendoToolBarRenderer',
-        providers: [RendererService],
-        selector: 'kendo-toolbar-renderer',
-        template: `
-        <ng-container *ngIf="location === 'toolbar'">
-            <ng-template [ngTemplateOutlet]="template"></ng-template>
-        </ng-container>
-        <ng-container *ngIf="location === 'overflow' && tool.responsive">
-            <ng-template [ngTemplateOutlet]="template"></ng-template>
-        </ng-container>
-    `
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        RendererService,
-        RefreshService])
-], ToolBarRendererComponent);
-
-/**
- * @hidden
- */
-class ToolbarMessages extends ComponentMessages {
-}
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ToolbarMessages.prototype, "moreToolsTitle", void 0);
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], separator: [{
+                type: ViewChild,
+                args: ['separator', { static: false }]
+            }] } });
 
-var LocalizedToolbarMessagesDirective_1;
-/**
- * @hidden
- */
-let LocalizedToolbarMessagesDirective = LocalizedToolbarMessagesDirective_1 = class LocalizedToolbarMessagesDirective extends ToolbarMessages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-};
-LocalizedToolbarMessagesDirective = LocalizedToolbarMessagesDirective_1 = __decorate([
-    Directive({
-        providers: [
-            {
-                provide: ToolbarMessages,
-                useExisting: forwardRef(() => LocalizedToolbarMessagesDirective_1) // tslint:disable-line:no-forward-ref
-            }
-        ],
-        selector: '[kendoToolbarLocalizedMessages]'
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], LocalizedToolbarMessagesDirective);
-
-var ToolbarCustomMessagesComponent_1;
 /**
  * Custom component messages override default component messages.
  */
-let ToolbarCustomMessagesComponent = ToolbarCustomMessagesComponent_1 = class ToolbarCustomMessagesComponent extends ToolbarMessages {
+class ToolbarCustomMessagesComponent extends ToolbarMessages {
     constructor(service) {
         super();
         this.service = service;
@@ -2632,20 +2730,27 @@ let ToolbarCustomMessagesComponent = ToolbarCustomMessagesComponent_1 = class To
     get override() {
         return true;
     }
-};
-ToolbarCustomMessagesComponent = ToolbarCustomMessagesComponent_1 = __decorate([
-    Component({
-        providers: [
-            {
-                provide: ToolbarMessages,
-                useExisting: forwardRef(() => ToolbarCustomMessagesComponent_1) // tslint:disable-line:no-forward-ref
-            }
-        ],
-        selector: 'kendo-toolbar-messages',
-        template: ``
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], ToolbarCustomMessagesComponent);
+}
+ToolbarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolbarCustomMessagesComponent, selector: "kendo-toolbar-messages", providers: [
+        {
+            provide: ToolbarMessages,
+            useExisting: forwardRef(() => ToolbarCustomMessagesComponent) // eslint-disable-line no-forward-ref
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ToolbarMessages,
+                            useExisting: forwardRef(() => ToolbarCustomMessagesComponent) // eslint-disable-line no-forward-ref
+                        }
+                    ],
+                    selector: 'kendo-toolbar-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const TOOLBAR_TOOLS = [
     ToolBarToolComponent,
@@ -2673,18 +2778,36 @@ const TOOLBAR_COMMON = [
  * - `ToolBarSplitButtonComponent`&mdash;The SplitButton Tool component class.
  * - `ToolBarSeparatorComponent`&mdash;The Separator Tool component class.
  */
-let ToolBarModule = class ToolBarModule {
-};
-ToolBarModule = __decorate([
-    NgModule({
-        declarations: [ToolBarComponent, TOOLBAR_TOOLS, TOOLBAR_COMMON],
-        exports: [ToolBarComponent, TOOLBAR_TOOLS, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective],
-        imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]
-    })
-], ToolBarModule);
+class ToolBarModule {
+}
+ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, declarations: [ToolBarComponent, ToolBarToolComponent,
+        ToolBarButtonComponent,
+        ToolBarButtonGroupComponent,
+        ToolBarDropDownButtonComponent,
+        ToolBarSplitButtonComponent,
+        ToolBarSeparatorComponent, ToolBarRendererComponent,
+        ToolBarButtonListComponent,
+        ToolbarCustomMessagesComponent,
+        LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule], exports: [ToolBarComponent, ToolBarToolComponent,
+        ToolBarButtonComponent,
+        ToolBarButtonGroupComponent,
+        ToolBarDropDownButtonComponent,
+        ToolBarSplitButtonComponent,
+        ToolBarSeparatorComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
+ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToolBarComponent, TOOLBAR_TOOLS, TOOLBAR_COMMON],
+                    exports: [ToolBarComponent, TOOLBAR_TOOLS, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective],
+                    imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ToolbarMessages, NavigationService, RefreshService, ToolBarRendererComponent, RendererService, ToolBarButtonListComponent, ToolBarComponent, ToolBarToolComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSplitButtonComponent, ToolBarSeparatorComponent, ToolBarModule, LocalizedToolbarMessagesDirective, ToolbarCustomMessagesComponent };
+export { LocalizedToolbarMessagesDirective, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarComponent, ToolBarDropDownButtonComponent, ToolBarModule, ToolBarSeparatorComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, ToolbarCustomMessagesComponent };
+