devextreme-angular

/*! * devextreme-angular * Version: 24.2.6 * Build date: Mon Mar 17 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-angular */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core'; import DataSource from 'devextreme/data/data_source'; import { dxDropDownButtonItem, ButtonClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, OptionChangedEvent, SelectionChangedEvent } from 'devextreme/ui/drop_down_button'; import { DataSourceOptions } from 'devextreme/data/data_source'; import { Store } from 'devextreme/data/store'; import { dxPopupOptions } from 'devextreme/ui/popup'; import { ButtonStyle, ButtonType } from 'devextreme/common'; import DxDropDownButton from 'devextreme/ui/drop_down_button'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core'; import { DxiItemComponent } from 'devextreme-angular/ui/nested'; import { DxiDropDownButtonItemComponent } from 'devextreme-angular/ui/drop-down-button/nested'; import type * as DxDropDownButtonTypes from "devextreme/ui/drop_down_button_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/drop-down-button/nested"; import * as i3 from "devextreme-angular/core"; /** * The DropDownButton is a button that opens a drop-down menu. */ export declare class DxDropDownButtonComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; instance: DxDropDownButton; /** * Specifies the shortcut key that sets focus on the UI component. */ get accessKey(): string | undefined; set accessKey(value: string | undefined); /** * Specifies whether the UI component changes its visual state as a result of user interaction. */ get activeStateEnabled(): boolean; set activeStateEnabled(value: boolean); /** * Provides data for the drop-down menu. */ get dataSource(): Array<any | dxDropDownButtonItem> | DataSource | DataSourceOptions | null | Store | string; set dataSource(value: Array<any | dxDropDownButtonItem> | DataSource | DataSourceOptions | null | Store | string); /** * Specifies whether to wait until the drop-down menu is opened the first time to render its content. Specifies whether to render the view's content when it is displayed. If false, the content is rendered immediately. */ get deferRendering(): boolean; set deferRendering(value: boolean); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Specifies the data field whose values should be displayed in the drop-down menu. */ get displayExpr(): ((itemData: any) => string) | string | undefined; set displayExpr(value: ((itemData: any) => string) | string | undefined); /** * Specifies custom content for the drop-down field. */ get dropDownContentTemplate(): any; set dropDownContentTemplate(value: any); /** * Configures the drop-down field. */ get dropDownOptions(): dxPopupOptions<any>; set dropDownOptions(value: dxPopupOptions<any>); /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr(): Record<string, any>; set elementAttr(value: Record<string, any>); /** * Specifies whether users can use keyboard to focus the UI component. */ get focusStateEnabled(): boolean; set focusStateEnabled(value: boolean); /** * Specifies the UI component's height. */ get height(): (() => number | string) | number | string | undefined; set height(value: (() => number | string) | number | string | undefined); /** * Specifies text for a hint that appears when a user pauses on the UI component. */ get hint(): string | undefined; set hint(value: string | undefined); /** * Specifies whether the UI component changes its state when a user hovers the mouse pointer over it. */ get hoverStateEnabled(): boolean; set hoverStateEnabled(value: boolean); /** * Specifies the button's icon. */ get icon(): string | undefined; set icon(value: string | undefined); /** * Provides drop-down menu items. */ get items(): Array<any | dxDropDownButtonItem>; set items(value: Array<any | dxDropDownButtonItem>); /** * Specifies a custom template for drop-down menu items. */ get itemTemplate(): any; set itemTemplate(value: any); /** * Specifies which data field provides keys used to distinguish between the selected drop-down menu items. */ get keyExpr(): string; set keyExpr(value: string); /** * Specifies the text or HTML markup displayed in the drop-down menu when it does not contain any items. */ get noDataText(): string; set noDataText(value: string); /** * Specifies whether the drop-down menu is opened. */ get opened(): boolean; set opened(value: boolean); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Contains the selected item's data. Available when useSelectMode is true. */ get selectedItem(): any | number | string; set selectedItem(value: any | number | string); /** * Contains the selected item's key and allows you to specify the initially selected item. Applies when useSelectMode is true. */ get selectedItemKey(): number | string; set selectedItemKey(value: number | string); /** * Specifies whether the arrow icon should be displayed. */ get showArrowIcon(): boolean; set showArrowIcon(value: boolean); /** * Specifies whether to split the button in two: one executes an action, the other opens and closes the drop-down menu. */ get splitButton(): boolean; set splitButton(value: boolean); /** * Specifies how the button is styled. */ get stylingMode(): ButtonStyle; set stylingMode(value: ButtonStyle); /** * Specifies the number of the element when the Tab key is used for navigating. */ get tabIndex(): number; set tabIndex(value: number); /** * Specifies a custom template for the base button in DropDownButton. */ get template(): any; set template(value: any); /** * Specifies the button's text. Applies only if useSelectMode is false. */ get text(): string; set text(value: string); /** * Specifies the drop-down button type. */ get type(): ButtonType; set type(value: ButtonType); /** * Specifies whether the widget uses item's text a title attribute. */ get useItemTextAsTitle(): boolean; set useItemTextAsTitle(value: boolean); /** * Specifies whether the UI component stores the selected drop-down menu item. */ get useSelectMode(): boolean; set useSelectMode(value: boolean); /** * Specifies whether the UI component is visible. */ get visible(): boolean; set visible(value: boolean); /** * Specifies the UI component's width. */ get width(): (() => number | string) | number | string | undefined; set width(value: (() => number | string) | number | string | undefined); /** * Specifies whether text that exceeds the drop-down list width should be wrapped. */ get wrapItemText(): boolean; set wrapItemText(value: boolean); /** * A function that is executed when the button is clicked or tapped. If splitButton is true, this function is executed for the action button only. */ onButtonClick: EventEmitter<ButtonClickEvent>; /** * A function that is executed when the UI component is rendered and each time the component is repainted. */ onContentReady: EventEmitter<ContentReadyEvent>; /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter<DisposingEvent>; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter<InitializedEvent>; /** * A function that is executed when a drop-down menu item is clicked. */ onItemClick: EventEmitter<ItemClickEvent>; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter<OptionChangedEvent>; /** * A function that is executed when an item is selected or selection is canceled. In effect when useSelectMode is true. */ onSelectionChanged: EventEmitter<SelectionChangedEvent>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ accessKeyChange: EventEmitter<string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ activeStateEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dataSourceChange: EventEmitter<Array<any | dxDropDownButtonItem> | DataSource | DataSourceOptions | null | Store | string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ deferRenderingChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ displayExprChange: EventEmitter<((itemData: any) => string) | string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dropDownContentTemplateChange: EventEmitter<any>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dropDownOptionsChange: EventEmitter<dxPopupOptions<any>>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter<Record<string, any>>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ focusStateEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ heightChange: EventEmitter<(() => number | string) | number | string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hintChange: EventEmitter<string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hoverStateEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ iconChange: EventEmitter<string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ itemsChange: EventEmitter<Array<any | dxDropDownButtonItem>>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ itemTemplateChange: EventEmitter<any>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ keyExprChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ noDataTextChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ openedChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectedItemChange: EventEmitter<any | number | string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectedItemKeyChange: EventEmitter<number | string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showArrowIconChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ splitButtonChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ stylingModeChange: EventEmitter<ButtonStyle>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tabIndexChange: EventEmitter<number>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ templateChange: EventEmitter<any>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ textChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ typeChange: EventEmitter<ButtonType>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ useItemTextAsTitleChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ useSelectModeChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ visibleChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ widthChange: EventEmitter<(() => number | string) | number | string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ wrapItemTextChange: EventEmitter<boolean>; get itemsChildren(): QueryList<DxiDropDownButtonItemComponent>; set itemsChildren(value: QueryList<DxiDropDownButtonItemComponent>); get itemsLegacyChildren(): QueryList<DxiItemComponent>; set itemsLegacyChildren(value: QueryList<DxiItemComponent>); constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxDropDownButton; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration<DxDropDownButtonComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<DxDropDownButtonComponent, "dx-drop-down-button", never, { "accessKey": { "alias": "accessKey"; "required": false; }; "activeStateEnabled": { "alias": "activeStateEnabled"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "deferRendering": { "alias": "deferRendering"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "displayExpr": { "alias": "displayExpr"; "required": false; }; "dropDownContentTemplate": { "alias": "dropDownContentTemplate"; "required": false; }; "dropDownOptions": { "alias": "dropDownOptions"; "required": false; }; "elementAttr": { "alias": "elementAttr"; "required": false; }; "focusStateEnabled": { "alias": "focusStateEnabled"; "required": false; }; "height": { "alias": "height"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "hoverStateEnabled": { "alias": "hoverStateEnabled"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "items": { "alias": "items"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "keyExpr": { "alias": "keyExpr"; "required": false; }; "noDataText": { "alias": "noDataText"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "rtlEnabled": { "alias": "rtlEnabled"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "selectedItemKey": { "alias": "selectedItemKey"; "required": false; }; "showArrowIcon": { "alias": "showArrowIcon"; "required": false; }; "splitButton": { "alias": "splitButton"; "required": false; }; "stylingMode": { "alias": "stylingMode"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "template": { "alias": "template"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "useItemTextAsTitle": { "alias": "useItemTextAsTitle"; "required": false; }; "useSelectMode": { "alias": "useSelectMode"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "width": { "alias": "width"; "required": false; }; "wrapItemText": { "alias": "wrapItemText"; "required": false; }; }, { "onButtonClick": "onButtonClick"; "onContentReady": "onContentReady"; "onDisposing": "onDisposing"; "onInitialized": "onInitialized"; "onItemClick": "onItemClick"; "onOptionChanged": "onOptionChanged"; "onSelectionChanged": "onSelectionChanged"; "accessKeyChange": "accessKeyChange"; "activeStateEnabledChange": "activeStateEnabledChange"; "dataSourceChange": "dataSourceChange"; "deferRenderingChange": "deferRenderingChange"; "disabledChange": "disabledChange"; "displayExprChange": "displayExprChange"; "dropDownContentTemplateChange": "dropDownContentTemplateChange"; "dropDownOptionsChange": "dropDownOptionsChange"; "elementAttrChange": "elementAttrChange"; "focusStateEnabledChange": "focusStateEnabledChange"; "heightChange": "heightChange"; "hintChange": "hintChange"; "hoverStateEnabledChange": "hoverStateEnabledChange"; "iconChange": "iconChange"; "itemsChange": "itemsChange"; "itemTemplateChange": "itemTemplateChange"; "keyExprChange": "keyExprChange"; "noDataTextChange": "noDataTextChange"; "openedChange": "openedChange"; "rtlEnabledChange": "rtlEnabledChange"; "selectedItemChange": "selectedItemChange"; "selectedItemKeyChange": "selectedItemKeyChange"; "showArrowIconChange": "showArrowIconChange"; "splitButtonChange": "splitButtonChange"; "stylingModeChange": "stylingModeChange"; "tabIndexChange": "tabIndexChange"; "templateChange": "templateChange"; "textChange": "textChange"; "typeChange": "typeChange"; "useItemTextAsTitleChange": "useItemTextAsTitleChange"; "useSelectModeChange": "useSelectModeChange"; "visibleChange": "visibleChange"; "widthChange": "widthChange"; "wrapItemTextChange": "wrapItemTextChange"; }, ["itemsChildren", "itemsLegacyChildren"], never, false, never>; } export declare class DxDropDownButtonModule { static ɵfac: i0.ɵɵFactoryDeclaration<DxDropDownButtonModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<DxDropDownButtonModule, [typeof DxDropDownButtonComponent], [typeof i1.DxoDropDownOptionsModule, typeof i1.DxoAnimationModule, typeof i1.DxoHideModule, typeof i1.DxoFromModule, typeof i1.DxoPositionModule, typeof i1.DxoAtModule, typeof i1.DxoBoundaryOffsetModule, typeof i1.DxoCollisionModule, typeof i1.DxoMyModule, typeof i1.DxoOffsetModule, typeof i1.DxoToModule, typeof i1.DxoShowModule, typeof i1.DxiItemModule, typeof i2.DxoDropDownButtonAnimationModule, typeof i2.DxoDropDownButtonAtModule, typeof i2.DxoDropDownButtonBoundaryOffsetModule, typeof i2.DxoDropDownButtonCollisionModule, typeof i2.DxoDropDownButtonDropDownOptionsModule, typeof i2.DxoDropDownButtonFromModule, typeof i2.DxoDropDownButtonHideModule, typeof i2.DxiDropDownButtonItemModule, typeof i2.DxoDropDownButtonMyModule, typeof i2.DxoDropDownButtonOffsetModule, typeof i2.DxoDropDownButtonPositionModule, typeof i2.DxoDropDownButtonShowModule, typeof i2.DxoDropDownButtonToModule, typeof i2.DxiDropDownButtonToolbarItemModule, typeof i3.DxIntegrationModule, typeof i3.DxTemplateModule], [typeof DxDropDownButtonComponent, typeof i1.DxoDropDownOptionsModule, typeof i1.DxoAnimationModule, typeof i1.DxoHideModule, typeof i1.DxoFromModule, typeof i1.DxoPositionModule, typeof i1.DxoAtModule, typeof i1.DxoBoundaryOffsetModule, typeof i1.DxoCollisionModule, typeof i1.DxoMyModule, typeof i1.DxoOffsetModule, typeof i1.DxoToModule, typeof i1.DxoShowModule, typeof i1.DxiItemModule, typeof i2.DxoDropDownButtonAnimationModule, typeof i2.DxoDropDownButtonAtModule, typeof i2.DxoDropDownButtonBoundaryOffsetModule, typeof i2.DxoDropDownButtonCollisionModule, typeof i2.DxoDropDownButtonDropDownOptionsModule, typeof i2.DxoDropDownButtonFromModule, typeof i2.DxoDropDownButtonHideModule, typeof i2.DxiDropDownButtonItemModule, typeof i2.DxoDropDownButtonMyModule, typeof i2.DxoDropDownButtonOffsetModule, typeof i2.DxoDropDownButtonPositionModule, typeof i2.DxoDropDownButtonShowModule, typeof i2.DxoDropDownButtonToModule, typeof i2.DxiDropDownButtonToolbarItemModule, typeof i3.DxTemplateModule]>; static ɵinj: i0.ɵɵInjectorDeclaration<DxDropDownButtonModule>; } export { DxDropDownButtonTypes };