UNPKG

@progress/kendo-angular-toolbar

Version:

Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements

206 lines (205 loc) 8.76 kB
/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { ElementRef, EventEmitter, OnInit, QueryList } from '@angular/core'; import { ButtonFillMode, ButtonThemeColor } from '@progress/kendo-angular-buttons'; import { ToolBarToolComponent } from './toolbar-tool.component'; import { PopupSettings } from '../popup-settings'; import { DisplayMode } from '../display-mode'; import { ToolOptions } from '../tool-options'; import { PreventableEvent } 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 SplitButton for Angular](slug:controltypes_toolbar#toc-split-buttons). */ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent implements OnInit { private host; /** * Specifies the button text visibility. */ set showText(value: DisplayMode); get showText(): DisplayMode; /** * Specifies the button icon visibility. */ set showIcon(value: DisplayMode); get showIcon(): DisplayMode; /** * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)). */ set text(text: string); get text(): string; /** * Defines the icon that will be rendered next to the button text * ([see example](slug:controltypes_toolbar#toc-split-buttons)). */ set icon(icon: string); /** * 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: SVGIcon); /** * Defines an icon with a custom CSS class that will be rendered next to the button text. */ set iconClass(iconClass: string); /** * Defines the location of an image that will be displayed next to the button text. */ set imageUrl(imageUrl: string); /** * When set to `true`, disables a SplitButton item. */ disabled: boolean; /** * 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: PopupSettings); get popupSettings(): PopupSettings; /** * 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. * * 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). */ themeColor: ButtonThemeColor; /** * @hidden */ set look(look: 'default' | 'flat' | 'outline'); /** * The CSS classes that will be rendered on the main button. * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']). */ buttonClass: string; /** * The CSS classes that will be rendered on the button which opens the popup. * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']). */ arrowButtonClass: any; /** * Specifies the name of the [font icon](slug:icons#icons-list) that will * be rendered for the button which opens the popup. */ arrowButtonIcon: string; /** * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will * be rendered for the button which opens the popup. */ arrowButtonSvgIcon: SVGIcon; /** * Configures the text field of the button-list popup. */ textField: string; /** * Sets the data of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)). * * > The data has to be provided in an array-like list. */ set data(data: any[]); get data(): any[]; /** * Fires each time the user clicks the main button. */ buttonClick: EventEmitter<any>; /** * 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. */ itemClick: EventEmitter<any>; /** * Fires each time the popup is about to open. * This event is preventable. If you cancel the event, the popup will remain closed. */ open: EventEmitter<PreventableEvent>; /** * Fires each time the popup is about to close. * This event is preventable. If you cancel the event, the popup will remain open. */ close: EventEmitter<PreventableEvent>; toolbarOptions: ToolOptions; overflowOptions: ToolOptions; ngOnInit(): void; ngOnDestroy(): void; private get overflowButtons(); private _data; private _popupSettings; private focusedIndex; private _showText; private _showIcon; private _text; private propertyChangeSub; private getNextKey; private getPrevKey; private toolbarSplitButton; private sectionSplitButton; private overflowMainButton; overflowListItems: QueryList<ElementRef>; constructor(host: ToolBarComponent); /** * @hidden */ onButtonListClick(ev: MouseEvent): void; /** * @hidden */ onMainButtonClick(ev: MouseEvent): void; /** * @hidden */ canFocus(): boolean; /** * @hidden */ get size(): any; /** * @hidden */ focus(ev?: Partial<Event>): void; /** * @hidden */ handleKey(ev: any): boolean; /** * @hidden */ getText(dataItem: any): any; /** * @hidden */ handleClick(ev: any, item: any, index: number): void; private focusButton; private setTextDisplayMode; static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarSplitButtonComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarSplitButtonComponent, "kendo-toolbar-splitbutton", ["kendoToolBarSplitButton"], { "showText": { "alias": "showText"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "look": { "alias": "look"; "required": false; }; "buttonClass": { "alias": "buttonClass"; "required": false; }; "arrowButtonClass": { "alias": "arrowButtonClass"; "required": false; }; "arrowButtonIcon": { "alias": "arrowButtonIcon"; "required": false; }; "arrowButtonSvgIcon": { "alias": "arrowButtonSvgIcon"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "buttonClick": "buttonClick"; "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never, true, never>; }