declare const LionCombobox_base: typeof LionListbox & import("@open-wc/dedupe-mixin").Constructor & Pick & import("@open-wc/dedupe-mixin").Constructor & Pick & Pick & import("@open-wc/dedupe-mixin").Constructor & Pick & import("@open-wc/dedupe-mixin").Constructor & Pick; /** * @typedef {import('@lion/ui/listbox.js').LionOption} LionOption * @typedef {import('@lion/ui/listbox.js').LionOptions} LionOptions * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig * @typedef {import('@lion/ui/types/core.js').SlotsMap} SlotsMap * @typedef {import('@lion/ui/types/form-core.js').ChoiceInputHost} ChoiceInputHost * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost * @typedef {import('../types/SelectionDisplay.js').SelectionDisplay} SelectionDisplay * @typedef {LionOption & { onFilterUnmatch?:function; onFilterMatch?:function }} OptionWithFilterFn */ /** * LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion * FormControl * * @slot listbox - The listbox element for the combobox, e.g. * @slot selection-display - The selection display element for the combobox, e.g. * * @customElement lion-combobox */ export class LionCombobox extends LionCombobox_base { /** @type {any} */ static get properties(): any; static get styles(): (import("lit").CSSResultOrNative | import("lit").CSSResultArray)[]; /** @param {string} value */ set value(arg: string); /** * We define the value getter/setter below as also defined in LionField (via FormatMixin). * Since FormatMixin is meant for Formgroups/ChoiceGroup it's not applied on Combobox; * Combobox is somewhat of a hybrid between a ChoiceGroup and LionField, therefore we copy over * some of the LionField members to align with its interface. * * The view value. Will be delegated to `._inputNode.value` */ get value(): string; /** @type {string | undefined} */ __value: string | undefined; /** * @protected */ protected _resetListboxOptions(): void; /** * @enhance FormControlMixin - add slot[name=selection-display] * @protected */ protected _inputGroupInputTemplate(): import("lit-html").TemplateResult<1>; /** * @protected */ protected _overlayListboxTemplate(): import("lit-html").TemplateResult<1>; /** * @enhance FormControlMixin - add overlay * @protected */ protected _groupTwoTemplate(): import("lit-html").TemplateResult<1>; /** * Wrapper with combobox role for the text input that the end user controls the listbox with. * @type {HTMLElement} * @protected */ protected get _comboboxNode(): HTMLElement; /** * @type {SelectionDisplay | null} * @protected */ protected get _selectionDisplayNode(): import("../types/SelectionDisplay.js").SelectionDisplay | null; /** * @configure FormControlMixin * Will tell FormControlMixin that a11y wrt labels / descriptions / feedback * should be applied here. * @protected */ protected get _inputNode(): HTMLInputElement; /** * @configure OverlayMixin * @protected */ protected get _overlayContentNode(): import("../../listbox/src/LionOptions.js").LionOptions; /** * @configure OverlayMixin * @protected */ protected get _overlayReferenceNode(): Element | null; /** * @configure OverlayMixin * @protected */ protected get _overlayInvokerNode(): HTMLInputElement; /** * @configure ListboxMixin * @protected */ protected get _activeDescendantOwnerNode(): HTMLInputElement; /** * @param {boolean} value */ set requireOptionMatch(arg: boolean); /** * @returns {boolean} */ get requireOptionMatch(): boolean; /** * When "list", will filter listbox suggestions based on textbox value. * When "both", an inline completion string will be added to the textbox as well. * @type {'none'|'list'|'inline'|'both'} */ autocomplete: 'none' | 'list' | 'inline' | 'both'; /** * When typing in the textbox, will by default be set on 'begin', * only matching the beginning part in suggestion list. * => 'a' will match 'apple' from ['apple', 'pear', 'citrus']. * When set to 'all', will match middle of the word as well * => 'a' will match 'apple' and 'pear' * @type {'begin'|'all'} */ matchMode: 'begin' | 'all'; /** * When true, the listbox is open and textbox goes from a value to empty, all options are shown. * By default, the listbox closes on empty, similar to wai-aria example and */ showAllOnEmpty: boolean; /** * @configure ListboxMixin: the wai-aria pattern and rotate */ rotateKeyboardNavigation: boolean; /** * @configure ListboxMixin: the wai-aria pattern and have selection follow focus */ selectionFollowsFocus: boolean; /** * For optimal support, we allow aria v1.1 on newer browsers * @type {'1.1'|'1.0'} * @protected */ protected _ariaVersion: '1.1' | '1.0'; /** * @private */ private __prevCboxValueNonSelected; /** * @private */ private __prevCboxValue; /** * @type {boolean} * @private */ private __hadUserIntendsInlineAutoFill; /** * @type {boolean} * @private */ private __listboxContentChanged; /** * @param {KeyboardEvent} [ev] * @protected */ protected _onKeyUp(ev?: KeyboardEvent | undefined): void; /** * @param {FocusEvent} [ev] * @protected */ protected _textboxOnClick(ev?: FocusEvent | undefined): void; /** * @param {Event} ev * @protected */ protected _textboxOnInput(ev: Event): void; /** * @param {KeyboardEvent} ev * @protected */ protected _textboxOnKeydown(ev: KeyboardEvent): void; connectedCallback(): void; /** * @param {string} [name] * @param {unknown} [oldValue] * @param {import('lit').PropertyDeclaration} [options] * @returns {void} */ requestUpdate(name?: string | undefined, oldValue?: unknown, options?: import("lit").PropertyDeclaration | undefined): void; /** * Converts viewValue to modelValue * @override CustomChoiceGroupMixin * @param {string|string[]} value - viewValue: the formatted value inside * @returns {*} modelValue */ override parser(value: string | string[]): any; /** * When textbox value doesn't match checkedIndex anymore, update accordingly... * @protected */ protected __unsyncCheckedIndexOnInputChange(): void; /** * @param {import('lit').PropertyValues } changedProperties */ updated(changedProperties: import('lit').PropertyValues): void; __shouldAutocompleteNextUpdate: boolean | undefined; /** * When the preconfigurable `match-mode` conditions are not sufficient, * one can define a custom matching function. * * @overridable * @param {LionOption} option * @param {string} textboxValue current ._inputNode value */ matchCondition(option: LionOption, textboxValue: string): boolean; /** * @overridable * Allows Sub Classer to control when the overlay should become visible * Note that this condition is separate from whether the option listbox is * shown (use 'showAllOnEmpty, matchMode and autocomplete configurations for this') * * Separating these conditions allows the user to show different content in the dialog/overlay * that wraps the listbox with options * * @example * _showOverlayCondition({ lastKey }) { * return lastKey === 'ArrowDown'; * } * * @example * _showOverlayCondition(options) { * return options.currentValue.length > 4 && super._showOverlayCondition(options); * } * * @param {{ currentValue?: string, lastKey?: string }} options * @protected * @returns {boolean} */ protected _showOverlayCondition({ lastKey }: { currentValue?: string; lastKey?: string; }): boolean; /** * Return the value to be used for the input value * @overridable * @param {LionOption} option * @returns {string} */ _getTextboxValueFromOption(option: LionOption): string; /** * @param {string} v * @protected */ protected _setTextboxValue(v: string): void; /** * @private */ private __onOverlayClose; /** * @overridable * @param {LionOption & {__originalInnerHTML?:string}} option * @param {string} matchingString * @protected */ protected _onFilterMatch(option: LionOption & { __originalInnerHTML?: string; }, matchingString: string): void; /** * @overridable * @param {Element} option * @param {string} matchingString * @protected */ protected _highlightMatchedOption(option: Element, matchingString: string): void; /** * @overridable * @param {LionOption & {__originalInnerHTML?:string}} option * @param {string} [curValue] * @param {string} [prevValue] * @protected */ protected _onFilterUnmatch(option: LionOption & { __originalInnerHTML?: string; }, curValue?: string | undefined, prevValue?: string | undefined): void; /** * @overridable * @param {Element} option * @protected */ protected _unhighlightMatchedOption(option: Element): void; /** * Computes whether a user intends to autofill (inline autocomplete textbox) * @param {{ prevValue:string, curValue:string }} config * @private */ private __computeUserIntendsAutoFill; /** * Handles autocompletion. This entails: * - list: shows a list on keydown character press * - filter: filters list of potential matches according to matchmode or provided matchCondition * - focus: automatically focuses closest match (makes it the activedescendant) * - check: automatically checks/selects closest match when selection-follows-focus is enabled * (this is the default configuration) * - complete: completes the textbox value inline (the 'missing characters' will be added as * selected text) * * @protected */ protected _handleAutocompletion(): void; __hadSelectionLastAutofill: boolean | undefined; /** * @private */ private __textboxInlineComplete; /** * When this condition is false, an end user will have to manually select a suggested * option from the list (by default when autocomplete is 'none' or 'list'). * For autocomplete 'both' or 'inline', it will automatically select on a match. * @overridable * @protected */ protected _autoSelectCondition(): boolean; /** * @overridable * @param {string|string[]} modelValue * @param {string|string[]} oldModelValue * @param {{phase?:string}} config * @protected */ protected _syncToTextboxCondition(modelValue: string | string[], oldModelValue: string | string[], { phase }?: { phase?: string; }): boolean; /** * @overridable * Allows to control what happens when checkedIndexes change * @param {string[]} modelValue * @param {string[]} oldModelValue * @protected */ protected _syncToTextboxMultiple(modelValue: string[], oldModelValue?: string[]): void; /** * @private */ private __setComboboxDisabledAndReadOnly; /** * @private */ private __setupCombobox; /** * @private */ private __teardownCombobox; clear(): void; } export type LionOption = import('@lion/ui/listbox.js').LionOption; export type LionOptions = import('@lion/ui/listbox.js').LionOptions; export type OverlayConfig = import('@lion/ui/types/overlays.js').OverlayConfig; export type SlotsMap = import('@lion/ui/types/core.js').SlotsMap; export type ChoiceInputHost = import('@lion/ui/types/form-core.js').ChoiceInputHost; export type FormControlHost = import('@lion/ui/types/form-core.js').FormControlHost; export type SelectionDisplay = import('../types/SelectionDisplay.js').SelectionDisplay; export type OptionWithFilterFn = LionOption & { onFilterUnmatch?: Function; onFilterMatch?: Function; }; import { LionListbox } from "../../../exports/listbox.js"; export {}; //# sourceMappingURL=LionCombobox.d.ts.map