import * as i0 from '@angular/core'; import { InjectionToken, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, EventEmitter, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core'; import * as i1 from '@angular/cdk/a11y'; import { ActiveDescendantKeyManager } from '@angular/cdk/a11y'; import * as i2 from '@angular/cdk/overlay'; import { ScrollStrategy } from '@angular/cdk/overlay'; import * as i1$1 from '@sbb-esta/angular/core'; import { SbbOption, SbbOptgroup, SbbOptionHint, SbbOptionSelectionChange } from '@sbb-esta/angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { ControlValueAccessor } from '@angular/forms'; /** Event object that is emitted when an autocomplete option is selected. */ declare class SbbAutocompleteSelectedEvent { /** Reference to the autocomplete panel that emitted the event. */ source: SbbAutocomplete; /** Option that was selected. */ option: SbbOption; constructor( /** Reference to the autocomplete panel that emitted the event. */ source: SbbAutocomplete, /** Option that was selected. */ option: SbbOption); } /** Event object that is emitted when an autocomplete option is activated. */ interface SbbAutocompleteActivatedEvent { /** Reference to the autocomplete panel that emitted the event. */ source: SbbAutocomplete; /** Option that was selected. */ option: SbbOption | null; } /** Default `sbb-autocomplete` options that can be overridden. */ interface SbbAutocompleteDefaultOptions { /** Whether the first option should be highlighted when an autocomplete panel is opened. */ autoActiveFirstOption?: boolean; /** Whether the active option should be selected as the user is navigating. */ autoSelectActiveOption?: boolean; /** Whether the user is required to make a selection when they're interacting with the autocomplete. */ requireSelection?: boolean; /** Class or list of classes to be applied to the autocomplete's overlay panel. */ overlayPanelClass?: string | string[]; } /** Injection token to be used to override the default options for `sbb-autocomplete`. */ declare const SBB_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken; declare class SbbAutocomplete implements AfterContentInit, OnDestroy { private _changeDetectorRef; private _elementRef; protected defaults: SbbAutocompleteDefaultOptions; private _activeOptionChanges; /** Manages active item in option list based on key events. */ _keyManager: ActiveDescendantKeyManager; /** Whether the autocomplete panel should be visible, depending on option length. */ get showPanel(): boolean; _showPanel: BehaviorSubject; /** Whether the autocomplete panel is open. */ get isOpen(): boolean; _isOpen: boolean; /** @docs-private */ template: TemplateRef; /** Element for the panel containing the autocomplete options. */ panel: ElementRef; /** All of the defined select options. */ options: QueryList; /** All of the defined groups of options. */ optionGroups: QueryList; /** All of the defined option hints. */ hints: QueryList; /** Aria label of the autocomplete. If not specified, the placeholder will be used as label. */ ariaLabel: string; /** Input that can be used to specify the `aria-labelledby` attribute. */ ariaLabelledby: string; /** Function that maps an option's control value to its display value in the trigger. */ displayWith: ((value: any) => string) | null; /** * Function which normalizes input values to highlight them in options. * E.g. If your function is (value: string) => value.replace(new RegExp('[ö]', 'i'), 'o') * and you search for 'Faroer', an option like 'Faröer' will be highlighted. * IMPORTANT: The provided function MAY NOT change the order of the characters or the length of the string. * (e.g. changing `ä` to `ae` would break the highlighting function) */ localeNormalizer: ((value: string) => string) | null; /** * Whether the first option should be highlighted when the autocomplete panel is opened. * Can be configured globally through the `SBB_AUTOCOMPLETE_DEFAULT_OPTIONS` token. */ autoActiveFirstOption: boolean; /** Whether the active option should be selected as the user is navigating. */ autoSelectActiveOption: 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. */ requireSelection: boolean; /** * Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will * match the width of its host. */ panelWidth: string | number; /** Event that is emitted whenever an option from the list is selected. */ readonly optionSelected: EventEmitter; /** Event that is emitted when the autocomplete panel is opened. */ readonly opened: EventEmitter; /** Event that is emitted when the autocomplete panel is closed. */ readonly closed: EventEmitter; /** Emits whenever an option is activated. */ readonly optionActivated: EventEmitter; /** * Takes classes set on the host sbb-autocomplete element and applies them to the panel * inside the overlay container to allow for easy styling. */ set classList(value: string | string[]); _classList: string | string[]; /** If set to true, the panel is also displayed if there are no options but hints. */ showHintIfNoOptions: boolean; /** Unique ID to be used by autocomplete trigger's "aria-controls" property. */ id: string; /** * Tells any descendant `sbb-optgroup` to use the inert a11y pattern. * @docs-private */ readonly inertGroups: boolean; constructor(...args: unknown[]); ngAfterContentInit(): void; ngOnDestroy(): void; /** * Sets the panel scrollTop. This allows us to manually scroll to display options * above or below the fold, as they are not actually being focused when active. */ _setScrollTop(scrollTop: number): void; /** Returns the panel's scrollTop. */ _getScrollTop(): number; /** * Panel should hide itself when the option list is empty. * If there are only hints and showHintIfNoOptions is true, * the panel should still be displayed. */ _setVisibility(): void; /** Emits the `select` event. */ _emitSelectEvent(option: SbbOption): void; /** Gets the aria-labelledby for the autocomplete panel. */ _getPanelAriaLabelledby(labelId: string | null): string | null; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_autoActiveFirstOption: unknown; static ngAcceptInputType_autoSelectActiveOption: unknown; static ngAcceptInputType_requireSelection: unknown; static ngAcceptInputType_showHintIfNoOptions: unknown; } /** * Directive applied to an element to make it usable * as a connection point for an autocomplete panel. */ declare class SbbAutocompleteOrigin { elementRef: ElementRef; constructor(...args: unknown[]); static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** Injection token that determines the scroll handling while the autocomplete panel is open. */ declare const SBB_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>; /** * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel. * @docs-private */ declare function getSbbAutocompleteMissingPanelError(): Error; declare class SbbAutocompleteTrigger implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy { private _element; private _overlay; private _viewContainerRef; private _zone; private _changeDetectorRef; private _formField; private _document; private _viewportRuler; private _defaults; private _overlayRef; private _portal; private _componentDestroyed; private _scrollStrategy; private _keydownSubscription; private _outsideClickSubscription; /** Old value of the native input. Used to work around issues with the `input` event on IE. */ private _previousValue; /** Value of the input element when the panel was attached (even if there are no options). */ private _valueOnAttach; /** Value on the previous keydown event. */ private _valueOnLastKeydown; /** Strategy that is used to position the panel. */ private _positionStrategy; /** The subscription for closing actions (some are bound to document). */ private _closingActionsSubscription; /** Subscription to viewport size changes. */ private _viewportSubscription; /** Subscription to position changes */ private _positionSubscription; /** Subscription to highlight options */ private _highlightSubscription; /** Subscription to toggle classes on the connected element */ private _connectedElementClassSubscription; /** BehaviourSubject holding inputValue. Used for highlighting */ private _inputValue; /** * Whether the autocomplete can open the next time it is focused. Used to prevent a focused, * closed autocomplete from being reopened if the user switches to another browser tab and then * comes back. */ private _canOpenOnNextFocus; /** Value inside the input before we auto-selected an option. */ private _valueBeforeAutoSelection; /** * Current option that we have auto-selected as the user is navigating, * but which hasn't been propagated to the model value yet. */ private _pendingAutoselectedOption; /** Stream of keyboard events that can close the panel. */ private readonly _closeKeyEventStream; /** * Event handler for when the window is blurred. Needs to be an * arrow function in order to preserve the context. */ private _windowBlurHandler; /** `View -> model callback called when value changes` */ _onChange: (value: any) => void; /** `View -> model callback called when autocomplete has been touched` */ _onTouched: () => void; /** The autocomplete panel to be attached to this trigger. */ get autocomplete(): SbbAutocomplete; set autocomplete(autocomplete: SbbAutocomplete); private _autocomplete; /** * Position of the autocomplete panel relative to the trigger element. A position of `auto` * will render the panel underneath the trigger if there is enough space for it to fit in * the viewport, otherwise the panel will be shown above it. If the position is set to * `above` or `below`, the panel will always be shown above or below the trigger. no matter * whether it fits completely in the viewport. */ position: 'auto' | 'above' | 'below'; /** * Reference relative to which to position the autocomplete panel. * Defaults to the autocomplete trigger element. */ connectedTo: SbbAutocompleteOrigin; /** * `autocomplete` attribute to be set on the input element. * @docs-private */ autocompleteAttribute: string; /** * Whether the autocomplete is disabled. When disabled, the element will * act as a regular input and the user won't be able to open the panel. */ autocompleteDisabled: boolean; private _initialized; private _injector; constructor(...args: unknown[]); /** Class to apply to the panel when it's above the input. */ private _aboveClass; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** Whether or not the autocomplete panel is open. */ get panelOpen(): boolean; private _overlayAttached; /** Opens the autocomplete suggestion panel. */ openPanel(): void; /** Closes the autocomplete suggestion panel. */ closePanel(): void; /** * Updates the position of the autocomplete suggestion panel to ensure that it fits all options * within the viewport. */ updatePosition(): void; /** * A stream of actions that should close the autocomplete panel, including * when an option is selected, on blur, and when TAB is pressed. */ get panelClosingActions(): Observable; /** Stream of changes to the selection state of the autocomplete options. */ readonly optionSelections: Observable; /** The currently active option, coerced to SbbOption type. */ get activeOption(): SbbOption | null; /** Stream of clicks outside of the autocomplete panel. */ private _getOutsideClickStream; writeValue(value: any): void; registerOnChange(fn: (value: any) => {}): void; registerOnTouched(fn: () => {}): void; setDisabledState(isDisabled: boolean): void; _handleKeydown(event: KeyboardEvent): void; _handleInput(event: Event): void; /** * Note: we use `focusin`, as opposed to `focus`, in order to open the panel * a little earlier. This avoids issues where IE delays the focusing of the input. */ _handleFocus(): void; _handleClick(): void; /** * Update width of the autocomplete panel. */ _updateSize(): void; /** * This method listens to a stream of panel closing actions and resets the * stream every time the option list changes. */ private _subscribeToClosingActions; /** * Emits the opened event once it's known that the panel will be shown and stores * the state of the trigger right before the opening sequence was finished. */ private _emitOpened; /** Destroys the autocomplete suggestion panel. */ private _destroyPanel; /** Given a value, returns the string that should be shown within the input. */ private _getDisplayValue; private _assignOptionValue; private _updateNativeInputValue; /** * This method closes the panel, and if a value is specified, also sets the associated * control to that value. It will also mark the control as dirty if this interaction * stemmed from the user. */ private _setValueAndClose; /** * Clear any previous selected option and emit a selection change event for this option. */ private _clearPreviousSelectedOption; private _openPanelInternal; private _attachOverlay; /** Handles keyboard events coming from the overlay panel. */ private _handlePanelKeydown; /** Updates the panel's visibility state and any trigger state tied to id. */ private _updatePanelState; private _getOverlayConfig; private _getOverlayPosition; /** Sets the positions on a position strategy based on the directive's input state. */ private _setStrategyPositions; private _getConnectedElement; private _getPanelWidth; /** Returns the width of the input element, so the panel width can match it. */ private _getHostWidth; /** * Resets the active item to -1 so arrow events will activate the * correct options, or to 0 if the consumer opted into it. */ private _resetActiveItem; /** Determines whether the panel can be opened. */ private _canOpen; /** Use defaultView of injected document if available or fallback to global window reference */ private _getWindow; /** Scrolls to a particular option in the list. */ private _scrollToOption; /** * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options * panel. Track the modal we have changed so we can undo the changes on destroy. */ private _trackedModal; /** * If the autocomplete trigger is inside of an `aria-modal` element, connect * that modal to the options panel with `aria-owns`. * * For some browser + screen reader combinations, when navigation is inside * of an `aria-modal` element, the screen reader treats everything outside * of that modal as hidden or invisible. * * This causes a problem when the combobox trigger is _inside_ of a modal, because the * options panel is rendered _outside_ of that modal, preventing screen reader navigation * from reaching the panel. * * We can work around this issue by applying `aria-owns` to the modal with the `id` of * the options panel. This effectively communicates to assistive technology that the * options panel is part of the same interaction as the modal. * * At time of this writing, this issue is present in VoiceOver. * See https://github.com/angular/components/issues/20694 */ private _applyModalPanelOwnership; /** Clears the references to the listbox overlay element from the modal it was added to. */ private _clearFromModal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_autocompleteDisabled: unknown; } declare class SbbAutocompleteModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { SBB_AUTOCOMPLETE_DEFAULT_OPTIONS, SBB_AUTOCOMPLETE_SCROLL_STRATEGY, SbbAutocomplete, SbbAutocompleteModule, SbbAutocompleteOrigin, SbbAutocompleteSelectedEvent, SbbAutocompleteTrigger, getSbbAutocompleteMissingPanelError }; export type { SbbAutocompleteActivatedEvent, SbbAutocompleteDefaultOptions };