@progress/kendo-angular-toolbar 5.0.2 → 6.0.0-dev.202204131416

package/dist/fesm5/index.js

@@ -1,2665 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata, __extends } from 'tslib';
-import { Injectable, EventEmitter, NgZone, Input, Component, Output, ContentChildren, QueryList, ViewChild, ElementRef, TemplateRef, ViewContainerRef, ViewChildren, HostBinding, HostListener, Renderer2, forwardRef, Directive, NgModule } from '@angular/core';
-import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
-import { Keys, isDocumentAvailable, ResizeSensorComponent, ResizeSensorModule } from '@progress/kendo-angular-common';
-import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import { take, bufferTime, filter, takeUntil } from 'rxjs/operators';
-import { merge, fromEvent, Subject, Subscription } from 'rxjs';
-import { ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent, ButtonsModule } from '@progress/kendo-angular-buttons';
-import { CommonModule } from '@angular/common';
-
-/**
- * @hidden
- */
-var packageMetadata = {
-    name: '@progress/kendo-angular-toolbar',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648214206,
-    version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
-};
-
-/**
- * @hidden
- */
-var RefreshService = /** @class */ (function () {
-    function RefreshService() {
-        this.onRefresh = new EventEmitter();
-    }
-    RefreshService.prototype.refresh = function (tool) {
-        this.onRefresh.emit(tool);
-    };
-    RefreshService = __decorate([
-        Injectable()
-    ], RefreshService);
-    return RefreshService;
-}());
-
-/**
- * @hidden
- */
-var focusableRegex = /^(?:a|input|select|textarea|button|object)$/i;
-/**
- * @hidden
- */
-function outerWidth(element) {
-    var width = element.offsetWidth;
-    var style = getComputedStyle(element);
-    width += parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0;
-    return width;
-}
-/**
- * @hidden
- */
-function innerWidth(element) {
-    var width = element.offsetWidth;
-    var style = getComputedStyle(element);
-    width -= parseFloat(style.paddingLeft) || 0 + parseFloat(style.borderLeftWidth) || 0;
-    width -= parseFloat(style.paddingRight) || 0 + parseFloat(style.borderRightWidth) || 0;
-    return width;
-}
-/**
- * @hidden
- */
-var closest = function (node, predicate) {
-    while (node && !predicate(node)) {
-        node = node.parentNode;
-    }
-    return node;
-};
-/**
- * @hidden
- */
-var isVisible = function (element) {
-    var rect = element.getBoundingClientRect();
-    var hasSize = rect.width > 0 && rect.height > 0;
-    var 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
- */
-var findElement = function (node, predicate, matchSelf) {
-    if (matchSelf === void 0) { matchSelf = true; }
-    if (!node) {
-        return;
-    }
-    if (matchSelf && predicate(node)) {
-        return node;
-    }
-    node = node.firstChild;
-    while (node) {
-        if (node.nodeType === 1) {
-            var element = findElement(node, predicate);
-            if (element) {
-                return element;
-            }
-        }
-        node = node.nextSibling;
-    }
-};
-/**
- * @hidden
- */
-var isFocusable = function (element, checkVisibility) {
-    if (checkVisibility === void 0) { checkVisibility = true; }
-    if (element.tagName) {
-        var tagName = element.tagName.toLowerCase();
-        var tabIndex = element.getAttribute('tabIndex');
-        var focusable = tabIndex !== null;
-        if (focusableRegex.test(tagName)) {
-            focusable = !element.disabled;
-        }
-        return focusable && (!checkVisibility || isVisible(element));
-    }
-    return false;
-};
-/**
- * @hidden
- */
-var findFocusable = function (element, checkVisibility) {
-    if (checkVisibility === void 0) { checkVisibility = true; }
-    return findElement(element, function (node) { return isFocusable(node, checkVisibility); });
-};
-/**
- * @hidden
- */
-var findFocusableChild = function (element, checkVisibility) {
-    if (checkVisibility === void 0) { checkVisibility = true; }
-    return findElement(element, function (node) { return isFocusable(node, checkVisibility); }, false);
-};
-/**
- * @hidden
- */
-var findFocusableSibling = function (element, checkVisibility, reverse) {
-    if (checkVisibility === void 0) { checkVisibility = true; }
-    var node = reverse ? element.prevSibling : element.nextSibling;
-    while (node) {
-        if (node.nodeType === 1) {
-            var result = findElement(node, function (el) { return isFocusable(el, checkVisibility); });
-            if (result) {
-                return result;
-            }
-        }
-        node = reverse ? node.prevSibling : node.nextSibling;
-    }
-};
-/**
- * @hidden
- */
-var isPresent = function (value) { return value !== null && value !== undefined; };
-/**
- * @hidden
- */
-var makePeeker = function (collection) { return function (index) { return isPresent(collection[index]); }; };
-/**
- * @hidden
- */
-var getIndexOfFocused = function (prevKeyCode, nextKeyCode, collection) { return function (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(function (be) { return be === ev.target || be.contains(ev.target); });
-        case 'focus':
-            return 0;
-        default:
-            return 0;
-    }
-}; };
-/**
- * @hidden
- */
-var seekFocusedIndex = function (prevKeyCode, nextKeyCode, seeker) { return function (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
- */
-var areEqual = function (first) { return function (second) { return first === second; }; };
-/**
- * @hidden
- */
-var getNextKey = function (rtl) {
-    if (rtl === void 0) { rtl = false; }
-    return function (overflows) {
-        if (overflows === void 0) { overflows = true; }
-        return overflows ? Keys.ArrowDown : rtl ? Keys.ArrowLeft : Keys.ArrowRight;
-    };
-};
-/**
- * @hidden
- */
-var getPrevKey = function (rtl) {
-    if (rtl === void 0) { rtl = false; }
-    return function (overflows) {
-        if (overflows === void 0) { overflows = true; }
-        return overflows ? Keys.ArrowUp : rtl ? Keys.ArrowRight : Keys.ArrowLeft;
-    };
-};
-/**
- * @hidden
- */
-var getValueForLocation = function (property, displayMode, overflows) {
-    switch (displayMode) {
-        case 'toolbar':
-            return overflows ? undefined : property;
-        case 'overflow':
-            return overflows ? property : undefined;
-        default:
-            return property;
-    }
-};
-
-/**
- * @hidden
- */
-var NavigationService = /** @class */ (function () {
-    function NavigationService(zone) {
-        this.zone = zone;
-        this.focused = { renderedTool: null, index: -1 };
-        this.renderedTools = [];
-        this.isPopupFocused = false;
-        this.isOverflowButtonFocused = false;
-    }
-    NavigationService.prototype.setRenderedTools = function (rts) {
-        this.renderedTools = rts.slice();
-    };
-    NavigationService.prototype.click = function (_a) {
-        var context = _a.context, ev = _a.event;
-        if (this.focused.renderedTool !== context && ev) {
-            this.focus(context, ev);
-        }
-    };
-    NavigationService.prototype.moveFocusToToolBar = function () {
-        this.isPopupFocused = false;
-        this.focusOverflowButton();
-    };
-    NavigationService.prototype.moveFocusToPopup = function () {
-        this.isPopupFocused = true;
-        this.blurOverflowButton();
-        this.focus();
-    };
-    NavigationService.prototype.focusNext = function (ev) {
-        if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
-            var nextRT = this.getFocusableTools().slice(this.focused.index + 1)[0];
-            if (nextRT) {
-                this.focus(nextRT, ev);
-            }
-            else {
-                if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
-                    this.focusOverflowButton();
-                }
-            }
-        }
-    };
-    NavigationService.prototype.focusPrev = function (ev) {
-        if (this.isOverflowButtonFocused) {
-            var lastFocusableRT = this.getFocusableTools().reverse()[0];
-            this.focus(lastFocusableRT, ev);
-        }
-        else if (this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
-            var prevRT = this.getFocusableTools()
-                .slice(0, this.focused.index)
-                .reverse()[0];
-            if (prevRT) {
-                this.focus(prevRT, ev);
-            }
-        }
-    };
-    NavigationService.prototype.resetNavigation = function () {
-        this.blurOverflowButton();
-        this.focused.renderedTool = null;
-        this.focused.index = -1;
-    };
-    NavigationService.prototype.focusFirst = function (ev) {
-        var firstTool = this.getFocusableTools()[0];
-        var overFlowButton = this.overflowButton;
-        if (firstTool) {
-            this.focused.renderedTool = firstTool;
-            this.focused.index = this.getFocusableTools().findIndex(function (rt) { return rt === firstTool; });
-            this.focus(firstTool, ev);
-        }
-        else if (overFlowButton) {
-            overFlowButton.nativeElement.focus();
-        }
-    };
-    NavigationService.prototype.getFocusableTools = function () {
-        var _this = this;
-        return this.renderedTools.filter(function (rt) { return rt.tool.overflows === _this.isPopupFocused && rt.tool.canFocus(); });
-    };
-    NavigationService.prototype.focus = function (renderedTool, ev) {
-        var _this = this;
-        // running the code below in onStable fixes issue #2939
-        this.zone.onStable.pipe(take(1)).subscribe(function () {
-            if (!renderedTool) {
-                var focusableRTs = _this.getFocusableTools();
-                var lastFocusedRT_1 = focusableRTs.find(function (rt) { return rt === _this.focused.renderedTool; }) || focusableRTs[0];
-                // guard against only disabled tools
-                if (lastFocusedRT_1) {
-                    _this.focused.renderedTool = lastFocusedRT_1;
-                    _this.focused.index = _this.getFocusableTools().findIndex(function (rt) { return rt === lastFocusedRT_1; });
-                    // if event is undefined, then this means that the tool is the first one in the overflow popup
-                    lastFocusedRT_1.tool.focus(ev);
-                }
-            }
-            else if (renderedTool.tool.canFocus && renderedTool.tool.canFocus()) {
-                _this.focused.renderedTool = renderedTool;
-                _this.focused.index = _this.getFocusableTools().findIndex(function (rt) { return rt === renderedTool; });
-                renderedTool.tool.focus(ev);
-                _this.blurOverflowButton();
-            }
-        });
-    };
-    NavigationService.prototype.blurOverflowButton = function () {
-        if (this.overflowButton) {
-            this.isOverflowButtonFocused = false;
-            this.overflowButton.nativeElement.tabIndex = -1;
-        }
-    };
-    NavigationService.prototype.focusOverflowButton = function () {
-        this.isOverflowButtonFocused = true;
-        this.overflowButton.nativeElement.tabIndex = 0;
-        this.overflowButton.nativeElement.focus();
-    };
-    NavigationService.prototype.isOverflowButtonVisible = function () {
-        return (isPresent(this.overflowButton) &&
-            window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue('visibility') === 'visible');
-    };
-    NavigationService = __decorate([
-        Injectable(),
-        __metadata("design:paramtypes", [NgZone])
-    ], NavigationService);
-    return NavigationService;
-}());
-
-/**
- * Represents the Base ToolBar Tool component for Angular.
- * Extend this class to create custom tools.
- */
-var ToolBarToolComponent = /** @class */ (function () {
-    function ToolBarToolComponent() {
-        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;
-    }
-    Object.defineProperty(ToolBarToolComponent.prototype, "toolbarDisplay", {
-        get: function () {
-            return this.overflows ? 'none' : 'inline-block';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarToolComponent.prototype, "overflowDisplay", {
-        get: function () {
-            return this.overflows ? 'block' : 'none';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * 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.
-     */
-    ToolBarToolComponent.prototype.canFocus = function () {
-        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.
-     */
-    // @ts-ignore
-    ToolBarToolComponent.prototype.focus = function (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
-     */
-    // @ts-ignore
-    ToolBarToolComponent.prototype.handleKey = function (ev) {
-        return false;
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarToolComponent.prototype, "responsive", void 0);
-    ToolBarToolComponent = __decorate([
-        Component({
-            // tslint:disable-next-line:component-selector
-            selector: 'toolbar-tool',
-            template: ""
-        })
-    ], ToolBarToolComponent);
-    return ToolBarToolComponent;
-}());
-
-/**
- * @hidden
- */
-var PreventableEvent = /** @class */ (function () {
-    function PreventableEvent() {
-        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.
-     */
-    PreventableEvent.prototype.preventDefault = function () {
-        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`.
-     */
-    PreventableEvent.prototype.isDefaultPrevented = function () {
-        return this.prevented;
-    };
-    return PreventableEvent;
-}());
-
-/**
- * @hidden
- */
-var defaultPopupWidth = '150px';
-
-var getInitialPopupSettings = function (isRtl) { return ({
-    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 %}).
- */
-var ToolBarComponent = /** @class */ (function () {
-    function ToolBarComponent(localization, popupService, refreshService, navigationService, element, zone, renderer) {
-        this.localization = localization;
-        this.popupService = popupService;
-        this.refreshService = refreshService;
-        this.navigationService = navigationService;
-        this.element = element;
-        this.zone = zone;
-        this.renderer = renderer;
-        /**
-         * 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();
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-    }
-    Object.defineProperty(ToolBarComponent.prototype, "resizable", {
-        get: function () {
-            return this.overflow;
-        },
-        /**
-         * @hidden
-         */
-        set: function (value) {
-            this.overflow = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "popupSettings", {
-        get: function () {
-            return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
-        },
-        /**
-         * Configures the popup of the ToolBar drop-down list.
-         *
-         * The available options are:
-         * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
-         * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
-         */
-        set: function (settings) {
-            this._popupSettings = Object.assign({}, getInitialPopupSettings(this.localization.rtl), settings);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "tabIndex", {
-        get: function () {
-            return this.tabindex;
-        },
-        /**
-         * @hidden
-         */
-        set: function (tabIndex) {
-            this.tabindex = tabIndex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "appendTo", {
-        get: function () {
-            var appendTo = this.popupSettings.appendTo;
-            if (!appendTo || appendTo === 'root') {
-                return undefined;
-            }
-            return appendTo === 'component' ? this.container : appendTo;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "popupOpen", {
-        get: function () {
-            return this._open;
-        },
-        set: function (open) {
-            if (this.popupOpen === open) {
-                return;
-            }
-            var eventArgs = new PreventableEvent();
-            if (open) {
-                this.open.emit(eventArgs);
-            }
-            else {
-                this.close.emit(eventArgs);
-            }
-            if (eventArgs.isDefaultPrevented()) {
-                return;
-            }
-            this.toggle(open);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    ToolBarComponent.prototype.onFocus = function (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
-     */
-    ToolBarComponent.prototype.onFocusOut = function (event) {
-        var _this = this;
-        // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-        if (closest(event.relatedTarget, function (el) { return el === _this.element.nativeElement; })) {
-            this.element.nativeElement.setAttribute('tabindex', '-1');
-            return;
-        }
-        this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
-    };
-    Object.defineProperty(ToolBarComponent.prototype, "getRole", {
-        get: function () {
-            return 'toolbar';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "getDir", {
-        get: function () {
-            return this.direction;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "resizableClass", {
-        get: function () {
-            return this.overflow;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ToolBarComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        var element = this.element.nativeElement;
-        if (!element.getAttribute('tabindex')) {
-            this.element.nativeElement.setAttribute('tabindex', '0');
-        }
-        this.zone.runOutsideAngular(function () {
-            _this.toolbarKeydownListener = _this.renderer.listen(_this.element.nativeElement, 'keydown', function (ev) {
-                switch (ev.keyCode) {
-                    case Keys.ArrowLeft:
-                        _this.zone.run(function () {
-                            ev.preventDefault();
-                            _this.direction === 'ltr' ? _this.navigationService.focusPrev(ev) : _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(function () {
-                            ev.preventDefault();
-                            _this.direction === 'ltr' ? _this.navigationService.focusNext(ev) : _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(function () { return _this.navigationService.resetNavigation(); });
-                        break;
-                    case Keys.Escape:
-                        _this.zone.run(function () { return _this.toggle(false); });
-                        break;
-                    default:
-                        break;
-                }
-            });
-        });
-        if (this.overflow) {
-            this.subscriptions.add(merge(
-            // trigger resizing calculations once every 200ms instead of each time the resize event is emitted
-            this.resizeSensor.resize.pipe(bufferTime(200), filter(function (v) { return v.length > 0; })), this.renderedTools.changes).subscribe(function () { _this.onResize(); }));
-            // because of https://github.com/telerik/kendo-angular-buttons/pull/276
-            // calling onResize twice is the trade-off for removing the manual ChangeDetection
-            // triggering altogether - it ensures correct layout and calculations
-            // when some tools need overflow on initial rendering
-            this.zone.runOutsideAngular(function () { return setTimeout(function () { _this.onResize(); _this.onResize(); }); });
-            this.navigationService.overflowButton = this.overflowButton;
-        }
-        this.navigationService.setRenderedTools(this.renderedTools.toArray());
-        this.subscriptions.add(this.renderedTools.changes.subscribe(function (rts) {
-            return _this.navigationService.setRenderedTools(rts.toArray());
-        }));
-    };
-    ToolBarComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.subscriptions.add(this.localization.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            return (_this.direction = rtl ? 'rtl' : 'ltr');
-        }));
-        if (isDocumentAvailable()) {
-            this.zone.runOutsideAngular(function () {
-                return _this.subscriptions.add(fromEvent(document, 'click')
-                    .pipe(filter(function () { return !!_this.popupRef; }), filter(function (ev) { return !_this.popupRef.popup.instance.container.nativeElement.contains(ev.target); }), filter(function (ev) { return !_this.overflowButton.nativeElement.contains(ev.target); }))
-                    .subscribe(function () {
-                    _this.zone.run(function () {
-                        _this.popupOpen = false;
-                    });
-                }));
-            });
-        }
-    };
-    ToolBarComponent.prototype.ngOnChanges = function (changes) {
-        if (changes.tabindex) {
-            // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-            this.element.nativeElement.setAttribute('tabindex', changes.tabindex.currentValue.toString());
-        }
-    };
-    ToolBarComponent.prototype.ngOnDestroy = function () {
-        if (this.popupRef) {
-            this.popupRef.close();
-        }
-        if (this.toolbarKeydownListener) {
-            this.toolbarKeydownListener();
-        }
-        this.cancelRenderedToolsSubscription$.next();
-        this.subscriptions.unsubscribe();
-    };
-    Object.defineProperty(ToolBarComponent.prototype, "moreToolsTitle", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.localization.get('moreToolsTitle');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    ToolBarComponent.prototype.onRendererClick = function (data) {
-        this.navigationService.click(data);
-        this.element.nativeElement.setAttribute('tabindex', '-1');
-    };
-    /**
-     * @hidden
-     */
-    ToolBarComponent.prototype.showPopup = function () {
-        this.popupOpen = !this.popupOpen;
-        this.navigationService.click({ context: undefined, event: undefined });
-    };
-    /**
-     * Toggles the visibility of the overflow popup.
-     */
-    ToolBarComponent.prototype.toggle = function (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.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this));
-            this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this));
-        }
-    };
-    /**
-     * @hidden
-     */
-    ToolBarComponent.prototype.onResize = function () {
-        var _this = this;
-        if (isDocumentAvailable()) {
-            var containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
-            this.shrink(containerWidth, this.childrenWidth);
-            this.stretch(containerWidth, this.childrenWidth);
-            this.zone.onStable.pipe(take(1)).subscribe(function () {
-                _this.displayAnchor();
-            });
-        }
-        this.resizeSensor.acceptSize();
-    };
-    /**
-     * @hidden
-     */
-    ToolBarComponent.prototype.onPopupOpen = function () {
-        var _this = this;
-        this.zone.runOutsideAngular(function () {
-            _this.overflowKeydownListener = _this.renderer.listen(_this.popupRef.popupElement, 'keydown', function (ev) {
-                switch (ev.keyCode) {
-                    case Keys.ArrowUp:
-                        _this.zone.run(function () {
-                            ev.preventDefault();
-                            _this.navigationService.focusPrev(ev);
-                        });
-                        break;
-                    case Keys.ArrowDown:
-                        _this.zone.run(function () {
-                            ev.preventDefault();
-                            _this.navigationService.focusNext(ev);
-                        });
-                        break;
-                    case Keys.Escape:
-                        _this.zone.run(function () { return _this.toggle(false); });
-                        break;
-                    case Keys.Tab:
-                        _this.zone.run(function () {
-                            _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(function (rts) { return _this.navigationService.setRenderedTools(rts.toArray()); });
-    };
-    /**
-     * @hidden
-     */
-    ToolBarComponent.prototype.onPopupClose = function () {
-        var _this = this;
-        this.cancelRenderedToolsSubscription$.next();
-        this.navigationService.setRenderedTools(this.renderedTools.toArray());
-        this.renderedTools.changes
-            .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
-            .subscribe(function (rts) { return _this.navigationService.setRenderedTools(rts.toArray()); });
-        this.navigationService.moveFocusToToolBar();
-        if (this.overflowKeydownListener) {
-            this.overflowKeydownListener();
-        }
-    };
-    ToolBarComponent.prototype.displayAnchor = function () {
-        var visibility = this.allTools.filter(function (t) { return t.overflows && t.responsive; }).length > 0 ? 'visible' : 'hidden';
-        this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
-    };
-    Object.defineProperty(ToolBarComponent.prototype, "popupWidth", {
-        get: function () {
-            if (!this.popupSettings || !this.popupSettings.width) {
-                return defaultPopupWidth;
-            }
-            return isNaN(this.popupSettings.width) ? this.popupSettings.width : this.popupSettings.width + "px";
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "popupHeight", {
-        get: function () {
-            if (!this.popupSettings || !this.popupSettings.height) {
-                return;
-            }
-            return isNaN(this.popupSettings.height) ? this.popupSettings.height : this.popupSettings.height + "px";
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "overflowAnchorWidth", {
-        get: function () {
-            if (!this.overflow) {
-                return 0;
-            }
-            if (!this.cachedOverflowAnchorWidth) {
-                this.cachedOverflowAnchorWidth = outerWidth(this.overflowButton.nativeElement);
-            }
-            return this.cachedOverflowAnchorWidth;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "gap", {
-        get: function () {
-            if (isPresent(this.cachedGap)) {
-                return this.cachedGap;
-            }
-            var computedGap = getComputedStyle(this.element.nativeElement).gap;
-            this.cachedGap = isPresent(computedGap) ? parseInt(computedGap, 10) : 0;
-            return this.cachedGap;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "childrenWidth", {
-        get: function () {
-            var _this = this;
-            var width = this.renderedTools.reduce(function (totalWidth, tool) { return tool.width + totalWidth + (tool.isDisplayed() ? _this.gap : 0); }, 0);
-            return Math.ceil(width);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "visibleTools", {
-        get: function () {
-            return this.allTools.filter(function (tool) {
-                return tool.overflows === false;
-            });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarComponent.prototype, "overflowTools", {
-        get: function () {
-            return this.allTools.filter(function (tool) {
-                return tool.overflows === true;
-            });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ToolBarComponent.prototype.shrink = function (containerWidth, childrenWidth) {
-        var width;
-        if (containerWidth < childrenWidth) {
-            for (var i = this.visibleTools.length - 1; i >= 0; i--) {
-                if (containerWidth > childrenWidth) {
-                    break;
-                }
-                else {
-                    width = this.hideLastVisibleTool();
-                    childrenWidth -= width;
-                }
-            }
-        }
-    };
-    ToolBarComponent.prototype.stretch = function (containerWidth, childrenWidth) {
-        var width;
-        if (containerWidth > childrenWidth) {
-            for (var i = this.overflowTools.length - 1; i >= 0; i--) {
-                width = this.showFirstHiddenTool(containerWidth, childrenWidth);
-                if (width) {
-                    childrenWidth += width;
-                }
-                else {
-                    break;
-                }
-            }
-        }
-    };
-    ToolBarComponent.prototype.hideLastVisibleTool = function () {
-        var tool = this.visibleTools[this.visibleTools.length - 1];
-        var renderedElement = this.renderedTools.find(function (r) {
-            return r.tool === tool;
-        });
-        var width = renderedElement.width;
-        tool.overflows = true;
-        this.refreshService.refresh(tool);
-        return width;
-    };
-    ToolBarComponent.prototype.showFirstHiddenTool = function (containerWidth, childrenWidth) {
-        var tool = this.overflowTools[0];
-        var renderedElement = this.renderedTools.find(function (r) { return 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
-    };
-    ToolBarComponent.prototype.setPopupContentDimensions = function () {
-        var popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
-        popupContentContainer.style.width = this.popupWidth;
-        popupContentContainer.style.height = this.popupHeight;
-        popupContentContainer.style.overflow = 'auto';
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarComponent.prototype, "overflow", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [Boolean])
-    ], ToolBarComponent.prototype, "resizable", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], ToolBarComponent.prototype, "popupSettings", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], ToolBarComponent.prototype, "tabindex", void 0);
-    __decorate([
-        Input('tabIndex'),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [Number])
-    ], ToolBarComponent.prototype, "tabIndex", null);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarComponent.prototype, "open", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarComponent.prototype, "close", void 0);
-    __decorate([
-        ContentChildren(ToolBarToolComponent),
-        __metadata("design:type", QueryList)
-    ], ToolBarComponent.prototype, "allTools", void 0);
-    __decorate([
-        ViewChild('overflowButton', { static: false }),
-        __metadata("design:type", ElementRef)
-    ], ToolBarComponent.prototype, "overflowButton", void 0);
-    __decorate([
-        ViewChild('popupTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('resizeSensor', { static: false }),
-        __metadata("design:type", ResizeSensorComponent)
-    ], ToolBarComponent.prototype, "resizeSensor", void 0);
-    __decorate([
-        ViewChild('container', { read: ViewContainerRef, static: true }),
-        __metadata("design:type", ViewContainerRef)
-    ], ToolBarComponent.prototype, "container", void 0);
-    __decorate([
-        ViewChildren('toolbarRenderer'),
-        __metadata("design:type", QueryList)
-    ], ToolBarComponent.prototype, "renderedTools", void 0);
-    __decorate([
-        ViewChildren('overflowRenderer'),
-        __metadata("design:type", QueryList)
-    ], ToolBarComponent.prototype, "overflowRenderedTools", void 0);
-    __decorate([
-        HostBinding('class.k-widget'),
-        HostBinding('class.k-toolbar'),
-        __metadata("design:type", Boolean)
-    ], ToolBarComponent.prototype, "hostClasses", void 0);
-    __decorate([
-        HostListener('focus', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], ToolBarComponent.prototype, "onFocus", null);
-    __decorate([
-        HostListener('focusout', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], ToolBarComponent.prototype, "onFocusOut", null);
-    __decorate([
-        HostBinding('attr.role'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], ToolBarComponent.prototype, "getRole", null);
-    __decorate([
-        HostBinding('attr.dir'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], ToolBarComponent.prototype, "getDir", null);
-    __decorate([
-        HostBinding('class.k-toolbar-resizable'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ToolBarComponent.prototype, "resizableClass", null);
-    ToolBarComponent = __decorate([
-        Component({
-            exportAs: 'kendoToolBar',
-            providers: [
-                RefreshService,
-                NavigationService,
-                LocalizationService,
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.toolbar'
-                }
-            ],
-            selector: 'kendo-toolbar',
-            template: "\n        <ng-container kendoToolbarLocalizedMessages\n        i18n-moreToolsTitle=\"kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar\"\n        moreToolsTitle=\"More tools\"\n        >\n        </ng-container>\n        <ng-container *ngFor=\"let tool of allTools; let index = index\">\n            <kendo-toolbar-renderer\n                #toolbarRenderer\n                (rendererClick)=\"onRendererClick($event)\"\n                [location]=\"'toolbar'\"\n                [resizable]=\"overflow\"\n                [tool]=\"tool\"\n            ></kendo-toolbar-renderer>\n        </ng-container>\n        <button\n            #overflowButton\n            type=\"button\"\n            tabindex=\"-1\"\n            [title]=\"moreToolsTitle\"\n            [attr.aria-label]=\"moreToolsTitle\"\n            *ngIf=\"overflow\"\n            [style.visibility]=\"'hidden'\"\n            class=\"k-overflow-anchor k-button\"\n            (click)=\"showPopup()\"\n        >\n            <span class=\"k-icon k-i-more-vertical\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <ul class=\"k-overflow-container k-list-container k-reset\">\n                <ng-container *ngFor=\"let tool of allTools; let index = index\">\n                    <li class=\"k-item\">\n                        <kendo-toolbar-renderer\n                            #overflowRenderer\n                            (rendererClick)=\"onRendererClick($event)\"\n                            [location]=\"'overflow'\"\n                            [resizable]=\"overflow\"\n                            [tool]=\"tool\"\n                        ></kendo-toolbar-renderer>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-template>\n        <ng-container #container></ng-container>\n        <kendo-resize-sensor *ngIf=\"overflow\" [rateLimit]=\"1000\" #resizeSensor></kendo-resize-sensor>\n    "
-        }),
-        __metadata("design:paramtypes", [LocalizationService,
-            PopupService,
-            RefreshService,
-            NavigationService,
-            ElementRef,
-            NgZone,
-            Renderer2])
-    ], ToolBarComponent);
-    return ToolBarComponent;
-}());
-
-/**
- * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
- */
-var ToolBarButtonComponent = /** @class */ (function (_super) {
-    __extends(ToolBarButtonComponent, _super);
-    function ToolBarButtonComponent() {
-        var _this = _super.call(this) || this;
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Specifies where button text should be displayed
-         */
-        _this.showText = 'both';
-        /**
-         * 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: ''
-        };
-        return _this;
-    }
-    ToolBarButtonComponent_1 = ToolBarButtonComponent;
-    Object.defineProperty(ToolBarButtonComponent.prototype, "text", {
-        /**
-         * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
-         */
-        set: function (text) {
-            this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-            this.overflowOptions.text = getValueForLocation(text, this.showText, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarButtonComponent.prototype, "look", {
-        /**
-         * @hidden
-         */
-        set: function (look) {
-            if (look) {
-                this.fillMode = look === 'default' ? 'solid' : look;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarButtonComponent.prototype, "togglable", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.toggleable;
-        },
-        set: function (value) {
-            this.toggleable = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarButtonComponent.prototype, "icon", {
-        /**
-         * 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: function (icon) {
-            this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-            this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarButtonComponent.prototype, "iconClass", {
-        /**
-         * 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: function (iconClass) {
-            this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-            this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarButtonComponent.prototype, "imageUrl", {
-        /**
-         * 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: function (imageUrl) {
-            this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-            this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    ToolBarButtonComponent.prototype.onBlur = function () {
-        this.getButton().tabIndex = -1;
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonComponent.prototype.canFocus = function () {
-        return !this.disabled;
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonComponent.prototype.focus = function (ev) {
-        // guard against focusing twice on mousedown.
-        if (!ev || ev.type === 'focus' || ev.type === 'keydown') {
-            this.getButton().focus();
-        }
-        this.getButton().tabIndex = 0;
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonComponent.prototype.handleKey = function () {
-        this.getButton().tabIndex = -1;
-        return false;
-    };
-    ToolBarButtonComponent.prototype.getButton = function () {
-        return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
-    };
-    var ToolBarButtonComponent_1;
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonComponent.prototype, "showText", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonComponent.prototype, "showIcon", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarButtonComponent.prototype, "text", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], ToolBarButtonComponent.prototype, "style", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], ToolBarButtonComponent.prototype, "className", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonComponent.prototype, "title", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarButtonComponent.prototype, "disabled", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarButtonComponent.prototype, "toggleable", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarButtonComponent.prototype, "look", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [Boolean])
-    ], ToolBarButtonComponent.prototype, "togglable", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarButtonComponent.prototype, "selected", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonComponent.prototype, "fillMode", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonComponent.prototype, "themeColor", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarButtonComponent.prototype, "icon", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarButtonComponent.prototype, "iconClass", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarButtonComponent.prototype, "imageUrl", null);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarButtonComponent.prototype, "click", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarButtonComponent.prototype, "pointerdown", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarButtonComponent.prototype, "selectedChange", void 0);
-    __decorate([
-        ViewChild('toolbarTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarButtonComponent.prototype, "toolbarTemplate", void 0);
-    __decorate([
-        ViewChild('popupTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarButtonComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('toolbarButton', { read: ElementRef, static: false }),
-        __metadata("design:type", ElementRef)
-    ], ToolBarButtonComponent.prototype, "toolbarButtonElement", void 0);
-    __decorate([
-        ViewChild('overflowButton', { read: ElementRef, static: false }),
-        __metadata("design:type", ElementRef)
-    ], ToolBarButtonComponent.prototype, "overflowButtonElement", void 0);
-    ToolBarButtonComponent = ToolBarButtonComponent_1 = __decorate([
-        Component({
-            exportAs: 'kendoToolBarButton',
-            // tslint:disable-next-line:no-forward-ref
-            providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarButtonComponent_1; }) }],
-            selector: 'kendo-toolbar-button',
-            template: "\n        <ng-template #toolbarTemplate>\n            <button\n                #toolbarButton\n                [tabindex]=\"tabIndex\"\n                type=\"button\"\n                kendoButton\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (pointerdown)=\"pointerdown.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n                (blur)=\"onBlur()\"\n            >\n                {{ toolbarOptions.text }}\n            </button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowButton\n                tabindex=\"-1\"\n                type=\"button\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [selected]=\"selected\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChange.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n        </ng-template>\n    "
-        }),
-        __metadata("design:paramtypes", [])
-    ], ToolBarButtonComponent);
-    return ToolBarButtonComponent;
-}(ToolBarToolComponent));
-
-/**
- * Represents the Kendo UI Toolbar ButtonGroup for Angular.
- */
-var ToolBarButtonGroupComponent = /** @class */ (function (_super) {
-    __extends(ToolBarButtonGroupComponent, _super);
-    function ToolBarButtonGroupComponent(localization) {
-        var _this = _super.call(this) || this;
-        _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);
-        return _this;
-    }
-    ToolBarButtonGroupComponent_1 = ToolBarButtonGroupComponent;
-    Object.defineProperty(ToolBarButtonGroupComponent.prototype, "look", {
-        /**
-         * @hidden
-         */
-        set: function (look) {
-            if (look) {
-                this.buttonComponents.forEach(function (b) { return b.fillMode = look === 'default' ? 'solid' : look; });
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarButtonGroupComponent.prototype, "buttonElements", {
-        get: function () {
-            return this.getButtonGroup()
-                .buttons.filter(function (b) { return !b.isDisabled; })
-                .map(function (b) { return b.element; });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    ToolBarButtonGroupComponent.prototype.onFocus = function () {
-        // triggered on tabin
-        this.focusedIndex = 0;
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonGroupComponent.prototype.onNavigate = function (ev) {
-        ev.preventDefault();
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonGroupComponent.prototype.selectedChangeHandler = function (state, button) {
-        button.selected = state;
-        button.selectedChange.emit(state);
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonGroupComponent.prototype.onButtonClick = function (ev) {
-        this.focusedIndex = this.buttonElements.findIndex(function (be) { return be === ev.target || be.contains(ev.target); });
-        this.focusButton(this.focusedIndex, ev);
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonGroupComponent.prototype.canFocus = function () {
-        return !(this.disabled || this.buttonElements.length === 0);
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonGroupComponent.prototype.focus = function (ev) {
-        if (ev === void 0) { ev = {}; }
-        var nextKey = this.getNextKey(this.overflows);
-        var prevKey = this.getPrevKey(this.overflows);
-        this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
-        this.focusButton(this.focusedIndex, ev);
-    };
-    /**
-     * @hidden
-     */
-    ToolBarButtonGroupComponent.prototype.handleKey = function (ev) {
-        var nextKey = this.getNextKey(this.overflows);
-        var prevKey = this.getPrevKey(this.overflows);
-        var peekAtIndex = makePeeker(this.buttonElements);
-        var isUnmodified = areEqual(this.focusedIndex);
-        this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
-        this.focusButton(this.focusedIndex, ev);
-        return !isUnmodified(this.focusedIndex);
-    };
-    ToolBarButtonGroupComponent.prototype.getButtonGroup = function () {
-        return this.overflows ? this.overflowButtonGroup : this.toolbarButtonGroup;
-    };
-    ToolBarButtonGroupComponent.prototype.focusButton = function (index, ev) {
-        // Guard against focusing twice on mousedown.
-        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-            this.buttonElements[index].focus();
-        }
-    };
-    var ToolBarButtonGroupComponent_1;
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarButtonGroupComponent.prototype, "disabled", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonGroupComponent.prototype, "selection", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonGroupComponent.prototype, "width", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarButtonGroupComponent.prototype, "look", null);
-    __decorate([
-        ViewChild('toolbarTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarButtonGroupComponent.prototype, "toolbarTemplate", void 0);
-    __decorate([
-        ViewChild('popupTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarButtonGroupComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ContentChildren(forwardRef(function () { return ToolBarButtonComponent; })),
-        __metadata("design:type", QueryList)
-    ], ToolBarButtonGroupComponent.prototype, "buttonComponents", void 0);
-    __decorate([
-        ViewChild('toolbarButtonGroup', { static: false }),
-        __metadata("design:type", ButtonGroupComponent)
-    ], ToolBarButtonGroupComponent.prototype, "toolbarButtonGroup", void 0);
-    __decorate([
-        ViewChild('overflowButtonGroup', { static: false }),
-        __metadata("design:type", ButtonGroupComponent)
-    ], ToolBarButtonGroupComponent.prototype, "overflowButtonGroup", void 0);
-    ToolBarButtonGroupComponent = ToolBarButtonGroupComponent_1 = __decorate([
-        Component({
-            exportAs: 'kendoToolBarButtonGroup',
-            // tslint:disable-next-line:no-forward-ref
-            providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarButtonGroupComponent_1; }) }],
-            selector: 'kendo-toolbar-buttongroup',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-buttongroup\n                #toolbarButtonGroup\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [width]=\"width\"\n                (navigate)=\"onNavigate($event)\"\n                (focus)=\"onFocus()\"\n            >\n                <span\n                    kendoButton\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [selected]=\"button.selected\"\n                    [fillMode]=\"button.fillMode\"\n                    [themeColor]=\"button.fillMode ? button.themeColor : null\"\n                    [icon]=\"button.toolbarOptions.icon\"\n                    [iconClass]=\"button.toolbarOptions.iconClass\"\n                    [imageUrl]=\"button.toolbarOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (pointerdown)=\"button.pointerdown.emit($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.toolbarOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <kendo-buttongroup\n                #overflowButtonGroup\n                class=\"k-overflow-button\"\n                [tabIndex]=\"-1\"\n                [selection]=\"selection\"\n                [disabled]=\"disabled\"\n                [width]=\"width\"\n            >\n                <span\n                    kendoButton\n                    class=\"k-overflow-button\"\n                    *ngFor=\"let button of buttonComponents\"\n                    [ngStyle]=\"button.style\"\n                    [ngClass]=\"button.className\"\n                    [attr.title]=\"button.title\"\n                    [disabled]=\"button.disabled\"\n                    [togglable]=\"button.togglable\"\n                    [selected]=\"button.selected\"\n                    [fillMode]=\"button.fillMode\"\n                    [themeColor]=\"button.fillMode ? button.themeColor : null\"\n                    [icon]=\"button.overflowOptions.icon\"\n                    [iconClass]=\"button.overflowOptions.iconClass\"\n                    [imageUrl]=\"button.overflowOptions.imageUrl\"\n                    (click)=\"button.click.emit($event); onButtonClick($event)\"\n                    (selectedChange)=\"selectedChangeHandler($event, button)\"\n                >\n                    {{ button.overflowOptions.text }}\n                </span>\n            </kendo-buttongroup>\n        </ng-template>\n    "
-        }),
-        __metadata("design:paramtypes", [LocalizationService])
-    ], ToolBarButtonGroupComponent);
-    return ToolBarButtonGroupComponent;
-}(ToolBarToolComponent));
-
-/**
- * @hidden
- */
-var ToolBarButtonListComponent = /** @class */ (function () {
-    function ToolBarButtonListComponent() {
-        this.disabled = false;
-        this.fillMode = 'solid';
-        this.themeColor = 'base';
-        this.itemClick = new EventEmitter();
-    }
-    ToolBarButtonListComponent.prototype.getText = function (dataItem) {
-        if (dataItem) {
-            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
-        }
-        return undefined;
-    };
-    ToolBarButtonListComponent.prototype.onClick = function (item, index) {
-        var dataItem = this.data[index];
-        if (item.click) {
-            item.click(dataItem);
-        }
-        this.itemClick.emit(dataItem);
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], ToolBarButtonListComponent.prototype, "data", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonListComponent.prototype, "textField", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarButtonListComponent.prototype, "disabled", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonListComponent.prototype, "fillMode", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarButtonListComponent.prototype, "themeColor", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarButtonListComponent.prototype, "itemClick", void 0);
-    __decorate([
-        ViewChildren('button'),
-        __metadata("design:type", QueryList)
-    ], ToolBarButtonListComponent.prototype, "buttons", void 0);
-    ToolBarButtonListComponent = __decorate([
-        Component({
-            selector: 'kendo-toolbar-buttonlist',
-            template: "\n        <button\n            #button\n            type=\"button\"\n            tabindex=\"-1\"\n            kendoButton\n            style=\"padding-left: 16px\"\n            class=\"k-overflow-button\"\n            *ngFor=\"let item of data; let i = index\"\n            [disabled]=\"disabled || item.disabled\"\n            [icon]=\"item.icon\"\n            [iconClass]=\"item.iconClass\"\n            [imageUrl]=\"item.imageUrl\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"fillMode ? themeColor : null\"\n            (click)=\"onClick(item, i)\"\n        >\n            {{ getText(item) }}\n        </button>\n    "
-        })
-    ], ToolBarButtonListComponent);
-    return ToolBarButtonListComponent;
-}());
-
-/**
- * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
- */
-var ToolBarDropDownButtonComponent = /** @class */ (function (_super) {
-    __extends(ToolBarDropDownButtonComponent, _super);
-    function ToolBarDropDownButtonComponent() {
-        var _this = _super.call(this) || this;
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Defines the location of the button text that will be displayed.
-         */
-        _this.showText = 'both';
-        /**
-         * 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.getNextKey = getNextKey();
-        _this.getPrevKey = getPrevKey();
-        return _this;
-    }
-    ToolBarDropDownButtonComponent_1 = ToolBarDropDownButtonComponent;
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "text", {
-        /**
-         * Sets the text of the DropDownButton
-         * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
-         */
-        set: function (text) {
-            this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-            this.overflowOptions.text = getValueForLocation(text, this.showText, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "icon", {
-        /**
-         * Defines an icon that will be rendered next to the button text.
-         */
-        set: function (icon) {
-            this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-            this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "iconClass", {
-        /**
-         * Defines an icon with a custom CSS class that will be rendered next to the button text.
-         */
-        set: function (iconClass) {
-            this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-            this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "imageUrl", {
-        /**
-         * Defines the location of an image that will be displayed next to the button text.
-         */
-        set: function (imageUrl) {
-            this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-            this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "popupSettings", {
-        get: function () {
-            return this._popupSettings;
-        },
-        /**
-         * 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: function (settings) {
-            this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "look", {
-        /**
-         * @hidden
-         */
-        set: function (look) {
-            if (look) {
-                this.fillMode = look === 'default' ? 'solid' : look;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "primary", {
-        /**
-         * @hidden
-         */
-        set: function (primary) {
-            this.themeColor = primary ? 'primary' : 'base';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "data", {
-        get: function () {
-            if (!this._data) {
-                this.data = [];
-            }
-            return this._data;
-        },
-        /**
-         * 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: function (data) {
-            this._data = data || [];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarDropDownButtonComponent.prototype, "overflowButtons", {
-        get: function () {
-            return this.overflowDropDownButtonButtonList.buttons.toArray().filter(function (b) { return !b.nativeElement.disabled; }).slice();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    ToolBarDropDownButtonComponent.prototype.onButtonListClick = function (ev) {
-        this.focusedIndex = this.overflowDropDownButtonButtonList.buttons
-            .toArray()
-            .findIndex(function (b) { return b.nativeElement.contains(ev.target); });
-    };
-    /**
-     * @hidden
-     */
-    ToolBarDropDownButtonComponent.prototype.canFocus = function () {
-        return !this.disabled;
-    };
-    /**
-     * @hidden
-     */
-    ToolBarDropDownButtonComponent.prototype.focus = function (ev) {
-        if (ev === void 0) { 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(function (ob) { return ob.nativeElement; }))(ev);
-            this.focusButton(this.focusedIndex, ev);
-        }
-    };
-    /**
-     * @hidden
-     */
-    ToolBarDropDownButtonComponent.prototype.handleKey = function (ev) {
-        if (!this.overflows && (ev.keyCode === this.getPrevKey(this.overflows) || ev.keyCode === this.getNextKey(this.overflows))) {
-            return false;
-        }
-        if (this.overflows) {
-            var peekAtIndex = makePeeker(this.overflowButtons);
-            var isUnmodified = areEqual(this.focusedIndex);
-            this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
-            this.focusButton(this.focusedIndex, ev);
-            return !isUnmodified(this.focusedIndex);
-        }
-    };
-    ToolBarDropDownButtonComponent.prototype.focusButton = function (index, ev) {
-        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-            this.overflowButtons[index].nativeElement.focus();
-        }
-    };
-    var ToolBarDropDownButtonComponent_1;
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarDropDownButtonComponent.prototype, "showText", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarDropDownButtonComponent.prototype, "showIcon", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarDropDownButtonComponent.prototype, "text", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarDropDownButtonComponent.prototype, "icon", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarDropDownButtonComponent.prototype, "iconClass", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarDropDownButtonComponent.prototype, "imageUrl", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], ToolBarDropDownButtonComponent.prototype, "popupSettings", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarDropDownButtonComponent.prototype, "look", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [Boolean])
-    ], ToolBarDropDownButtonComponent.prototype, "primary", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarDropDownButtonComponent.prototype, "fillMode", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarDropDownButtonComponent.prototype, "themeColor", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarDropDownButtonComponent.prototype, "buttonClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarDropDownButtonComponent.prototype, "textField", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarDropDownButtonComponent.prototype, "disabled", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [Array])
-    ], ToolBarDropDownButtonComponent.prototype, "data", null);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarDropDownButtonComponent.prototype, "itemClick", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarDropDownButtonComponent.prototype, "open", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarDropDownButtonComponent.prototype, "close", void 0);
-    __decorate([
-        ViewChild('toolbarTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarDropDownButtonComponent.prototype, "toolbarTemplate", void 0);
-    __decorate([
-        ViewChild('popupTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarDropDownButtonComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('dropdownButton', { read: ElementRef, static: true }),
-        __metadata("design:type", ElementRef)
-    ], ToolBarDropDownButtonComponent.prototype, "dropdownButton", void 0);
-    __decorate([
-        ViewChild(DropDownButtonComponent, { static: false }),
-        __metadata("design:type", DropDownButtonComponent)
-    ], ToolBarDropDownButtonComponent.prototype, "dropDownButtonComponent", void 0);
-    __decorate([
-        ViewChild('toolbarDropDownButton', { static: false }),
-        __metadata("design:type", DropDownButtonComponent)
-    ], ToolBarDropDownButtonComponent.prototype, "toolbarDropDownButton", void 0);
-    __decorate([
-        ViewChild('overflowDropDownButtonButtonList', { static: false }),
-        __metadata("design:type", ToolBarButtonListComponent)
-    ], ToolBarDropDownButtonComponent.prototype, "overflowDropDownButtonButtonList", void 0);
-    ToolBarDropDownButtonComponent = ToolBarDropDownButtonComponent_1 = __decorate([
-        Component({
-            exportAs: 'kendoToolBarDropDownButton',
-            // tslint:disable-next-line:no-forward-ref
-            providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarDropDownButtonComponent_1; }) }],
-            selector: 'kendo-toolbar-dropdownbutton',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-dropdownbutton\n                #toolbarDropDownButton\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n                {{ toolbarOptions.text }}\n            </kendo-dropdownbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                type=\"button\"\n                tabindex=\"-1\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"true\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"itemClick.emit($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowDropDownButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "
-        }),
-        __metadata("design:paramtypes", [])
-    ], ToolBarDropDownButtonComponent);
-    return ToolBarDropDownButtonComponent;
-}(ToolBarToolComponent));
-
-/**
- * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
- */
-var ToolBarSplitButtonComponent = /** @class */ (function (_super) {
-    __extends(ToolBarSplitButtonComponent, _super);
-    function ToolBarSplitButtonComponent() {
-        var _this = _super.call(this) || this;
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Specifies where button text should be displayed
-         */
-        _this.showText = 'both';
-        /**
-         * 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.getNextKey = getNextKey();
-        _this.getPrevKey = getPrevKey();
-        return _this;
-    }
-    ToolBarSplitButtonComponent_1 = ToolBarSplitButtonComponent;
-    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "text", {
-        /**
-         * Sets the text of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons).
-         */
-        set: function (text) {
-            this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-            this.overflowOptions.text = getValueForLocation(text, this.showText, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "icon", {
-        /**
-         * Defines the icon that will be rendered next to the button text
-         * ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
-         */
-        set: function (icon) {
-            this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-            this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "iconClass", {
-        /**
-         * Defines an icon with a custom CSS class that will be rendered next to the button text.
-         */
-        set: function (iconClass) {
-            this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-            this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "imageUrl", {
-        /**
-         * Defines the location of an image that will be displayed next to the button text.
-         */
-        set: function (imageUrl) {
-            this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-            this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "popupSettings", {
-        get: function () {
-            if (!this._popupSettings) {
-                this._popupSettings = { animate: true, popupClass: '' };
-            }
-            return this._popupSettings;
-        },
-        /**
-         * 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: function (value) {
-            this._popupSettings = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "look", {
-        /**
-         * @hidden
-         */
-        set: function (look) {
-            if (look) {
-                this.fillMode = look === 'default' ? 'solid' : look;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "data", {
-        get: function () {
-            if (!this._data) {
-                this.data = [];
-            }
-            return this._data;
-        },
-        /**
-         * 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: function (data) {
-            this._data = data || [];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ToolBarSplitButtonComponent.prototype, "overflowButtons", {
-        get: function () {
-            return [this.overflowSplitButton].concat(this.overflowSplitButtonButtonList.buttons.toArray().filter(function (b) { return !b.nativeElement.disabled; }));
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    ToolBarSplitButtonComponent.prototype.onButtonListClick = function (ev) {
-        this.focusedIndex = this.overflowButtons.findIndex(function (b) { return b.nativeElement.contains(ev.target); });
-    };
-    /**
-     * @hidden
-     */
-    ToolBarSplitButtonComponent.prototype.onMainButtonClick = function (ev) {
-        this.buttonClick.emit(ev);
-        this.focusedIndex = 0;
-    };
-    /**
-     * @hidden
-     */
-    ToolBarSplitButtonComponent.prototype.canFocus = function () {
-        return !this.disabled;
-    };
-    /**
-     * @hidden
-     */
-    ToolBarSplitButtonComponent.prototype.focus = function (ev) {
-        if (ev === void 0) { 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(function (ob) { return ob.nativeElement; }))(ev);
-            this.focusButton(this.focusedIndex, ev);
-        }
-    };
-    /**
-     * @hidden
-     */
-    ToolBarSplitButtonComponent.prototype.handleKey = function (ev) {
-        if (!this.overflows && (ev.keyCode === this.getPrevKey(this.overflows) || ev.keyCode === this.getNextKey(this.overflows))) {
-            return false;
-        }
-        if (this.overflows) {
-            var peekAtIndex = makePeeker(this.overflowButtons);
-            var isUnmodified = areEqual(this.focusedIndex);
-            this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
-            this.focusButton(this.focusedIndex, ev);
-            return !isUnmodified(this.focusedIndex);
-        }
-    };
-    ToolBarSplitButtonComponent.prototype.focusButton = function (index, ev) {
-        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') {
-            this.overflowButtons[index].nativeElement.focus();
-        }
-    };
-    var ToolBarSplitButtonComponent_1;
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "showText", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "showIcon", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarSplitButtonComponent.prototype, "text", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarSplitButtonComponent.prototype, "icon", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarSplitButtonComponent.prototype, "iconClass", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarSplitButtonComponent.prototype, "imageUrl", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarSplitButtonComponent.prototype, "disabled", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], ToolBarSplitButtonComponent.prototype, "popupSettings", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "fillMode", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "themeColor", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], ToolBarSplitButtonComponent.prototype, "look", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "buttonClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], ToolBarSplitButtonComponent.prototype, "arrowButtonClass", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "arrowButtonIcon", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarSplitButtonComponent.prototype, "textField", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [Array])
-    ], ToolBarSplitButtonComponent.prototype, "data", null);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarSplitButtonComponent.prototype, "buttonClick", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarSplitButtonComponent.prototype, "itemClick", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarSplitButtonComponent.prototype, "open", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarSplitButtonComponent.prototype, "close", void 0);
-    __decorate([
-        ViewChild('toolbarTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarSplitButtonComponent.prototype, "toolbarTemplate", void 0);
-    __decorate([
-        ViewChild('popupTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarSplitButtonComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('toolbarSplitButton', { static: false }),
-        __metadata("design:type", SplitButtonComponent)
-    ], ToolBarSplitButtonComponent.prototype, "toolbarSplitButton", void 0);
-    __decorate([
-        ViewChild('overflowSplitButton', { read: ElementRef, static: false }),
-        __metadata("design:type", ElementRef)
-    ], ToolBarSplitButtonComponent.prototype, "overflowSplitButton", void 0);
-    __decorate([
-        ViewChild('overflowSplitButtonButtonList', { static: false }),
-        __metadata("design:type", ToolBarButtonListComponent)
-    ], ToolBarSplitButtonComponent.prototype, "overflowSplitButtonButtonList", void 0);
-    ToolBarSplitButtonComponent = ToolBarSplitButtonComponent_1 = __decorate([
-        Component({
-            exportAs: 'kendoToolBarSplitButton',
-            // tslint:disable-next-line:no-forward-ref
-            providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarSplitButtonComponent_1; }) }],
-            selector: 'kendo-toolbar-splitbutton',
-            template: "\n        <ng-template #toolbarTemplate>\n            <kendo-splitbutton\n                #toolbarSplitButton\n                [data]=\"data\"\n                [text]=\"toolbarOptions.text\"\n                [icon]=\"toolbarOptions.icon\"\n                [iconClass]=\"toolbarOptions.iconClass\"\n                [imageUrl]=\"toolbarOptions.imageUrl\"\n                [buttonClass]=\"buttonClass\"\n                [arrowButtonClass]=\"arrowButtonClass\"\n                [arrowButtonIcon]=\"arrowButtonIcon\"\n                [disabled]=\"disabled\"\n                [tabIndex]=\"-1\"\n                [textField]=\"textField\"\n                [popupSettings]=\"popupSettings\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n                (open)=\"open.emit($event)\"\n                (close)=\"close.emit($event)\"\n                (itemClick)=\"itemClick.emit($event)\"\n            >\n            </kendo-splitbutton>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                #overflowSplitButton\n                type=\"button\"\n                tabindex=\"-1\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                kendoButton\n                class=\"k-overflow-button\"\n                [disabled]=\"disabled\"\n                [icon]=\"overflowOptions.icon\"\n                [iconClass]=\"overflowOptions.iconClass\"\n                [imageUrl]=\"overflowOptions.imageUrl\"\n                [ngClass]=\"buttonClass\"\n                (click)=\"buttonClick.emit($event)\"\n                (click)=\"onMainButtonClick($event)\"\n            >\n                {{ overflowOptions.text }}\n            </button>\n            <kendo-toolbar-buttonlist\n                #overflowSplitButtonButtonList\n                [data]=\"data\"\n                [disabled]=\"disabled\"\n                [fillMode]=\"fillMode\"\n                [themeColor]=\"fillMode ? themeColor : null\"\n                [textField]=\"textField\"\n                (itemClick)=\"itemClick.emit($event)\"\n                (click)=\"onButtonListClick($event)\"\n            >\n            </kendo-toolbar-buttonlist>\n        </ng-template>\n    "
-        }),
-        __metadata("design:paramtypes", [])
-    ], ToolBarSplitButtonComponent);
-    return ToolBarSplitButtonComponent;
-}(ToolBarToolComponent));
-
-/**
- * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
- */
-var ToolBarSeparatorComponent = /** @class */ (function (_super) {
-    __extends(ToolBarSeparatorComponent, _super);
-    function ToolBarSeparatorComponent() {
-        return _super.call(this) || this;
-    }
-    ToolBarSeparatorComponent_1 = ToolBarSeparatorComponent;
-    /**
-     * @hidden
-     */
-    ToolBarSeparatorComponent.prototype.canFocus = function () {
-        return false;
-    };
-    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
-    /**
-     * @hidden
-     */
-    ToolBarSeparatorComponent.prototype.focus = function () {
-        /* noop */
-    };
-    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
-    /**
-     * @hidden
-     */
-    ToolBarSeparatorComponent.prototype.handleKey = function () {
-        return false;
-    };
-    ToolBarSeparatorComponent.prototype.ngAfterViewInit = function () {
-        if (!this.popupTemplate) {
-            this.popupTemplate = this.toolbarTemplate;
-        }
-    };
-    var ToolBarSeparatorComponent_1;
-    __decorate([
-        ViewChild('toolbarTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarSeparatorComponent.prototype, "toolbarTemplate", void 0);
-    __decorate([
-        ViewChild('popupTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ToolBarSeparatorComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('separator', { static: false }),
-        __metadata("design:type", ElementRef)
-    ], ToolBarSeparatorComponent.prototype, "separator", void 0);
-    ToolBarSeparatorComponent = ToolBarSeparatorComponent_1 = __decorate([
-        Component({
-            exportAs: 'kendoToolBarSeparator',
-            // tslint:disable-next-line:no-forward-ref
-            providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return ToolBarSeparatorComponent_1; }) }],
-            selector: 'kendo-toolbar-separator',
-            template: "\n        <ng-template #toolbarTemplate>\n            <div class=\"k-separator\"></div>\n        </ng-template>\n    "
-        }),
-        __metadata("design:paramtypes", [])
-    ], ToolBarSeparatorComponent);
-    return ToolBarSeparatorComponent;
-}(ToolBarToolComponent));
-
-/**
- * @hidden
- */
-var RendererService = /** @class */ (function () {
-    function RendererService() {
-    }
-    RendererService.prototype.getElement = function () {
-        return this.element.nativeElement;
-    };
-    RendererService.prototype.querySelector = function (selector) {
-        return this.element.nativeElement.querySelector(selector);
-    };
-    RendererService.prototype.querySelectorAll = function (selector) {
-        return this.element.nativeElement.querySelectorAll(selector);
-    };
-    RendererService.prototype.findFocusable = function () {
-        return findFocusable(this.element.nativeElement, false);
-    };
-    RendererService.prototype.findFocusableChild = function (element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableChild(element, false);
-    };
-    RendererService.prototype.findNextFocusableSibling = function (element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableSibling(element, false);
-    };
-    RendererService.prototype.findPrevFocusableSibling = function (element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableSibling(element, false, true);
-    };
-    RendererService.prototype.setAttribute = function (element, attr, value) {
-        this.renderer.setAttribute(element, attr, value);
-    };
-    RendererService = __decorate([
-        Injectable()
-    ], RendererService);
-    return RendererService;
-}());
-
-/**
- * @hidden
- */
-var ToolBarRendererComponent = /** @class */ (function () {
-    function ToolBarRendererComponent(element, renderer, rendererService, refreshService) {
-        var _this = this;
-        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(function (tool) {
-            if (_this.tool === tool) {
-                _this.refresh();
-            }
-        });
-    }
-    ToolBarRendererComponent.prototype.onClick = function (ev) {
-        this.rendererClick.emit({ context: this, event: ev });
-    };
-    ToolBarRendererComponent.prototype.ngOnInit = function () {
-        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');
-        }
-    };
-    ToolBarRendererComponent.prototype.ngOnDestroy = function () {
-        this.refreshSubscription.unsubscribe();
-    };
-    ToolBarRendererComponent.prototype.ngAfterViewInit = function () {
-        if (this.resizable) {
-            this.refresh();
-        }
-    };
-    Object.defineProperty(ToolBarRendererComponent.prototype, "width", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.tool.overflows ? 0 : outerWidth(this.element.nativeElement);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    ToolBarRendererComponent.prototype.isDisplayed = function () {
-        return this.element.nativeElement.style.display !== 'none';
-    };
-    /**
-     * @hidden
-     */
-    ToolBarRendererComponent.prototype.refresh = function () {
-        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
-     */
-    ToolBarRendererComponent.prototype.setAttribute = function (element, attr, value) {
-        this.renderer.setAttribute(element, attr, value);
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", ToolBarToolComponent)
-    ], ToolBarRendererComponent.prototype, "tool", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolBarRendererComponent.prototype, "location", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], ToolBarRendererComponent.prototype, "resizable", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ToolBarRendererComponent.prototype, "rendererClick", void 0);
-    __decorate([
-        HostListener('click', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], ToolBarRendererComponent.prototype, "onClick", null);
-    ToolBarRendererComponent = __decorate([
-        Component({
-            exportAs: 'kendoToolBarRenderer',
-            providers: [RendererService],
-            selector: 'kendo-toolbar-renderer',
-            template: "\n        <ng-container *ngIf=\"location === 'toolbar'\">\n            <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"location === 'overflow' && tool.responsive\">\n            <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n        </ng-container>\n    "
-        }),
-        __metadata("design:paramtypes", [ElementRef,
-            Renderer2,
-            RendererService,
-            RefreshService])
-    ], ToolBarRendererComponent);
-    return ToolBarRendererComponent;
-}());
-
-/**
- * @hidden
- */
-var ToolbarMessages = /** @class */ (function (_super) {
-    __extends(ToolbarMessages, _super);
-    function ToolbarMessages() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ToolbarMessages.prototype, "moreToolsTitle", void 0);
-    return ToolbarMessages;
-}(ComponentMessages));
-
-/**
- * @hidden
- */
-var LocalizedToolbarMessagesDirective = /** @class */ (function (_super) {
-    __extends(LocalizedToolbarMessagesDirective, _super);
-    function LocalizedToolbarMessagesDirective(service) {
-        var _this = _super.call(this) || this;
-        _this.service = service;
-        return _this;
-    }
-    LocalizedToolbarMessagesDirective_1 = LocalizedToolbarMessagesDirective;
-    var LocalizedToolbarMessagesDirective_1;
-    LocalizedToolbarMessagesDirective = LocalizedToolbarMessagesDirective_1 = __decorate([
-        Directive({
-            providers: [
-                {
-                    provide: ToolbarMessages,
-                    useExisting: forwardRef(function () { return LocalizedToolbarMessagesDirective_1; }) // tslint:disable-line:no-forward-ref
-                }
-            ],
-            selector: '[kendoToolbarLocalizedMessages]'
-        }),
-        __metadata("design:paramtypes", [LocalizationService])
-    ], LocalizedToolbarMessagesDirective);
-    return LocalizedToolbarMessagesDirective;
-}(ToolbarMessages));
-
-/**
- * Custom component messages override default component messages.
- */
-var ToolbarCustomMessagesComponent = /** @class */ (function (_super) {
-    __extends(ToolbarCustomMessagesComponent, _super);
-    function ToolbarCustomMessagesComponent(service) {
-        var _this = _super.call(this) || this;
-        _this.service = service;
-        return _this;
-    }
-    ToolbarCustomMessagesComponent_1 = ToolbarCustomMessagesComponent;
-    Object.defineProperty(ToolbarCustomMessagesComponent.prototype, "override", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    var ToolbarCustomMessagesComponent_1;
-    ToolbarCustomMessagesComponent = ToolbarCustomMessagesComponent_1 = __decorate([
-        Component({
-            providers: [
-                {
-                    provide: ToolbarMessages,
-                    useExisting: forwardRef(function () { return ToolbarCustomMessagesComponent_1; }) // tslint:disable-line:no-forward-ref
-                }
-            ],
-            selector: 'kendo-toolbar-messages',
-            template: ""
-        }),
-        __metadata("design:paramtypes", [LocalizationService])
-    ], ToolbarCustomMessagesComponent);
-    return ToolbarCustomMessagesComponent;
-}(ToolbarMessages));
-
-var TOOLBAR_TOOLS = [
-    ToolBarToolComponent,
-    ToolBarButtonComponent,
-    ToolBarButtonGroupComponent,
-    ToolBarDropDownButtonComponent,
-    ToolBarSplitButtonComponent,
-    ToolBarSeparatorComponent
-];
-var TOOLBAR_COMMON = [
-    ToolBarRendererComponent,
-    ToolBarButtonListComponent,
-    ToolbarCustomMessagesComponent,
-    LocalizedToolbarMessagesDirective
-];
-/**
- * Represents the [NgModule]({{ 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.
- */
-var ToolBarModule = /** @class */ (function () {
-    function ToolBarModule() {
-    }
-    ToolBarModule = __decorate([
-        NgModule({
-            declarations: [ToolBarComponent, TOOLBAR_TOOLS, TOOLBAR_COMMON],
-            exports: [ToolBarComponent, TOOLBAR_TOOLS, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective],
-            imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]
-        })
-    ], ToolBarModule);
-    return ToolBarModule;
-}());
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ToolbarMessages, NavigationService, RefreshService, ToolBarRendererComponent, RendererService, ToolBarButtonListComponent, ToolBarComponent, ToolBarToolComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSplitButtonComponent, ToolBarSeparatorComponent, ToolBarModule, LocalizedToolbarMessagesDirective, ToolbarCustomMessagesComponent };