@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
196 lines (195 loc) • 7.82 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { EventEmitter, ElementRef, NgZone } from '@angular/core';
import { ToolBarToolComponent } from './toolbar-tool.component';
import { DisplayMode } from '../display-mode';
import { ToolOptions } from '../tool-options';
import { ButtonFillMode, ButtonThemeColor } from '@progress/kendo-angular-buttons';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { ToolBarComponent } from '../toolbar.component';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
*/
export declare class ToolBarButtonComponent extends ToolBarToolComponent {
element: ElementRef;
private zone;
host: ToolBarComponent;
/**
* Specifies the button text visibility.
*/
set showText(value: DisplayMode);
get showText(): DisplayMode;
/**
* Specifies the button icon visibility.
*/
set showIcon(value: DisplayMode);
get showIcon(): DisplayMode;
/**
* Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
*/
set text(text: string);
get text(): string;
/**
* @hidden
*/
get size(): any;
/**
* Specifies custom inline CSS styles of the Button.
*/
style: {
[key: string]: string | number;
};
/**
* Specifies custom CSS class names that will be added to the Button.
*/
className: string | Array<string> | {
[key: string]: boolean;
};
/**
* Specifies the title of the Button.
*/
title: string;
/**
* If `disabled` is set to `true`, the Button is disabled
* ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
*/
disabled: boolean;
/**
* 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: boolean;
/**
* @hidden
*/
set look(look: 'default' | 'flat' | 'outline');
/**
* @hidden
*/
get togglable(): boolean;
set togglable(value: boolean);
/**
* Sets the selected state of the Button.
*/
selected: boolean;
/**
* The fillMode property specifies the background and border styles of the Button.
*
* The available values are:
* * `solid` (default)
* * `flat`
* * `outline`
* * `link`
* * `null`
*/
fillMode: ButtonFillMode;
/**
* 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: ButtonThemeColor;
/**
* 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: string);
/**
* 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: string);
/**
* 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: SVGIcon);
/**
* 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: string);
/**
* Fires each time the Button is clicked.
*/
click: EventEmitter<any>;
/**
* Fires when the Button [pointerdown](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event) event is triggered.
*/
pointerdown: EventEmitter<any>;
/**
* Fires each time the selected state of a Toggle Button is changed.
* The event argument is the new selected state (Boolean).
*/
selectedChange: EventEmitter<any>;
toolbarOptions: ToolOptions;
overflowOptions: ToolOptions;
/**
* @hidden
*/
hasBadgeContainer: boolean;
/**
* @hidden
*/
showBadge: boolean;
toolbarButtonElement: ElementRef;
sectionButtonElement: ElementRef;
private overflowButtonElement;
private _showText;
private _showIcon;
private _text;
private propertyChangeSub;
constructor(element: ElementRef, zone: NgZone, host: ToolBarComponent);
ngOnInit(): void;
ngOnDestroy(): void;
/**
* @hidden
*/
onBlur(): void;
/**
* @hidden
*/
canFocus(): boolean;
/**
* @hidden
*/
focus(ev: Event): void;
/**
* @hidden
*/
handleKey(): boolean;
/**
* @hidden
*/
handleClick(ev: Event): void;
/**
* @hidden
*/
selectedChangeHandler(state: boolean): void;
/**
* @hidden
*/
getButton(): HTMLElement;
private setTextDisplayMode;
static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarButtonComponent, "kendo-toolbar-button", ["kendoToolBarButton"], { "showText": { "alias": "showText"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "style": { "alias": "style"; "required": false; }; "className": { "alias": "className"; "required": false; }; "title": { "alias": "title"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "look": { "alias": "look"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; }, { "click": "click"; "pointerdown": "pointerdown"; "selectedChange": "selectedChange"; }, never, never, true, never>;
}