@progress/kendo-angular-buttons/dropdownbutton/dropdownbutton.component.d.ts

Buttons Package for Angular

/**-----------------------------------------------------------------------------------------
* 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.
 *
 * Use the DropDownButton to display a button with a popup list of actions.
 *
 * @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;
    /**
     * Displays the default arrow icon or a custom one.
     * @default false
     */
    arrowIcon: boolean | ArrowIconSettings;
    /**
     * Specifies the name of an existing icon in the Kendo UI theme.
     */
    icon: string;
    /**
     * Specifies an [`SVGIcon`](slug:api_icons_svgicon) to render within the button.
     */
    svgIcon: SVGIcon;
    /**
     * Specifies a list of CSS classes for styling the button with custom icons.
     */
    iconClass: string;
    /**
     * Specifies 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, leave this undefined.
     */
    textField: string;
    /**
     * Sets or gets the data of the DropDownButton. Provide the data as an array-like list.
     */
    set data(data: any);
    get data(): any;
    /**
     * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#size).
     * @default 'medium'
     */
    size: ButtonSize;
    /**
     * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#roundness).
     * @default 'medium'
     */
    rounded: ButtonRounded;
    /**
     * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#fill-mode).
     * @default 'solid'
     */
    set fillMode(fillMode: ButtonFillMode);
    get fillMode(): ButtonFillMode;
    /**
     * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#theme-colors).
     * @default 'base'
     */
    themeColor: ButtonThemeColor;
    /**
     * Sets attributes for the main button.
     */
    set buttonAttributes(buttonAttributes: {
        [key: string]: string;
    });
    get buttonAttributes(): {
        [key: string]: string;
    };
    /**
     * Fires when the user clicks a drop-down list item.
     * The event data contains the data item bound to the clicked list item.
     */
    itemClick: EventEmitter<any>;
    /**
     * Fires when the DropDownButton is focused.
     */
    onFocus: EventEmitter<any>;
    /**
     * Fires when the DropDownButton is 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.
     */
    focus(): void;
    /**
     * Blurs the DropDownButton.
     */
    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>;
}