@progress/kendo-angular-buttons

/**----------------------------------------------------------------------------------------- * 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, NgZone, ChangeDetectorRef, AfterViewInit, Renderer2 } from '@angular/core'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { PopupService } from '@progress/kendo-angular-popup'; import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive'; import { Direction } from '../direction'; import { ListButton } from '../listbutton/list-button'; import { FocusService } from '../focusable/focus.service'; import { NavigationService } from '../navigation/navigation.service'; import { ArrowIconSettings, ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models'; import { PopupContainerService } from '../listbutton/container.service'; import { SVGIcon } from '@progress/kendo-svg-icons'; import * as i0 from "@angular/core"; /** * Represents the Kendo UI DropDownButton component for Angular. * * @example * ```ts * _@Component({ * selector: 'my-app', * template: ` * <kendo-dropdownbutton [data]="data"> * User Settings * </kendo-dropdownbutton> * ` * }) * class AppComponent { * public data: Array<any> = [{ * text: 'My Profile' * }, { * text: 'Friend Requests' * }, { * text: 'Account Settings' * }, { * text: 'Support' * }, { * text: 'Log Out' * }]; * } * ``` */ export declare class DropDownButtonComponent extends ListButton implements AfterViewInit { protected containerService: PopupContainerService; private renderer; /** * Allows showing the default arrow icon or providing alternative one instead. * @default false */ arrowIcon: boolean | ArrowIconSettings; /** * Defines the name of an existing icon in the Kendo UI theme. */ icon: string; /** * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the button. */ svgIcon: SVGIcon; /** * Defines the list of CSS classes which are used for styling the Button with custom icons. */ iconClass: string; /** * Defines a URL for styling the button with a custom image. */ imageUrl: 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 or gets the data of the DropDownButton. * * > The data has to be provided in an array-like list. */ set data(data: any); get data(): any; /** * The size property specifies the padding of the DropDownButton * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)). * * The possible values are: * * `small` * * `medium` (default) * * `large` * * `none` */ size: ButtonSize; /** * The rounded property specifies the border radius of the DropDownButton * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)). * * The possible values are: * * `small` * * `medium` (default) * * `large` * * `full` * * `none` */ rounded: ButtonRounded; /** * The fillMode property specifies the background and border styles of the DropDownButton * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)). * * The available values are: * * `solid` (default) * * `flat` * * `outline` * * `link` * * `none` */ set fillMode(fillMode: ButtonFillMode); get fillMode(): ButtonFillMode; /** * The DropDownButton 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. * * `none` —Removes the default CSS class (no class would be rendered). */ themeColor: ButtonThemeColor; /** * Sets attributes to the main button. */ set buttonAttributes(buttonAttributes: { [key: string]: string; }); get buttonAttributes(): { [key: string]: string; }; /** * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item. */ itemClick: EventEmitter<any>; /** * Fires each time the DropDownButton gets focused. */ onFocus: EventEmitter<any>; /** * Fires each time the DropDownButton gets blurred. */ onBlur: EventEmitter<any>; get focused(): boolean; hostDisplayStyle: string; get dir(): Direction; /** * @hidden */ get active(): boolean; itemTemplate: ButtonItemTemplateDirective; private _fillMode; private _buttonAttributes; private documentMouseUpSub; /** * @hidden */ keydown(event: any): void; /** * @hidden */ keyup(event: any): void; /** * @hidden */ mousedown(event: any): void; /** * @hidden */ mouseup(event: any): void; /** * @hidden */ openPopup(): void; /** * @hidden */ onButtonBlur(): void; /** * Focuses the DropDownButton component. */ focus(): void; /** * Blurs the DropDownButton component. */ blur(): void; constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef, containerService: PopupContainerService, renderer: Renderer2); ngAfterViewInit(): void; /** * @hidden */ handleFocus(event: FocusEvent): void; /** * @hidden */ wrapperContains(element: any): boolean; private handleButtonAttributes; /** * @hidden */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<DropDownButtonComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DropDownButtonComponent, "kendo-dropdownbutton", ["kendoDropDownButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "buttonAttributes": { "alias": "buttonAttributes"; "required": false; }; }, { "itemClick": "itemClick"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate"], ["*"], true, never>; }