autocomplete-trigger.d.ts 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { Directionality } from '@angular/cdk/bidi';
  9. import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
  10. import { ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef, OnChanges, SimpleChanges } from '@angular/core';
  11. import { ViewportRuler } from '@angular/cdk/scrolling';
  12. import { ControlValueAccessor } from '@angular/forms';
  13. import { MatOption, MatOptionSelectionChange } from '@angular/material/core';
  14. import { MatFormField } from '@angular/material/form-field';
  15. import { Observable } from 'rxjs';
  16. import { MatAutocomplete } from './autocomplete';
  17. import { MatAutocompleteOrigin } from './autocomplete-origin';
  18. /**
  19. * The following style constants are necessary to save here in order
  20. * to properly calculate the scrollTop of the panel. Because we are not
  21. * actually focusing the active item, scroll must be handled manually.
  22. */
  23. /** The height of each autocomplete option. */
  24. export declare const AUTOCOMPLETE_OPTION_HEIGHT = 48;
  25. /** The total height of the autocomplete panel. */
  26. export declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;
  27. /** Injection token that determines the scroll handling while the autocomplete panel is open. */
  28. export declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
  29. /** @docs-private */
  30. export declare function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
  31. /** @docs-private */
  32. export declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
  33. provide: InjectionToken<() => ScrollStrategy>;
  34. deps: (typeof Overlay)[];
  35. useFactory: typeof MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY;
  36. };
  37. /**
  38. * Provider that allows the autocomplete to register as a ControlValueAccessor.
  39. * @docs-private
  40. */
  41. export declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
  42. /**
  43. * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.
  44. * @docs-private
  45. */
  46. export declare function getMatAutocompleteMissingPanelError(): Error;
  47. export declare class MatAutocompleteTrigger implements ControlValueAccessor, OnChanges, OnDestroy {
  48. private _element;
  49. private _overlay;
  50. private _viewContainerRef;
  51. private _zone;
  52. private _changeDetectorRef;
  53. private _dir;
  54. private _formField;
  55. private _document;
  56. private _viewportRuler?;
  57. private _overlayRef;
  58. private _portal;
  59. private _componentDestroyed;
  60. private _autocompleteDisabled;
  61. private _scrollStrategy;
  62. /** Old value of the native input. Used to work around issues with the `input` event on IE. */
  63. private _previousValue;
  64. /** Strategy that is used to position the panel. */
  65. private _positionStrategy;
  66. /** Whether or not the label state is being overridden. */
  67. private _manuallyFloatingLabel;
  68. /** The subscription for closing actions (some are bound to document). */
  69. private _closingActionsSubscription;
  70. /** Subscription to viewport size changes. */
  71. private _viewportSubscription;
  72. /**
  73. * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
  74. * closed autocomplete from being reopened if the user switches to another browser tab and then
  75. * comes back.
  76. */
  77. private _canOpenOnNextFocus;
  78. /** Stream of keyboard events that can close the panel. */
  79. private readonly _closeKeyEventStream;
  80. /**
  81. * Event handler for when the window is blurred. Needs to be an
  82. * arrow function in order to preserve the context.
  83. */
  84. private _windowBlurHandler;
  85. /** `View -> model callback called when value changes` */
  86. _onChange: (value: any) => void;
  87. /** `View -> model callback called when autocomplete has been touched` */
  88. _onTouched: () => void;
  89. /** The autocomplete panel to be attached to this trigger. */
  90. autocomplete: MatAutocomplete;
  91. /**
  92. * Position of the autocomplete panel relative to the trigger element. A position of `auto`
  93. * will render the panel underneath the trigger if there is enough space for it to fit in
  94. * the viewport, otherwise the panel will be shown above it. If the position is set to
  95. * `above` or `below`, the panel will always be shown above or below the trigger. no matter
  96. * whether it fits completely in the viewport.
  97. */
  98. position: 'auto' | 'above' | 'below';
  99. /**
  100. * Reference relative to which to position the autocomplete panel.
  101. * Defaults to the autocomplete trigger element.
  102. */
  103. connectedTo: MatAutocompleteOrigin;
  104. /**
  105. * `autocomplete` attribute to be set on the input element.
  106. * @docs-private
  107. */
  108. autocompleteAttribute: string;
  109. /**
  110. * Whether the autocomplete is disabled. When disabled, the element will
  111. * act as a regular input and the user won't be able to open the panel.
  112. */
  113. autocompleteDisabled: boolean;
  114. constructor(_element: ElementRef<HTMLInputElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef, _zone: NgZone, _changeDetectorRef: ChangeDetectorRef, scrollStrategy: any, _dir: Directionality, _formField: MatFormField, _document: any, _viewportRuler?: ViewportRuler | undefined);
  115. ngOnChanges(changes: SimpleChanges): void;
  116. ngOnDestroy(): void;
  117. /** Whether or not the autocomplete panel is open. */
  118. readonly panelOpen: boolean;
  119. private _overlayAttached;
  120. /** Opens the autocomplete suggestion panel. */
  121. openPanel(): void;
  122. /** Closes the autocomplete suggestion panel. */
  123. closePanel(): void;
  124. /**
  125. * Updates the position of the autocomplete suggestion panel to ensure that it fits all options
  126. * within the viewport.
  127. */
  128. updatePosition(): void;
  129. /**
  130. * A stream of actions that should close the autocomplete panel, including
  131. * when an option is selected, on blur, and when TAB is pressed.
  132. */
  133. readonly panelClosingActions: Observable<MatOptionSelectionChange | null>;
  134. /** Stream of autocomplete option selections. */
  135. readonly optionSelections: Observable<MatOptionSelectionChange>;
  136. /** The currently active option, coerced to MatOption type. */
  137. readonly activeOption: MatOption | null;
  138. /** Stream of clicks outside of the autocomplete panel. */
  139. private _getOutsideClickStream;
  140. writeValue(value: any): void;
  141. registerOnChange(fn: (value: any) => {}): void;
  142. registerOnTouched(fn: () => {}): void;
  143. setDisabledState(isDisabled: boolean): void;
  144. _handleKeydown(event: KeyboardEvent): void;
  145. _handleInput(event: KeyboardEvent): void;
  146. _handleFocus(): void;
  147. /**
  148. * In "auto" mode, the label will animate down as soon as focus is lost.
  149. * This causes the value to jump when selecting an option with the mouse.
  150. * This method manually floats the label until the panel can be closed.
  151. * @param shouldAnimate Whether the label should be animated when it is floated.
  152. */
  153. private _floatLabel;
  154. /** If the label has been manually elevated, return it to its normal state. */
  155. private _resetLabel;
  156. /**
  157. * Given that we are not actually focusing active options, we must manually adjust scroll
  158. * to reveal options below the fold. First, we find the offset of the option from the top
  159. * of the panel. If that offset is below the fold, the new scrollTop will be the offset -
  160. * the panel height + the option height, so the active option will be just visible at the
  161. * bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
  162. * will become the offset. If that offset is visible within the panel already, the scrollTop is
  163. * not adjusted.
  164. */
  165. private _scrollToOption;
  166. /**
  167. * This method listens to a stream of panel closing actions and resets the
  168. * stream every time the option list changes.
  169. */
  170. private _subscribeToClosingActions;
  171. /** Destroys the autocomplete suggestion panel. */
  172. private _destroyPanel;
  173. private _setTriggerValue;
  174. /**
  175. * This method closes the panel, and if a value is specified, also sets the associated
  176. * control to that value. It will also mark the control as dirty if this interaction
  177. * stemmed from the user.
  178. */
  179. private _setValueAndClose;
  180. /**
  181. * Clear any previous selected option and emit a selection change event for this option
  182. */
  183. private _clearPreviousSelectedOption;
  184. private _attachOverlay;
  185. private _getOverlayConfig;
  186. private _getOverlayPosition;
  187. /** Sets the positions on a position strategy based on the directive's input state. */
  188. private _setStrategyPositions;
  189. private _getConnectedElement;
  190. private _getPanelWidth;
  191. /** Returns the width of the input element, so the panel width can match it. */
  192. private _getHostWidth;
  193. /**
  194. * Resets the active item to -1 so arrow events will activate the
  195. * correct options, or to 0 if the consumer opted into it.
  196. */
  197. private _resetActiveItem;
  198. /** Determines whether the panel can be opened. */
  199. private _canOpen;
  200. }