import { ZuiFormAssociatedElement } from '@zywave/zui-base'; import '@zywave/zui-icons'; import '@zywave/zui-checkbox'; import '@zywave/zui-spinner'; import { ZuiOptionObject, ZuiOptionElement } from './zui-option.js'; import type { IZuiOptionObject } from './zui-option'; import type { PropertyValues, TemplateResult } from 'lit'; /** * `` is an evolved `` that supports multiselect, typeahead, tagging, grouping, and asynchronous option retrieval. Great for longer imperatively created lists. * @element zui-select-dropdown * * @event change - Event dispatches on selected option(s) changed * @event tag - Event dispatches on new option tagged; event contains `value` details * @event query - Event dispatches on search term typed in the input. If debounce > 0, only fires after timeout; event contains `value` details * * @slot - Default, unnamed slot; for inserting `` or `` elements into `` * * @attr {string | null} [name=null] - The name of this element that is associated with form submission * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission * @attr {boolean} [readonly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission * @attr {boolean} [autofocus=false] - If true, this element will be focused when connected to the document * * @prop {string | null} [name=null] - The name of this element that is associated with form submission * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission * @prop {boolean} [readOnly=false] - Represents whether a user can make changes to this element; the value of this element will still be included in the form submission * @prop {boolean} [autofocus=false] - If true, this element will be focused when connected to the document * * @csspart control - For custom styling of the underlying select control; this is exposed as a CSS shadow part and can be accessed with `::part(control)` */ export declare class ZuiSelectDropdownElement extends ZuiFormAssociatedElement { #private; get _focusControlSelector(): string; get _formValue(): string[] | string | null; /** * Text to show within input when no options selected */ placeholder: string | null; /** * Allow multiple options to be selected */ multiple: boolean; /** * Allow typing a search term within the input to filter options */ searchable: boolean; /** * Delay in milliseconds after typing before retrieving options */ debounce: number | null; /** * Emphasize parts of the option text after typing that were not typed */ typeahead: boolean; /** * Allow creating the desired option after typing if no option matches the search term */ taggable: boolean; /** * Text to show on the taggable option before the search term */ taggableLabel: string; /** * Only applicable when labelling option groups. If there are options untied to a group label, file under this label; defaults to "Other" if null. */ ungroupedLabel: string | null; /** * The message to appear if a group contains no options */ noResultsMessage: string | null; /** * Hide group and no results message if there are no options */ hideEmptyGroups: boolean; /** * If set, can provide hints to form validation and prevent users from clearing out a single select */ required: boolean; /** * When enabled, the "Select all" feature can be utilized. Note: this only applies when `multiple` is true */ get enableSelectAll(): boolean; set enableSelectAll(val: boolean); /** * Provides the user-facing text in the dropdown list for the "Select all" option. * Required when allowing a user to select all options with `enable-select-all` / `enableSelectAll`. */ selectAllOptionLabel: string | null; /** * Provides the user-facing text in the result container when the "Select all" option is selected. * Required when allowing a user to select all options with `enable-select-all` / `enableSelectAll`. */ selectAllResultLabel: string | null; /** * Optional property used alongside `enable-select-all` / `enableSelectAll` to control the value selected when "Select all" is selected. * If set, and the user has selected all value, the value of this property will be included in the selection list. */ selectAllOptionValue: string | null; /** * When enabled, when a user indicates to "select all", then all options will be selected, * the `selectAllResultLabel` will be rendered alone in the result container, and the user will be unable to deselect individual options until they deselect "select all". */ get enableSelectAllOverride(): boolean; set enableSelectAllOverride(val: boolean); /** * Controls the maximum number of results to display in the result container. * Must be used with `truncated-result-message-format` / `truncatedResultMessageFormat`. */ maximumResultsDisplayCount: number; /** * Controls how the truncated result option is rendered. * Can use `{0}` to merge in the number of results that were not displayed. * @example "{0} more" */ truncatedResultMessageFormat: string | null; /** * An alternative or supplementary way to retrieve options. Must be a function that accepts a string argument and an optional array argument of `ZuiOptionObject` elements. Must return an array or a `Promise` of an array of strings or objects with a `label` property and optional `value`, `disabled`, and/or `group` properties. The search term will be passed to the first argument and the existing options will be passed to the second argument. */ queryHandler?: QueryHandlerCallback; /** * Determines if all options are selected */ get allSelected(): boolean; _control: HTMLElement; _input: HTMLInputElement; _optionsContainerParent: HTMLElement; _optionsContainer: HTMLElement; private _highlightedIndex; get _query(): string; get type(): string; get options(): ZuiOptionElement[]; get value(): string; /** * @ignore */ set value(_val: unknown); /** * Returns the selected options as an array of `ZuiOptionObject` objects. See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions | selectedOptions} for browser-native documentation. */ get selectedOptions(): IZuiOptionObject[]; get _optionsLength(): number; get _defaultOption(): ZuiOptionObject | null; static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[]; firstUpdated(changedProps: PropertyValues): void; updated(changedProps: PropertyValues): void; protected formResetCallback(): void; /** * Return a `ZuiOptionElement` based upon number index value passed in * @param {number} index * @returns {ZuiOptionElement | null} */ item(index: number): ZuiOptionObject | null; /** * Clears all selected options */ clear(): void; /** * Opens the dropdown. See {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker | showPicker} for browser-native comparisons. */ showPicker(): void; render(): TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'zui-select-dropdown': ZuiSelectDropdownElement; } } export type QueryResult = IZuiOptionObject | string; export type QueryHandlerCallback = (query: string | null | undefined, options?: ZuiOptionObject[]) => QueryResult[] | Promise;