import { GdsFormControlElement } from '../form/form-control'; import type { GdsOption, OptionsContainer } from '../../primitives/listbox/option.component'; export * from '../../primitives/listbox/option.component'; declare class Dropdown extends GdsFormControlElement implements OptionsContainer { #private; static styles: (import("lit").CSSResult | import("lit").CSSResult[])[]; get type(): string; /** * The supporting text displayed between the label and the field itself. */ supportingText: string; /** * Sets the open state of the dropdown. */ open: boolean; /** * Whether the dropdown should be searchable. */ searchable: boolean; /** * Whether the dropdown should support multiple selections. * When set to true, the dropdown will render a checkbox next to each option. * The value of the dropdown will be an array of the selected values. */ multiple: boolean; /** * Whether the dropdown should be clearable. */ clearable: boolean; /** * Whether the dropdown should be rendered as a combobox. * When set to true, the dropdown will render an input field instead of a button. * The value of the dropdown will be a string representing the selected value. */ combobox: boolean; /** * Delegate function for comparing option values. * By default the option values are compared using strict equality. * If you want to compare objects by field values, you can provide * a custom compare function here. The function should return true * if the values are considered equal. * * Example: * ```ts * dropdown.compareWith = (a, b) => a.id === b.id * ``` */ compareWith: (a: unknown, b: unknown) => boolean; /** * Delegate function for customizing the search filtering. * By default, the search filter will just check if the option label * contains the search string using [String.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes). * * This property allows you to provide a custom filter function to use instead. * * For example, to filter on value instead of label: * ```ts * dropdown.searchFilter = (query, option) => * option.value.toLowerCase().includes(query.toLowerCase()) * ``` */ searchFilter: (q: string, o: GdsOption) => boolean; /** * Whether the popover should sync its width to the trigger button. When this is * set to `true`, the popover will always have the same width as the trigger button. * * By default, line-breaks will be applied to the option content if it is wider than * the popover width. If you use this option, make sure to verify that your options * are still readable and apply appropriate custom layout or truncation if neccecary. */ syncPopoverWidth: boolean; /** * Maximum height of the dropdown list. */ maxHeight: number; /** * Size of the dropdown. Supports `medium` and `small`. There is no `large` size for dropdowns. * `medium` is the default size. */ size: 'medium' | 'small'; /** * Whether to hide the label. * * @deprecated - use `plain` instead */ hideLabel: boolean; /** * Hides the header and the footer, while still keeping the accessible label * * Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set. */ plain: boolean; /** * Whether to disable the mobile styles. */ disableMobileStyles: boolean; /** * Whether the supporting text should be displayed or not. */ showExtendedSupportingText: boolean; /** * Get the options of the dropdown. */ get options(): GdsOption[]; /** * Return the first option with a isPlaceholder attribute. * If no placeholder is found, this will be undefined. */ get placeholder(): GdsOption | undefined; /** * Returns the display value as a string. * If the dropdown is in multiple mode, this will be a comma separated list of the selected values. */ get displayValue(): string; /** * Moves focus to this element. */ focus(): void; /** * A reference to the field element. This does not refer to the trigger button element itself, * but the wrapper that makes up the visual field. * Intended for use in integration tests. */ test_getFieldElement(): Element | null | undefined; private _elTriggerBtn; private _elListbox; private _elSearchInput; connectedCallback(): void; disconnectedCallback(): void; render(): any; protected _getValidityAnchor(): HTMLElement; /** * Update value assignment and request update when the light DOM changes. */ private _handleLightDOMChange; private _handleValueChange; /** * Emits `gds-ui-state`event and does some other house-keeping when the open state changes. */ private _handleOpenChange; } declare const GdsDropdown_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof Dropdown; /** * @element gds-dropdown * A dropdown consist of a trigger button and a list of selectable options. It is used to select a single value from a list of options. * * The type parameter `ValueT` is deprecated and no longer used. * * @slot - Options for the dropdown. Accepts `gds-option` and `gds-menu-heading` elements. * @slot trigger - Custom content for the trigger button can be assigned through this slot. * @slot extended-supporting-text - A longer supporting text can be placed here. It will be displayed in a panel when the user clicks the info button. * @slot message - ***(deprecated - use `errorMessage` property instead)*** Error message to show below the input field whem there is a validation error. * @slot sub-label - ***(deprecated - use `supporting-text` property instead)*** Renders between the label and the trigger button. * * @subcomponent gds-option - Defines an option in the dropdown * @subcomponent gds-menu-heading - Defines a non-selectable heading in the dropdown options list * * @event change - Fired when the value of the dropdown is changed through user interaction (not when value prop is set programatically). * @event input - Fired when the value of the dropdown is changed through user interaction. * @event gds-ui-state - Fired when the dropdown is opened or closed by the user. Can be cancelled to prevent the dropdown from opening or closing. * @event gds-filter-input - Fired when the user types in the search field. The event is cancellable, and the consumer is expected to handle filtering and updating the options list if the event is cancelled. * @event gds-input-cleared - Fired when the user clears the input using the clear button. */ export declare class GdsDropdown extends GdsDropdown_base { }