@progress/kendo-angular-toolbar

/**----------------------------------------------------------------------------------------- * 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, Renderer2, NgZone } from '@angular/core'; import { ToolBarToolComponent } from './toolbar-tool.component'; import { PopupSettings } from '../popup-settings'; import { ArrowIconSettings, ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@progress/kendo-angular-buttons'; 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 DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons). */ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent implements OnInit { private zone; private renderer; private host; /** * Allows showing the default arrow icon or providing alternative one instead. * @default false */ arrowIcon: boolean | ArrowIconSettings; /** * Sets the `title` attribute of the underlying button element. * @default '' */ title: string; /** * 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 DropDownButton * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons)). */ set text(text: string); get text(): string; /** * Defines an icon that will be rendered next to the button text. */ set icon(icon: 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 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); /** * Configures the popup of the DropDownButton. * * The available options are: * - `animate:Boolean`—Controls the popup animation. By default, the open and close animations are enabled. * - `popupClass:String`—Specifies a list of CSS classes that are used to style the popup. */ set popupSettings(settings: PopupSettings); get popupSettings(): PopupSettings; /** * @hidden */ set look(look: 'default' | 'flat' | 'outline'); /** * @hidden */ set primary(primary: 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; /** * 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; /** * Sets the data item field that represents the item text. * If the data contains only primitive values, do not define it. */ textField: string; /** * Sets the disabled state of the DropDownButton. */ disabled: boolean; /** * Sets the data of the DropDownButton * ([see example](slug:controltypes_toolbar#drop-down-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 a DropDownButton item. * 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>; dropdownButton: ElementRef; toolbarDropDownButton: DropDownButtonComponent; sectionDropDownButton: DropDownButtonComponent; overflowListItems: QueryList<ElementRef>; toolbarOptions: ToolOptions; overflowOptions: ToolOptions; private get overflowButtons(); private _data; private _popupSettings; private focusedIndex; private _showText; private _showIcon; private _text; private propertyChangeSub; private getNextKey; private getPrevKey; constructor(zone: NgZone, renderer: Renderer2, host: ToolBarComponent); ngOnInit(): void; ngOnDestroy(): void; ngAfterViewInit(): void; /** * @hidden */ onButtonListClick(ev: MouseEvent): void; /** * @hidden */ get size(): any; /** * @hidden */ canFocus(): boolean; /** * @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<ToolBarDropDownButtonComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarDropDownButtonComponent, "kendo-toolbar-dropdownbutton", ["kendoToolBarDropDownButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "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; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "look": { "alias": "look"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "buttonClass": { "alias": "buttonClass"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; }, never, never, true, never>; }