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

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

@@ -1,712 +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, Input, Output, EventEmitter, ElementRef, isDevMode, NgZone } from '@angular/core';
-import { ToolBarToolComponent } from './toolbar-tool.component';
-import { getValueForLocation } from '../util';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { take } from 'rxjs/operators';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { BadgeComponent, BadgeContainerComponent } from '@progress/kendo-angular-indicators';
-import { NgStyle, NgClass } from '@angular/common';
-import { ToolBarComponent } from '../toolbar.component';
-import * as i0 from "@angular/core";
-import * as i1 from "../toolbar.component";
-/**
- * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
- *
- * Use this component to render a button inside the ToolBar.
- *
- *  @example
- * ```html
- * <kendo-toolbar>
- *      <kendo-toolbar-button text="Button"></kendo-toolbar-button>
- * </kendo-toolbar>
- * ```
- *
- */
-export class ToolBarButtonComponent extends ToolBarToolComponent {
-    element;
-    zone;
-    host;
-    // showText and showIcon showIcon should be declared first
-    /**
-     * Specifies the button text visibility.
-     * Accepts a `DisplayMode` value.
-     * @default 'always'
-     */
-    set showText(value) {
-        this._showText = value;
-        this.setTextDisplayMode();
-    }
-    get showText() {
-        return this._showText;
-    }
-    /**
-     * Specifies the button icon visibility.
-     * Accepts a `DisplayMode` value.
-     * @default 'always'
-     */
-    set showIcon(value) {
-        this._showIcon = value;
-        this.setTextDisplayMode();
-    }
-    get showIcon() {
-        return this._showIcon;
-    }
-    /**
-     * 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
-     */
-    get size() {
-        return this.host.size;
-    }
-    /**
-     * Specifies custom inline CSS styles for the Button.
-     */
-    style;
-    /**
-     * Specifies custom CSS class names to be added to the Button.
-     */
-    className;
-    /**
-     * Specifies the `title` attribute of the Button.
-     */
-    title;
-    /**
-     * Disables the Button when set to `true`
-     * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
-     */
-    disabled;
-    /**
-     * Provides visual styling to indicate if the Button is active
-     * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
-     * For toggleable buttons, set this to `true`.
-     * @default false
-     */
-    toggleable = false;
-    /**
-     * @hidden
-     */
-    set look(look) {
-        if (look) {
-            this.fillMode = look === 'default' ? 'solid' : look;
-        }
-    }
-    /**
-     * @hidden
-     */
-    get togglable() {
-        return this.toggleable;
-    }
-    set togglable(value) {
-        this.toggleable = value;
-    }
-    /**
-     * Sets the selected state of the Button.
-     * Use with the `toggleable` property.
-     * @default false
-     */
-    selected = false;
-    /**
-     * Specifies the background and border styles of the Button.
-     * Accepts a `ButtonFillMode` value.
-     * @default 'solid'
-     */
-    fillMode = 'solid';
-    /**
-     * Specifies the border radius of the Button.
-     * Accepts a `ButtonRounded` value.
-     *
-     * @default 'medium'
-     */
-    rounded = 'medium';
-    /**
-     * Specifies the predefined theme color of the Button.
-     * Accepts a `ButtonThemeColor` value.
-     * @default 'base'
-     */
-    themeColor = 'base';
-    /**
-     * 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 or multiple classes to be 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.
-     * Accepts 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 for an image to be rendered inside the Button.
-     * The URL can be relative or absolute.
-     */
-    set imageUrl(imageUrl) {
-        this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
-        this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
-    }
-    /**
-     * Fires each time the Button is clicked.
-     */
-    click = new EventEmitter();
-    /**
-     * Fires when the Button's `pointerdown` event is triggered.
-     */
-    pointerdown = new EventEmitter();
-    /**
-     * Fires each time the selected state of a toggleable Button is changed.
-     * The event argument is the new selected state (Boolean).
-     */
-    selectedChange = new EventEmitter();
-    toolbarOptions = {
-        text: '',
-        icon: '',
-        iconClass: '',
-        svgIcon: null,
-        imageUrl: ''
-    };
-    overflowOptions = {
-        text: '',
-        icon: '',
-        iconClass: '',
-        svgIcon: null,
-        imageUrl: ''
-    };
-    /**
-     * @hidden
-     */
-    hasBadgeContainer = false;
-    /**
-     * @hidden
-     */
-    showBadge = false;
-    toolbarButtonElement;
-    sectionButtonElement;
-    overflowButtonElement;
-    _showText;
-    _showIcon;
-    _text;
-    propertyChangeSub;
-    constructor(element, zone, host) {
-        super();
-        this.element = element;
-        this.zone = zone;
-        this.host = host;
-        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() {
-        this.propertyChangeSub.unsubscribe();
-        this.propertyChangeSub = null;
-    }
-    ngOnChanges(changes) {
-        if (changes['rounded']) {
-            this.rounded = changes['rounded'].currentValue;
-        }
-        if (changes['themeColor']) {
-            this.themeColor = changes['themeColor'].currentValue;
-        }
-        if (changes['showText']) {
-            this.showText = changes['showText'].currentValue;
-        }
-    }
-    /**
-     * @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({ preventScroll: true });
-        }
-        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);
-    }
-    /**
-     * @hidden
-     */
-    getButton() {
-        return this[`${this.location}ButtonElement`]?.nativeElement;
-    }
-    setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            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: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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", rounded: "rounded", 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: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-          @if (hasBadgeContainer) {
-            <kendo-badge-container>
-              <button
-                #toolbarButton
-                [class.k-toolbar-button]="!toggleable"
-                [class.k-toolbar-toggle-button]="toggleable"
-                [tabindex]="tabIndex"
-                type="button"
-                kendoButton
-                [size]="size"
-                [ngStyle]="style"
-                [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [rounded]="rounded"
-                [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>
-              @if (showBadge) {
-                <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
-              }
-            </kendo-badge-container>
-          }
-
-          @if (!hasBadgeContainer) {
-            <button
-              #toolbarButton
-              [class.k-toolbar-button]="!toggleable"
-              [class.k-toolbar-toggle-button]="toggleable"
-              [tabindex]="tabIndex"
-              type="button"
-              kendoButton
-              [size]="size"
-              [ngStyle]="style"
-              [ngClass]="className"
-              [attr.title]="title"
-              [disabled]="disabled"
-              [toggleable]="toggleable"
-              [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
-              [rounded]="rounded"
-              [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"
-              >
-              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
-                <kendo-icon-wrapper
-                  [name]="overflowOptions.icon"
-                  [customFontClass]="overflowOptions.iconClass"
-                  [svgIcon]="overflowOptions.svgIcon"
-                ></kendo-icon-wrapper>
-              }
-              @if (overflowOptions.imageUrl) {
-                <span class="k-icon k-button-icon">
-                  <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
-                </span>
-              }
-              @if (overflowOptions.text) {
-                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
-              }
-            </span>
-          </div>
-        </ng-template>
-        <ng-template #sectionTemplate>
-          @if (hasBadgeContainer) {
-            <kendo-badge-container>
-              <button
-                #sectionButton
-                [class.k-toolbar-button]="!toggleable"
-                [class.k-toolbar-toggle-button]="toggleable"
-                [tabindex]="tabIndex"
-                type="button"
-                kendoButton
-                [size]="size"
-                [ngStyle]="style"
-                [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [rounded]="rounded"
-                [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>
-              @if (showBadge) {
-                <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
-              }
-            </kendo-badge-container>
-          }
-          @if (!hasBadgeContainer) {
-            <button
-              #sectionButton
-              [class.k-toolbar-button]="!toggleable"
-              [class.k-toolbar-toggle-button]="toggleable"
-              [tabindex]="tabIndex"
-              type="button"
-              kendoButton
-              [size]="size"
-              [ngStyle]="style"
-              [ngClass]="className"
-              [attr.title]="title"
-              [disabled]="disabled"
-              [toggleable]="toggleable"
-              [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
-              [rounded]="rounded"
-              [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>
-        `, 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: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoToolBarButton',
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }],
-                    selector: 'kendo-toolbar-button',
-                    template: `
-        <ng-template #toolbarTemplate>
-          @if (hasBadgeContainer) {
-            <kendo-badge-container>
-              <button
-                #toolbarButton
-                [class.k-toolbar-button]="!toggleable"
-                [class.k-toolbar-toggle-button]="toggleable"
-                [tabindex]="tabIndex"
-                type="button"
-                kendoButton
-                [size]="size"
-                [ngStyle]="style"
-                [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [rounded]="rounded"
-                [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>
-              @if (showBadge) {
-                <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
-              }
-            </kendo-badge-container>
-          }
-
-          @if (!hasBadgeContainer) {
-            <button
-              #toolbarButton
-              [class.k-toolbar-button]="!toggleable"
-              [class.k-toolbar-toggle-button]="toggleable"
-              [tabindex]="tabIndex"
-              type="button"
-              kendoButton
-              [size]="size"
-              [ngStyle]="style"
-              [ngClass]="className"
-              [attr.title]="title"
-              [disabled]="disabled"
-              [toggleable]="toggleable"
-              [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
-              [rounded]="rounded"
-              [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"
-              >
-              @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
-                <kendo-icon-wrapper
-                  [name]="overflowOptions.icon"
-                  [customFontClass]="overflowOptions.iconClass"
-                  [svgIcon]="overflowOptions.svgIcon"
-                ></kendo-icon-wrapper>
-              }
-              @if (overflowOptions.imageUrl) {
-                <span class="k-icon k-button-icon">
-                  <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
-                </span>
-              }
-              @if (overflowOptions.text) {
-                <span class="k-menu-link-text">{{overflowOptions.text}}</span>
-              }
-            </span>
-          </div>
-        </ng-template>
-        <ng-template #sectionTemplate>
-          @if (hasBadgeContainer) {
-            <kendo-badge-container>
-              <button
-                #sectionButton
-                [class.k-toolbar-button]="!toggleable"
-                [class.k-toolbar-toggle-button]="toggleable"
-                [tabindex]="tabIndex"
-                type="button"
-                kendoButton
-                [size]="size"
-                [ngStyle]="style"
-                [ngClass]="className"
-                [attr.title]="title"
-                [disabled]="disabled"
-                [toggleable]="toggleable"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [rounded]="rounded"
-                [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>
-              @if (showBadge) {
-                <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
-              }
-            </kendo-badge-container>
-          }
-          @if (!hasBadgeContainer) {
-            <button
-              #sectionButton
-              [class.k-toolbar-button]="!toggleable"
-              [class.k-toolbar-toggle-button]="toggleable"
-              [tabindex]="tabIndex"
-              type="button"
-              kendoButton
-              [size]="size"
-              [ngStyle]="style"
-              [ngClass]="className"
-              [attr.title]="title"
-              [disabled]="disabled"
-              [toggleable]="toggleable"
-              [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
-              [rounded]="rounded"
-              [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>
-        `,
-                    standalone: true,
-                    imports: [ButtonComponent, NgStyle, NgClass, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.ToolBarComponent }], 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
-            }], rounded: [{
-                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
-            }], toolbarButtonElement: [{
-                type: ViewChild,
-                args: ['toolbarButton', { read: ElementRef }]
-            }], sectionButtonElement: [{
-                type: ViewChild,
-                args: ['sectionButton', { read: ElementRef }]
-            }], overflowButtonElement: [{
-                type: ViewChild,
-                args: ['overflowButton', { read: ElementRef }]
-            }] } });