@progress/kendo-angular-toolbar 21.4.1 → 22.0.0-develop.1

package/esm2022/tools/toolbar-dropdownbutton.component.mjs

@@ -1,595 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode, Renderer2, NgZone } from '@angular/core';
-import { ToolBarToolComponent } from './toolbar-tool.component';
-import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
-import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { NgClass } from '@angular/common';
-import { take } from 'rxjs/operators';
-import { ToolBarComponent } from '../toolbar.component';
-import { normalizeKeys } from '@progress/kendo-angular-common';
-import * as i0 from "@angular/core";
-import * as i1 from "../toolbar.component";
-/**
- * Represents the [Kendo UI ToolBar DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons).
- *
- * Use this component to add a button that opens a popup with a list of items in the ToolBar.
- *
- * @example
- * ```html
- * <kendo-toolbar>
- *      <kendo-toolbar-dropdownbutton text="Paste Variations" [data]="data">
- *      </kendo-toolbar-dropdownbutton>
- * </kendo-toolbar>
- * ```
- *
- */
-export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
-    zone;
-    renderer;
-    host;
-    /**
-     * Shows the default arrow icon or lets you provide a custom one.
-     * @default false
-     */
-    arrowIcon = false;
-    /**
-     * Sets the `title` attribute of the underlying button element.
-     * @default ''
-     */
-    title = '';
-    // showText and showIcon showIcon should be declared first
-    /**
-     * Controls the button text visibility.
-     * @default 'always'
-     */
-    set showText(value) {
-        this._showText = value;
-        this.setTextDisplayMode();
-    }
-    get showText() {
-        return this._showText;
-    }
-    /**
-     * Controls the button icon visibility.
-     * @default 'always'
-     */
-    set showIcon(value) {
-        this._showIcon = value;
-    }
-    get showIcon() {
-        return this._showIcon;
-    }
-    /**
-     * 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;
-    }
-    /**
-     * Sets the icon 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);
-    }
-    /**
-     * Sets the `SVGIcon` rendered in the button.
-     * Accepts 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);
-    }
-    /**
-     * Sets a custom CSS class icon 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);
-    }
-    /**
-     * Sets a URL for the image 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.
-     * Accepts a `PopupSettings` object that allows you to customize the popup behavior and appearance.
-     */
-    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 fill mode for the button.
-     * The fill mode represents the background and border styles.
-     * @default 'solid'
-     */
-    fillMode = 'solid';
-    /**
-     * Sets the predefined theme color for the button.
-     * The theme color applies to the background, border, and text
-     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-     * @default 'base'
-     */
-    themeColor = 'base';
-    /**
-     * Sets the CSS classes for the main button.
-     * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
-     */
-    buttonClass;
-    /**
-     * Sets the data item field that repesents the item text.
-     * If the data contains only primitive values, do not set this property.
-     */
-    textField;
-    /**
-     * When `true`, disables the DropDownButton.
-     */
-    disabled;
-    /**
-     * Sets the data of the DropDownButton
-     * ([see example](slug:controltypes_toolbar#drop-down-buttons)).
-     *
-     * > Provide the data as an array-like list.
-     */
-    set data(data) {
-        this._data = data || [];
-    }
-    get data() {
-        if (!this._data) {
-            this.data = [];
-        }
-        return this._data;
-    }
-    /**
-     * Fires each time the user clicks a DropDownButton item.
-     * The event data contains the clicked item's data.
-     */
-    itemClick = new EventEmitter();
-    /**
-     * Fires when the popup is about to open.
-     * This event is preventable. If you cancel the event, the popup stays closed.
-     */
-    open = new EventEmitter();
-    /**
-     * Fires when the popup is about to close.
-     * This event is preventable. If you cancel the event, the popup stays open.
-     */
-    close = new EventEmitter();
-    dropdownButton;
-    toolbarDropDownButton;
-    sectionDropDownButton;
-    overflowListItems;
-    toolbarOptions = {
-        text: '',
-        icon: '',
-        iconClass: '',
-        svgIcon: null,
-        imageUrl: ''
-    };
-    overflowOptions = {
-        text: '',
-        icon: '',
-        iconClass: '',
-        svgIcon: null,
-        imageUrl: ''
-    };
-    get overflowButtons() {
-        return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
-    }
-    _data;
-    _popupSettings = { animate: true, popupClass: '' };
-    focusedIndex = -1;
-    _showText;
-    _showIcon;
-    _text;
-    propertyChangeSub;
-    getNextKey;
-    getPrevKey;
-    constructor(zone, renderer, host) {
-        super();
-        this.zone = zone;
-        this.renderer = renderer;
-        this.host = host;
-        this.getNextKey = getNextKey();
-        this.getPrevKey = getPrevKey();
-        this.isBuiltInTool = true;
-        this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
-            if (change.property === 'showText' || change.property === 'showIcon') {
-                this[change.property] = change.value;
-            }
-        });
-    }
-    ngOnInit() {
-        this.setTextDisplayMode();
-    }
-    ngOnDestroy() {
-        if (this.propertyChangeSub) {
-            this.propertyChangeSub.unsubscribe();
-            this.propertyChangeSub = null;
-        }
-    }
-    ngAfterViewInit() {
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            const dropdownButton = this[`${this.location}DropDownButton`];
-            if (dropdownButton?.button) {
-                this.renderer.addClass(dropdownButton.button.nativeElement, 'k-toolbar-menu-button');
-            }
-        });
-    }
-    /**
-     * @hidden
-     */
-    onButtonListClick(ev) {
-        this.focusedIndex = this.overflowListItems
-            .toArray()
-            .findIndex(b => b.nativeElement.contains(ev.target));
-    }
-    /**
-     * @hidden
-     */
-    get size() {
-        return this.host.size;
-    }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return !this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    focus(ev = {}) {
-        if (!this.overflows || this.location === 'section') {
-            if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-                this[`${this.location}DropDownButton`]?.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) {
-        const code = normalizeKeys(ev);
-        if (!this.overflows && (code === this.getPrevKey(this.overflows) || code === this.getNextKey(this.overflows))) {
-            return false;
-        }
-        if (this.overflows && this.location !== 'section') {
-            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;
-        }
-    }
-    /**
-     * @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 === 'menu' || this.showText === 'never' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "sectionDropDownButton", first: true, predicate: ["sectionDropDownButton"], 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"
-            [size]="size"
-            [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}"
-              >
-              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
-                <kendo-icon-wrapper
-                  [name]="overflowOptions.icon"
-                  [customFontClass]="overflowOptions.iconClass"
-                  [svgIcon]="overflowOptions.svgIcon"
-                ></kendo-icon-wrapper>
-              }
-              @if (overflowOptions.text) {
-                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
-              }
-            </span>
-          </div>
-          @for (item of data; track item; 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"
-                >
-                @if (item.icon || item.iconClass || item.svgIcon) {
-                  <kendo-icon-wrapper
-                    [name]="item.icon"
-                    [customFontClass]="item.iconClass"
-                    [svgIcon]="item.svgIcon"
-                  ></kendo-icon-wrapper>
-                }
-                @if (getText(item)) {
-                  <span class="k-menu-link-text">{{ getText(item) }}</span>
-                }
-              </span>
-            </div>
-          }
-        </ng-template>
-        
-        <ng-template #sectionTemplate>
-          <kendo-dropdownbutton #sectionDropDownButton
-            [icon]="toolbarOptions.icon"
-            [iconClass]="toolbarOptions.iconClass"
-            [svgIcon]="toolbarOptions.svgIcon"
-            [imageUrl]="toolbarOptions.imageUrl"
-            [arrowIcon]="arrowIcon"
-            [buttonClass]="buttonClass"
-            [disabled]="disabled"
-            [size]="size"
-            [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>
-        `, 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: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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"
-            [size]="size"
-            [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}"
-              >
-              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
-                <kendo-icon-wrapper
-                  [name]="overflowOptions.icon"
-                  [customFontClass]="overflowOptions.iconClass"
-                  [svgIcon]="overflowOptions.svgIcon"
-                ></kendo-icon-wrapper>
-              }
-              @if (overflowOptions.text) {
-                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
-              }
-            </span>
-          </div>
-          @for (item of data; track item; 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"
-                >
-                @if (item.icon || item.iconClass || item.svgIcon) {
-                  <kendo-icon-wrapper
-                    [name]="item.icon"
-                    [customFontClass]="item.iconClass"
-                    [svgIcon]="item.svgIcon"
-                  ></kendo-icon-wrapper>
-                }
-                @if (getText(item)) {
-                  <span class="k-menu-link-text">{{ getText(item) }}</span>
-                }
-              </span>
-            </div>
-          }
-        </ng-template>
-        
-        <ng-template #sectionTemplate>
-          <kendo-dropdownbutton #sectionDropDownButton
-            [icon]="toolbarOptions.icon"
-            [iconClass]="toolbarOptions.iconClass"
-            [svgIcon]="toolbarOptions.svgIcon"
-            [imageUrl]="toolbarOptions.imageUrl"
-            [arrowIcon]="arrowIcon"
-            [buttonClass]="buttonClass"
-            [disabled]="disabled"
-            [size]="size"
-            [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>
-        `,
-                    standalone: true,
-                    imports: [DropDownButtonComponent, NgClass, IconWrapperComponent]
-                }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ToolBarComponent }], 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
-            }], dropdownButton: [{
-                type: ViewChild,
-                args: ['dropdownButton', { read: ElementRef, static: true }]
-            }], toolbarDropDownButton: [{
-                type: ViewChild,
-                args: ['toolbarDropDownButton', { static: false }]
-            }], sectionDropDownButton: [{
-                type: ViewChild,
-                args: ['sectionDropDownButton', { static: false }]
-            }], overflowListItems: [{
-                type: ViewChildren,
-                args: ['listItem']
-            }] } });

package/esm2022/tools/toolbar-separator.component.mjs

@@ -1,96 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, forwardRef, ViewChild, ElementRef } from '@angular/core';
-import { ToolBarToolComponent } from './toolbar-tool.component';
-import * as i0 from "@angular/core";
-/**
- * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
- *
- * Use this component to add a visual separator between ToolBar tools.
- *
- * @example
- * ```html
- * <kendo-toolbar>
- *      <kendo-toolbar-button text="Button 1"></kendo-toolbar-button>
- *      <kendo-toolbar-separator></kendo-toolbar-separator>
- *      <kendo-toolbar-button text="Button 2"></kendo-toolbar-button>
- * </kendo-toolbar>
- * ```
- */
-export class ToolBarSeparatorComponent extends ToolBarToolComponent {
-    separator;
-    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;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToolBarSeparatorComponent, isStandalone: true, selector: "kendo-toolbar-separator", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }], viewQueries: [{ propertyName: "separator", first: true, predicate: ["separator"], descendants: true }], exportAs: ["kendoToolBarSeparator"], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-            <div class="k-separator k-toolbar-separator"></div>
-        </ng-template>
-
-        <ng-template #sectionTemplate>
-            <div class="k-separator k-toolbar-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: "18.2.14", 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 k-toolbar-separator"></div>
-        </ng-template>
-
-        <ng-template #sectionTemplate>
-            <div class="k-separator k-toolbar-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: () => [], propDecorators: { separator: [{
-                type: ViewChild,
-                args: ['separator', { static: false }]
-            }] } });