@lion/ui/dist-types/components/combobox/src/LionCombobox.d.ts

A package of extendable web components

declare const LionCombobox_base: typeof LionListbox & import("@open-wc/dedupe-mixin").Constructor<import("../../form-core/types/choice-group/CustomChoiceGroupMixinTypes.js").CustomChoiceGroupHost> & Pick<typeof import("../../form-core/types/choice-group/CustomChoiceGroupMixinTypes.js").CustomChoiceGroupHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/ui/types/form-core.js").ChoiceGroupHost> & Pick<typeof import("@lion/ui/types/form-core.js").ChoiceGroupHost, "prototype"> & Pick<typeof import("lit").LitElement, typeof Symbol.metadata | "prototype" | "_$litElement$" | "enabledWarnings" | "enableWarning" | "disableWarning" | "addInitializer" | "_initializers" | "elementProperties" | "properties" | "elementStyles" | "styles" | "observedAttributes" | "createProperty" | "getPropertyOptions" | "shadowRootOptions"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/ui/types/overlays.js").OverlayHost> & Pick<typeof import("@lion/ui/types/overlays.js").OverlayHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("../../localize/types/LocalizeMixinTypes.js").LocalizeMixinHost> & Pick<typeof import("../../localize/types/LocalizeMixinTypes.js").LocalizeMixinHost, "prototype" | "localizeNamespaces" | "waitForLocalizeNamespaces">;
/**
 * @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. <lion-options>
 * @slot selection-display - The selection display element for the combobox, e.g. <lion-selection-display>
 *
 * @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 <datalist>
     */
    showAllOnEmpty: boolean;
    /**
     * @configure ListboxMixin: the wai-aria pattern and <datalist> rotate
     */
    rotateKeyboardNavigation: boolean;
    /**
     * @configure ListboxMixin: the wai-aria pattern and <datalist> 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<any, any> | undefined): void;
    /**
     * Converts viewValue to modelValue
     * @override CustomChoiceGroupMixin
     * @param {string|string[]} value - viewValue: the formatted value inside <input>
     * @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