@progress/kendo-angular-toolbar 6.1.2 → 11.0.0-develop.80

package/fesm2020/progress-kendo-angular-toolbar.mjs

@@ -0,0 +1,2992 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from '@angular/core';
+import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, ElementRef, NgModule } from '@angular/core';
+import * as i2 from '@progress/kendo-angular-popup';
+import { PopupModule } from '@progress/kendo-angular-popup';
+import * as i6 from '@progress/kendo-angular-common';
+import { Keys, guid, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
+import * as i1 from '@progress/kendo-angular-l10n';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { take, filter, takeUntil } from 'rxjs/operators';
+import { Subject, Subscription, merge, fromEvent } from 'rxjs';
+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
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-toolbar',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1672394563,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
+};
+
+/**
+ * @hidden
+ */
+class RefreshService {
+    constructor() {
+        this.onRefresh = new EventEmitter();
+    }
+    refresh(tool) {
+        this.onRefresh.emit(tool);
+    }
+}
+RefreshService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RefreshService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RefreshService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RefreshService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RefreshService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+const focusableRegex = /^(?:a|input|select|textarea|button|object)$/i;
+/**
+ * @hidden
+ */
+function outerWidth(element) {
+    let width = element.offsetWidth;
+    const style = getComputedStyle(element);
+    width += parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0;
+    return width;
+}
+/**
+ * @hidden
+ */
+function innerWidth(element) {
+    let width = element.offsetWidth;
+    const style = getComputedStyle(element);
+    width -= parseFloat(style.paddingLeft) || 0 + parseFloat(style.borderLeftWidth) || 0;
+    width -= parseFloat(style.paddingRight) || 0 + parseFloat(style.borderRightWidth) || 0;
+    return width;
+}
+/**
+ * @hidden
+ */
+function outerHeight(element) {
+    let width = element.offsetHeight;
+    const style = getComputedStyle(element);
+    width += parseFloat(style.marginTop) || 0 + parseFloat(style.marginBottom) || 0;
+    return width;
+}
+/**
+ * @hidden
+ */
+const closest = (node, predicate) => {
+    while (node && !predicate(node)) {
+        node = node.parentNode;
+    }
+    return node;
+};
+/**
+ * @hidden
+ */
+const isVisible = (element) => {
+    const rect = element.getBoundingClientRect();
+    const hasSize = rect.width > 0 && rect.height > 0;
+    const hasPosition = rect.x !== 0 && rect.y !== 0;
+    // Elements can have zero size due to styling, but they should still count as visible.
+    // For example, the selection checkbox has no size, but is made visible through styling.
+    return (hasSize || hasPosition) && window.getComputedStyle(element).visibility !== 'hidden';
+};
+/**
+ * @hidden
+ */
+const findElement = (node, predicate, matchSelf = true) => {
+    if (!node) {
+        return;
+    }
+    if (matchSelf && predicate(node)) {
+        return node;
+    }
+    node = node.firstChild;
+    while (node) {
+        if (node.nodeType === 1) {
+            const element = findElement(node, predicate);
+            if (element) {
+                return element;
+            }
+        }
+        node = node.nextSibling;
+    }
+};
+/**
+ * @hidden
+ */
+const isFocusable = (element, checkVisibility = true) => {
+    if (element.tagName) {
+        const tagName = element.tagName.toLowerCase();
+        const tabIndex = element.getAttribute('tabIndex');
+        let focusable = tabIndex !== null;
+        if (focusableRegex.test(tagName)) {
+            focusable = !element.disabled;
+        }
+        return focusable && (!checkVisibility || isVisible(element));
+    }
+    return false;
+};
+/**
+ * @hidden
+ */
+const findFocusable = (element, checkVisibility = true) => {
+    return findElement(element, node => isFocusable(node, checkVisibility));
+};
+/**
+ * @hidden
+ */
+const findFocusableChild = (element, checkVisibility = true) => {
+    return findElement(element, node => isFocusable(node, checkVisibility), false);
+};
+/**
+ * @hidden
+ */
+const findFocusableSibling = (element, checkVisibility = true, reverse) => {
+    let node = reverse ? element.prevSibling : element.nextSibling;
+    while (node) {
+        if (node.nodeType === 1) {
+            const result = findElement(node, el => isFocusable(el, checkVisibility));
+            if (result) {
+                return result;
+            }
+        }
+        node = reverse ? node.prevSibling : node.nextSibling;
+    }
+};
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+const makePeeker = (collection) => (index) => isPresent(collection[index]);
+/**
+ * @hidden
+ */
+const getIndexOfFocused = (prevKeyCode, nextKeyCode, collection) => (ev) => {
+    switch (ev.type) {
+        case 'keydown':
+            if (ev.keyCode === prevKeyCode) {
+                return collection.length - 1;
+            }
+            if (ev.keyCode === nextKeyCode) {
+                return 0;
+            }
+            break;
+        case 'click':
+            return collection.findIndex(be => be === ev.target || be.contains(ev.target));
+        case 'focus':
+            return 0;
+        default:
+            return 0;
+    }
+};
+/**
+ * @hidden
+ */
+const seekFocusedIndex = (prevKeyCode, nextKeyCode, seeker) => (startIndex, ev) => {
+    switch (ev.keyCode) {
+        case prevKeyCode:
+            return seeker(startIndex - 1) ? startIndex - 1 : startIndex;
+        case nextKeyCode:
+            return seeker(startIndex + 1) ? startIndex + 1 : startIndex;
+        default:
+            return startIndex;
+    }
+};
+/**
+ * @hidden
+ */
+const areEqual = (first) => (second) => first === second;
+/**
+ * @hidden
+ */
+const getNextKey = (rtl = false) => (overflows = true) => overflows ? Keys.ArrowDown : rtl ? Keys.ArrowLeft : Keys.ArrowRight;
+/**
+ * @hidden
+ */
+const getPrevKey = (rtl = false) => (overflows = true) => overflows ? Keys.ArrowUp : rtl ? Keys.ArrowRight : Keys.ArrowLeft;
+/**
+ * @hidden
+ */
+const getValueForLocation = (property, displayMode, overflows) => {
+    switch (displayMode) {
+        case 'toolbar':
+            return overflows ? undefined : property;
+        case 'overflow':
+            return overflows ? property : undefined;
+        default:
+            return property;
+    }
+};
+
+/**
+ * @hidden
+ */
+class NavigationService {
+    constructor(zone) {
+        this.zone = zone;
+        this.focused = { renderedTool: null, index: -1 };
+        this.renderedTools = [];
+        this.isPopupFocused = false;
+        this.isOverflowButtonFocused = false;
+    }
+    setRenderedTools(rts) {
+        this.renderedTools = [...rts];
+    }
+    click({ context, event: ev }) {
+        if (this.focused.renderedTool !== context && ev) {
+            this.focus(context, ev);
+        }
+    }
+    moveFocusToToolBar() {
+        this.isPopupFocused = false;
+        this.focusOverflowButton();
+    }
+    moveFocusToPopup() {
+        this.isPopupFocused = true;
+        this.blurOverflowButton();
+        this.focus();
+    }
+    focusNext(ev) {
+        if (this.isOverflowButtonFocused) {
+            const firstFocusableRT = this.getFocusableTools()[0];
+            this.focus(firstFocusableRT, ev);
+        }
+        else if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
+            const nextRT = this.getFocusableTools().slice(this.focused.index + 1)[0];
+            if (nextRT) {
+                this.focus(nextRT, ev);
+            }
+            else {
+                if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
+                    this.focusOverflowButton();
+                }
+                else {
+                    const firstRT = this.getFocusableTools()[0];
+                    this.focus(firstRT, ev);
+                }
+            }
+        }
+    }
+    focusPrev(ev) {
+        if (this.isOverflowButtonFocused) {
+            const lastFocusableRT = this.getFocusableTools().reverse()[0];
+            this.focus(lastFocusableRT, ev);
+        }
+        else if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
+            const prevRT = this.getFocusableTools()
+                .slice(0, this.focused.index)
+                .reverse()[0];
+            if (prevRT) {
+                this.focus(prevRT, ev);
+            }
+            else {
+                if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
+                    this.focusOverflowButton();
+                }
+                else {
+                    const lastRT = this.getFocusableTools().reverse()[0];
+                    this.focus(lastRT, ev);
+                }
+            }
+        }
+    }
+    resetNavigation() {
+        this.blurOverflowButton();
+        this.focused.renderedTool = null;
+        this.focused.index = -1;
+    }
+    focusFirst(ev) {
+        const firstTool = this.getFocusableTools()[0];
+        const overFlowButton = this.overflowButton;
+        if (firstTool) {
+            this.focused.renderedTool = firstTool;
+            this.focused.index = this.getFocusableTools().findIndex(rt => rt === firstTool);
+            this.focus(firstTool, ev);
+        }
+        else if (overFlowButton) {
+            overFlowButton.nativeElement.focus();
+        }
+    }
+    focusLast(ev) {
+        const lastTool = this.getFocusableTools().reverse()[0];
+        const overFlowButton = this.overflowButton;
+        if (lastTool) {
+            this.focused.renderedTool = lastTool;
+            this.focused.index = this.getFocusableTools().findIndex(rt => rt === lastTool);
+            this.focus(lastTool, ev);
+        }
+        else if (overFlowButton) {
+            overFlowButton.nativeElement.focus();
+        }
+    }
+    getFocusableTools() {
+        return this.renderedTools.filter(rt => rt.tool.overflows === this.isPopupFocused && rt.tool.canFocus());
+    }
+    focus(renderedTool, ev) {
+        // running the code below in onStable fixes issue #2939
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (!renderedTool) {
+                const focusableRTs = this.getFocusableTools();
+                const lastFocusedRT = focusableRTs.find(rt => rt === this.focused.renderedTool) || focusableRTs[0];
+                // guard against only disabled tools
+                if (lastFocusedRT) {
+                    this.focused.renderedTool = lastFocusedRT;
+                    this.focused.index = this.getFocusableTools().findIndex(rt => rt === lastFocusedRT);
+                    // if event is undefined, then this means that the tool is the first one in the overflow popup
+                    lastFocusedRT.tool.focus(ev);
+                }
+            }
+            else if (renderedTool.tool.canFocus && renderedTool.tool.canFocus()) {
+                this.focused.renderedTool = renderedTool;
+                this.focused.index = this.getFocusableTools().findIndex(rt => rt === renderedTool);
+                renderedTool.tool.focus(ev);
+                this.blurOverflowButton();
+            }
+        });
+    }
+    blurOverflowButton() {
+        if (this.overflowButton) {
+            this.isOverflowButtonFocused = false;
+            this.overflowButton.nativeElement.tabIndex = -1;
+        }
+    }
+    focusOverflowButton() {
+        this.isOverflowButtonFocused = true;
+        this.overflowButton.nativeElement.tabIndex = 0;
+        this.overflowButton.nativeElement.focus();
+    }
+    isOverflowButtonVisible() {
+        return (isPresent(this.overflowButton) &&
+            window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue('visibility') === 'visible');
+    }
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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.
+ */
+class ToolBarToolComponent {
+    constructor() {
+        this.tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
+        this.overflows = true;
+        // this should be replaced with showTool: DisplayMode = 'both';
+        /**
+         * @hidden
+         */
+        this.responsive = true;
+    }
+    get toolbarDisplay() {
+        return this.overflows ? 'none' : 'inline-block';
+    }
+    get overflowDisplay() {
+        return this.overflows ? 'block' : 'none';
+    }
+    /**
+     * Determines if the tool can be focused.
+     * If the returned value is `false`, the tool will not be part of the keyboard navigation.
+     * @returns `true` if the tool should take part in keyboard navigation.
+     */
+    canFocus() {
+        return false;
+    }
+    /**
+     * Called when the tool is focused.
+     * The method accepts as argument the original browser event, which can be a `KeyboardEvent`, `MouseEvent` or `FocusEvent`.
+     * @param {Event} ev - This is the event that caused the tool to be focused.
+     */
+    focus(ev) {
+        /* noop */
+    }
+    /**
+     * Called when the tool is focused and one of the arrow keys is pressed.
+     * The returned boolean value determines whether the `ToolBarComponent` will move the focus to the next/previous `ToolBarToolComponent`
+     * ([see example]({% slug customcontroltypes_toolbar %}#toc-adding-keyboard-navigation)).
+     * @param {KeyboardEvent} ev - The last pressed arrow key
+     * @returns
+     */
+    handleKey(ev) {
+        return false;
+    }
+}
+ToolBarToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarToolComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarToolComponent, selector: "toolbar-tool", inputs: { responsive: "responsive" }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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
+ */
+class PreventableEvent {
+    constructor() {
+        this.prevented = false;
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses the built-in behavior that follows the event.
+     */
+    preventDefault() {
+        this.prevented = true;
+    }
+    /**
+     * If the event is prevented by any of its subscribers, returns `true`.
+     *
+     * @returns `true` if the default action was prevented. Otherwise, returns `false`.
+     */
+    isDefaultPrevented() {
+        return this.prevented;
+    }
+}
+
+/**
+ * @hidden
+ */
+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: "13.3.11", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RendererService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RendererService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RendererService, decorators: [{
+            type: Injectable
+        }] });
+
+const MIN_SPACER_WIDTH = 18;
+/**
+ * @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();
+            }
+        });
+    }
+    get spacerClass() {
+        return this.location === 'toolbar' && this.isSpacer;
+    }
+    get isSpacer() {
+        return this.tool && this.tool.__isSpacer;
+    }
+    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() {
+        if (this.isSpacer) {
+            return MIN_SPACER_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: "13.3.11", 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: "13.3.11", type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-spacer": "this.spacerClass" } }, providers: [RendererService], exportAs: ["kendoToolBarRenderer"], ngImport: i0, template: `
+        <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: "13.3.11", 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
+            }], spacerClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * @hidden
+ */
+class ToolbarMessages extends ComponentMessages {
+}
+ToolbarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToolbarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    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: "13.3.11", ngImport: i0, type: LocalizedToolbarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedToolbarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]", providers: [
+        {
+            provide: ToolbarMessages,
+            useExisting: forwardRef(() => LocalizedToolbarMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedToolbarMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: ToolbarMessages,
+                            useExisting: forwardRef(() => LocalizedToolbarMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoToolbarLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const getInitialPopupSettings = (isRtl) => ({
+    animate: true,
+    anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
+    popupAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'top' }
+});
+/**
+ * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
+ */
+class ToolBarComponent {
+    constructor(localization, popupService, refreshService, navigationService, element, zone, renderer, _cdr) {
+        this.localization = localization;
+        this.popupService = popupService;
+        this.refreshService = refreshService;
+        this.navigationService = navigationService;
+        this.element = element;
+        this.zone = zone;
+        this.renderer = renderer;
+        this._cdr = _cdr;
+        /**
+         * Hides the overflowing tools in a popup.
+         */
+        this.overflow = false;
+        /**
+         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
+         */
+        this.tabindex = 0;
+        /**
+         * Fires when the overflow popup of the ToolBar is opened.
+         */
+        this.open = new EventEmitter();
+        /**
+         * Fires when the overflow popup of the ToolBar is closed.
+         */
+        this.close = new EventEmitter();
+        this.hostClasses = true;
+        this.cancelRenderedToolsSubscription$ = new Subject();
+        this.subscriptions = new Subscription();
+        this.popupSubs = new Subscription();
+        this.role = 'toolbar';
+        /**
+         * @hidden
+         */
+        this.overflowBtnId = guid();
+        /**
+         * @hidden
+         */
+        this.popupId = guid();
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+    }
+    /**
+     * @hidden
+     */
+    set resizable(value) {
+        this.overflow = value;
+    }
+    get resizable() {
+        return this.overflow;
+    }
+    /**
+     * Configures the popup of the ToolBar drop-down list.
+     *
+     * The available options are:
+     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     */
+    set popupSettings(settings) {
+        this._popupSettings = Object.assign({}, getInitialPopupSettings(this.localization.rtl), settings);
+    }
+    get popupSettings() {
+        return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
+    }
+    /**
+     * @hidden
+     */
+    set tabIndex(tabIndex) {
+        this.tabindex = tabIndex;
+    }
+    get tabIndex() {
+        return this.tabindex;
+    }
+    get appendTo() {
+        const { appendTo } = this.popupSettings;
+        if (!appendTo || appendTo === 'root') {
+            return undefined;
+        }
+        return appendTo === 'component' ? this.container : appendTo;
+    }
+    set popupOpen(open) {
+        if (this.popupOpen === open) {
+            return;
+        }
+        const eventArgs = new PreventableEvent();
+        if (open) {
+            this.open.emit(eventArgs);
+        }
+        else {
+            this.close.emit(eventArgs);
+        }
+        if (eventArgs.isDefaultPrevented()) {
+            return;
+        }
+        this.toggle(open);
+    }
+    get popupOpen() {
+        return this._open;
+    }
+    /**
+     * @hidden
+     */
+    onFocus(ev) {
+        this.navigationService.resetNavigation();
+        this.navigationService.focusFirst(ev);
+        // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
+        this.element.nativeElement.setAttribute('tabindex', '-1');
+    }
+    /**
+     * @hidden
+     */
+    onFocusOut(event) {
+        // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
+        if (closest(event.relatedTarget, (el) => el === this.element.nativeElement)) {
+            this.element.nativeElement.setAttribute('tabindex', '-1');
+            return;
+        }
+        this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
+    }
+    get getDir() {
+        return this.direction;
+    }
+    get resizableClass() {
+        return this.overflow;
+    }
+    ngAfterViewInit() {
+        const element = this.element.nativeElement;
+        if (!element.getAttribute('tabindex')) {
+            this.element.nativeElement.setAttribute('tabindex', '0');
+        }
+        this.zone.runOutsideAngular(() => {
+            this.toolbarKeydownListener = this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => {
+                switch (ev.keyCode) {
+                    case Keys.ArrowLeft:
+                        this.zone.run(() => {
+                            ev.preventDefault();
+                            if (this.direction === 'ltr') {
+                                this.navigationService.focusPrev(ev);
+                            }
+                            else {
+                                this.navigationService.focusNext(ev);
+                            }
+                            // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
+                            this.element.nativeElement.setAttribute('tabindex', '-1');
+                        });
+                        break;
+                    case Keys.ArrowRight:
+                        this.zone.run(() => {
+                            ev.preventDefault();
+                            if (this.direction === 'ltr') {
+                                this.navigationService.focusNext(ev);
+                            }
+                            else {
+                                this.navigationService.focusPrev(ev);
+                            }
+                            // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
+                            this.element.nativeElement.setAttribute('tabindex', '-1');
+                        });
+                        break;
+                    case Keys.Tab:
+                        this.zone.run(() => this.navigationService.resetNavigation());
+                        break;
+                    case Keys.Escape:
+                        this.zone.run(() => this.toggle(false));
+                        break;
+                    case Keys.Home:
+                        this.zone.run(() => this.navigationService.focusFirst(ev));
+                        break;
+                    case Keys.End:
+                        this.zone.run(() => this.navigationService.focusLast(ev));
+                        break;
+                    default:
+                        break;
+                }
+            });
+        });
+        if (this.overflow) {
+            this.subscriptions.add(merge(this.resizeSensor.resize, this.renderedTools.changes).subscribe(() => this.onResize()));
+            this.navigationService.overflowButton = this.overflowButton;
+            // because of https://github.com/telerik/kendo-angular-buttons/pull/276
+            // button icons are not rendered until onResize() is called
+            this.onResize();
+        }
+        this.navigationService.setRenderedTools(this.renderedTools.toArray());
+        this.subscriptions.add(this.renderedTools.changes.subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray())));
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        if (isDocumentAvailable()) {
+            this.zone.runOutsideAngular(() => this.subscriptions.add(fromEvent(document, 'click')
+                .pipe(filter(() => !!this.popupRef), filter((ev) => !this.popupRef.popup.instance.container.nativeElement.contains(ev.target)), filter((ev) => !this.overflowButton.nativeElement.contains(ev.target)))
+                .subscribe(() => {
+                this.zone.run(() => {
+                    this.popupOpen = false;
+                });
+            })));
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['tabindex']) {
+            // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
+            this.element.nativeElement.setAttribute('tabindex', changes['tabindex'].currentValue.toString());
+        }
+    }
+    ngOnDestroy() {
+        this.destroyPopup();
+        if (this.toolbarKeydownListener) {
+            this.toolbarKeydownListener();
+        }
+        this.cancelRenderedToolsSubscription$.next();
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    get moreToolsTitle() {
+        return this.localization.get('moreToolsTitle');
+    }
+    /**
+     * @hidden
+     */
+    get cdr() {
+        return this._cdr;
+    }
+    /**
+     * @hidden
+     */
+    onRendererClick(data) {
+        this.navigationService.click(data);
+        this.element.nativeElement.setAttribute('tabindex', '-1');
+    }
+    /**
+     * @hidden
+     */
+    showPopup() {
+        this.popupOpen = !this.popupOpen;
+        this.navigationService.click({ context: undefined, event: undefined });
+    }
+    /**
+     * Toggles the visibility of the overflow popup.
+     */
+    toggle(popupOpen) {
+        this._open = popupOpen !== undefined ? popupOpen : !this.popupOpen;
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        if (this.popupOpen) {
+            this.popupRef = this.popupService.open({
+                anchor: this.overflowButton,
+                anchorAlign: this.popupSettings.anchorAlign,
+                popupAlign: this.popupSettings.popupAlign,
+                content: this.popupTemplate,
+                appendTo: this.appendTo,
+                animate: this.popupSettings.animate,
+                popupClass: this.popupSettings.popupClass,
+                positionMode: 'absolute'
+            });
+            this.setPopupContentDimensions();
+            this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)));
+            this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)));
+        }
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (isDocumentAvailable()) {
+            const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
+            this.shrink(containerWidth, this.childrenWidth);
+            this.stretch(containerWidth, this.childrenWidth);
+            this.displayAnchor();
+            this.resizeSensor.acceptSize();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onPopupOpen() {
+        this.zone.runOutsideAngular(() => {
+            this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
+                switch (ev.keyCode) {
+                    case Keys.ArrowUp:
+                        this.zone.run(() => {
+                            ev.preventDefault();
+                            this.navigationService.focusPrev(ev);
+                        });
+                        break;
+                    case Keys.ArrowDown:
+                        this.zone.run(() => {
+                            ev.preventDefault();
+                            this.navigationService.focusNext(ev);
+                        });
+                        break;
+                    case Keys.Escape:
+                        this.zone.run(() => this.toggle(false));
+                        break;
+                    case Keys.Tab:
+                        this.zone.run(() => {
+                            this.toggle(false);
+                            this.navigationService.resetNavigation();
+                        });
+                        break;
+                    default:
+                        break;
+                }
+            });
+        });
+        this.cancelRenderedToolsSubscription$.next();
+        this.navigationService.moveFocusToPopup();
+        this.navigationService.setRenderedTools(this.overflowRenderedTools.toArray());
+        this.overflowRenderedTools.changes
+            .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
+            .subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray()));
+        this.renderer.setAttribute(this.overflowButton.nativeElement, 'aria-controls', this.popupId);
+    }
+    /**
+     * @hidden
+     */
+    onPopupClose() {
+        this.cancelRenderedToolsSubscription$.next();
+        this.navigationService.setRenderedTools(this.renderedTools.toArray());
+        this.renderedTools.changes
+            .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
+            .subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray()));
+        this.navigationService.moveFocusToToolBar();
+        if (this.overflowKeydownListener) {
+            this.overflowKeydownListener();
+        }
+        this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
+    }
+    displayAnchor() {
+        const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
+        this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
+    }
+    get popupWidth() {
+        if (!this.popupSettings || !this.popupSettings.width) {
+            return defaultPopupWidth;
+        }
+        return isNaN(this.popupSettings.width) ? this.popupSettings.width : `${this.popupSettings.width}px`;
+    }
+    get popupHeight() {
+        if (!this.popupSettings || !this.popupSettings.height) {
+            return;
+        }
+        return isNaN(this.popupSettings.height) ? this.popupSettings.height : `${this.popupSettings.height}px`;
+    }
+    get overflowAnchorWidth() {
+        if (!this.overflow) {
+            return 0;
+        }
+        if (!this.cachedOverflowAnchorWidth) {
+            this.cachedOverflowAnchorWidth = this.overflowButton.nativeElement.offsetWidth;
+        }
+        return this.cachedOverflowAnchorWidth;
+    }
+    get gap() {
+        if (isPresent(this.cachedGap)) {
+            return this.cachedGap;
+        }
+        const computedGap = getComputedStyle(this.element.nativeElement).gap;
+        this.cachedGap = isPresent(computedGap) ? parseInt(computedGap, 10) : 0;
+        return this.cachedGap;
+    }
+    get childrenWidth() {
+        const width = this.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
+        return Math.ceil(width);
+    }
+    get visibleTools() {
+        return this.allTools.filter((tool) => {
+            return tool.overflows === false;
+        });
+    }
+    get overflowTools() {
+        return this.allTools.filter((tool) => {
+            return tool.overflows === true;
+        });
+    }
+    shrink(containerWidth, childrenWidth) {
+        let width;
+        if (containerWidth < childrenWidth) {
+            for (let i = this.visibleTools.length - 1; i >= 0; i--) {
+                if (containerWidth > childrenWidth) {
+                    break;
+                }
+                else {
+                    width = this.hideLastVisibleTool();
+                    childrenWidth -= width;
+                }
+            }
+        }
+    }
+    stretch(containerWidth, childrenWidth) {
+        let width;
+        if (containerWidth > childrenWidth) {
+            for (let i = this.overflowTools.length - 1; i >= 0; i--) {
+                width = this.showFirstHiddenTool(containerWidth, childrenWidth);
+                if (width) {
+                    childrenWidth += width;
+                }
+                else {
+                    break;
+                }
+            }
+        }
+    }
+    hideLastVisibleTool() {
+        const tool = this.visibleTools[this.visibleTools.length - 1];
+        const renderedElement = this.renderedTools.find((r) => {
+            return r.tool === tool;
+        });
+        const width = renderedElement.width;
+        tool.overflows = true;
+        this.refreshService.refresh(tool);
+        return width;
+    }
+    showFirstHiddenTool(containerWidth, childrenWidth) {
+        const tool = this.overflowTools[0];
+        const renderedElement = this.renderedTools.find(r => r.tool === tool);
+        tool.overflows = false;
+        tool.visibility = 'hidden';
+        this.refreshService.refresh(tool);
+        if (containerWidth > childrenWidth + renderedElement.width) {
+            tool.visibility = 'visible';
+            this.refreshService.refresh(tool);
+        }
+        else {
+            tool.overflows = true;
+            this.refreshService.refresh(tool);
+        }
+        return renderedElement.width; // returns 0 if `overflows` is true
+    }
+    setPopupContentDimensions() {
+        const popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
+        popupContentContainer.style.width = this.popupWidth;
+        popupContentContainer.style.height = this.popupHeight;
+        popupContentContainer.style.overflow = 'auto';
+    }
+    destroyPopup() {
+        if (this.popupRef) {
+            this.popupSubs.unsubscribe();
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
+}
+ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+        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"
+            [attr.aria-expanded]="popupOpen"
+            [id]="overflowBtnId"
+            aria-haspopup="menu"
+            *ngIf="overflow"
+            [style.visibility]="'hidden'"
+            [style.position]="'relative'"
+            [style.margin-inline-start]="'auto'"
+            class="k-overflow-anchor k-button k-button-flat"
+            (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"
+                role="menu"
+                [id]="popupId"
+                [attr.aria-labelledby]="overflowBtnId">
+                <ng-container *ngFor="let tool of allTools; let index = index">
+                    <li class="k-item" role="menuitem">
+                        <kendo-toolbar-renderer
+                            #overflowRenderer
+                            (rendererClick)="onRendererClick($event)"
+                            [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" #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: "13.3.11", 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"
+        >
+        </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"
+            [attr.aria-expanded]="popupOpen"
+            [id]="overflowBtnId"
+            aria-haspopup="menu"
+            *ngIf="overflow"
+            [style.visibility]="'hidden'"
+            [style.position]="'relative'"
+            [style.margin-inline-start]="'auto'"
+            class="k-overflow-anchor k-button k-button-flat"
+            (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"
+                role="menu"
+                [id]="popupId"
+                [attr.aria-labelledby]="overflowBtnId">
+                <ng-container *ngFor="let tool of allTools; let index = index">
+                    <li class="k-item" role="menuitem">
+                        <kendo-toolbar-renderer
+                            #overflowRenderer
+                            (rendererClick)="onRendererClick($event)"
+                            [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" #resizeSensor></kendo-resize-sensor>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, 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']]
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], getDir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], resizableClass: [{
+                type: HostBinding,
+                args: ['class.k-toolbar-resizable']
+            }] } });
+
+/**
+ * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
+ */
+class ToolBarButtonComponent extends ToolBarToolComponent {
+    constructor() {
+        super();
+        /**
+         * Specifies where button icon should be displayed
+         */
+        this.showIcon = 'both';
+        /**
+         * Provides visual styling that indicates if the Button is active
+         * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
+         * By default, `toggleable` is set to `false`.
+         */
+        this.toggleable = false;
+        /**
+         * Sets the selected state of the Button.
+         */
+        this.selected = false;
+        /**
+         * The fillMode property specifies the background and border styles of the Button.
+         *
+         * The available values are:
+         * * `solid` (default)
+         * * `flat`
+         * * `outline`
+         * * `link`
+         * * `null`
+         */
+        this.fillMode = 'solid';
+        /**
+         * The Button allows you to specify predefined theme colors.
+         * The theme color will be applied as a background and border color while also amending the text color accordingly
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
+         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+         * * `info`&mdash;Applies coloring based on the `info` theme color.
+         * * `success`&mdash; Applies coloring based on the `success` theme color.
+         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+         * * `error`&mdash; Applies coloring based on the `error` theme color.
+         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+         * * `light`&mdash; Applies coloring based on the `light` theme color.
+         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+         */
+        this.themeColor = 'base';
+        /**
+         * Fires each time the Button is clicked.
+         */
+        this.click = new EventEmitter();
+        /**
+         * Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
+         */
+        this.pointerdown = new EventEmitter();
+        /**
+         * Fires each time the selected state of a Toggle Button is changed.
+         * The event argument is the new selected state (Boolean).
+         */
+        this.selectedChange = new EventEmitter();
+        this.toolbarOptions = {
+            text: '',
+            icon: '',
+            iconClass: '',
+            imageUrl: ''
+        };
+        this.overflowOptions = {
+            text: '',
+            icon: '',
+            iconClass: '',
+            imageUrl: ''
+        };
+        this._showText = 'both';
+    }
+    // showText and showIcon showIcon should be declared first
+    /**
+     * Specifies where button text should be displayed
+     */
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
+    }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.fillMode = look === 'default' ? 'solid' : look;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get togglable() {
+        return this.toggleable;
+    }
+    set togglable(value) {
+        this.toggleable = value;
+    }
+    /**
+     * Defines the name for an existing icon in a Kendo UI theme
+     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
+     * The icon is rendered inside the Button by a `span.k-icon` element.
+     */
+    set icon(icon) {
+        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
+    }
+    /**
+     * Defines a CSS class&mdash;or multiple classes separated by spaces&mdash;
+     * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
+     */
+    set iconClass(iconClass) {
+        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
+        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
+    }
+    /**
+     * Defines a URL which is used for an `img` element inside the Button.
+     * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
+     */
+    set imageUrl(imageUrl) {
+        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
+        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
+    }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
+    /**
+     * @hidden
+     */
+    onBlur() {
+        this.getButton().tabIndex = -1;
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return !this.disabled;
+    }
+    /**
+     * @hidden
+     */
+    focus(ev) {
+        // guard against focusing twice on mousedown.
+        if (!ev || ev.type === 'focus' || ev.type === 'keydown') {
+            this.getButton().focus();
+        }
+        this.getButton().tabIndex = 0;
+    }
+    /**
+     * @hidden
+     */
+    handleKey() {
+        this.getButton().tabIndex = -1;
+        return false;
+    }
+    getButton() {
+        return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
+    }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
+}
+ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <button
+                #toolbarButton
+                [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>
+    `, isInline: true, components: [{ type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarButton',
+                    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) {
+        ev.preventDefault();
+    }
+    /**
+     * @hidden
+     */
+    selectedChangeHandler(state, button) {
+        button.selected = state;
+        button.selectedChange.emit(state);
+    }
+    /**
+     * @hidden
+     */
+    onButtonClick(ev) {
+        this.focusedIndex = this.buttonElements.findIndex(be => be === ev.target || be.contains(ev.target));
+        this.focusButton(this.focusedIndex, ev);
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return !(this.disabled || this.buttonElements.length === 0);
+    }
+    /**
+     * @hidden
+     */
+    focus(ev = {}) {
+        const nextKey = this.getNextKey(this.overflows);
+        const prevKey = this.getPrevKey(this.overflows);
+        this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
+        this.focusButton(this.focusedIndex, ev);
+    }
+    /**
+     * @hidden
+     */
+    handleKey(ev) {
+        const nextKey = this.getNextKey(this.overflows);
+        const prevKey = this.getPrevKey(this.overflows);
+        const peekAtIndex = makePeeker(this.buttonElements);
+        const isUnmodified = areEqual(this.focusedIndex);
+        this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
+        this.focusButton(this.focusedIndex, ev);
+        return !isUnmodified(this.focusedIndex);
+    }
+    getButtonGroup() {
+        return this.overflows ? this.overflowButtonGroup : this.toolbarButtonGroup;
+    }
+    focusButton(index, ev) {
+        // Guard against focusing twice on mousedown.
+        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
+            this.buttonElements[index]?.focus();
+        }
+    }
+}
+ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarButtonGroup',
+                    providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }],
+                    selector: 'kendo-toolbar-buttongroup',
+                    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>
+    `
+                }]
+        }], 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
+ */
+class ToolBarButtonListComponent {
+    constructor() {
+        this.disabled = false;
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
+        this.itemClick = new EventEmitter();
+    }
+    getText(dataItem) {
+        if (dataItem) {
+            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
+        }
+        return undefined;
+    }
+    onClick(item, index) {
+        const dataItem = this.data[index];
+        if (item.click) {
+            item.click(dataItem);
+        }
+        this.itemClick.emit(dataItem);
+    }
+}
+ToolBarButtonListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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, read: ElementRef }], ngImport: i0, template: `
+        <button
+            #button
+            type="button"
+            tabindex="-1"
+            kendoButton
+            [style.padding-left.px]="16"
+            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, components: [{ type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-toolbar-buttonlist',
+                    template: `
+        <button
+            #button
+            type="button"
+            tabindex="-1"
+            kendoButton
+            [style.padding-left.px]="16"
+            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>
+    `
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], buttons: [{
+                type: ViewChildren,
+                args: ['button', { read: ElementRef }]
+            }] } });
+
+/**
+ * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
+ */
+class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
+    constructor() {
+        super();
+        /**
+         * Defines the location of the button icon that will be displayed.
+         */
+        this.showIcon = 'both';
+        /**
+         * The fillMode property specifies the background and border styles of the Button.
+         *
+         * The available values are:
+         * * `solid` (default)
+         * * `flat`
+         * * `outline`
+         * * `link`
+         * * `null`
+         */
+        this.fillMode = 'solid';
+        /**
+         * The Button allows you to specify predefined theme colors.
+         * The theme color will be applied as a background and border color while also amending the text color accordingly
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
+         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+         * * `info`&mdash;Applies coloring based on the `info` theme color.
+         * * `success`&mdash; Applies coloring based on the `success` theme color.
+         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+         * * `error`&mdash; Applies coloring based on the `error` theme color.
+         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+         * * `light`&mdash; Applies coloring based on the `light` theme color.
+         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+         */
+        this.themeColor = 'base';
+        /**
+         * Fires each time the user clicks a DropDownButton item.
+         * The event data contains the data item that is bound to the clicked list item.
+         */
+        this.itemClick = new EventEmitter();
+        /**
+         * Fires each time the popup is about to open.
+         * This event is preventable. If you cancel the event, the popup will remain closed.
+         */
+        this.open = new EventEmitter();
+        /**
+         * Fires each time the popup is about to close.
+         * This event is preventable. If you cancel the event, the popup will remain open.
+         */
+        this.close = new EventEmitter();
+        this.toolbarOptions = {
+            text: '',
+            icon: '',
+            iconClass: '',
+            imageUrl: ''
+        };
+        this.overflowOptions = {
+            text: '',
+            icon: '',
+            iconClass: '',
+            imageUrl: ''
+        };
+        this._popupSettings = { animate: true, popupClass: '' };
+        this.focusedIndex = -1;
+        this._showText = 'both';
+        this.getNextKey = getNextKey();
+        this.getPrevKey = getPrevKey();
+    }
+    // showText and showIcon showIcon should be declared first
+    /**
+     * Defines the location of the button text that will be displayed.
+     */
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
+    }
+    /**
+     * Defines an icon that will be rendered next to the button text.
+     */
+    set icon(icon) {
+        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
+    }
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the button text.
+     */
+    set iconClass(iconClass) {
+        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
+        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
+    }
+    /**
+     * Defines the location of an image that will be displayed next to the button text.
+     */
+    set imageUrl(imageUrl) {
+        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
+        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
+    }
+    /**
+     * Configures the popup of the DropDownButton.
+     *
+     * The available options are:
+     * - `animate:Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+     * - `popupClass:String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     */
+    set popupSettings(settings) {
+        this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
+    }
+    get popupSettings() {
+        return this._popupSettings;
+    }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.fillMode = look === 'default' ? 'solid' : look;
+        }
+    }
+    /**
+     * @hidden
+     */
+    set primary(primary) {
+        this.themeColor = primary ? 'primary' : 'base';
+    }
+    /**
+     * Sets the data of the DropDownButton
+     * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons)).
+     *
+     * > The data has to be provided in an array-like list.
+     */
+    set data(data) {
+        this._data = data || [];
+    }
+    get data() {
+        if (!this._data) {
+            this.data = [];
+        }
+        return this._data;
+    }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
+    get overflowButtons() {
+        return [...this.overflowDropDownButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
+    }
+    /**
+     * @hidden
+     */
+    onButtonListClick(ev) {
+        this.focusedIndex = this.overflowDropDownButtonButtonList.buttons
+            .toArray()
+            .findIndex(b => b.nativeElement.contains(ev.target));
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return !this.disabled;
+    }
+    /**
+     * @hidden
+     */
+    focus(ev = {}) {
+        if (!this.overflows) {
+            if (ev.type === 'focus' || ev.type === 'keydown') {
+                this.toolbarDropDownButton.focus();
+            }
+        }
+        else if (this.overflowButtons.length > 0) {
+            this.focusedIndex = getIndexOfFocused(this.getPrevKey(), this.getNextKey(), this.overflowButtons.map(ob => ob.nativeElement))(ev);
+            this.focusButton(this.focusedIndex, ev);
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleKey(ev) {
+        if (!this.overflows && (ev.keyCode === this.getPrevKey(this.overflows) || ev.keyCode === this.getNextKey(this.overflows))) {
+            return false;
+        }
+        if (this.overflows) {
+            const peekAtIndex = makePeeker(this.overflowButtons);
+            const isUnmodified = areEqual(this.focusedIndex);
+            this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
+            this.focusButton(this.focusedIndex, ev);
+            return !isUnmodified(this.focusedIndex);
+        }
+    }
+    focusButton(index, ev) {
+        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
+            this.overflowButtons[index].nativeElement.focus();
+        }
+    }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
+}
+ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarDropDownButton',
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }],
+                    selector: 'kendo-toolbar-dropdownbutton',
+                    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>
+    `
+                }]
+        }], 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 }]
+            }] } });
+
+/**
+ * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
+ */
+class ToolBarSplitButtonComponent extends ToolBarToolComponent {
+    constructor() {
+        super();
+        /**
+         * Specifies where button icon should be displayed
+         */
+        this.showIcon = 'both';
+        /**
+         * The fillMode property specifies the background and border styles of the Button.
+         *
+         * The available values are:
+         * * `solid` (default)
+         * * `flat`
+         * * `outline`
+         * * `link`
+         * * `null`
+         */
+        this.fillMode = 'solid';
+        /**
+         * The Button allows you to specify predefined theme colors.
+         * The theme color will be applied as a background and border color while also amending the text color accordingly.
+         *
+         * The possible values are:
+         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
+         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+         * * `info`&mdash;Applies coloring based on the `info` theme color.
+         * * `success`&mdash; Applies coloring based on the `success` theme color.
+         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+         * * `error`&mdash; Applies coloring based on the `error` theme color.
+         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+         * * `light`&mdash; Applies coloring based on the `light` theme color.
+         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+         */
+        this.themeColor = 'base';
+        /**
+         * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
+         * be rendered for the button which opens the popup.
+         */
+        this.arrowButtonIcon = 'arrow-s';
+        /**
+         * Configures the text field of the button-list popup.
+         */
+        this.textField = 'text';
+        /**
+         * Fires each time the user clicks the main button.
+         */
+        this.buttonClick = new EventEmitter();
+        /**
+         * Fires each time the user clicks the drop-down list.
+         * The event data contains the data item that is bound to the clicked list item.
+         */
+        this.itemClick = new EventEmitter();
+        /**
+         * Fires each time the popup is about to open.
+         * This event is preventable. If you cancel the event, the popup will remain closed.
+         */
+        this.open = new EventEmitter();
+        /**
+         * Fires each time the popup is about to close.
+         * This event is preventable. If you cancel the event, the popup will remain open.
+         */
+        this.close = new EventEmitter();
+        this.toolbarOptions = {
+            text: '',
+            icon: '',
+            iconClass: '',
+            imageUrl: ''
+        };
+        this.overflowOptions = {
+            text: '',
+            icon: '',
+            iconClass: '',
+            imageUrl: ''
+        };
+        this._popupSettings = { animate: true, popupClass: '' };
+        this.focusedIndex = -1;
+        this._showText = 'both';
+        this.getNextKey = getNextKey();
+        this.getPrevKey = getPrevKey();
+    }
+    // showText and showIcon showIcon should be declared first
+    /**
+     * Specifies where button text should be displayed
+     */
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
+    }
+    /**
+     * Defines the icon that will be rendered next to the button text
+     * ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
+     */
+    set icon(icon) {
+        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
+    }
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the button text.
+     */
+    set iconClass(iconClass) {
+        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
+        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
+    }
+    /**
+     * Defines the location of an image that will be displayed next to the button text.
+     */
+    set imageUrl(imageUrl) {
+        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
+        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
+    }
+    /**
+     * Configures the popup of the SplitButton.
+     *
+     * The available options are:
+     * - `animate:Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+     * - `popupClass:String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     */
+    set popupSettings(value) {
+        this._popupSettings = value;
+    }
+    get popupSettings() {
+        if (!this._popupSettings) {
+            this._popupSettings = { animate: true, popupClass: '' };
+        }
+        return this._popupSettings;
+    }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.fillMode = look === 'default' ? 'solid' : look;
+        }
+    }
+    /**
+     * Sets the data of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
+     *
+     * > The data has to be provided in an array-like list.
+     */
+    set data(data) {
+        this._data = data || [];
+    }
+    get data() {
+        if (!this._data) {
+            this.data = [];
+        }
+        return this._data;
+    }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
+    get overflowButtons() {
+        return [this.overflowSplitButton, ...this.overflowSplitButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
+    }
+    /**
+     * @hidden
+     */
+    onButtonListClick(ev) {
+        this.focusedIndex = this.overflowButtons.findIndex(b => b.nativeElement.contains(ev.target));
+    }
+    /**
+     * @hidden
+     */
+    onMainButtonClick(ev) {
+        this.buttonClick.emit(ev);
+        this.focusedIndex = 0;
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return !this.disabled;
+    }
+    /**
+     * @hidden
+     */
+    focus(ev = {}) {
+        if (!this.overflows) {
+            if (ev.type === 'focus' || ev.type === 'keydown') {
+                this.toolbarSplitButton.focus();
+            }
+        }
+        else if (this.overflowButtons.length > 0) {
+            this.focusedIndex = getIndexOfFocused(this.getPrevKey(), this.getNextKey(), this.overflowButtons.map(ob => ob.nativeElement))(ev);
+            this.focusButton(this.focusedIndex, ev);
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleKey(ev) {
+        if (!this.overflows && (ev.keyCode === this.getPrevKey(this.overflows) || ev.keyCode === this.getNextKey(this.overflows))) {
+            return false;
+        }
+        if (this.overflows) {
+            const peekAtIndex = makePeeker(this.overflowButtons);
+            const isUnmodified = areEqual(this.focusedIndex);
+            this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
+            this.focusButton(this.focusedIndex, ev);
+            return !isUnmodified(this.focusedIndex);
+        }
+    }
+    focusButton(index, ev) {
+        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') {
+            this.overflowButtons[index].nativeElement.focus();
+        }
+    }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
+}
+ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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)="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", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarSplitButton',
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }],
+                    selector: 'kendo-toolbar-splitbutton',
+                    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)="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>
+    `
+                }]
+        }], 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 }]
+            }] } });
+
+/**
+ * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ */
+class ToolBarSeparatorComponent extends ToolBarToolComponent {
+    constructor() {
+        super();
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return false;
+    }
+    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
+    /**
+     * @hidden
+     */
+    focus() {
+        /* noop */
+    }
+    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
+    /**
+     * @hidden
+     */
+    handleKey() {
+        return false;
+    }
+    ngAfterViewInit() {
+        if (!this.popupTemplate) {
+            this.popupTemplate = this.toolbarTemplate;
+        }
+    }
+}
+ToolBarSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: "13.3.11", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarSeparator',
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }],
+                    selector: 'kendo-toolbar-separator',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <div class="k-separator"></div>
+        </ng-template>
+    `
+                }]
+        }], 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 }]
+            }] } });
+
+/**
+ * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
+ */
+class ToolBarSpacerComponent extends ToolBarToolComponent {
+    constructor() {
+        super();
+        /**
+         * @hidden
+         */
+        this.__isSpacer = true;
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return false;
+    }
+    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
+    /**
+     * @hidden
+     */
+    focus() {
+        /* noop */
+    }
+    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
+    /**
+     * @hidden
+     */
+    handleKey() {
+        return false;
+    }
+    ngAfterViewInit() {
+        if (!this.popupTemplate) {
+            this.popupTemplate = this.toolbarTemplate;
+        }
+    }
+}
+ToolBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarSpacer',
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }],
+                    selector: 'kendo-toolbar-spacer',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }] } });
+
+/**
+ * Custom component messages override default component messages.
+ */
+class ToolbarCustomMessagesComponent extends ToolbarMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+ToolbarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarCustomMessagesComponent, selector: "kendo-toolbar-messages", providers: [
+        {
+            provide: ToolbarMessages,
+            useExisting: forwardRef(() => ToolbarCustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ToolbarMessages,
+                            useExisting: forwardRef(() => ToolbarCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-toolbar-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const TOOLBAR_TOOLS = [
+    ToolBarToolComponent,
+    ToolBarButtonComponent,
+    ToolBarButtonGroupComponent,
+    ToolBarDropDownButtonComponent,
+    ToolBarSplitButtonComponent,
+    ToolBarSeparatorComponent,
+    ToolBarSpacerComponent
+];
+const TOOLBAR_COMMON = [
+    ToolBarRendererComponent,
+    ToolBarButtonListComponent,
+    ToolbarCustomMessagesComponent,
+    LocalizedToolbarMessagesDirective
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the ToolBar component.
+ *
+ * The package exports:
+ * - `ToolBarComponent`&mdash;The ToolBarComponent class.
+ * - `ToolBarToolComponent`&mdash;The base Tool component class.
+ * - `ToolBarButtonComponent`&mdash;The Button Tool component class.
+ * - `ToolBarButtonGroupComponent`&mdash;The ButtonGroup Tool component class.
+ * - `ToolBarDropDownButtonComponent`&mdash;The DropDownButton Tool component class.
+ * - `ToolBarSplitButtonComponent`&mdash;The SplitButton Tool component class.
+ * - `ToolBarSeparatorComponent`&mdash;The Separator Tool component class.
+ */
+class ToolBarModule {
+}
+ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, declarations: [ToolBarComponent, ToolBarToolComponent,
+        ToolBarButtonComponent,
+        ToolBarButtonGroupComponent,
+        ToolBarDropDownButtonComponent,
+        ToolBarSplitButtonComponent,
+        ToolBarSeparatorComponent,
+        ToolBarSpacerComponent, ToolBarRendererComponent,
+        ToolBarButtonListComponent,
+        ToolbarCustomMessagesComponent,
+        LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule], exports: [ToolBarComponent, ToolBarToolComponent,
+        ToolBarButtonComponent,
+        ToolBarButtonGroupComponent,
+        ToolBarDropDownButtonComponent,
+        ToolBarSplitButtonComponent,
+        ToolBarSeparatorComponent,
+        ToolBarSpacerComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
+ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToolBarComponent, TOOLBAR_TOOLS, TOOLBAR_COMMON],
+                    exports: [ToolBarComponent, TOOLBAR_TOOLS, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective],
+                    imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LocalizedToolbarMessagesDirective, RefreshService, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarComponent, ToolBarDropDownButtonComponent, ToolBarModule, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, ToolbarCustomMessagesComponent };
+