index.d.ts 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, AfterContentInit, OnDestroy, TemplateRef, ElementRef, QueryList, EventEmitter, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
  3. import * as i2 from '@angular/cdk/overlay';
  4. import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
  5. import { M as MatOptionModule } from '../index.d-CwEYxGJi.js';
  6. import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
  7. import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
  8. import { M as MatOption, a as MatOptgroup, b as MatOptionSelectionChange } from '../option.d-BVGX3edu.js';
  9. import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
  10. import { ControlValueAccessor } from '@angular/forms';
  11. import { Observable } from 'rxjs';
  12. import * as i5 from '@angular/cdk/scrolling';
  13. import '../index.d-DG9eDM2-.js';
  14. import '../ripple.d-BxTUZJt7.js';
  15. import '@angular/cdk/platform';
  16. import '../pseudo-checkbox-module.d-DL5oxSJM.js';
  17. import '@angular/cdk/bidi';
  18. /** Event object that is emitted when an autocomplete option is selected. */
  19. declare class MatAutocompleteSelectedEvent {
  20. /** Reference to the autocomplete panel that emitted the event. */
  21. source: MatAutocomplete;
  22. /** Option that was selected. */
  23. option: MatOption;
  24. constructor(
  25. /** Reference to the autocomplete panel that emitted the event. */
  26. source: MatAutocomplete,
  27. /** Option that was selected. */
  28. option: MatOption);
  29. }
  30. /** Event object that is emitted when an autocomplete option is activated. */
  31. interface MatAutocompleteActivatedEvent {
  32. /** Reference to the autocomplete panel that emitted the event. */
  33. source: MatAutocomplete;
  34. /** Option that was selected. */
  35. option: MatOption | null;
  36. }
  37. /** Default `mat-autocomplete` options that can be overridden. */
  38. interface MatAutocompleteDefaultOptions {
  39. /** Whether the first option should be highlighted when an autocomplete panel is opened. */
  40. autoActiveFirstOption?: boolean;
  41. /** Whether the active option should be selected as the user is navigating. */
  42. autoSelectActiveOption?: boolean;
  43. /**
  44. * Whether the user is required to make a selection when
  45. * they're interacting with the autocomplete.
  46. */
  47. requireSelection?: boolean;
  48. /** Class to be applied to the autocomplete's backdrop. */
  49. backdropClass?: string;
  50. /** Whether the autocomplete has a backdrop. */
  51. hasBackdrop?: boolean;
  52. /** Class or list of classes to be applied to the autocomplete's overlay panel. */
  53. overlayPanelClass?: string | string[];
  54. /** Whether icon indicators should be hidden for single-selection. */
  55. hideSingleSelectionIndicator?: boolean;
  56. }
  57. /** Injection token to be used to override the default options for `mat-autocomplete`. */
  58. declare const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;
  59. /**
  60. * @docs-private
  61. * @deprecated No longer used, will be removed.
  62. * @breaking-change 21.0.0
  63. */
  64. declare function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefaultOptions;
  65. /** Autocomplete component. */
  66. declare class MatAutocomplete implements AfterContentInit, OnDestroy {
  67. private _changeDetectorRef;
  68. private _elementRef;
  69. protected _defaults: MatAutocompleteDefaultOptions;
  70. protected _animationsDisabled: boolean;
  71. private _activeOptionChanges;
  72. /** Manages active item in option list based on key events. */
  73. _keyManager: ActiveDescendantKeyManager<MatOption>;
  74. /** Whether the autocomplete panel should be visible, depending on option length. */
  75. showPanel: boolean;
  76. /** Whether the autocomplete panel is open. */
  77. get isOpen(): boolean;
  78. _isOpen: boolean;
  79. /** Latest trigger that opened the autocomplete. */
  80. _latestOpeningTrigger: unknown;
  81. /** @docs-private Sets the theme color of the panel. */
  82. _setColor(value: ThemePalette): void;
  83. /** @docs-private theme color of the panel */
  84. protected _color: ThemePalette;
  85. /** @docs-private */
  86. template: TemplateRef<any>;
  87. /** Element for the panel containing the autocomplete options. */
  88. panel: ElementRef;
  89. /** Reference to all options within the autocomplete. */
  90. options: QueryList<MatOption>;
  91. /** Reference to all option groups within the autocomplete. */
  92. optionGroups: QueryList<MatOptgroup>;
  93. /** Aria label of the autocomplete. */
  94. ariaLabel: string;
  95. /** Input that can be used to specify the `aria-labelledby` attribute. */
  96. ariaLabelledby: string;
  97. /** Function that maps an option's control value to its display value in the trigger. */
  98. displayWith: ((value: any) => string) | null;
  99. /**
  100. * Whether the first option should be highlighted when the autocomplete panel is opened.
  101. * Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
  102. */
  103. autoActiveFirstOption: boolean;
  104. /** Whether the active option should be selected as the user is navigating. */
  105. autoSelectActiveOption: boolean;
  106. /**
  107. * Whether the user is required to make a selection when they're interacting with the
  108. * autocomplete. If the user moves away from the autocomplete without selecting an option from
  109. * the list, the value will be reset. If the user opens the panel and closes it without
  110. * interacting or selecting a value, the initial value will be kept.
  111. */
  112. requireSelection: boolean;
  113. /**
  114. * Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will
  115. * match the width of its host.
  116. */
  117. panelWidth: string | number;
  118. /** Whether ripples are disabled within the autocomplete panel. */
  119. disableRipple: boolean;
  120. /** Event that is emitted whenever an option from the list is selected. */
  121. readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent>;
  122. /** Event that is emitted when the autocomplete panel is opened. */
  123. readonly opened: EventEmitter<void>;
  124. /** Event that is emitted when the autocomplete panel is closed. */
  125. readonly closed: EventEmitter<void>;
  126. /** Emits whenever an option is activated. */
  127. readonly optionActivated: EventEmitter<MatAutocompleteActivatedEvent>;
  128. /**
  129. * Takes classes set on the host mat-autocomplete element and applies them to the panel
  130. * inside the overlay container to allow for easy styling.
  131. */
  132. set classList(value: string | string[]);
  133. _classList: string | string[];
  134. /** Whether checkmark indicator for single-selection options is hidden. */
  135. get hideSingleSelectionIndicator(): boolean;
  136. set hideSingleSelectionIndicator(value: boolean);
  137. private _hideSingleSelectionIndicator;
  138. /** Syncs the parent state with the individual options. */
  139. _syncParentProperties(): void;
  140. /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
  141. id: string;
  142. /**
  143. * Tells any descendant `mat-optgroup` to use the inert a11y pattern.
  144. * @docs-private
  145. */
  146. readonly inertGroups: boolean;
  147. constructor(...args: unknown[]);
  148. ngAfterContentInit(): void;
  149. ngOnDestroy(): void;
  150. /**
  151. * Sets the panel scrollTop. This allows us to manually scroll to display options
  152. * above or below the fold, as they are not actually being focused when active.
  153. */
  154. _setScrollTop(scrollTop: number): void;
  155. /** Returns the panel's scrollTop. */
  156. _getScrollTop(): number;
  157. /** Panel should hide itself when the option list is empty. */
  158. _setVisibility(): void;
  159. /** Emits the `select` event. */
  160. _emitSelectEvent(option: MatOption): void;
  161. /** Gets the aria-labelledby for the autocomplete panel. */
  162. _getPanelAriaLabelledby(labelId: string | null): string | null;
  163. protected _skipPredicate(): boolean;
  164. static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocomplete, never>;
  165. static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, ["options", "optionGroups"], ["*"], true, never>;
  166. static ngAcceptInputType_autoActiveFirstOption: unknown;
  167. static ngAcceptInputType_autoSelectActiveOption: unknown;
  168. static ngAcceptInputType_requireSelection: unknown;
  169. static ngAcceptInputType_disableRipple: unknown;
  170. static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
  171. }
  172. /**
  173. * Directive applied to an element to make it usable
  174. * as a connection point for an autocomplete panel.
  175. */
  176. declare class MatAutocompleteOrigin {
  177. elementRef: ElementRef<HTMLElement>;
  178. constructor(...args: unknown[]);
  179. static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteOrigin, never>;
  180. static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteOrigin, "[matAutocompleteOrigin]", ["matAutocompleteOrigin"], {}, {}, never, never, true, never>;
  181. }
  182. /**
  183. * Provider that allows the autocomplete to register as a ControlValueAccessor.
  184. * @docs-private
  185. */
  186. declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
  187. /**
  188. * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.
  189. * @docs-private
  190. */
  191. declare function getMatAutocompleteMissingPanelError(): Error;
  192. /** Injection token that determines the scroll handling while the autocomplete panel is open. */
  193. declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
  194. /**
  195. * @docs-private
  196. * @deprecated No longer used, will be removed.
  197. * @breaking-change 21.0.0
  198. */
  199. declare function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
  200. /**
  201. * @docs-private
  202. * @deprecated No longer used, will be removed.
  203. * @breaking-change 21.0.0
  204. */
  205. declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
  206. provide: InjectionToken<() => ScrollStrategy>;
  207. deps: (typeof Overlay)[];
  208. useFactory: typeof MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY;
  209. };
  210. /** Base class with all of the `MatAutocompleteTrigger` functionality. */
  211. declare class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy {
  212. private _environmentInjector;
  213. private _element;
  214. private _overlay;
  215. private _viewContainerRef;
  216. private _zone;
  217. private _changeDetectorRef;
  218. private _dir;
  219. private _formField;
  220. private _viewportRuler;
  221. private _scrollStrategy;
  222. private _renderer;
  223. private _defaults;
  224. private _overlayRef;
  225. private _portal;
  226. private _componentDestroyed;
  227. private _initialized;
  228. private _keydownSubscription;
  229. private _outsideClickSubscription;
  230. private _cleanupWindowBlur;
  231. /** Old value of the native input. Used to work around issues with the `input` event on IE. */
  232. private _previousValue;
  233. /** Value of the input element when the panel was attached (even if there are no options). */
  234. private _valueOnAttach;
  235. /** Value on the previous keydown event. */
  236. private _valueOnLastKeydown;
  237. /** Strategy that is used to position the panel. */
  238. private _positionStrategy;
  239. /** Whether or not the label state is being overridden. */
  240. private _manuallyFloatingLabel;
  241. /** The subscription for closing actions (some are bound to document). */
  242. private _closingActionsSubscription;
  243. /** Subscription to viewport size changes. */
  244. private _viewportSubscription;
  245. /** Implements BreakpointObserver to be used to detect handset landscape */
  246. private _breakpointObserver;
  247. private _handsetLandscapeSubscription;
  248. /**
  249. * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
  250. * closed autocomplete from being reopened if the user switches to another browser tab and then
  251. * comes back.
  252. */
  253. private _canOpenOnNextFocus;
  254. /** Value inside the input before we auto-selected an option. */
  255. private _valueBeforeAutoSelection;
  256. /**
  257. * Current option that we have auto-selected as the user is navigating,
  258. * but which hasn't been propagated to the model value yet.
  259. */
  260. private _pendingAutoselectedOption;
  261. /** Stream of keyboard events that can close the panel. */
  262. private readonly _closeKeyEventStream;
  263. /**
  264. * Event handler for when the window is blurred. Needs to be an
  265. * arrow function in order to preserve the context.
  266. */
  267. private _windowBlurHandler;
  268. /** `View -> model callback called when value changes` */
  269. _onChange: (value: any) => void;
  270. /** `View -> model callback called when autocomplete has been touched` */
  271. _onTouched: () => void;
  272. /** The autocomplete panel to be attached to this trigger. */
  273. autocomplete: MatAutocomplete;
  274. /**
  275. * Position of the autocomplete panel relative to the trigger element. A position of `auto`
  276. * will render the panel underneath the trigger if there is enough space for it to fit in
  277. * the viewport, otherwise the panel will be shown above it. If the position is set to
  278. * `above` or `below`, the panel will always be shown above or below the trigger. no matter
  279. * whether it fits completely in the viewport.
  280. */
  281. position: 'auto' | 'above' | 'below';
  282. /**
  283. * Reference relative to which to position the autocomplete panel.
  284. * Defaults to the autocomplete trigger element.
  285. */
  286. connectedTo: MatAutocompleteOrigin;
  287. /**
  288. * `autocomplete` attribute to be set on the input element.
  289. * @docs-private
  290. */
  291. autocompleteAttribute: string;
  292. /**
  293. * Whether the autocomplete is disabled. When disabled, the element will
  294. * act as a regular input and the user won't be able to open the panel.
  295. */
  296. autocompleteDisabled: boolean;
  297. constructor(...args: unknown[]);
  298. /** Class to apply to the panel when it's above the input. */
  299. private _aboveClass;
  300. ngAfterViewInit(): void;
  301. ngOnChanges(changes: SimpleChanges): void;
  302. ngOnDestroy(): void;
  303. /** Whether or not the autocomplete panel is open. */
  304. get panelOpen(): boolean;
  305. private _overlayAttached;
  306. /** Opens the autocomplete suggestion panel. */
  307. openPanel(): void;
  308. /** Closes the autocomplete suggestion panel. */
  309. closePanel(): void;
  310. /**
  311. * Updates the position of the autocomplete suggestion panel to ensure that it fits all options
  312. * within the viewport.
  313. */
  314. updatePosition(): void;
  315. /**
  316. * A stream of actions that should close the autocomplete panel, including
  317. * when an option is selected, on blur, and when TAB is pressed.
  318. */
  319. get panelClosingActions(): Observable<MatOptionSelectionChange | null>;
  320. /** Stream of changes to the selection state of the autocomplete options. */
  321. readonly optionSelections: Observable<MatOptionSelectionChange>;
  322. /** The currently active option, coerced to MatOption type. */
  323. get activeOption(): MatOption | null;
  324. /** Stream of clicks outside of the autocomplete panel. */
  325. private _getOutsideClickStream;
  326. writeValue(value: any): void;
  327. registerOnChange(fn: (value: any) => {}): void;
  328. registerOnTouched(fn: () => {}): void;
  329. setDisabledState(isDisabled: boolean): void;
  330. _handleKeydown(event: KeyboardEvent): void;
  331. _handleInput(event: KeyboardEvent): void;
  332. _handleFocus(): void;
  333. _handleClick(): void;
  334. /** Whether the input currently has focus. */
  335. private _hasFocus;
  336. /**
  337. * In "auto" mode, the label will animate down as soon as focus is lost.
  338. * This causes the value to jump when selecting an option with the mouse.
  339. * This method manually floats the label until the panel can be closed.
  340. * @param shouldAnimate Whether the label should be animated when it is floated.
  341. */
  342. private _floatLabel;
  343. /** If the label has been manually elevated, return it to its normal state. */
  344. private _resetLabel;
  345. /**
  346. * This method listens to a stream of panel closing actions and resets the
  347. * stream every time the option list changes.
  348. */
  349. private _subscribeToClosingActions;
  350. /**
  351. * Emits the opened event once it's known that the panel will be shown and stores
  352. * the state of the trigger right before the opening sequence was finished.
  353. */
  354. private _emitOpened;
  355. /** Destroys the autocomplete suggestion panel. */
  356. private _destroyPanel;
  357. /** Given a value, returns the string that should be shown within the input. */
  358. private _getDisplayValue;
  359. private _assignOptionValue;
  360. private _updateNativeInputValue;
  361. /**
  362. * This method closes the panel, and if a value is specified, also sets the associated
  363. * control to that value. It will also mark the control as dirty if this interaction
  364. * stemmed from the user.
  365. */
  366. private _setValueAndClose;
  367. /**
  368. * Clear any previous selected option and emit a selection change event for this option
  369. */
  370. private _clearPreviousSelectedOption;
  371. private _openPanelInternal;
  372. private _attachOverlay;
  373. /** Handles keyboard events coming from the overlay panel. */
  374. private _handlePanelKeydown;
  375. /** Updates the panel's visibility state and any trigger state tied to id. */
  376. private _updatePanelState;
  377. private _getOverlayConfig;
  378. private _getOverlayPosition;
  379. /** Sets the positions on a position strategy based on the directive's input state. */
  380. private _setStrategyPositions;
  381. private _getConnectedElement;
  382. private _getPanelWidth;
  383. /** Returns the width of the input element, so the panel width can match it. */
  384. private _getHostWidth;
  385. /**
  386. * Reset the active item to -1. This is so that pressing arrow keys will activate the correct
  387. * option.
  388. *
  389. * If the consumer opted-in to automatically activatating the first option, activate the first
  390. * *enabled* option.
  391. */
  392. private _resetActiveItem;
  393. /** Determines whether the panel can be opened. */
  394. private _canOpen;
  395. /** Scrolls to a particular option in the list. */
  396. private _scrollToOption;
  397. /**
  398. * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
  399. * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options
  400. * panel. Track the modal we have changed so we can undo the changes on destroy.
  401. */
  402. private _trackedModal;
  403. /**
  404. * If the autocomplete trigger is inside of an `aria-modal` element, connect
  405. * that modal to the options panel with `aria-owns`.
  406. *
  407. * For some browser + screen reader combinations, when navigation is inside
  408. * of an `aria-modal` element, the screen reader treats everything outside
  409. * of that modal as hidden or invisible.
  410. *
  411. * This causes a problem when the combobox trigger is _inside_ of a modal, because the
  412. * options panel is rendered _outside_ of that modal, preventing screen reader navigation
  413. * from reaching the panel.
  414. *
  415. * We can work around this issue by applying `aria-owns` to the modal with the `id` of
  416. * the options panel. This effectively communicates to assistive technology that the
  417. * options panel is part of the same interaction as the modal.
  418. *
  419. * At time of this writing, this issue is present in VoiceOver.
  420. * See https://github.com/angular/components/issues/20694
  421. */
  422. private _applyModalPanelOwnership;
  423. /** Clears the references to the listbox overlay element from the modal it was added to. */
  424. private _clearFromModal;
  425. static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteTrigger, never>;
  426. static ɵdir: i0.ɵɵDirectiveDeclaration<MatAutocompleteTrigger, "input[matAutocomplete], textarea[matAutocomplete]", ["matAutocompleteTrigger"], { "autocomplete": { "alias": "matAutocomplete"; "required": false; }; "position": { "alias": "matAutocompletePosition"; "required": false; }; "connectedTo": { "alias": "matAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "matAutocompleteDisabled"; "required": false; }; }, {}, never, never, true, never>;
  427. static ngAcceptInputType_autocompleteDisabled: unknown;
  428. }
  429. declare class MatAutocompleteModule {
  430. static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocompleteModule, never>;
  431. static ɵmod: i0.ɵɵNgModuleDeclaration<MatAutocompleteModule, never, [typeof i2.OverlayModule, typeof MatOptionModule, typeof MatCommonModule, typeof MatAutocomplete, typeof MatAutocompleteTrigger, typeof MatAutocompleteOrigin], [typeof i5.CdkScrollableModule, typeof MatAutocomplete, typeof MatOptionModule, typeof MatCommonModule, typeof MatAutocompleteTrigger, typeof MatAutocompleteOrigin]>;
  432. static ɵinj: i0.ɵɵInjectorDeclaration<MatAutocompleteModule>;
  433. }
  434. export { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_AUTOCOMPLETE_VALUE_ACCESSOR, MatAutocomplete, MatAutocompleteModule, MatAutocompleteOrigin, MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatOptgroup, MatOption, getMatAutocompleteMissingPanelError };
  435. export type { MatAutocompleteActivatedEvent, MatAutocompleteDefaultOptions };