import { PropertyValues } from 'lit'; import { DDSFormElement } from "../../base/index.cjs"; import { DaikinInputGroup } from "../input-group/index.cjs"; /** * A dropdown list component. * * Hierarchy: * - `daikin-dropdown` > `daikin-dropdown-item` * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item` * * @attr form - The form the component belongs to. * @attr name - The form name, submitted as a name/value pair when submitting the form. * @attr value - The initial form value, submitted as a name/value pair when submitting the form. * @prop {String} formAttr - The form the component belongs to. * @prop {String} name - The form name, submitted as a name/value pair when submitting the form. * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. * * @fires change - A custom event emitted when a user selects a dropdown item. * * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here. * * @example * * ```js * import "@daikin-oss/design-system-web-components/components/dropdown/index.js"; * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js"; * ``` * * ```html * * Dropdown item 1 * Dropdown item 2 * Dropdown item 3 * * ``` */ export declare class DaikinDropdown extends DDSFormElement { static readonly styles: import('lit').CSSResult; /** * Placeholder text of the dropdown. */ placeholder: string; /** * Whether the dropdown is disabled. */ disabled: boolean; /** * Whether the dropdown is required. */ required: boolean; /** * Whether the dropdown is in an error state. */ error: boolean; /** * Whether the dropdown menu is opened. */ open: boolean; /** * Whether the dropdown menu is supports multiple selections. */ multiple: boolean; /** * An array of `value` s for the currently selected option. * * This can be used regardless of the value of `multiple`, but if `multiple` is `true`, always use this instead of `value`. * If `multiple` is `false`, the second and subsequent items will be deleted. */ selectedOptions: string[]; /** * Specifies the maximum number of items to display without omission in the label when `multiple` is `true`. * Specify `null` to display all selected items without omission. */ maxLabels: number | null; private readonly _items; private _button; /** * The label text used as the value of aria-label. * Set automatically by `reflectInputGroup` method. */ private _label; private get _selectionLabels(); private _initialUpdateCompleted; private _autoUpdateController; private _willBeFocusedByPress; /** * Last focused dropdown item. * The next time the dropdown opens, the focus will be moved to this element. */ private _lastFocusedItem; private _dropdownRef; private _searchItem; private _moveFocus; private _updateFormValue; private _updateItemsSelectable; private _updateValueBySelectedOptions; private _updateSelectedOptionsByValue; /** * Handling for when an option is selected. * If multiple selection is enabled, the specified option is added to or removed from the array of selected options. * If multiple selection is disabled, the current value is set to the specified option. The selection is not cleared. * * @param value The value of selected option. */ private _handleSelectOption; private _handleFocusOut; /** * Removes the last selected option. * * If multiple selection is enabled, remove the last selected option and the array will eventually become empty. * If multiple selection is disabled, directly empty the selected options. */ private _removeLastSelection; private _handleKeyDown; private _handleKeyDownEscape; /** * Handle `focusin` event to remember last focused item. */ private _handleFocusIn; private _handlePointerDown; private _handlePointerUp; private _handleButtonKeyDown; /** * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`. * The dropdown menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display. * Since the focus cannot be moved until the element is displayed on the screen, the focus is moved to the item after receiving the completion of the Floating UI position calculation here. */ private _handleFloatingReady; /** * Handle `select` event from `daikin-dropdown-item`. */ private _handleSelect; private _handleSlotChange; render(): import('lit-html').TemplateResult<1>; /** * Focuses on the inner button. * @param options focus options */ focus(options?: FocusOptions): void; protected willUpdate(changedProperties: PropertyValues): void; protected updated(changedProperties: PropertyValues): void; /** * This method is used by `daikin-input-group` to reflect it's attributes to this component. * @private */ reflectInputGroup(inputGroup: DaikinInputGroup): void; } declare global { interface HTMLElementTagNameMap { "daikin-dropdown": DaikinDropdown; } }