import { EventEmitter } from '../../stencil-public-runtime'; import { ElementAppenderAlignmentType, ElementAppenderPlacementType, ResponsiveType, SizeType, TranslocationType, VegaEATriggerType } from '../../types/ui.type'; import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core'; import { VegaDropdownRenderer } from './slimmers/renderers/vega-dropdown-renderer'; import { VegaDropdownSourceController } from './slimmers/controllers/vega-dropdown-source-controller'; import { VegaDropdownCreateRenderer } from './slimmers/renderers/vega-dropdown-create-renderer'; import { VegaDropdownListRenderer } from './slimmers/renderers/vega-dropdown-list-renderer'; import { VegaDropdownItemLevelRenderer } from './slimmers/renderers/vega-dropdown-item-level-renderer'; import { VegaDropdownSearchRenderer } from './slimmers/renderers/vega-dropdown-search-renderer'; import { VegaDropdownKeyboardController } from './slimmers/controllers/vega-dropdown-keyboard-conttroller'; import { VegaDropdownAppenderController } from './slimmers/controllers/vega-dropdown-appender-controller'; import { VegaDropdownSearchTriggerEventDetail, VegaDropdownSearchTriggerByType, VegaDropdownSourceItem } from './types'; import { VegaDropdownGroupLevelRenderer } from './slimmers/renderers/vega-dropdown-group-level-renderer'; import { VegaDropdownSearchController } from './slimmers/controllers/vega-dropdown-search-controller'; import { VegaDropdownSelectedController } from './slimmers/controllers/vega-dropdown-selected-controller'; import { VegaDropdownRenderModeController } from './slimmers/controllers/vega-dropdown-render-mode-controller'; import { SubStateNotifySlimmerBase } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer-base'; import { VegaDropdownChildrenController } from './slimmers/controllers/vega-dropdown-children-controller'; import { EventEmitSlimmerBase } from '../../helpers/event-manager/slimmers/event-emit-slimmer'; import { ChildNodesNotifyObserverSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer'; import { VegaDropdownItemClickEvent } from './vega-dropdown-item/types'; import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics'; import { VegaDropdownScrollableController } from './slimmers/controllers/vega-dropdown-scrollable-controller'; import { VegaDropdownRemoteInvocationController } from './slimmers/controllers/vega-dropdown-remote-invocation-controller'; import { TranslationSlimmer } from '../../helpers/slimmers/translation'; import { VegaDropdownResetRenderer } from './slimmers/renderers/vega-dropdown-reset-renderer'; import { VegaDropdownSelectAllController } from './slimmers/controllers/vega-dropdown-select-all-controller'; /** * @vegaVersion 1.3.0 */ export declare class VegaDropdown { protected readonly globalSlimmers: GlobalSlimmers; protected translationSlimmer: TranslationSlimmer; protected readonly renderer: VegaDropdownRenderer; protected readonly sourceController: VegaDropdownSourceController; protected readonly searchRenderer: VegaDropdownSearchRenderer; protected readonly createRenderer: VegaDropdownCreateRenderer; protected readonly listRenderer: VegaDropdownListRenderer; protected readonly resetRenderer: VegaDropdownResetRenderer; protected readonly groupLevelRenderer: VegaDropdownGroupLevelRenderer; protected readonly itemLevelRenderer: VegaDropdownItemLevelRenderer; protected readonly keyboardController: VegaDropdownKeyboardController; protected readonly appenderController: VegaDropdownAppenderController; protected readonly searchController: VegaDropdownSearchController; protected readonly selectAllController: VegaDropdownSelectAllController; /** * childrenController should be defined before selectedController, * which can ensure collecting information before verifying it. */ protected readonly childrenController: VegaDropdownChildrenController; protected readonly selectedController: VegaDropdownSelectedController; protected readonly renderModeController: VegaDropdownRenderModeController; protected readonly scrollableController: VegaDropdownScrollableController; protected readonly remoteInvocationController: VegaDropdownRemoteInvocationController; protected readonly selectTypeNotifySlimmer: SubStateNotifySlimmerBase; protected readonly selectedSourceKeyNotifySlimmer: SubStateNotifySlimmerBase; protected readonly prefixIconSlotNotifySlimmer: SubStateNotifySlimmerBase; protected readonly itemTooltipPropsNotifySlimmer: SubStateNotifySlimmerBase; protected itemClickObserver: ChildNodesNotifyObserverSlimmer; protected showEventEmitter: EventEmitSlimmerBase; protected hideEventEmitter: EventEmitSlimmerBase; protected dropdownClickEventEmitter: EventEmitSlimmerBase; protected selectAllClickEventEmitter: EventEmitSlimmerBase; protected resetEventEmitter: EventEmitSlimmerBase; protected createEventEmitter: EventEmitSlimmerBase; protected searchEventEmitter: EventEmitSlimmerBase; protected searchTriggerEventEmitter: EventEmitSlimmerBase; protected readonly itemDisplayRuleNotifySlimmer: SubStateNotifySlimmerBase; protected vegaComponentUsageRuntimeMetricsSlimmer: VegaComponentUsageRuntimeMetricsSlimmer; host: HTMLVegaDropdownElement; searchString: string; isDropdownShow: boolean; sourceForRender: VegaDropdownSourceItem[]; renderMode: 'SOURCE' | 'SLOT'; watchIsDropdownShow(): void; /** * Specifies the size of the dropdown. * It can be provided as a number or a ResponsiveType. * * If no size is set, the dropdown will default to fitting the item content width. * * @vegaVersion 1.3.0 */ size: ResponsiveType; /** * Specifies the trigger mode for the dropdown. * hover: The dropdown is shown/hidden on hover, and listens for global area clicks. * click: The dropdown is shown/hidden on click, and listens for global area clicks. * none: The dropdown does not listen for any events; you must control its visibility within the component. * custom: Custom trigger strategy, more information can refer to https://gethired.atlassian.net/wiki/spaces/VKB/pages/657031171/Trigger+strategy. * * @vegaVersion 1.3.0 */ trigger: VegaEATriggerType; /** * Specifies the position adjustment for the dropdown * relative to the target element. * * By default, the dropdown is displayed on the left-bottom of the target. * * @vegaVersion 1.3.0 */ translocation: ResponsiveType; /** * Sets the source array of items for the dropdown, * where each item must have a `key` and `label` property. * * @vegaVersion 1.3.0 */ source: VegaDropdownSourceItem[]; watchSource(): void; /** * Specifies the relative positioning of the dropdown menu * in relation to its container. * * If not specified, the dropdown will be appended to the menu by default. * Adjust this property when facing scrolling positioning problems. * * @VegaWarning The value of this property should be an element that is * the parent of this component or an ancestor of the parent element. * Using any other element may lead to unexpected behavior. * @vegaVersion 1.3.0 */ positionRelativeTo: string; /** * Controls the dropdown menu's selection. It accepts three values: * * - `none`: * After an item is selected, this option not only triggers the `vegaDropdownClick` * event but also conceals the dropdown menu immediately. * - `single`: * Upon selection of an item whose key matches the `selectedSourceKey` property, * this setting both dispatches the `vegaDropdownClick` event and * hides the dropdown menu. * - `multiple`: * When an item with a key found in the `selectedSourceKey` array is selected, * this mode releases the `vegaDropdownClick` event. Unlike the others, however, * Determines the selection mode for multiple item selection. * * @vegaVersion 1.3.0 */ selectType: 'none' | 'single' | 'multiple'; watchSelectType(): void; /** * Represents the key corresponding to the selected item in the dropdown menu. * It becomes active only when `selectType` is set to `single` or `multiple`. * * @vegaVersion 1.3.0 */ selectedSourceKey: string | string[]; watchSelectedSourceKey(): void; /** * Controls whether the prefix icon occupy a position, even if prefix has no value. * * @vegaVersion 1.47.0 */ prefixIconSlot: boolean; watchPrefixIconSlot(): void; /** * Specifies the maximum height for the dropdown. * * @vegaVersion 1.3.0 */ maxHeight: number; /** * Controls whether the dropdown list can be searched. * * @vegaVersion 1.3.0 */ searchable: boolean; /** * Determines whether the dropdown should have the * same width as the target element. * * @vegaVersion 1.3.0 */ matchTargetWidth: boolean; /** * Specifies the minimum width of the dropdown. It can be provided as * a number or a ResponsiveType. * * @vegaVersion 1.13.0 */ minWidth: ResponsiveType; /** * Specifies the maximum width of the dropdown. It can be provided as * a number or a ResponsiveType. * * @vegaVersion 1.13.0 */ maxWidth: ResponsiveType; /** * Specifies the display rule for items in the dropdown. * * @VegaWarning Specifies the display rule for items in the dropdown, only be active if matchTargetWidth is true or maxWidth has value. * @vegaVersion 1.13.0 */ itemDisplayRule: 'ellipsis' | 'newline'; watchItemDisplayRule(): void; /** * Provides tooltip configuration options for dropdown items. * * Useful for controlling tooltip width for long item labels. * * @vegaVersion 2.82.0 */ itemTooltipProps: Partial>; watchItemTooltipProps(): void; /** * Determines if the dropdown height should be automatically adjusted * to fit its container height. * * If set to `true`, the dropdown will always be positioned at * the bottom of the available space. * * @vegaVersion 1.3.0 */ matchContainerHeight: boolean; /** * Specifies whether the search source list is case-sensitive. * * Note that the default filter rules are fuzzy matching and case-insensitive. * This parameter only takes effect when `searchable` is set to `true`. * * @vegaVersion 1.4.0 */ caseSensitive: boolean; watchCaseSensitive(): void; /** * Controls whether the dropdown can add a new item when * no proper item is available. It becomes active only when * `searchable` is set to `true`. * * @vegaVersion 1.16.0 */ dynamicOption: boolean; /** * Determines whether to enable source filtering based on input words. * * When set to 'false', the component will emit a `vegaSearch` event * when input words are provided. In this case, you are responsible for * managing the source, including adding, deleting, and updating the source. * * Note that the `dynamicOption` property will not work when * this property is set to `false`. * * @VegaWarning Set `preserveValueIfNotInSource` to 'true' to get custom filter fully supported when set to 'false'. * @vegaVersion 1.24.0 */ useDefaultFilter: boolean; /** * Determines whether the dropdown displays a loading status. * * @vegaVersion 1.24.0 */ isLoading: boolean; /** * Specifies the vertical positioning of the dropdown * within its container or relative to a reference point. * * @vegaVersion 1.41.0 */ placement: ElementAppenderPlacementType; /** * Determines the horizontal positioning of the dropdown * within its container or relative to a reference point. * * @vegaVersion 1.41.0 */ alignment: ElementAppenderAlignmentType; /** * Determines whether the dropdown displays a lazy loading status. * * @vegaVersion 2.3.0 */ isLazyLoading: boolean; /** * Determines whether the dropdown search is triggered by input or pressing the Enter key. * * @vegaVersion 2.26.0 */ searchTriggerBy: VegaDropdownSearchTriggerByType; /** * Determines whether the dropdown uses viewport-based positioning (`position: fixed`) or container-based positioning (`position: absolute`). * * **Technical Implementation:** * * - When `false` (default): The dropdown content box renders with `position: absolute` and its coordinates are calculated relative to the nearest positioned ancestor. Combined with `positionRelativeTo`, you can specify which ancestor to measure from, which ensures the menu scrolls together with that ancestor. * * - When `true`: The dropdown content box renders with `position: fixed` and its coordinates are calculated from the viewport. The menu is visually anchored to the trigger element via JavaScript and moves with it on scroll, even though it is not part of the document flow. `positionRelativeTo` has no effect in this mode. * * When to set `isScreenPosition` to `true`: * * - Dropdowns that need to break out of container constraints (non-Shadow-DOM only): * When you want the dropdown to appear outside its container's boundaries (e.g., to avoid being clipped by a parent's * `overflow: hidden` or small dimensions), viewport-based positioning allows it to render freely. * This only works for regular (non-Shadow-DOM) containers. Shadow DOM boundaries cannot be escaped with `position: fixed`. * * - Dropdowns in fixed or sticky positioned containers: * When the dropdown trigger is inside a fixed or sticky positioned container, viewport-based positioning ensures correct alignment. * * When to keep `isScreenPosition` as `false` (default): * * - Simple layouts where the dropdown and its trigger are not inside scrollable containers * - When you want the dropdown to scroll naturally with its container (using `position: absolute`) * - When you need `positionRelativeTo` to control which ancestor the dropdown is positioned relative to * - When `matchContainerHeight` is needed (this property is overridden when `isScreenPosition` is `true`) * * @VegaWarning - Setting this to `true` override the `positionRelativeTo` and `matchContainerHeight` properties, rendering them ineffective. * - Currently, when set to `true`, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content). * @vegaVersion 2.36.0 */ isScreenPosition: boolean; /** * Specifies whether the selected option in the dropdown can be cleared. * It allows users to reset the selectedSourceKey when a selection has already been made. * * @vegaVersion 2.46.0 */ resettable: boolean; /** * The count of the source that will be used as the threshold for determining whether to use virtual scrolling. * If the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used * If the value is 0, it means we will disable the virtualization all the time. * * @vegaVersion 2.54.0 */ virtualizationThreshold: number; /** * Controls whether the value of selectedSourceKey is preserved when it does not exist in the source. * * @vegaVersion 2.69.0 */ preserveValueIfNotInSource: boolean; /** * Specifies the no search results text for the dropdown. * * @vegaVersion 2.74.0 */ searchNoResultsText: string; /** * Allows users to select or deselect all items in the dropdown. * Only applicable when selectType is set to 'multiple'. * When enabled, a "Select All" option is added to the dropdown menu. * * @vegaVersion 2.93.0 */ allowSelectAll: boolean; watchAllowSelectAll(): void; /** * An event emitter notifying that a dropdown item has been clicked. * * The event's `detail` property contains the key of the clicked item. * * @vegaVersion 1.11.0 */ vegaDropdownClick: EventEmitter; /** * An event emitter notifying that a dropdown item has been clicked. * * The event's `detail` property contains the key of the clicked item. * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ dropdownClick: EventEmitter; /** * An event emitter only fired when the Select All checkbox has been clicked. * * The event's `detail` property is `true` when the Select All checkbox is clicked to select all items, * and `false` when the Select All checkbox is clicked to clear all selected items. * * @vegaVersion 2.93.0 */ vegaDropdownSelectAllClick: EventEmitter; /** * An event emitter only fired when the Select All checkbox has been clicked. * * The event's `detail` property is `true` when the Select All checkbox is clicked to select all items, * and `false` when the Select All checkbox is clicked to clear all selected items. * @eventSemantics namespace:native * @vegaVersion 2.93.0 */ dropdownSelectAllClick: EventEmitter; /** * An event emitter notifying that the dropdown has been displayed, * either programmatically or via user interaction. * * @vegaVersion 1.3.0 */ vegaShow: EventEmitter; /** * An event emitter notifying that the dropdown has been displayed, * either programmatically or via user interaction. The name is not `show` because already has a method `show`. * * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ dropdownShow: EventEmitter; /** * Event emitter notifying that the dropdown has been dismissed, * either programmatically or via user interaction. * * @vegaVersion 1.3.0 */ vegaHide: EventEmitter; /** * An event emitter notifying that the dropdown has been dismissed, * either programmatically or via user interaction. The name is not `hide` because already has a method `hide`. * * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ dropdownHide: EventEmitter; /** * An event emitter notifying the addition of a new value * to the dropdown source list. * * The event's `detail` property contains the new value. * * The dropdown _does not_ automatically add the new value to the source list. * * @vegaVersion 1.14.0 */ vegaCreate: EventEmitter; /** * An event emitter notifying the addition of a new value * to the dropdown source list. * * The event's `detail` property contains the new value. * * The dropdown _does not_ automatically add the new value to the source list. * * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ create: EventEmitter; /** * An event emitter notifying the search event in the dropdown, * but only if `useDefaultFilter` is set to `false`. * * @vegaVersion 1.24.0 */ vegaSearch: EventEmitter; /** * An event emitter notifying the search event in the dropdown, * but only if `useDefaultFilter` is set to `false`. The name is not `search` because already has a method `search`. * * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ dropdownSearch: EventEmitter; /** * An event emitter notifying the reset event in the dropdown. * * @vegaVersion 2.46.0 */ vegaReset: EventEmitter; /** * An event emitter notifying the reset event in the dropdown. * * @eventSemantics namespace:native * @vegaVersion 2.46.0 */ reset: EventEmitter; /** * An event emitter notifying the search event triggered within the dropdown, * but only if `useDefaultFilter` is set to `false`. * Unlike the Vegasearch event, this event includes the details of the user who triggered it. * It can be triggered in two ways: by pressing "Enter" or through user input. * * @vegaVersion 2.30.0 */ vegaSearchTrigger: EventEmitter; /** * An event emitter notifying the search event triggered within the dropdown, * but only if `useDefaultFilter` is set to `false`. * Unlike the Vegasearch event, this event includes the details of the user who triggered it. * It can be triggered in two ways: by pressing "Enter" or through user input. * * @eventSemantics namespace:native * @vegaVersion 2.30.0 */ searchTrigger: EventEmitter; /** * Invoke this method to programmatically display the dropdown menu. * * @vegaVersion 1.3.0 */ show(): Promise; /** * Invoke this method to programmatically dismiss the dropdown menu. * * @vegaVersion 1.3.0 */ hide(): Promise; /** * Invoke this method to set the search input value and * filter the list of items in the dropdown. * * This method is applicable only when the dropdown is searchable. * * @vegaVersion 1.11.0 */ search(input: string): Promise; /** * Invoke this method to clear the selected items keys, * removing any current selection. * * @vegaVersion 1.47.0 */ clearSelection(): Promise; /** * Invoke this method to retrieve the selected items keys, * providing an key or list of the keys representing * the currently selected items. * * @vegaVersion 1.47.0 */ getSelection(): Promise; /** * Invoke this method to set the selected items keys, * specifying an array or list of keys to represent * the desired selected items. * * @param {string[]} keys - Row keys to be set as selected. * @vegaVersion 1.47.0 */ setSelection(keys: string[] | string): Promise; /** * Invoke this method to manually sync template/slot-based dropdown data. * Useful when template items are dynamically added or removed. * * @example * const dropdown = document.querySelector("vega-dropdown"); * const itemsContainer = dropdown.querySelector('[slot="items"]'); * * const item = document.createElement('vega-dropdown-item'); * item.itemKey = 'new-item'; * item.label = 'New item'; * itemsContainer.appendChild(item); * * await dropdown.syncTemplateData(); * * @vegaVersion 2.93.0 */ syncTemplateData(): Promise; /** * Render the dropdown component. */ render(): VegaDropdown; }