import { Overlay, OverlayRef, ScrollStrategy, ViewportRuler } from '@angular/cdk/overlay'; import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { TsDocumentService } from '@terminus/ngx-tools/browser'; import { TsFormFieldComponent } from '@terminus/ui/form-field'; import { TsOptionComponent, TsOptionSelectionChange } from '@terminus/ui/option'; import { Observable } from 'rxjs'; import { TsSelectionListPanelComponent } from './selection-list-panel.component'; export declare const TS_SELECTION_LIST_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>; /** * @param overlay */ export declare const TS_SELECTION_LIST_SCROLL_STRATEGY_FACTORY: (overlay: Overlay) => () => ScrollStrategy; export declare const TS_SELECTION_LIST_SCROLL_STRATEGY_FACTORY_PROVIDER: { provide: InjectionToken<() => ScrollStrategy>; deps: (typeof Overlay)[]; useFactory: (overlay: Overlay) => () => ScrollStrategy; }; export declare const SELECTION_LIST_PANEL_MAX_HEIGHT = 256; /** * A directive that adds selection-list trigger functionality to an input * * @example * */ export declare class TsSelectionListTriggerDirective implements ControlValueAccessor, OnDestroy { elementRef: ElementRef; private overlay; private viewContainerRef; private ngZone; private changeDetectorRef; private documentService; private viewportRuler; private formField; /** * Whether the panel can open the next time it is focused. Used to prevent a focused, closed panel from being reopened if * the user switches to another browser tab and then comes back. */ private canOpenOnNextFocus; /** * Stream of keyboard events that can close the panel */ private readonly closeKeyEventStream; private componentDestroyed; /** * Store a reference to the document object */ private readonly document; /** * Whether or not the label state is being overridden */ private manuallyFloatingLabel; /** * Stream of option selections */ readonly optionSelections: Observable | Observable; /** * Store whether the overlay is currently attached */ private overlayAttached; /** * Store a reference to the overlay */ overlayRef: OverlayRef | null | undefined; /** * Old value of the native input * * NOTE: Used to work around issues with the `input` event on IE */ private previousValue; /** * Store a reference to the portal */ private portal; /** * Strategy that is used to position the panel */ private positionStrategy; /** * The defined scroll strategy */ private readonly scrollStrategy; /** * Subscription to viewport size changes */ private viewportSubscription; /** * Define the default component ID */ readonly uid: string; /** * The currently active option, coerced to TsOptionComponent type */ get activeOption(): TsOptionComponent | null; /** * Calculates the height of the options * * Only called if at least one option exists */ get itemHeight(): number; /** * A stream of actions that should close the panel, including when an option is selected, on blur, and when TAB is pressed. */ get panelClosingActions(): Observable; /** * Whether or not the panel is open */ get panelOpen(): boolean; /** * Reflect the settings from the parent */ allowMultiple: boolean; /** * The `autocomplete` attribute to be set on the input element. */ autocompleteAttribute: string; /** * Whether the trigger is disabled. When disabled, the element will act as a regular input and the user won't be able to open the panel. * * @param value */ set selectionListDisabled(value: boolean); get selectionListDisabled(): boolean; private _selectionListDisabled; /** * The panel to be attached to this trigger */ selectionListPanel: TsSelectionListPanelComponent; /** * Define if the panel should reopen after a selection is made * * @param value */ set reopenAfterSelection(value: boolean); get reopenAfterSelection(): boolean; private _reopenAfterSelection; /** * Emit when the backdrop is clicked */ readonly backdropClicked: EventEmitter; constructor(elementRef: ElementRef, overlay: Overlay, viewContainerRef: ViewContainerRef, ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, documentService: TsDocumentService, viewportRuler: ViewportRuler, scrollStrategy: any, formField: TsFormFieldComponent); /** * Clean up subscriptions and destroy the panel */ ngOnDestroy(): void; /** * Close the panel * * @param overrideReopenFlag - Whether the panel should reopen */ closePanel(overrideReopenFlag?: boolean): void; /** * Handle the focus event */ handleFocus(): void; /** * Handle input into the trigger * * @param event - The keyboard event */ handleInput(event: KeyboardEvent): void; /** * Handle keydown events * * @param event - The keyboard event */ handleKeydown(event: KeyboardEvent): void; /** * View -> model callback called when value changes */ onChange: (value: any) => void; /** * View -> model callback called when the DOM has been touched */ onTouched: () => void; /** * Open the panel */ openPanel(): void; /** * Register the onChange function * * NOTE: Implemented as part of ControlValueAccessor * * @param fn - The new onChange function */ registerOnChange(fn: (value: string) => {}): void; /** * Register the onTouched function * * NOTE: Implemented as part of ControlValueAccessor * * @param fn - The new onTouched function */ registerOnTouched(fn: () => {}): void; /** * Set the disabled state * * NOTE: Implemented as part of ControlValueAccessor * * @param isDisabled - Whether the element should be set to disabled */ setDisabledState(isDisabled: boolean): void; /** * Function used to write the value by the model * * NOTE: Implemented as part of ControlValueAccessor * NOTE: This method is called by the forms API to write to the view when programmatic changes from model to view are requested. * * @param value - The value to write */ writeValue(value: string): void; /** * Attach the overlay */ private attachOverlay; /** * Determine whether the panel can be opened */ private canOpen; /** * Clear any previous selected option and emit a selection change event for this option * * @param skip */ private clearPreviousSelectedOption; /** * Destroy the panel */ private destroyPanel; /** * In 'auto' mode, the label will animate down as soon as focus is lost. This causes the value to jump when selecting an option with the * mouse. This method manually floats the label until the panel can be closed. * * @param shouldAnimate - Whether the label should be animated when it is floated */ private floatLabel; /** * Return the connected element * * @returns The ElementRef */ private getConnectedElement; /** * Returns the width of the input element, so the panel width can match it */ private getHostWidth; /** * Create a config for an overlay * * @returns The overlay config */ private getOverlayConfig; /** * Get the overlay position strategy * * @returns The position strategy */ private getOverlayPositionStrategy; /** * Return the panel width * * @returns The width */ private getPanelWidth; /** * 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; /** * If the label has been manually elevated, return it to its normal state */ private resetLabel; /** * 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. * * @param event - The event containing the option */ private setValueAndClose; /** * This method listens to a stream of panel closing actions and resets the stream every time the option list changes * * @returns The subscription */ private subscribeToClosingActions; /** * Event handler for when the window is blurred. * * Needs to be an arrow function in order to preserve the context. */ private windowBlurHandler; /** * Scroll to an option * * Given that we are not actually focusing active options, we must manually adjust scroll to reveal options below the fold. First, we find * the offset of the option from the top of the panel. If that offset is below the fold, the new scrollTop will be the offset - the panel * height + the option height, so the active option will be just visible at the bottom of the panel. If that offset is above the top of * the visible panel, the new scrollTop will become the offset. If that offset is visible within the panel already, the scrollTop is not * adjusted. */ private scrollToOption; }