@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
195 lines (194 loc) • 7.46 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 { 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).
*
* Use this component to add a button that opens a popup with a list of items in the ToolBar.
*
* @example
* ```html
* <kendo-toolbar>
* <kendo-toolbar-dropdownbutton text="Paste Variations" [data]="data">
* </kendo-toolbar-dropdownbutton>
* </kendo-toolbar>
* ```
*
*/
export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent implements OnInit {
private zone;
private renderer;
private host;
/**
* Shows the default arrow icon or lets you provide a custom one.
* @default false
*/
arrowIcon: boolean | ArrowIconSettings;
/**
* Sets the `title` attribute of the underlying button element.
* @default ''
*/
title: string;
/**
* Controls the button text visibility.
* @default 'always'
*/
set showText(value: DisplayMode);
get showText(): DisplayMode;
/**
* Controls the button icon visibility.
* @default 'always'
*/
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;
/**
* Sets the icon rendered next to the button text.
*/
set icon(icon: string);
/**
* Sets the `SVGIcon` rendered in the button.
* Accepts an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
*/
set svgIcon(icon: SVGIcon);
/**
* Sets a custom CSS class icon rendered next to the button text.
*/
set iconClass(iconClass: string);
/**
* Sets a URL for the image displayed next to the button text.
*/
set imageUrl(imageUrl: string);
/**
* Configures the popup of the DropDownButton.
* Accepts a `PopupSettings` object that allows you to customize the popup behavior and appearance.
*/
set popupSettings(settings: PopupSettings);
get popupSettings(): PopupSettings;
/**
* @hidden
*/
set look(look: 'default' | 'flat' | 'outline');
/**
* @hidden
*/
set primary(primary: boolean);
/**
* Sets the fill mode for the button.
* The fill mode represents the background and border styles.
* @default 'solid'
*/
fillMode: ButtonFillMode;
/**
* Sets the predefined theme color for the button.
* The theme color applies to the background, border, and text
* ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
* @default 'base'
*/
themeColor: ButtonThemeColor;
/**
* Sets the CSS classes for the main button.
* Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
*/
buttonClass: string;
/**
* Sets the data item field that repesents the item text.
* If the data contains only primitive values, do not set this property.
*/
textField: string;
/**
* When `true`, disables the DropDownButton.
*/
disabled: boolean;
/**
* Sets the data of the DropDownButton
* ([see example](slug:controltypes_toolbar#drop-down-buttons)).
*
* > Provide the data as 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 clicked item's data.
*/
itemClick: EventEmitter<any>;
/**
* Fires when the popup is about to open.
* This event is preventable. If you cancel the event, the popup stays closed.
*/
open: EventEmitter<PreventableEvent>;
/**
* Fires when the popup is about to close.
* This event is preventable. If you cancel the event, the popup stays 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>;
}