@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
648 lines (645 loc) • 27.1 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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, NgIf } 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).
*/
export class ToolBarButtonComponent extends ToolBarToolComponent {
element;
zone;
host;
// showText and showIcon showIcon should be declared first
/**
* Specifies the button text visibility.
*/
set showText(value) {
this._showText = value;
this.setTextDisplayMode();
}
get showText() {
return this._showText;
}
/**
* Specifies the button icon visibility.
*/
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 of the Button.
*/
style;
/**
* Specifies custom CSS class names that will be added to the Button.
*/
className;
/**
* Specifies the title of the Button.
*/
title;
/**
* If `disabled` is set to `true`, the Button is disabled
* ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
*/
disabled;
/**
* 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`.
*/
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.
*/
selected = false;
/**
* The fillMode property specifies the background and border styles of the Button.
*
* The available values are:
* * `solid` (default)
* * `flat`
* * `outline`
* * `link`
* * `null`
*/
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` —Applies coloring based on the `base` theme color. (default)
* * `primary` —Applies coloring based on the `primary` theme color.
* * `secondary`—Applies coloring based on the `secondary` theme color.
* * `tertiary`— Applies coloring based on the `tertiary` theme color.
* * `info`—Applies coloring based on the `info` theme color.
* * `success`— Applies coloring based on the `success` theme color.
* * `warning`— Applies coloring based on the `warning` theme color.
* * `error`— Applies coloring based on the `error` theme color.
* * `dark`— Applies coloring based on the `dark` theme color.
* * `light`— Applies coloring based on the `light` theme color.
* * `inverse`— Applies coloring based on the `inverse` theme color.
* * `null` —Removes the default CSS class (no class would be rendered).
*/
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 separated by spaces—
* 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);
}
/**
* Fires each time the Button is clicked.
*/
click = new EventEmitter();
/**
* Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
*/
pointerdown = new EventEmitter();
/**
* Fires each time the selected state of a Toggle 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;
}
/**
* @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);
}
/**
* @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: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "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, ngImport: i0, template: `
<ng-template
<kendo-badge-container *ngIf="hasBadgeContainer">
<button
[]="!toggleable"
[]="toggleable"
[]="tabIndex"
type="button"
kendoButton
[]="size"
[]="style"
[]="className"
[]="title"
[]="disabled"
[]="toggleable"
[]="fillMode"
[]="fillMode ? themeColor : null"
[]="selected"
[]="toolbarOptions.icon"
[]="toolbarOptions.iconClass"
[]="toolbarOptions.svgIcon"
[]="toolbarOptions.imageUrl"
(click)="click.emit($event)"
(pointerdown)="pointerdown.emit($event)"
(selectedChange)="selectedChangeHandler($event)"
(blur)="onBlur()"
>
{{ toolbarOptions.text }}
</button>
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
</kendo-badge-container>
<button *ngIf="!hasBadgeContainer"
[]="!toggleable"
[]="toggleable"
[]="tabIndex"
type="button"
kendoButton
[]="size"
[]="style"
[]="className"
[]="title"
[]="disabled"
[]="toggleable"
[]="fillMode"
[]="fillMode ? themeColor : null"
[]="selected"
[]="toolbarOptions.icon"
[]="toolbarOptions.iconClass"
[]="toolbarOptions.svgIcon"
[]="toolbarOptions.imageUrl"
(click)="click.emit($event)"
(pointerdown)="pointerdown.emit($event)"
(selectedChange)="selectedChangeHandler($event)"
(blur)="onBlur()"
>
{{ toolbarOptions.text }}
</button>
</ng-template>
<ng-template
<div
tabindex="-1"
role="menuitem"
class="k-item k-menu-item"
[]="disabled"
[]="className"
[]="style"
(click)="handleClick($event)">
<span
class="k-link k-menu-link"
[]="selected"
>
<kendo-icon-wrapper
*ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
[]="overflowOptions.icon"
[]="overflowOptions.iconClass"
[]="overflowOptions.svgIcon"
></kendo-icon-wrapper>
<span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
</span>
</div>
</ng-template>
<ng-template
<kendo-badge-container *ngIf="hasBadgeContainer">
<button
[]="!toggleable"
[]="toggleable"
[]="tabIndex"
type="button"
kendoButton
[]="size"
[]="style"
[]="className"
[]="title"
[]="disabled"
[]="toggleable"
[]="fillMode"
[]="fillMode ? themeColor : null"
[]="selected"
[]="toolbarOptions.icon"
[]="toolbarOptions.iconClass"
[]="toolbarOptions.svgIcon"
[]="toolbarOptions.imageUrl"
(click)="click.emit($event)"
(pointerdown)="pointerdown.emit($event)"
(selectedChange)="selectedChangeHandler($event)"
(blur)="onBlur()"
>
{{ toolbarOptions.text }}
</button>
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
</kendo-badge-container>
<button
*ngIf="!hasBadgeContainer"
[]="!toggleable"
[]="toggleable"
[]="tabIndex"
type="button"
kendoButton
[]="size"
[]="style"
[]="className"
[]="title"
[]="disabled"
[]="toggleable"
[]="fillMode"
[]="fillMode ? themeColor : null"
[]="selected"
[]="toolbarOptions.icon"
[]="toolbarOptions.iconClass"
[]="toolbarOptions.svgIcon"
[]="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: "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: "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: "16.2.12", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoToolBarButton',
providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }],
selector: 'kendo-toolbar-button',
template: `
<ng-template
<kendo-badge-container *ngIf="hasBadgeContainer">
<button
[]="!toggleable"
[]="toggleable"
[]="tabIndex"
type="button"
kendoButton
[]="size"
[]="style"
[]="className"
[]="title"
[]="disabled"
[]="toggleable"
[]="fillMode"
[]="fillMode ? themeColor : null"
[]="selected"
[]="toolbarOptions.icon"
[]="toolbarOptions.iconClass"
[]="toolbarOptions.svgIcon"
[]="toolbarOptions.imageUrl"
(click)="click.emit($event)"
(pointerdown)="pointerdown.emit($event)"
(selectedChange)="selectedChangeHandler($event)"
(blur)="onBlur()"
>
{{ toolbarOptions.text }}
</button>
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
</kendo-badge-container>
<button *ngIf="!hasBadgeContainer"
[]="!toggleable"
[]="toggleable"
[]="tabIndex"
type="button"
kendoButton
[]="size"
[]="style"
[]="className"
[]="title"
[]="disabled"
[]="toggleable"
[]="fillMode"
[]="fillMode ? themeColor : null"
[]="selected"
[]="toolbarOptions.icon"
[]="toolbarOptions.iconClass"
[]="toolbarOptions.svgIcon"
[]="toolbarOptions.imageUrl"
(click)="click.emit($event)"
(pointerdown)="pointerdown.emit($event)"
(selectedChange)="selectedChangeHandler($event)"
(blur)="onBlur()"
>
{{ toolbarOptions.text }}
</button>
</ng-template>
<ng-template
<div
tabindex="-1"
role="menuitem"
class="k-item k-menu-item"
[]="disabled"
[]="className"
[]="style"
(click)="handleClick($event)">
<span
class="k-link k-menu-link"
[]="selected"
>
<kendo-icon-wrapper
*ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
[]="overflowOptions.icon"
[]="overflowOptions.iconClass"
[]="overflowOptions.svgIcon"
></kendo-icon-wrapper>
<span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
</span>
</div>
</ng-template>
<ng-template
<kendo-badge-container *ngIf="hasBadgeContainer">
<button
[]="!toggleable"
[]="toggleable"
[]="tabIndex"
type="button"
kendoButton
[]="size"
[]="style"
[]="className"
[]="title"
[]="disabled"
[]="toggleable"
[]="fillMode"
[]="fillMode ? themeColor : null"
[]="selected"
[]="toolbarOptions.icon"
[]="toolbarOptions.iconClass"
[]="toolbarOptions.svgIcon"
[]="toolbarOptions.imageUrl"
(click)="click.emit($event)"
(pointerdown)="pointerdown.emit($event)"
(selectedChange)="selectedChangeHandler($event)"
(blur)="onBlur()"
>
{{ toolbarOptions.text }}
</button>
<kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
</kendo-badge-container>
<button
*ngIf="!hasBadgeContainer"
[]="!toggleable"
[]="toggleable"
[]="tabIndex"
type="button"
kendoButton
[]="size"
[]="style"
[]="className"
[]="title"
[]="disabled"
[]="toggleable"
[]="fillMode"
[]="fillMode ? themeColor : null"
[]="selected"
[]="toolbarOptions.icon"
[]="toolbarOptions.iconClass"
[]="toolbarOptions.svgIcon"
[]="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, NgIf, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
}]
}], ctorParameters: function () { return [{ 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
}], 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 }]
}] } });