import { CSSResultGroup, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit'; import { SbbOpenCloseBaseElement } from '../core/base-elements.ts'; import { SbbOptionBaseElement } from '../option.ts'; declare const SbbAutocompleteBaseElement_base: import('../core/mixins.ts').AbstractConstructor & typeof SbbOpenCloseBaseElement; /** * Base class for autocomplete components. * * @event {Event} change - The change event is fired on the autocomplete's trigger when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. * @event {InputEvent} input - The input event fires on the autocomplete's trigger when the value has been changed as a direct result of a user action. */ export declare abstract class SbbAutocompleteBaseElement extends SbbAutocompleteBaseElement_base { static styles: CSSResultGroup; /** * The element where the autocomplete will attach. * If not set, as fallback there are two elements which can act as origin with following priority order: * 1. `sbb-form-field` if it is an ancestor. * 2. trigger element if set. * * For attribute usage, provide an id reference. */ accessor origin: HTMLElement | null; /** * The input element that will trigger the autocomplete opening. * By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. * If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. * * For attribute usage, provide an id reference. */ accessor trigger: HTMLInputElement | null; /** Whether the icon space is preserved when no icon is set. */ accessor preserveIconSpace: boolean; /** Whether the first option is automatically activated when the autocomplete is opened. */ accessor autoActiveFirstOption: boolean; /** Function that maps an option's control value to its display value in the trigger. */ accessor displayWith: ((value: T) => string) | null; /** * Size variant, either m or s. * @default 'm' / 's' (lean) */ accessor size: 'm' | 's'; /** Whether the active option should be selected as the user is navigating. */ accessor autoSelectActiveOption: boolean; /** * When enabled, the active option is automatically selected on blur. * This is an experimental feature. It might be subject to changes. */ accessor autoSelectActiveOptionOnBlur: boolean; /** * Whether the user is required to make a selection when they're interacting with the * autocomplete. If the user moves away from the autocomplete without selecting an option from * the list, the value will be reset. If the user opens the panel and closes it without * interacting or selecting a value, the initial value will be kept. */ accessor requireSelection: boolean; /** * The position of the autocomplete panel relative to the trigger. * @default 'auto' */ accessor position: 'auto' | 'above' | 'below'; /** Returns the element where the autocomplete overlay is attached to. */ get originElement(): HTMLElement | null; /** Returns the trigger element. */ get triggerElement(): HTMLInputElement | null; private _triggerElement?; protected abstract overlayId: string; protected abstract panelRole: string; protected activeOption: SbbOptionBaseElement | null; protected pendingAutoSelectedOption: SbbOptionBaseElement | null; private _resizeObserver; /** Listens to the changes on the `disabled` or `readonly` attribute of the trigger. */ private _triggerAttributeObserver; private _overlay; private _optionContainer; private _triggerAbortController; private _openPanelEventsController; private _isPointerDownEventOnMenu; private _escapableOverlayController; private _optionsCount; private _previousElements?; /** Tracks input from keyboard. */ private _lastUserInput; /** If true, the 'change' event source is an option selection or a 'requireSelection' field cleanup */ private _isCustomChangeEvent; protected abstract get options(): SbbOptionBaseElement[]; constructor(); protected abstract syncNegative(): void; protected abstract setTriggerAttributes(element: HTMLInputElement): void; protected abstract openedPanelKeyboardInteraction(event: KeyboardEvent): void; protected abstract selectByKeyboard(event: KeyboardEvent): void; protected abstract setNextActiveOption(event?: KeyboardEvent): void; protected abstract resetActiveElement(): void; /** Opens the autocomplete. */ open(): void; /** Closes the autocomplete. */ close(): void; private _isZeroAnimationDuration; connectedCallback(): void; protected willUpdate(changedProperties: PropertyValues): void; protected firstUpdated(changedProperties: PropertyValues): void; disconnectedCallback(): void; requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void; /** When an option is selected, update the input value and close the autocomplete. */ protected onOptionSelected(event: Event): void; /** @deprecated */ protected onOptionArrowsSelected(_activeOption: SbbOptionBaseElement): void; /** * A 'pending selection' sets the option value in the input element without emitting events. * A 'pending selection' is confirmed when the panel closes. Any other user interaction * will reset the pending value. */ protected setPendingSelection(activeOption: SbbOptionBaseElement): void; private _setValueAndDispatchEvents; /** Set the option value within the input element */ private _setInputValue; private _handleSlotchange; private _setNextActiveOptionIfAutoActiveFirstOption; /** The autocomplete should inherit 'readonly' state from the trigger. */ private _readonly; private _componentSetup; private _configureTrigger; private _setOverlayPosition; /** * On open/close animation end. * In rare cases it can be that the animationEnd event is triggered twice. * To avoid entering a corrupt state, exit when state is not expected. */ private _onAnimationEnd; private _handleOpening; private _handleClosing; private _attachOpenPanelEvents; private _pointerDownListener; private _closeOnBackdropClick; private _closedPanelKeyboardInteraction; /** Highlight the searched text on the options. */ private _highlightOptions; protected render(): TemplateResult; } declare global { interface HTMLElementEventMap { inputAutocomplete: CustomEvent<{ option: SbbOptionBaseElement; }>; } } export {}; //# sourceMappingURL=autocomplete-base-element.d.ts.map