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

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

@@ -1,3401 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, inject, ElementRef, Directive, Input, Output, forwardRef, ViewContainerRef, Component, ContentChildren, ViewChild, HostBinding, HostListener, isDevMode, ViewChildren, NgModule } from '@angular/core';
-import { Keys, guid, isDocumentAvailable, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
-import * as i1 from '@progress/kendo-angular-l10n';
-import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import { take, filter, takeUntil } from 'rxjs/operators';
-import { Subject, Subscription, merge, fromEvent } from 'rxjs';
-import { moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent } from '@progress/kendo-angular-buttons';
-import { NgTemplateOutlet, NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
-import * as i2 from '@progress/kendo-angular-popup';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
-
-/**
- * @hidden
- */
-const packageMetadata = {
-    name: '@progress/kendo-angular-toolbar',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729874097,
-    version: '17.0.0-develop.21',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
-};
-
-/**
- * @hidden
- */
-class RefreshService {
-    constructor() {
-        this.onRefresh = new EventEmitter();
-    }
-    refresh(tool) {
-        this.onRefresh.emit(tool);
-    }
-}
-RefreshService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-RefreshService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RefreshService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @hidden
- */
-const focusableRegex = /^(?:a|input|select|textarea|button|object)$/i;
-/**
- * @hidden
- */
-function outerWidth(element) {
-    let width = element.offsetWidth;
-    const style = getComputedStyle(element);
-    width += parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0;
-    return width;
-}
-/**
- * @hidden
- */
-function innerWidth(element) {
-    let width = element.offsetWidth;
-    const style = getComputedStyle(element);
-    width -= parseFloat(style.paddingLeft) || 0 + parseFloat(style.borderLeftWidth) || 0;
-    width -= parseFloat(style.paddingRight) || 0 + parseFloat(style.borderRightWidth) || 0;
-    return width;
-}
-/**
- * @hidden
- */
-function outerHeight(element) {
-    let width = element.offsetHeight;
-    const style = getComputedStyle(element);
-    width += parseFloat(style.marginTop) || 0 + parseFloat(style.marginBottom) || 0;
-    return width;
-}
-/**
- * @hidden
- */
-const closest = (node, predicate) => {
-    while (node && !predicate(node)) {
-        node = node.parentNode;
-    }
-    return node;
-};
-/**
- * @hidden
- */
-const isVisible = (element) => {
-    const rect = element.getBoundingClientRect();
-    const hasSize = rect.width > 0 && rect.height > 0;
-    const hasPosition = rect.x !== 0 && rect.y !== 0;
-    // Elements can have zero size due to styling, but they should still count as visible.
-    // For example, the selection checkbox has no size, but is made visible through styling.
-    return (hasSize || hasPosition) && window.getComputedStyle(element).visibility !== 'hidden';
-};
-/**
- * @hidden
- */
-const findElement = (node, predicate, matchSelf = true) => {
-    if (!node) {
-        return;
-    }
-    if (matchSelf && predicate(node)) {
-        return node;
-    }
-    node = node.firstChild;
-    while (node) {
-        if (node.nodeType === 1) {
-            const element = findElement(node, predicate);
-            if (element) {
-                return element;
-            }
-        }
-        node = node.nextSibling;
-    }
-};
-/**
- * @hidden
- */
-const isFocusable = (element, checkVisibility = true) => {
-    if (element.tagName) {
-        const tagName = element.tagName.toLowerCase();
-        const tabIndex = element.getAttribute('tabIndex');
-        let focusable = tabIndex !== null;
-        if (focusableRegex.test(tagName)) {
-            focusable = !element.disabled;
-        }
-        return focusable && (!checkVisibility || isVisible(element));
-    }
-    return false;
-};
-/**
- * @hidden
- */
-const findFocusable = (element, checkVisibility = true) => {
-    return findElement(element, node => isFocusable(node, checkVisibility));
-};
-/**
- * @hidden
- */
-const findFocusableChild = (element, checkVisibility = true) => {
-    return findElement(element, node => isFocusable(node, checkVisibility), false);
-};
-/**
- * @hidden
- */
-const findFocusableSibling = (element, checkVisibility = true, reverse) => {
-    let node = reverse ? element.prevSibling : element.nextSibling;
-    while (node) {
-        if (node.nodeType === 1) {
-            const result = findElement(node, el => isFocusable(el, checkVisibility));
-            if (result) {
-                return result;
-            }
-        }
-        node = reverse ? node.prevSibling : node.nextSibling;
-    }
-};
-/**
- * @hidden
- */
-const isPresent = (value) => value !== null && value !== undefined;
-/**
- * @hidden
- */
-const makePeeker = (collection) => (index) => isPresent(collection[index]);
-/**
- * @hidden
- */
-const getIndexOfFocused = (prevKeyCode, nextKeyCode, collection) => (ev) => {
-    switch (ev.type) {
-        case 'keydown':
-            if (ev.keyCode === prevKeyCode) {
-                return collection.length - 1;
-            }
-            if (ev.keyCode === nextKeyCode) {
-                return 0;
-            }
-            break;
-        case 'click':
-            return collection.findIndex(be => be === ev.target || be.contains(ev.target));
-        case 'focus':
-            return 0;
-        default:
-            return 0;
-    }
-};
-/**
- * @hidden
- */
-const seekFocusedIndex = (prevKeyCode, nextKeyCode, seeker) => (startIndex, ev) => {
-    switch (ev.keyCode) {
-        case prevKeyCode:
-            return seeker(startIndex - 1) ? startIndex - 1 : startIndex;
-        case nextKeyCode:
-            return seeker(startIndex + 1) ? startIndex + 1 : startIndex;
-        default:
-            return startIndex;
-    }
-};
-/**
- * @hidden
- */
-const areEqual = (first) => (second) => first === second;
-/**
- * @hidden
- */
-const getNextKey = (rtl = false) => (overflows = true) => overflows ? Keys.ArrowDown : rtl ? Keys.ArrowLeft : Keys.ArrowRight;
-/**
- * @hidden
- */
-const getPrevKey = (rtl = false) => (overflows = true) => overflows ? Keys.ArrowUp : rtl ? Keys.ArrowRight : Keys.ArrowLeft;
-/**
- * @hidden
- */
-const getValueForLocation = (property, displayMode, overflows) => {
-    switch (displayMode) {
-        case 'toolbar':
-            return overflows ? undefined : property;
-        case 'overflow':
-            return overflows ? property : undefined;
-        default:
-            return property;
-    }
-};
-/**
- * @hidden
- */
-const SIZES = {
-    small: 'sm',
-    medium: 'md',
-    large: 'lg'
-};
-/**
- * @hidden
- *
- * Returns the styling classes to be added and removed
- */
-const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
-    switch (stylingOption) {
-        case 'size':
-            return {
-                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
-            };
-        case 'fillMode':
-            return {
-                toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
-            };
-        default:
-            break;
-    }
-};
-/**
- * @hidden
- *
- * Checks whether a Node is Text or Element node.
- * nodeType 1 is Element, nodeType 3 is Text
- */
-const isElementOrTextNode = n => n.nodeType === 1 || n.nodeType === 3;
-
-/**
- * @hidden
- */
-class NavigationService {
-    constructor(zone) {
-        this.zone = zone;
-        this.focused = { renderedTool: null, index: -1 };
-        this.renderedTools = [];
-        this.isPopupFocused = false;
-        this.isOverflowButtonFocused = false;
-    }
-    setRenderedTools(rts) {
-        this.renderedTools = rts;
-    }
-    click({ context, event: ev }) {
-        if (this.focused.renderedTool !== context && ev) {
-            this.focus(context, ev);
-        }
-    }
-    moveFocusToToolBar() {
-        this.isPopupFocused = false;
-        this.focusOverflowButton();
-    }
-    moveFocusToPopup() {
-        this.isPopupFocused = true;
-        this.resetNavigation();
-        this.focus();
-    }
-    focusNext(ev) {
-        if (this.isOverflowButtonFocused) {
-            const firstFocusableRT = this.getFocusableTools()[0];
-            this.focus(firstFocusableRT, ev);
-        }
-        else if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
-            const nextRT = this.getFocusableTools().slice(this.focused.index + 1)[0];
-            if (nextRT) {
-                this.focus(nextRT, ev);
-            }
-            else {
-                if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
-                    this.focusOverflowButton();
-                }
-                else {
-                    const firstRT = this.getFocusableTools()[0];
-                    this.focus(firstRT, ev);
-                }
-            }
-        }
-    }
-    focusPrev(ev) {
-        if (this.isOverflowButtonFocused) {
-            const lastFocusableRT = this.getFocusableTools().reverse()[0];
-            this.focus(lastFocusableRT, ev);
-        }
-        else if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
-            const prevRT = this.getFocusableTools()
-                .slice(0, this.focused.index)
-                .reverse()[0];
-            if (prevRT) {
-                this.focus(prevRT, ev);
-            }
-            else {
-                if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
-                    this.focusOverflowButton();
-                }
-                else {
-                    const lastRT = this.getFocusableTools().reverse()[0];
-                    this.focus(lastRT, ev);
-                }
-            }
-        }
-    }
-    resetNavigation() {
-        this.blurOverflowButton();
-        this.focused.renderedTool = null;
-        this.focused.index = -1;
-    }
-    focusFirst(ev) {
-        const firstTool = this.getFocusableTools()[0];
-        const overFlowButton = this.overflowButton;
-        if (firstTool) {
-            this.focused.renderedTool = firstTool;
-            this.focused.index = this.getFocusableTools().findIndex(rt => rt === firstTool);
-            this.focus(firstTool, ev);
-        }
-        else if (overFlowButton) {
-            overFlowButton.nativeElement.focus();
-        }
-    }
-    focusLast(ev) {
-        const lastTool = this.getFocusableTools().reverse()[0];
-        const overFlowButton = this.overflowButton;
-        if (lastTool) {
-            this.focused.renderedTool = lastTool;
-            this.focused.index = this.getFocusableTools().findIndex(rt => rt === lastTool);
-            this.focus(lastTool, ev);
-        }
-        else if (overFlowButton) {
-            overFlowButton.nativeElement.focus();
-        }
-    }
-    getFocusableTools() {
-        return this.renderedTools.filter(rt => (rt.tool.overflows === this.isPopupFocused) && rt.tool.canFocus());
-    }
-    focus(renderedTool, ev) {
-        // running the code below in onStable fixes issue #2939
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            if (!renderedTool) {
-                const focusableRTs = this.getFocusableTools();
-                const lastFocusedRT = focusableRTs.find(rt => rt === this.focused.renderedTool) || focusableRTs[0];
-                // guard against only disabled tools
-                if (lastFocusedRT) {
-                    this.focused.renderedTool = lastFocusedRT;
-                    this.focused.index = this.getFocusableTools().findIndex(rt => rt === lastFocusedRT);
-                    // if event is undefined, then this means that the tool is the first one in the overflow popup
-                    lastFocusedRT.tool.focus(ev);
-                }
-            }
-            else if (renderedTool.tool.canFocus && renderedTool.tool.canFocus()) {
-                this.focused.renderedTool = renderedTool;
-                this.focused.index = this.getFocusableTools().findIndex(rt => rt === renderedTool);
-                renderedTool.tool.focus(ev);
-                this.blurOverflowButton();
-            }
-        });
-    }
-    blurOverflowButton() {
-        if (this.overflowButton) {
-            this.isOverflowButtonFocused = false;
-            this.overflowButton.nativeElement.tabIndex = -1;
-        }
-    }
-    focusOverflowButton() {
-        this.isOverflowButtonFocused = true;
-        this.overflowButton.nativeElement.tabIndex = 0;
-        this.overflowButton.nativeElement.focus();
-    }
-    isOverflowButtonVisible() {
-        return (isPresent(this.overflowButton) &&
-            window.getComputedStyle(this.overflowButton.nativeElement).getPropertyValue('visibility') === 'visible');
-    }
-}
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
-
-/**
- * Represents the Base ToolBar Tool component for Angular.
- * Extend this class to create custom tools.
- */
-class ToolBarToolComponent {
-    constructor() {
-        this.tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
-        this.overflows = true;
-        this.isBuiltInTool = false;
-        // this should be replaced with showTool: DisplayMode = 'both';
-        /**
-         * @hidden
-         */
-        this.responsive = true;
-        this.element = inject(ElementRef);
-    }
-    get toolbarDisplay() {
-        return this.overflows ? 'none' : 'inline-flex';
-    }
-    get overflowDisplay() {
-        return this.overflows ? 'block' : 'none';
-    }
-    /**
-     * Determines if the tool can be focused.
-     * If the returned value is `false`, the tool will not be part of the keyboard navigation.
-     * @returns `true` if the tool should take part in keyboard navigation.
-     */
-    canFocus() {
-        return false;
-    }
-    /**
-     * Called when the tool is focused.
-     * The method accepts as argument the original browser event, which can be a `KeyboardEvent`, `MouseEvent` or `FocusEvent`.
-     * @param {Event} ev - This is the event that caused the tool to be focused.
-     */
-    focus(ev) {
-        /* noop */
-    }
-    /**
-     * Called when the tool is focused and one of the arrow keys is pressed.
-     * The returned boolean value determines whether the `ToolBarComponent` will move the focus to the next/previous `ToolBarToolComponent`
-     * ([see example]({% slug customcontroltypes_toolbar %}#toc-adding-keyboard-navigation)).
-     * @param {KeyboardEvent} ev - The last pressed arrow key
-     * @returns a boolean value determines whether the focus will move to the next/previous component.
-     */
-    handleKey(ev) {
-        return false;
-    }
-}
-ToolBarToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ToolBarToolComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { responsive: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses the built-in behavior that follows the event.
-     */
-    preventDefault() {
-        this.prevented = true;
-    }
-    /**
-     * If the event is prevented by any of its subscribers, returns `true`.
-     *
-     * @returns `true` if the default action was prevented. Otherwise, returns `false`.
-     */
-    isDefaultPrevented() {
-        return this.prevented;
-    }
-}
-
-/**
- * @hidden
- */
-class RendererService {
-    getElement() {
-        return this.element.nativeElement;
-    }
-    querySelector(selector) {
-        return this.element.nativeElement.querySelector(selector);
-    }
-    querySelectorAll(selector) {
-        return this.element.nativeElement.querySelectorAll(selector);
-    }
-    findFocusable() {
-        return findFocusable(this.element.nativeElement, false);
-    }
-    findFocusableChild(element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableChild(element, false);
-    }
-    findNextFocusableSibling(element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableSibling(element, false);
-    }
-    findPrevFocusableSibling(element) {
-        if (!element) {
-            element = this.findFocusable();
-        }
-        return findFocusableSibling(element, false, true);
-    }
-    setAttribute(element, attr, value) {
-        this.renderer.setAttribute(element, attr, value);
-    }
-}
-RendererService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-RendererService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RendererService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @hidden
- */
-class ToolbarToolsService {
-    constructor() {
-        this.renderedToolsChange = new Subject();
-        this.overflowToolsChange = new Subject();
-        this.renderedTools = [];
-        this.overflowTools = [];
-        this.allTools = [];
-    }
-}
-ToolbarToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ToolbarToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService, decorators: [{
-            type: Injectable
-        }] });
-
-const MIN_SPACER_WIDTH = 18;
-/**
- * @hidden
- */
-class ToolBarRendererComponent {
-    constructor(renderer, rendererService, refreshService, toolsService, viewContainer) {
-        this.renderer = renderer;
-        this.rendererService = rendererService;
-        this.refreshService = refreshService;
-        this.toolsService = toolsService;
-        this.viewContainer = viewContainer;
-        this.rendererClick = new EventEmitter();
-        this.onClick = (ev) => {
-            this.rendererClick.emit({ context: this, event: ev });
-        };
-    }
-    get isSpacer() {
-        return this.tool && this.tool.__isSpacer;
-    }
-    ngOnInit() {
-        var _a, _b;
-        const viewContainerRootNodes = (_b = (_a = this.viewContainer.get(0)) === null || _a === void 0 ? void 0 : _a.rootNodes) === null || _b === void 0 ? void 0 : _b.filter(isElementOrTextNode);
-        if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
-            return;
-        }
-        this.internalComponentRef = viewContainerRootNodes[0];
-        this.element = this.tool.element;
-        this.internalComponentRef.addEventListener('click', this.onClick);
-        this.rendererService.element = this.element;
-        this.rendererService.renderer = this;
-        this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
-            if (this.tool === tool) {
-                this.refresh();
-            }
-        });
-        if (this.resizable) {
-            if (this.location === 'toolbar') {
-                this.template = this.tool.toolbarTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
-            }
-            else {
-                this.template = this.tool.popupTemplate;
-                this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
-            }
-        }
-        else {
-            this.tool.overflows = false;
-            this.template = this.tool.toolbarTemplate;
-            this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
-            this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
-        }
-    }
-    ngOnDestroy() {
-        this.refreshSubscription && this.refreshSubscription.unsubscribe();
-        this.internalComponentRef && this.internalComponentRef.removeEventListener('click', this.onClick);
-    }
-    ngAfterViewInit() {
-        if (this.resizable) {
-            this.refresh();
-        }
-        this.updateTools();
-    }
-    /**
-     * @hidden
-     */
-    get width() {
-        if (this.isSpacer) {
-            return MIN_SPACER_WIDTH;
-        }
-        return this.tool.overflows ? 0 : outerWidth(this.internalComponentRef);
-    }
-    isDisplayed() {
-        var _a, _b;
-        return ((_b = (_a = this.internalComponentRef) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) !== 'none';
-    }
-    refresh() {
-        if (this.resizable && this.internalComponentRef) {
-            if (this.location === 'toolbar') {
-                this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
-                this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.toolbarDisplay);
-            }
-            else {
-                this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.overflowDisplay);
-            }
-            this.updateTools();
-        }
-    }
-    setAttribute(element, attr, value) {
-        this.renderer.setAttribute(element, attr, value);
-    }
-    updateTools() {
-        const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
-        const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
-        if (this.location === 'toolbar') {
-            isInPopup && (this.toolsService.overflowTools = this.toolsService.overflowTools.filter(t => t.tool !== this.tool));
-            !isInToolbar && this.toolsService.renderedTools.push(this);
-        }
-        else {
-            if (!isInPopup) {
-                this.toolsService.overflowTools.push(this);
-                this.toolsService.overflowTools.sort((t1, t2) => {
-                    // ensures correct navigation order in Popup
-                    return this.toolsService.allTools.indexOf(t1.tool) - this.toolsService.allTools.indexOf(t2.tool);
-                });
-            }
-        }
-    }
-}
-ToolBarRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: RendererService }, { token: RefreshService }, { token: ToolbarToolsService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-ToolBarRendererComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [RendererService],
-                    standalone: true,
-                    selector: '[kendoToolbarRenderer]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: RendererService }, { type: RefreshService }, { type: ToolbarToolsService }, { type: i0.ViewContainerRef }]; }, propDecorators: { tool: [{
-                type: Input
-            }], location: [{
-                type: Input
-            }], resizable: [{
-                type: Input
-            }], rendererClick: [{
-                type: Output
-            }] } });
-
-/**
- * @hidden
- */
-class ToolbarMessages extends ComponentMessages {
-}
-ToolbarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ToolbarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarMessages, selector: "kendo-toolbar-messages-base", inputs: { moreToolsTitle: "moreToolsTitle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarMessages, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kendo-toolbar-messages-base'
-                }]
-        }], propDecorators: { moreToolsTitle: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class LocalizedToolbarMessagesDirective extends ToolbarMessages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-}
-LocalizedToolbarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedToolbarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedToolbarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedToolbarMessagesDirective, isStandalone: true, selector: "[kendoToolbarLocalizedMessages]", providers: [
-        {
-            provide: ToolbarMessages,
-            useExisting: forwardRef(() => LocalizedToolbarMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedToolbarMessagesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [
-                        {
-                            provide: ToolbarMessages,
-                            useExisting: forwardRef(() => LocalizedToolbarMessagesDirective)
-                        }
-                    ],
-                    selector: '[kendoToolbarLocalizedMessages]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-
-/* eslint-disable no-case-declarations */
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
-const immediateResizeThreshold = 300;
-const getInitialPopupSettings = (isRtl) => ({
-    animate: true,
-    anchorAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'bottom' },
-    popupAlign: { horizontal: isRtl ? 'left' : 'right', vertical: 'top' }
-});
-/**
- * Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
- */
-class ToolBarComponent {
-    constructor(localization, popupService, refreshService, navigationService, 
-    // Needs to be public as it is being accessed in the Editor component
-    element, zone, renderer, _cdr, toolsService) {
-        this.localization = localization;
-        this.popupService = popupService;
-        this.refreshService = refreshService;
-        this.navigationService = navigationService;
-        this.element = element;
-        this.zone = zone;
-        this.renderer = renderer;
-        this._cdr = _cdr;
-        this.toolsService = toolsService;
-        /**
-         * Hides the overflowing tools in a popup.
-         */
-        this.overflow = false;
-        /**
-         * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
-         */
-        this.tabindex = 0;
-        /**
-         * Fires when the overflow popup of the ToolBar is opened.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires when the overflow popup of the ToolBar is closed.
-         */
-        this.close = new EventEmitter();
-        this.hostClass = true;
-        this.cancelRenderedToolsSubscription$ = new Subject();
-        this._size = DEFAULT_SIZE;
-        this._fillMode = DEFAULT_FILL_MODE;
-        this.overflowButtonClickedTime = null;
-        this.subscriptions = new Subscription();
-        this.popupSubs = new Subscription();
-        this.role = 'toolbar';
-        this.moreVerticalIcon = moreVerticalIcon;
-        /**
-         * @hidden
-         */
-        this.overflowBtnId = guid();
-        /**
-         * @hidden
-         */
-        this.popupId = guid();
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-    }
-    get overflowClass() {
-        return `k-button-${SIZES[this.size]}`;
-    }
-    /**
-     * @hidden
-     */
-    set resizable(value) {
-        this.overflow = value;
-    }
-    get resizable() {
-        return this.overflow;
-    }
-    /**
-     * Configures the popup of the ToolBar overflow button ([see example]({% slug responsive_toolbar %}#toc-popup-customization)).
-     *
-     * 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 popupSettings(settings) {
-        this._popupSettings = Object.assign({}, getInitialPopupSettings(this.localization.rtl), settings);
-    }
-    get popupSettings() {
-        return this._popupSettings || getInitialPopupSettings(this.localization.rtl);
-    }
-    /**
-     * The fillMode property specifies the background and border styles of the Toolbar
-     * ([see example](slug:appearance_toolbar#toc-fill-mode)).
-     *
-     * @default 'solid'
-     */
-    set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
-    }
-    get fillMode() {
-        return this._fillMode;
-    }
-    /**
-     * Specifies the padding of all Toolbar elements.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
-     */
-    set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
-    /**
-     * @hidden
-     */
-    set tabIndex(tabIndex) {
-        this.tabindex = tabIndex;
-    }
-    get tabIndex() {
-        return this.tabindex;
-    }
-    get appendTo() {
-        const { appendTo } = this.popupSettings;
-        if (!appendTo || appendTo === 'root') {
-            return undefined;
-        }
-        return appendTo === 'component' ? this.container : appendTo;
-    }
-    set popupOpen(open) {
-        if (this.popupOpen === open) {
-            return;
-        }
-        const eventArgs = new PreventableEvent();
-        if (open) {
-            this.open.emit(eventArgs);
-        }
-        else {
-            this.close.emit(eventArgs);
-        }
-        if (eventArgs.isDefaultPrevented()) {
-            return;
-        }
-        this.toggle(open);
-    }
-    get popupOpen() {
-        return this._open;
-    }
-    /**
-     * @hidden
-     */
-    onFocus(ev) {
-        this.navigationService.resetNavigation();
-        this.navigationService.focusFirst(ev);
-        // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-        this.element.nativeElement.setAttribute('tabindex', '-1');
-    }
-    /**
-     * @hidden
-     */
-    onFocusOut(event) {
-        // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-        if (closest(event.relatedTarget, (el) => el === this.element.nativeElement)) {
-            this.element.nativeElement.setAttribute('tabindex', '-1');
-            return;
-        }
-        this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
-    }
-    get getDir() {
-        return this.direction;
-    }
-    get resizableClass() {
-        return this.overflow;
-    }
-    ngAfterContentInit() {
-        this.toolsService.allTools = this.allTools.toArray();
-        this.subscriptions.add(this.allTools.changes.subscribe(changes => {
-            this.toolsService.allTools = this.allTools.toArray();
-            this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
-        }));
-    }
-    ngAfterViewInit() {
-        this.toolsService.renderedToolsChange.next(this.toolsService.renderedTools);
-        this.toolsService.overflowToolsChange.next(this.toolsService.overflowTools);
-        const element = this.element.nativeElement;
-        if (!element.getAttribute('tabindex')) {
-            this.element.nativeElement.setAttribute('tabindex', '0');
-        }
-        this.zone.runOutsideAngular(() => {
-            this.toolbarKeydownListener = this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => {
-                switch (ev.keyCode) {
-                    case Keys.ArrowLeft:
-                        this.zone.run(() => {
-                            ev.preventDefault();
-                            if (this.direction === 'ltr') {
-                                this.navigationService.focusPrev(ev);
-                            }
-                            else {
-                                this.navigationService.focusNext(ev);
-                            }
-                            // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-                            this.element.nativeElement.setAttribute('tabindex', '-1');
-                        });
-                        break;
-                    case Keys.ArrowRight:
-                        this.zone.run(() => {
-                            ev.preventDefault();
-                            if (this.direction === 'ltr') {
-                                this.navigationService.focusNext(ev);
-                            }
-                            else {
-                                this.navigationService.focusPrev(ev);
-                            }
-                            // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-                            this.element.nativeElement.setAttribute('tabindex', '-1');
-                        });
-                        break;
-                    case Keys.Tab:
-                        this.zone.run(() => this.navigationService.resetNavigation());
-                        break;
-                    case Keys.Escape:
-                        this.zone.run(() => this.toggle(false));
-                        break;
-                    case Keys.Home:
-                        this.zone.run(() => this.navigationService.focusFirst(ev));
-                        break;
-                    case Keys.End:
-                        this.zone.run(() => this.navigationService.focusLast(ev));
-                        break;
-                    default:
-                        break;
-                }
-            });
-        });
-        if (this.overflow) {
-            this.subscriptions.add(merge(this.resizeSensor.resize, this.toolsService.renderedToolsChange).subscribe(() => this.onResize()));
-            this.navigationService.overflowButton = this.overflowButton;
-            // because of https://github.com/telerik/kendo-angular-buttons/pull/276
-            // button icons are not rendered until onResize() is called
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    this.zone.run(() => {
-                        this.onResize();
-                    });
-                });
-            });
-        }
-        this.navigationService.setRenderedTools(this.toolsService.renderedTools);
-        const stylingOptions = ['size', 'fillMode'];
-        stylingOptions.forEach(option => {
-            this.handleClasses(this[option], option);
-        });
-    }
-    ngOnInit() {
-        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
-        this.zone.onStable.pipe(take(1)).subscribe(() => this.onResize());
-        if (isDocumentAvailable()) {
-            this.zone.runOutsideAngular(() => this.subscriptions.add(fromEvent(document, 'click')
-                .pipe(filter(() => !!this.popupRef), filter((ev) => !this.popupRef.popup.instance.container.nativeElement.contains(ev.target)), filter((ev) => !this.overflowButton.nativeElement.contains(ev.target)))
-                .subscribe(() => {
-                this.zone.run(() => {
-                    this.popupOpen = false;
-                });
-            })));
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes['tabindex']) {
-            // prevents ExpressionChangedAfterItHasBeenCheckedError when tools with popup are opened/closed asynchronously
-            this.element.nativeElement.setAttribute('tabindex', changes['tabindex'].currentValue.toString());
-        }
-    }
-    ngOnDestroy() {
-        this.destroyPopup();
-        if (this.toolbarKeydownListener) {
-            this.toolbarKeydownListener();
-        }
-        this.cancelRenderedToolsSubscription$.next();
-        this.subscriptions.unsubscribe();
-    }
-    /**
-     * @hidden
-     */
-    get moreToolsTitle() {
-        return this.localization.get('moreToolsTitle');
-    }
-    /**
-     * @hidden
-     */
-    get cdr() {
-        return this._cdr;
-    }
-    /**
-     * @hidden
-     */
-    onRendererClick(data) {
-        this.navigationService.click(data);
-        this.element.nativeElement.setAttribute('tabindex', '-1');
-    }
-    /**
-     * @hidden
-     */
-    showPopup() {
-        this.popupOpen = !this.popupOpen;
-        this.navigationService.click({ context: undefined, event: undefined });
-        this.overflowButtonClickedTime = Date.now();
-    }
-    /**
-     * Toggles the visibility of the overflow popup.
-     */
-    toggle(popupOpen) {
-        this._open = popupOpen !== undefined ? popupOpen : !this.popupOpen;
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-        if (this.popupOpen) {
-            this.popupRef = this.popupService.open({
-                anchor: this.overflowButton,
-                anchorAlign: this.popupSettings.anchorAlign,
-                popupAlign: this.popupSettings.popupAlign,
-                content: this.popupTemplate,
-                appendTo: this.appendTo,
-                animate: this.popupSettings.animate,
-                popupClass: this.normalizePopupClasses(this.popupSettings.popupClass),
-                positionMode: 'absolute'
-            });
-            this.setPopupContentDimensions();
-            this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.onPopupOpen.bind(this)));
-            this.popupSubs.add(this.popupRef.popupClose.subscribe(this.onPopupClose.bind(this)));
-        }
-    }
-    /**
-     * @hidden
-     */
-    onResize() {
-        var _a;
-        if (isDocumentAvailable()) {
-            const containerWidth = innerWidth(this.element.nativeElement) - this.overflowAnchorWidth;
-            this.shrink(containerWidth, this.childrenWidth);
-            this.stretch(containerWidth, this.childrenWidth);
-            this.displayAnchor();
-            (_a = this.resizeSensor) === null || _a === void 0 ? void 0 : _a.acceptSize();
-            const isImmediateResize = (Date.now() - this.overflowButtonClickedTime) < immediateResizeThreshold;
-            if (this.popupOpen && !isImmediateResize) {
-                this.toggle();
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    onPopupOpen() {
-        this.zone.runOutsideAngular(() => {
-            this.overflowKeydownListener = this.renderer.listen(this.popupRef.popupElement, 'keydown', (ev) => {
-                switch (ev.keyCode) {
-                    case Keys.ArrowUp:
-                        this.zone.run(() => {
-                            ev.preventDefault();
-                            this.navigationService.focusPrev(ev);
-                        });
-                        break;
-                    case Keys.ArrowDown:
-                        this.zone.run(() => {
-                            ev.preventDefault();
-                            this.navigationService.focusNext(ev);
-                        });
-                        break;
-                    case Keys.Escape:
-                        this.zone.run(() => this.toggle(false));
-                        const eventArgs = new PreventableEvent();
-                        this.close.emit(eventArgs);
-                        break;
-                    case Keys.Tab:
-                        this.zone.run(() => {
-                            this.toggle(false);
-                            this.navigationService.resetNavigation();
-                        });
-                        break;
-                    case Keys.Enter:
-                    case Keys.Space:
-                        this.zone.run(() => {
-                            if (ev.target.closest('.k-menu-item')) {
-                                ev.preventDefault();
-                                ev.target.click();
-                                ev.target.focus();
-                            }
-                        });
-                        break;
-                    default:
-                        break;
-                }
-            });
-        });
-        this.cancelRenderedToolsSubscription$.next();
-        this.navigationService.setRenderedTools(this.toolsService.overflowTools);
-        this.navigationService.moveFocusToPopup();
-        this.toolsService.overflowToolsChange
-            .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
-            .subscribe((rts) => this.navigationService.setRenderedTools(rts));
-        this.renderer.setAttribute(this.overflowButton.nativeElement, 'aria-controls', this.popupId);
-    }
-    /**
-     * @hidden
-     */
-    onPopupClose() {
-        this.cancelRenderedToolsSubscription$.next();
-        this.navigationService.setRenderedTools(this.toolsService.renderedTools);
-        this.toolsService.renderedToolsChange
-            .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
-            .subscribe((rts) => this.navigationService.setRenderedTools(rts));
-        this.navigationService.moveFocusToToolBar();
-        if (this.overflowKeydownListener) {
-            this.overflowKeydownListener();
-        }
-        this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
-    }
-    displayAnchor() {
-        const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
-        this.overflowButton && this.renderer.setStyle(this.overflowButton.nativeElement, 'visibility', visibility);
-    }
-    get popupWidth() {
-        if (!this.popupSettings || !this.popupSettings.width) {
-            return 'auto';
-        }
-        return isNaN(this.popupSettings.width) ? this.popupSettings.width : `${this.popupSettings.width}px`;
-    }
-    get popupHeight() {
-        if (!this.popupSettings || !this.popupSettings.height) {
-            return;
-        }
-        return isNaN(this.popupSettings.height) ? this.popupSettings.height : `${this.popupSettings.height}px`;
-    }
-    get overflowAnchorWidth() {
-        if (!this.overflow) {
-            return 0;
-        }
-        if (!this.cachedOverflowAnchorWidth) {
-            this.cachedOverflowAnchorWidth = this.overflowButton.nativeElement.offsetWidth;
-        }
-        return this.cachedOverflowAnchorWidth;
-    }
-    get gap() {
-        if (isPresent(this.cachedGap)) {
-            return this.cachedGap;
-        }
-        const computedGap = getComputedStyle(this.element.nativeElement).gap;
-        this.cachedGap = isPresent(computedGap) ? parseInt(computedGap, 10) : 0;
-        return this.cachedGap;
-    }
-    get childrenWidth() {
-        const width = this.toolsService.renderedTools.reduce((totalWidth, tool) => tool.width + totalWidth + (tool.isDisplayed() ? this.gap : 0), 0);
-        return Math.ceil(width);
-    }
-    get visibleTools() {
-        return this.allTools.filter((tool) => {
-            return tool.overflows === false;
-        });
-    }
-    get overflowTools() {
-        return this.allTools.filter((tool) => {
-            return tool.overflows === true;
-        });
-    }
-    shrink(containerWidth, childrenWidth) {
-        let width;
-        if (containerWidth < childrenWidth) {
-            for (let i = this.visibleTools.length - 1; i >= 0; i--) {
-                if (containerWidth > childrenWidth) {
-                    break;
-                }
-                else {
-                    width = this.hideLastVisibleTool();
-                    childrenWidth -= width;
-                }
-            }
-        }
-    }
-    stretch(containerWidth, childrenWidth) {
-        let width;
-        if (containerWidth > childrenWidth) {
-            for (let i = this.overflowTools.length - 1; i >= 0; i--) {
-                width = this.showFirstHiddenTool(containerWidth, childrenWidth);
-                if (width) {
-                    childrenWidth += width + this.gap;
-                }
-                else {
-                    break;
-                }
-            }
-        }
-    }
-    hideLastVisibleTool() {
-        const tool = this.visibleTools[this.visibleTools.length - 1];
-        if (!tool) {
-            return null;
-        }
-        const renderedElement = this.toolsService.renderedTools.find((r) => {
-            return r.tool === tool;
-        });
-        const width = renderedElement.width;
-        tool.overflows = this.overflow;
-        this.refreshService.refresh(tool);
-        return width;
-    }
-    showFirstHiddenTool(containerWidth, childrenWidth) {
-        const tool = this.overflowTools[0];
-        if (!tool) {
-            return null;
-        }
-        const renderedElement = this.toolsService.renderedTools.find((r) => r.tool === tool);
-        tool.overflows = false;
-        tool.visibility = 'hidden';
-        this.refreshService.refresh(tool);
-        if (containerWidth > childrenWidth + renderedElement.width) {
-            tool.visibility = 'visible';
-        }
-        else {
-            tool.overflows = true;
-        }
-        this.refreshService.refresh(tool);
-        return renderedElement.width; // returns 0 if `overflows` is true
-    }
-    setPopupContentDimensions() {
-        const popupContentContainer = this.popupRef.popup.instance.contentContainer.nativeElement;
-        popupContentContainer.style.width = this.popupWidth;
-        popupContentContainer.style.height = this.popupHeight;
-        popupContentContainer.style.overflow = 'auto';
-    }
-    destroyPopup() {
-        if (this.popupRef) {
-            this.popupSubs.unsubscribe();
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-    }
-    handleClasses(value, input) {
-        const elem = this.element.nativeElement;
-        const classes = getStylingClasses('toolbar', input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
-        }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
-        }
-    }
-    normalizePopupClasses(classList) {
-        let classes = ['k-menu-popup', 'k-toolbar-popup'];
-        if (!classList) {
-            return classes;
-        }
-        if (typeof classList === 'string') {
-            classes.push(...classList.split(' '));
-        }
-        else if (Array.isArray(classList)) {
-            classes = [...classes, ...classList];
-        }
-        else {
-            for (const cl in classList) {
-                classes.push(classList[cl]);
-            }
-        }
-        return classes;
-    }
-}
-ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ToolbarToolsService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarComponent, isStandalone: true, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", fillMode: "fillMode", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
-        RefreshService,
-        NavigationService,
-        LocalizationService,
-        ToolbarToolsService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.toolbar'
-        }
-    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container kendoToolbarLocalizedMessages
-        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
-        moreToolsTitle="More tools"
-        >
-        </ng-container>
-        <ng-container *ngFor="let tool of allTools; let index = index"
-            kendoToolbarRenderer
-            [tool]="tool"
-            location="toolbar"
-            [resizable]="overflow"
-            (rendererClick)="onRendererClick($event)"
-            [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-            <ng-template #wrapper>
-                <div class="k-toolbar-item">
-                    <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                </div>
-            </ng-template>
-        </ng-container>
-        <button
-            kendoButton
-            fillMode="flat"
-            #overflowButton
-            type="button"
-            icon="more-vertical"
-            [svgIcon]="moreVerticalIcon"
-            tabindex="-1"
-            [title]="moreToolsTitle"
-            [attr.aria-label]="moreToolsTitle"
-            [attr.aria-expanded]="popupOpen"
-            [id]="overflowBtnId"
-            aria-haspopup="menu"
-            *ngIf="overflow"
-            [style.visibility]="'hidden'"
-            [style.position]="'relative'"
-            [style.margin-inline-start]="'auto'"
-            class="k-toolbar-overflow-button"
-            [ngClass]="overflowClass"
-            (click)="showPopup()"
-        >
-        </button>
-        <ng-template #popupTemplate>
-            <div
-                class="k-menu-group k-menu-group-md"
-                role="menu"
-                [id]="popupId"
-                [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of overflowTools; let index = index">
-                    <ng-template 
-                        *ngIf="tool.popupTemplate"
-                        kendoToolbarRenderer
-                        [tool]="tool"
-                        location="overflow"
-                        [resizable]="overflow"
-                        (rendererClick)="onRendererClick($event)"
-                        [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
-                    <ng-template #popupWrapper>
-                        <div role="menuitem" tabindex="-1" class="k-item k-menu-item">
-                            <ng-container [ngTemplateOutlet]="tool.popupTemplate"></ng-container>
-                        </div>
-                    </ng-template>
-                </ng-container>
-            </div>
-        </ng-template>
-        <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoToolBar',
-                    providers: [
-                        RefreshService,
-                        NavigationService,
-                        LocalizationService,
-                        ToolbarToolsService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.toolbar'
-                        }
-                    ],
-                    selector: 'kendo-toolbar',
-                    template: `
-        <ng-container kendoToolbarLocalizedMessages
-        i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
-        moreToolsTitle="More tools"
-        >
-        </ng-container>
-        <ng-container *ngFor="let tool of allTools; let index = index"
-            kendoToolbarRenderer
-            [tool]="tool"
-            location="toolbar"
-            [resizable]="overflow"
-            (rendererClick)="onRendererClick($event)"
-            [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-            <ng-template #wrapper>
-                <div class="k-toolbar-item">
-                    <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                </div>
-            </ng-template>
-        </ng-container>
-        <button
-            kendoButton
-            fillMode="flat"
-            #overflowButton
-            type="button"
-            icon="more-vertical"
-            [svgIcon]="moreVerticalIcon"
-            tabindex="-1"
-            [title]="moreToolsTitle"
-            [attr.aria-label]="moreToolsTitle"
-            [attr.aria-expanded]="popupOpen"
-            [id]="overflowBtnId"
-            aria-haspopup="menu"
-            *ngIf="overflow"
-            [style.visibility]="'hidden'"
-            [style.position]="'relative'"
-            [style.margin-inline-start]="'auto'"
-            class="k-toolbar-overflow-button"
-            [ngClass]="overflowClass"
-            (click)="showPopup()"
-        >
-        </button>
-        <ng-template #popupTemplate>
-            <div
-                class="k-menu-group k-menu-group-md"
-                role="menu"
-                [id]="popupId"
-                [attr.aria-labelledby]="overflowBtnId">
-                <ng-container *ngFor="let tool of overflowTools; let index = index">
-                    <ng-template 
-                        *ngIf="tool.popupTemplate"
-                        kendoToolbarRenderer
-                        [tool]="tool"
-                        location="overflow"
-                        [resizable]="overflow"
-                        (rendererClick)="onRendererClick($event)"
-                        [ngTemplateOutlet]="tool.isBuiltInTool ? tool.popupTemplate : popupWrapper"></ng-template>
-                    <ng-template #popupWrapper>
-                        <div role="menuitem" tabindex="-1" class="k-item k-menu-item">
-                            <ng-container [ngTemplateOutlet]="tool.popupTemplate"></ng-container>
-                        </div>
-                    </ng-template>
-                </ng-container>
-            </div>
-        </ng-template>
-        <ng-container #container></ng-container>
-        <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
-    `,
-                    standalone: true,
-                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, NgFor, ToolBarRendererComponent, NgIf, ButtonComponent, NgClass, ResizeSensorComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }]; }, propDecorators: { overflow: [{
-                type: Input
-            }], resizable: [{
-                type: Input
-            }], popupSettings: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input,
-                args: ['tabIndex']
-            }], open: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], allTools: [{
-                type: ContentChildren,
-                args: [ToolBarToolComponent]
-            }], overflowButton: [{
-                type: ViewChild,
-                args: ['overflowButton', { static: false, read: ElementRef }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], resizeSensor: [{
-                type: ViewChild,
-                args: ['resizeSensor', { static: false }]
-            }], container: [{
-                type: ViewChild,
-                args: ['container', { read: ViewContainerRef, static: true }]
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar']
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
-            }], onFocusOut: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], getDir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], resizableClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar-resizable']
-            }] } });
-
-/**
- * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
- */
-class ToolBarButtonComponent extends ToolBarToolComponent {
-    constructor(element, zone) {
-        super();
-        this.element = element;
-        this.zone = zone;
-        /**
-         * Specifies where button icon should be displayed
-         */
-        this.showIcon = 'both';
-        /**
-         * Provides visual styling that indicates if the Button is active
-         * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
-         * By default, `toggleable` is set to `false`.
-         */
-        this.toggleable = false;
-        /**
-         * Sets the selected state of the Button.
-         */
-        this.selected = false;
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-         * * `info`&mdash;Applies coloring based on the `info` theme color.
-         * * `success`&mdash; Applies coloring based on the `success` theme color.
-         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-         * * `error`&mdash; Applies coloring based on the `error` theme color.
-         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-         * * `light`&mdash; Applies coloring based on the `light` theme color.
-         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Fires each time the Button is clicked.
-         */
-        this.click = new EventEmitter();
-        /**
-         * Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
-         */
-        this.pointerdown = new EventEmitter();
-        /**
-         * Fires each time the selected state of a Toggle Button is changed.
-         * The event argument is the new selected state (Boolean).
-         */
-        this.selectedChange = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._showText = 'both';
-        this.isBuiltInTool = true;
-    }
-    // showText and showIcon showIcon should be declared first
-    /**
-     * Specifies where button text should be displayed
-     */
-    set showText(value) {
-        this._showText = value;
-        this.setTextDisplayMode();
-    }
-    get showText() {
-        return this._showText;
-    }
-    /**
-     * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
-     */
-    set text(text) {
-        this._text = text;
-        this.setTextDisplayMode();
-    }
-    get text() {
-        return this._text;
-    }
-    /**
-     * @hidden
-     */
-    set look(look) {
-        if (look) {
-            this.fillMode = look === 'default' ? 'solid' : look;
-        }
-    }
-    /**
-     * @hidden
-     */
-    get togglable() {
-        return this.toggleable;
-    }
-    set togglable(value) {
-        this.toggleable = value;
-    }
-    /**
-     * Defines the name for an existing icon in a Kendo UI theme
-     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
-     * The icon is rendered inside the Button by a `span.k-icon` element.
-     */
-    set icon(icon) {
-        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
-    }
-    /**
-     * Defines a CSS class&mdash;or multiple classes separated by spaces&mdash;
-     * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
-     */
-    set iconClass(iconClass) {
-        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
-    }
-    /**
-     * Defines an SVGIcon to be rendered within the button.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
-     */
-    set svgIcon(icon) {
-        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
-        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
-        if (isDevMode() &&
-            icon &&
-            isIconSet &&
-            isIconClassSet) {
-            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
-        }
-        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
-    }
-    /**
-     * Defines a URL which is used for an `img` element inside the Button.
-     * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
-     */
-    set imageUrl(imageUrl) {
-        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
-    }
-    ngOnInit() {
-        this.setTextDisplayMode();
-    }
-    /**
-     * @hidden
-     */
-    onBlur() {
-        this.getButton().tabIndex = -1;
-    }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return !this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    focus(ev) {
-        // guard against focusing twice on mousedown.
-        if (!ev || ev.type === 'focus' || ev.type === 'keydown') {
-            this.getButton().focus();
-        }
-        this.getButton().tabIndex = 0;
-    }
-    /**
-     * @hidden
-     */
-    handleKey() {
-        this.getButton().tabIndex = -1;
-        return false;
-    }
-    /**
-     * @hidden
-     */
-    handleClick(ev) {
-        this.click.emit(ev);
-        if (this.toggleable) {
-            this.selected = !this.selected;
-            this.selectedChange.emit(this.selected);
-        }
-    }
-    /**
-     * @hidden
-     */
-    selectedChangeHandler(state) {
-        this.selected = state;
-        this.selectedChange.emit(state);
-    }
-    getButton() {
-        return (this.overflowButtonElement || this.toolbarButtonElement).nativeElement;
-    }
-    setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
-        });
-    }
-}
-ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-            <button
-                #toolbarButton
-                [class.k-toolbar-button]="!toggleable"
-                [class.k-toolbar-toggle-button]="toggleable"
-                [tabindex]="tabIndex"
-                type="button"
-                kendoButton
-                [ngStyle]="style"
-                [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [selected]="selected"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                (click)="click.emit($event)"
-                (pointerdown)="pointerdown.emit($event)"
-                (selectedChange)="selectedChangeHandler($event)"
-                (blur)="onBlur()"
-            >
-                {{ toolbarOptions.text }}
-            </button>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div
-                #overflowButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [ngClass]="className"
-                [ngStyle]="style"
-                (click)="handleClick($event)">
-                <span
-                    class="k-link k-menu-link"
-                    [class.k-selected]="selected"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
-            </div>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoToolBarButton',
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }],
-                    selector: 'kendo-toolbar-button',
-                    template: `
-        <ng-template #toolbarTemplate>
-            <button
-                #toolbarButton
-                [class.k-toolbar-button]="!toggleable"
-                [class.k-toolbar-toggle-button]="toggleable"
-                [tabindex]="tabIndex"
-                type="button"
-                kendoButton
-                [ngStyle]="style"
-                [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [selected]="selected"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                (click)="click.emit($event)"
-                (pointerdown)="pointerdown.emit($event)"
-                (selectedChange)="selectedChangeHandler($event)"
-                (blur)="onBlur()"
-            >
-                {{ toolbarOptions.text }}
-            </button>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div
-                #overflowButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [ngClass]="className"
-                [ngStyle]="style"
-                (click)="handleClick($event)">
-                <span
-                    class="k-link k-menu-link"
-                    [class.k-selected]="selected"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
-            </div>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { showText: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], toggleable: [{
-                type: Input
-            }], look: [{
-                type: Input
-            }], togglable: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }], imageUrl: [{
-                type: Input
-            }], click: [{
-                type: Output
-            }], pointerdown: [{
-                type: Output
-            }], selectedChange: [{
-                type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], toolbarButtonElement: [{
-                type: ViewChild,
-                args: ['toolbarButton', { read: ElementRef }]
-            }], overflowButtonElement: [{
-                type: ViewChild,
-                args: ['overflowButton', { read: ElementRef }]
-            }] } });
-
-/**
- * Represents the Kendo UI Toolbar ButtonGroup for Angular.
- */
-class ToolBarButtonGroupComponent extends ToolBarToolComponent {
-    constructor(localization) {
-        super();
-        this.localization = localization;
-        /**
-         * @hidden
-         *
-         * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
-         */
-        this.fillMode = 'solid';
-        /**
-         * By default, the selection mode of the ButtonGroup is set to `multiple`.
-         */
-        this.selection = 'multiple';
-        this.focusedIndex = -1;
-        this.getNextKey = getNextKey(this.localization.rtl);
-        this.getPrevKey = getPrevKey(this.localization.rtl);
-        this.isBuiltInTool = true;
-    }
-    /**
-     * @hidden
-     */
-    set look(look) {
-        if (look) {
-            this.buttonComponents.forEach(b => b.fillMode = look === 'default' ? 'solid' : look);
-        }
-    }
-    get buttonElements() {
-        if (this.overflows) {
-            return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))].map(el => el.nativeElement);
-        }
-        else {
-            return this.toolbarButtonGroup
-                .buttons.filter(b => !b.isDisabled)
-                .map(b => b.element);
-        }
-    }
-    /**
-     * @hidden
-     */
-    onFocus() {
-        // triggered on tabin
-        this.focusedIndex = 0;
-    }
-    /**
-     * @hidden
-     */
-    onNavigate(ev) {
-        ev.preventDefault();
-    }
-    /**
-     * @hidden
-     */
-    selectedChangeHandler(state, button) {
-        button.selected = state;
-        button.selectedChange.emit(state);
-    }
-    /**
-     * @hidden
-     */
-    overflowSelectedChangeHandler(button) {
-        if (this.selection === 'multiple') {
-            button.selected = !button.selected;
-        }
-        else {
-            const filteredButtons = this.buttonComponents.filter(b => b !== button);
-            filteredButtons.forEach(b => b.selected = false);
-            button.selected = !button.selected;
-        }
-        button.selectedChange.emit(button.selected);
-    }
-    /**
-     * @hidden
-     */
-    onButtonClick(ev) {
-        this.focusedIndex = this.buttonElements.findIndex(be => be === ev.target || be.contains(ev.target));
-        this.focusButton(this.focusedIndex, ev);
-    }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return !(this.disabled || this.buttonElements.length === 0);
-    }
-    /**
-     * @hidden
-     */
-    focus(ev = {}) {
-        const nextKey = this.getNextKey(this.overflows);
-        const prevKey = this.getPrevKey(this.overflows);
-        this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
-        this.focusButton(this.focusedIndex, ev);
-    }
-    /**
-     * @hidden
-     */
-    handleKey(ev) {
-        const nextKey = this.getNextKey(this.overflows);
-        const prevKey = this.getPrevKey(this.overflows);
-        const peekAtIndex = makePeeker(this.buttonElements);
-        const isUnmodified = areEqual(this.focusedIndex);
-        this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
-        this.focusButton(this.focusedIndex, ev);
-        return !isUnmodified(this.focusedIndex);
-    }
-    /**
-     * @hidden
-     */
-    handleClick(ev, button) {
-        button.click.emit(ev);
-        this.onButtonClick(ev);
-        this.overflowSelectedChangeHandler(button);
-    }
-    /**
-     * @hidden
-     */
-    getIconClasses(button) {
-        if (button.overflowOptions.icon) {
-            return `${button.overflowOptions.icon}`;
-        }
-        if (button.overflowOptions.iconClass) {
-            return button.overflowOptions.iconClass;
-        }
-        if (button.overflowOptions.svgIcon) {
-            return button.overflowOptions.svgIcon;
-        }
-    }
-    focusButton(index, ev) {
-        var _a;
-        // Guard against focusing twice on mousedown.
-        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-            (_a = this.buttonElements[index]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }
-}
-ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-            <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-{{fillMode}}"
-                #toolbarButtonGroup
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-                (navigate)="onNavigate($event)"
-                (focus)="onFocus()"
-            >
-                <button
-                    kendoButton
-                    type="button"
-                    *ngFor="let button of buttonComponents"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [attr.aria-pressed]="button.selected ? true : false"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.toolbarOptions.icon"
-                    [iconClass]="button.toolbarOptions.iconClass"
-                    [svgIcon]="button.toolbarOptions.svgIcon"
-                    [imageUrl]="button.toolbarOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (pointerdown)="button.pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
-                >
-                    {{ button.toolbarOptions.text }}
-                </button>
-            </kendo-buttongroup>
-        </ng-template>
-        <ng-template #popupTemplate>
-                <div
-                    *ngFor="let button of buttonComponents" 
-                    #listItem
-                    tabindex="-1"
-                    role="menuitem"
-                    class="k-item k-menu-item"
-                    [class.k-disabled]="disabled || button.disabled"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    (click)="handleClick($event, button)">
-                    <span
-                        class="k-link k-menu-link"
-                        [class.k-selected]="button.selected"
-                    >
-                        <kendo-icon-wrapper
-                            *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
-                            [name]="button.overflowOptions.icon"
-                            [customFontClass]="button.overflowOptions.iconClass"
-                            [svgIcon]="button.overflowOptions.svgIcon"
-                        ></kendo-icon-wrapper>
-                        <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
-                    </span>
-                </div>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoToolBarButtonGroup',
-                    providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }],
-                    selector: 'kendo-toolbar-buttongroup',
-                    template: `
-        <ng-template #toolbarTemplate>
-            <kendo-buttongroup
-                class="k-toolbar-button-group k-button-group-{{fillMode}}"
-                #toolbarButtonGroup
-                [tabIndex]="-1"
-                [selection]="selection"
-                [disabled]="disabled"
-                [width]="width"
-                (navigate)="onNavigate($event)"
-                (focus)="onFocus()"
-            >
-                <button
-                    kendoButton
-                    type="button"
-                    *ngFor="let button of buttonComponents"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    [attr.title]="button.title"
-                    [disabled]="button.disabled"
-                    [togglable]="button.togglable"
-                    [selected]="button.selected"
-                    [attr.aria-pressed]="button.selected ? true : false"
-                    [fillMode]="button.fillMode"
-                    [themeColor]="button.fillMode ? button.themeColor : null"
-                    [icon]="button.toolbarOptions.icon"
-                    [iconClass]="button.toolbarOptions.iconClass"
-                    [svgIcon]="button.toolbarOptions.svgIcon"
-                    [imageUrl]="button.toolbarOptions.imageUrl"
-                    (click)="button.click.emit($event); onButtonClick($event)"
-                    (pointerdown)="button.pointerdown.emit($event)"
-                    (selectedChange)="selectedChangeHandler($event, button)"
-                >
-                    {{ button.toolbarOptions.text }}
-                </button>
-            </kendo-buttongroup>
-        </ng-template>
-        <ng-template #popupTemplate>
-                <div
-                    *ngFor="let button of buttonComponents" 
-                    #listItem
-                    tabindex="-1"
-                    role="menuitem"
-                    class="k-item k-menu-item"
-                    [class.k-disabled]="disabled || button.disabled"
-                    [ngStyle]="button.style"
-                    [ngClass]="button.className"
-                    (click)="handleClick($event, button)">
-                    <span
-                        class="k-link k-menu-link"
-                        [class.k-selected]="button.selected"
-                    >
-                        <kendo-icon-wrapper
-                            *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
-                            [name]="button.overflowOptions.icon"
-                            [customFontClass]="button.overflowOptions.iconClass"
-                            [svgIcon]="button.overflowOptions.svgIcon"
-                        ></kendo-icon-wrapper>
-                        <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
-                    </span>
-                </div>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [ButtonGroupComponent, NgFor, ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], look: [{
-                type: Input
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], toolbarButtonGroup: [{
-                type: ViewChild,
-                args: ['toolbarButtonGroup', { static: false }]
-            }], overflowListItems: [{
-                type: ViewChildren,
-                args: ['listItem']
-            }], buttonComponents: [{
-                type: ContentChildren,
-                args: [forwardRef(() => ToolBarButtonComponent)]
-            }] } });
-
-/**
- * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
- */
-class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
-    constructor(renderer) {
-        super();
-        this.renderer = renderer;
-        /**
-         * Allows showing the default arrow icon or providing alternative one instead.
-         * @default false
-         */
-        this.arrowIcon = false;
-        /**
-         * Sets the `title` attribute of the underlying button element.
-         * @default ''
-         */
-        this.title = '';
-        /**
-         * Defines the location of the button icon that will be displayed.
-         */
-        this.showIcon = 'both';
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-         * * `info`&mdash;Applies coloring based on the `info` theme color.
-         * * `success`&mdash; Applies coloring based on the `success` theme color.
-         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-         * * `error`&mdash; Applies coloring based on the `error` theme color.
-         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-         * * `light`&mdash; Applies coloring based on the `light` theme color.
-         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Fires each time the user clicks a DropDownButton item.
-         * The event data contains the data item that is bound to the clicked list item.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.focusedIndex = -1;
-        this._showText = 'both';
-        this.getNextKey = getNextKey();
-        this.getPrevKey = getPrevKey();
-        this.isBuiltInTool = true;
-    }
-    // showText and showIcon showIcon should be declared first
-    /**
-     * Defines the location of the button text that will be displayed.
-     */
-    set showText(value) {
-        this._showText = value;
-        this.setTextDisplayMode();
-    }
-    get showText() {
-        return this._showText;
-    }
-    /**
-     * Sets the text of the DropDownButton
-     * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons).
-     */
-    set text(text) {
-        this._text = text;
-        this.setTextDisplayMode();
-    }
-    get text() {
-        return this._text;
-    }
-    /**
-     * Defines an icon that will be rendered next to the button text.
-     */
-    set icon(icon) {
-        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
-    }
-    /**
-     * Defines an SVGIcon to be rendered within the button.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
-     */
-    set svgIcon(icon) {
-        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
-        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
-        if (isDevMode() &&
-            icon &&
-            isIconSet &&
-            isIconClassSet) {
-            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
-        }
-        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
-    }
-    /**
-     * Defines an icon with a custom CSS class that will be rendered next to the button text.
-     */
-    set iconClass(iconClass) {
-        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
-    }
-    /**
-     * Defines the location of an image that will be displayed next to the button text.
-     */
-    set imageUrl(imageUrl) {
-        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
-    }
-    /**
-     * Configures the popup of the DropDownButton.
-     *
-     * The available options are:
-     * - `animate:Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass:String`&mdash;Specifies a list of CSS classes that are used to style the popup.
-     */
-    set popupSettings(settings) {
-        this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
-    }
-    get popupSettings() {
-        return this._popupSettings;
-    }
-    /**
-     * @hidden
-     */
-    set look(look) {
-        if (look) {
-            this.fillMode = look === 'default' ? 'solid' : look;
-        }
-    }
-    /**
-     * @hidden
-     */
-    set primary(primary) {
-        this.themeColor = primary ? 'primary' : 'base';
-    }
-    /**
-     * Sets the data of the DropDownButton
-     * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons)).
-     *
-     * > The data has to be provided in an array-like list.
-     */
-    set data(data) {
-        this._data = data || [];
-    }
-    get data() {
-        if (!this._data) {
-            this.data = [];
-        }
-        return this._data;
-    }
-    ngOnInit() {
-        this.setTextDisplayMode();
-    }
-    ngAfterViewInit() {
-        this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
-    }
-    get overflowButtons() {
-        return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
-    }
-    /**
-     * @hidden
-     */
-    onButtonListClick(ev) {
-        this.focusedIndex = this.overflowListItems
-            .toArray()
-            .findIndex(b => b.nativeElement.contains(ev.target));
-    }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return !this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    focus(ev = {}) {
-        if (!this.overflows) {
-            if (ev.type === 'focus' || ev.type === 'keydown') {
-                this.toolbarDropDownButton.focus();
-            }
-        }
-        else if (this.overflowButtons.length > 0) {
-            this.focusedIndex = getIndexOfFocused(this.getPrevKey(), this.getNextKey(), this.overflowButtons.map(ob => ob.nativeElement))(ev);
-            this.focusButton(this.focusedIndex, ev);
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleKey(ev) {
-        if (!this.overflows && (ev.keyCode === this.getPrevKey(this.overflows) || ev.keyCode === this.getNextKey(this.overflows))) {
-            return false;
-        }
-        if (this.overflows) {
-            const peekAtIndex = makePeeker(this.overflowButtons);
-            const isUnmodified = areEqual(this.focusedIndex);
-            this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
-            this.focusButton(this.focusedIndex, ev);
-            return !isUnmodified(this.focusedIndex);
-        }
-    }
-    /**
-     * @hidden
-     */
-    getText(dataItem) {
-        if (dataItem) {
-            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
-        }
-        return undefined;
-    }
-    /**
-     * @hidden
-     */
-    handleClick(ev, item, index) {
-        this.onButtonListClick(ev);
-        const dataItem = this.data[index];
-        if (item.click) {
-            item.click(dataItem);
-        }
-        this.itemClick.emit(dataItem);
-    }
-    focusButton(index, ev) {
-        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-            this.overflowButtons[index].nativeElement.focus();
-        }
-    }
-    setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
-    }
-}
-ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton
-                #toolbarDropDownButton
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [arrowIcon]="arrowIcon"
-                [buttonClass]="buttonClass"
-                [disabled]="disabled"
-                [tabIndex]="-1"
-                [data]="data"
-                [buttonAttributes]="{'title': title}"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            >
-                {{ toolbarOptions.text }}
-            </kendo-dropdownbutton>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item k-disabled"
-                [ngClass]="buttonClass">
-                <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
-            </div>
-            <ng-container *ngFor="let item of data; let i = index">
-                <div #listItem
-                    tabindex="-1"
-                    role="menuitem"
-                    class="k-item k-menu-item"
-                    [class.k-disabled]="disabled || item.disabled"
-                    (click)="handleClick($event, item, i)">
-                    <span
-                        class="k-link k-menu-link"
-                        [ngClass]="item.cssClass"
-                    >
-                        <kendo-icon-wrapper
-                            *ngIf="item.icon || item.iconClass || item.svgIcon"
-                            [name]="item.icon"
-                            [customFontClass]="item.iconClass"
-                            [svgIcon]="item.svgIcon"
-                        ></kendo-icon-wrapper>
-                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                    </span>
-                </div>
-            </ng-container>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoToolBarDropDownButton',
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }],
-                    selector: 'kendo-toolbar-dropdownbutton',
-                    template: `
-        <ng-template #toolbarTemplate>
-            <kendo-dropdownbutton
-                #toolbarDropDownButton
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [arrowIcon]="arrowIcon"
-                [buttonClass]="buttonClass"
-                [disabled]="disabled"
-                [tabIndex]="-1"
-                [data]="data"
-                [buttonAttributes]="{'title': title}"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            >
-                {{ toolbarOptions.text }}
-            </kendo-dropdownbutton>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item k-disabled"
-                [ngClass]="buttonClass">
-                <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    ></kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
-            </div>
-            <ng-container *ngFor="let item of data; let i = index">
-                <div #listItem
-                    tabindex="-1"
-                    role="menuitem"
-                    class="k-item k-menu-item"
-                    [class.k-disabled]="disabled || item.disabled"
-                    (click)="handleClick($event, item, i)">
-                    <span
-                        class="k-link k-menu-link"
-                        [ngClass]="item.cssClass"
-                    >
-                        <kendo-icon-wrapper
-                            *ngIf="item.icon || item.iconClass || item.svgIcon"
-                            [name]="item.icon"
-                            [customFontClass]="item.iconClass"
-                            [svgIcon]="item.svgIcon"
-                        ></kendo-icon-wrapper>
-                        <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                    </span>
-                </div>
-            </ng-container>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], showText: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], imageUrl: [{
-                type: Input
-            }], popupSettings: [{
-                type: Input
-            }], look: [{
-                type: Input
-            }], primary: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], buttonClass: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], itemClick: [{
-                type: Output
-            }], open: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], dropdownButton: [{
-                type: ViewChild,
-                args: ['dropdownButton', { read: ElementRef, static: true }]
-            }], dropDownButtonComponent: [{
-                type: ViewChild,
-                args: [DropDownButtonComponent, { static: false }]
-            }], overflowListItems: [{
-                type: ViewChildren,
-                args: ['listItem']
-            }], toolbarDropDownButton: [{
-                type: ViewChild,
-                args: ['toolbarDropDownButton', { static: false }]
-            }] } });
-
-/**
- * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
- */
-class ToolBarSplitButtonComponent extends ToolBarToolComponent {
-    constructor() {
-        super();
-        /**
-         * Specifies where button icon should be displayed
-         */
-        this.showIcon = 'both';
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly.
-         *
-         * The possible values are:
-         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
-         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
-         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
-         * * `info`&mdash;Applies coloring based on the `info` theme color.
-         * * `success`&mdash; Applies coloring based on the `success` theme color.
-         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
-         * * `error`&mdash; Applies coloring based on the `error` theme color.
-         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
-         * * `light`&mdash; Applies coloring based on the `light` theme color.
-         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
-         * be rendered for the button which opens the popup.
-         */
-        this.arrowButtonIcon = 'caret-alt-down';
-        /**
-         * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
-         * be rendered for the button which opens the popup.
-         */
-        this.arrowButtonSvgIcon = caretAltDownIcon;
-        /**
-         * Configures the text field of the button-list popup.
-         */
-        this.textField = 'text';
-        /**
-         * Fires each time the user clicks the main button.
-         */
-        this.buttonClick = new EventEmitter();
-        /**
-         * Fires each time the user clicks the drop-down list.
-         * The event data contains the data item that is bound to the clicked list item.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.focusedIndex = -1;
-        this._showText = 'both';
-        this.getNextKey = getNextKey();
-        this.getPrevKey = getPrevKey();
-        this.isBuiltInTool = true;
-    }
-    // showText and showIcon showIcon should be declared first
-    /**
-     * Specifies where button text should be displayed
-     */
-    set showText(value) {
-        this._showText = value;
-        this.setTextDisplayMode();
-    }
-    get showText() {
-        return this._showText;
-    }
-    /**
-     * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons).
-     */
-    set text(text) {
-        this._text = text;
-        this.setTextDisplayMode();
-    }
-    get text() {
-        return this._text;
-    }
-    /**
-     * Defines the icon that will be rendered next to the button text
-     * ([see example](slug:controltypes_toolbar#toc-split-buttons)).
-     */
-    set icon(icon) {
-        this.toolbarOptions.icon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.icon = getValueForLocation(icon, this.showIcon, true);
-    }
-    /**
-     * Defines an SVGIcon to be rendered within the main button.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
-     */
-    set svgIcon(icon) {
-        const isIconSet = this.toolbarOptions.icon || this.overflowOptions.icon;
-        const isIconClassSet = this.toolbarOptions.iconClass || this.overflowOptions.iconClass;
-        if (isDevMode() &&
-            icon &&
-            isIconSet &&
-            isIconClassSet) {
-            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
-        }
-        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
-        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
-    }
-    /**
-     * Defines an icon with a custom CSS class that will be rendered next to the button text.
-     */
-    set iconClass(iconClass) {
-        this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
-        this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
-    }
-    /**
-     * Defines the location of an image that will be displayed next to the button text.
-     */
-    set imageUrl(imageUrl) {
-        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
-    }
-    /**
-     * Configures the popup of the SplitButton.
-     *
-     * The available options are:
-     * - `animate:Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass:String`&mdash;Specifies a list of CSS classes that are used to style the popup.
-     */
-    set popupSettings(value) {
-        this._popupSettings = value;
-    }
-    get popupSettings() {
-        if (!this._popupSettings) {
-            this._popupSettings = { animate: true, popupClass: '' };
-        }
-        return this._popupSettings;
-    }
-    /**
-     * @hidden
-     */
-    set look(look) {
-        if (look) {
-            this.fillMode = look === 'default' ? 'solid' : look;
-        }
-    }
-    /**
-     * Sets the data of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
-     *
-     * > The data has to be provided in an array-like list.
-     */
-    set data(data) {
-        this._data = data || [];
-    }
-    get data() {
-        if (!this._data) {
-            this.data = [];
-        }
-        return this._data;
-    }
-    ngOnInit() {
-        this.setTextDisplayMode();
-    }
-    get overflowButtons() {
-        return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
-    }
-    /**
-     * @hidden
-     */
-    onButtonListClick(ev) {
-        this.focusedIndex = this.overflowButtons.findIndex(b => b.nativeElement.contains(ev.target));
-    }
-    /**
-     * @hidden
-     */
-    onMainButtonClick(ev) {
-        this.buttonClick.emit(ev);
-        this.focusedIndex = 0;
-    }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return !this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    focus(ev = {}) {
-        if (!this.overflows) {
-            if (ev.type === 'focus' || ev.type === 'keydown') {
-                this.toolbarSplitButton.focus();
-            }
-        }
-        else if (this.overflowButtons.length > 0) {
-            this.focusedIndex = getIndexOfFocused(this.getPrevKey(), this.getNextKey(), this.overflowButtons.map(ob => ob.nativeElement))(ev);
-            this.focusButton(this.focusedIndex, ev);
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleKey(ev) {
-        if (!this.overflows && (ev.keyCode === this.getPrevKey(this.overflows) || ev.keyCode === this.getNextKey(this.overflows))) {
-            return false;
-        }
-        if (this.overflows) {
-            const peekAtIndex = makePeeker(this.overflowButtons);
-            const isUnmodified = areEqual(this.focusedIndex);
-            this.focusedIndex = seekFocusedIndex(this.getPrevKey(), this.getNextKey(), peekAtIndex)(this.focusedIndex, ev);
-            this.focusButton(this.focusedIndex, ev);
-            return !isUnmodified(this.focusedIndex);
-        }
-    }
-    /**
-     * @hidden
-     */
-    getText(dataItem) {
-        if (dataItem) {
-            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
-        }
-        return undefined;
-    }
-    /**
-     * @hidden
-     */
-    handleClick(ev, item, index) {
-        this.onButtonListClick(ev);
-        const dataItem = this.data[index];
-        if (item.click) {
-            item.click(dataItem);
-        }
-        this.itemClick.emit(dataItem);
-    }
-    focusButton(index, ev) {
-        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') {
-            this.overflowButtons[index].nativeElement.focus();
-        }
-    }
-    setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
-    }
-}
-ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-            <kendo-splitbutton
-                #toolbarSplitButton
-                class="k-toolbar-split-button"
-                [data]="data"
-                [text]="toolbarOptions.text"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [buttonClass]="buttonClass"
-                [arrowButtonClass]="arrowButtonClass"
-                [arrowButtonIcon]="arrowButtonIcon"
-                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
-                [disabled]="disabled"
-                [tabIndex]="-1"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (buttonClick)="buttonClick.emit($event)"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            ></kendo-splitbutton>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div #overflowMainButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [ngClass]="buttonClass"
-                (click)="onMainButtonClick($event)">
-                <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    >
-                    </kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
-            </div>
-            <ng-container *ngFor="let item of data; let i = index">
-            <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
-                    >
-                    </kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
-            </div>
-            </ng-container>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoToolBarSplitButton',
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }],
-                    selector: 'kendo-toolbar-splitbutton',
-                    template: `
-        <ng-template #toolbarTemplate>
-            <kendo-splitbutton
-                #toolbarSplitButton
-                class="k-toolbar-split-button"
-                [data]="data"
-                [text]="toolbarOptions.text"
-                [icon]="toolbarOptions.icon"
-                [iconClass]="toolbarOptions.iconClass"
-                [svgIcon]="toolbarOptions.svgIcon"
-                [imageUrl]="toolbarOptions.imageUrl"
-                [buttonClass]="buttonClass"
-                [arrowButtonClass]="arrowButtonClass"
-                [arrowButtonIcon]="arrowButtonIcon"
-                [arrowButtonSvgIcon]="arrowButtonSvgIcon"
-                [disabled]="disabled"
-                [tabIndex]="-1"
-                [textField]="textField"
-                [popupSettings]="popupSettings"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                (buttonClick)="buttonClick.emit($event)"
-                (open)="open.emit($event)"
-                (close)="close.emit($event)"
-                (itemClick)="itemClick.emit($event)"
-            ></kendo-splitbutton>
-        </ng-template>
-        <ng-template #popupTemplate>
-            <div #overflowMainButton
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled"
-                [ngClass]="buttonClass"
-                (click)="onMainButtonClick($event)">
-                <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
-                        [name]="overflowOptions.icon"
-                        [customFontClass]="overflowOptions.iconClass"
-                        [svgIcon]="overflowOptions.svgIcon"
-                    >
-                    </kendo-icon-wrapper>
-                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
-                </span>
-            </div>
-            <ng-container *ngFor="let item of data; let i = index">
-            <div #listItem
-                tabindex="-1"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-disabled]="disabled || item.disabled"
-                (click)="handleClick($event, item, i)">
-                <span
-                    class="k-link k-menu-link"
-                >
-                    <kendo-icon-wrapper
-                        *ngIf="item.icon || item.iconClass || item.svgIcon"
-                        [name]="item.icon"
-                        [customFontClass]="item.iconClass"
-                        [svgIcon]="item.svgIcon"
-                    >
-                    </kendo-icon-wrapper>
-                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
-                </span>
-            </div>
-            </ng-container>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [SplitButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], imageUrl: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], popupSettings: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], look: [{
-                type: Input
-            }], buttonClass: [{
-                type: Input
-            }], arrowButtonClass: [{
-                type: Input
-            }], arrowButtonIcon: [{
-                type: Input
-            }], arrowButtonSvgIcon: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], buttonClick: [{
-                type: Output
-            }], itemClick: [{
-                type: Output
-            }], open: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], toolbarSplitButton: [{
-                type: ViewChild,
-                args: ['toolbarSplitButton', { static: false }]
-            }], overflowMainButton: [{
-                type: ViewChild,
-                args: ['overflowMainButton', { read: ElementRef }]
-            }], overflowListItems: [{
-                type: ViewChildren,
-                args: ['listItem']
-            }] } });
-
-/**
- * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
- */
-class ToolBarSeparatorComponent extends ToolBarToolComponent {
-    constructor() {
-        super();
-        this.isBuiltInTool = true;
-    }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return false;
-    }
-    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
-    /**
-     * @hidden
-     */
-    focus() {
-        /* noop */
-    }
-    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
-    /**
-     * @hidden
-     */
-    handleKey() {
-        return false;
-    }
-    ngAfterViewInit() {
-        if (!this.popupTemplate) {
-            this.popupTemplate = this.toolbarTemplate;
-        }
-    }
-}
-ToolBarSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSeparatorComponent, isStandalone: true, selector: "kendo-toolbar-separator", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "separator", first: true, predicate: ["separator"], descendants: true }], exportAs: ["kendoToolBarSeparator"], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-            <div class="k-separator"></div>
-        </ng-template>
-
-        <ng-template #popupTemplate>
-            <div class="k-item k-menu-item">
-                <div class="k-separator k-separator-horizontal"></div>
-            </div>
-        </ng-template>
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoToolBarSeparator',
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }],
-                    selector: 'kendo-toolbar-separator',
-                    template: `
-        <ng-template #toolbarTemplate>
-            <div class="k-separator"></div>
-        </ng-template>
-
-        <ng-template #popupTemplate>
-            <div class="k-item k-menu-item">
-                <div class="k-separator k-separator-horizontal"></div>
-            </div>
-        </ng-template>
-    `,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], separator: [{
-                type: ViewChild,
-                args: ['separator', { static: false }]
-            }] } });
-
-/**
- * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
- */
-class ToolBarSpacerComponent extends ToolBarToolComponent {
-    constructor() {
-        super();
-        /**
-         * @hidden
-         */
-        this.__isSpacer = true;
-        this.isBuiltInTool = true;
-    }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return false;
-    }
-    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
-    /**
-     * @hidden
-     */
-    focus() {
-        /* noop */
-    }
-    // If this is not here, the docs display info from its parent(ToolBarToolComponent).
-    /**
-     * @hidden
-     */
-    handleKey() {
-        return false;
-    }
-    ngAfterViewInit() {
-        if (!this.popupTemplate) {
-            this.popupTemplate = this.toolbarTemplate;
-        }
-    }
-}
-ToolBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSpacerComponent, isStandalone: true, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-            <div class="k-spacer"></div>
-        </ng-template>
-    `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoToolBarSpacer',
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }],
-                    selector: 'kendo-toolbar-spacer',
-                    template: `
-        <ng-template #toolbarTemplate>
-            <div class="k-spacer"></div>
-        </ng-template>
-    `,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }] } });
-
-/**
- * Custom component messages override default component messages.
- */
-class ToolbarCustomMessagesComponent extends ToolbarMessages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-    get override() {
-        return true;
-    }
-}
-ToolbarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolbarCustomMessagesComponent, isStandalone: true, selector: "kendo-toolbar-messages", providers: [
-        {
-            provide: ToolbarMessages,
-            useExisting: forwardRef(() => ToolbarCustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarCustomMessagesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: ToolbarMessages,
-                            useExisting: forwardRef(() => ToolbarCustomMessagesComponent)
-                        }
-                    ],
-                    selector: 'kendo-toolbar-messages',
-                    template: ``,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-
-/**
-* Utility array that contains all `@progress/kendo-angular-toolbar` related components and directives
-*/
-const KENDO_TOOLBAR = [
-    ToolBarComponent,
-    ToolbarCustomMessagesComponent,
-    ToolBarButtonComponent,
-    ToolBarButtonGroupComponent,
-    ToolBarDropDownButtonComponent,
-    ToolBarSeparatorComponent,
-    ToolBarSpacerComponent,
-    ToolBarSplitButtonComponent,
-    ToolBarToolComponent
-];
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the ToolBar component.
- *
- * The package exports:
- * - `ToolBarComponent`&mdash;The ToolBarComponent class.
- * - `ToolBarToolComponent`&mdash;The base Tool component class.
- * - `ToolBarButtonComponent`&mdash;The Button Tool component class.
- * - `ToolBarButtonGroupComponent`&mdash;The ButtonGroup Tool component class.
- * - `ToolBarDropDownButtonComponent`&mdash;The DropDownButton Tool component class.
- * - `ToolBarSplitButtonComponent`&mdash;The SplitButton Tool component class.
- * - `ToolBarSeparatorComponent`&mdash;The Separator Tool component class.
- */
-class ToolBarModule {
-}
-ToolBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, imports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent], exports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent] });
-ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ToolBarComponent, ToolbarCustomMessagesComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarDropDownButtonComponent, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_TOOLBAR],
-                    imports: [...KENDO_TOOLBAR],
-                    providers: [IconsService, PopupService, ResizeBatchService]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { KENDO_TOOLBAR, LocalizedToolbarMessagesDirective, RefreshService, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarComponent, ToolBarDropDownButtonComponent, ToolBarModule, ToolBarSeparatorComponent, ToolBarSpacerComponent, ToolBarSplitButtonComponent, ToolBarToolComponent, ToolbarCustomMessagesComponent };
-