module.d-CyLvt0Fz.d.ts 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ChangeDetectorRef, ElementRef, QueryList, EventEmitter, SimpleChanges } from '@angular/core';
  3. import * as i2 from '@angular/cdk/overlay';
  4. import { ScrollStrategy, Overlay, ConnectedPosition, CdkOverlayOrigin, CdkConnectedOverlay } 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 { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
  8. import { SelectionModel } from '@angular/cdk/collections';
  9. import * as i5 from '@angular/cdk/scrolling';
  10. import { ViewportRuler } from '@angular/cdk/scrolling';
  11. import { ControlValueAccessor, NgControl } from '@angular/forms';
  12. import { Subject, Observable } from 'rxjs';
  13. import { E as ErrorStateMatcher } from './error-options.d-CGdTZUYk.js';
  14. import { M as MatOption, a as MatOptgroup, b as MatOptionSelectionChange } from './option.d-BVGX3edu.js';
  15. import { M as MatFormField } from './form-field.d-CMA_QQ0R.js';
  16. import { M as MatFormFieldControl } from './form-field-control.d-QxD-9xJ3.js';
  17. import { a as MatFormFieldModule } from './module.d-1ZCYe5BH.js';
  18. /** Injection token that determines the scroll handling while a select is open. */
  19. declare const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
  20. /**
  21. * @docs-private
  22. * @deprecated No longer used, will be removed.
  23. * @breaking-change 21.0.0
  24. */
  25. declare function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
  26. /** Object that can be used to configure the default options for the select module. */
  27. interface MatSelectConfig {
  28. /** Whether option centering should be disabled. */
  29. disableOptionCentering?: boolean;
  30. /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
  31. typeaheadDebounceInterval?: number;
  32. /** Class or list of classes to be applied to the menu's overlay panel. */
  33. overlayPanelClass?: string | string[];
  34. /** Whether icon indicators should be hidden for single-selection. */
  35. hideSingleSelectionIndicator?: boolean;
  36. /**
  37. * Width of the panel. If set to `auto`, the panel will match the trigger width.
  38. * If set to null or an empty string, the panel will grow to match the longest option's text.
  39. */
  40. panelWidth?: string | number | null;
  41. /**
  42. * Whether nullable options can be selected by default.
  43. * See `MatSelect.canSelectNullableOptions` for more information.
  44. */
  45. canSelectNullableOptions?: boolean;
  46. }
  47. /** Injection token that can be used to provide the default options the select module. */
  48. declare const MAT_SELECT_CONFIG: InjectionToken<MatSelectConfig>;
  49. /**
  50. * @docs-private
  51. * @deprecated No longer used, will be removed.
  52. * @breaking-change 21.0.0
  53. */
  54. declare const MAT_SELECT_SCROLL_STRATEGY_PROVIDER: {
  55. provide: InjectionToken<() => ScrollStrategy>;
  56. deps: (typeof Overlay)[];
  57. useFactory: typeof MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY;
  58. };
  59. /**
  60. * Injection token that can be used to reference instances of `MatSelectTrigger`. It serves as
  61. * alternative token to the actual `MatSelectTrigger` class which could cause unnecessary
  62. * retention of the class and its directive metadata.
  63. */
  64. declare const MAT_SELECT_TRIGGER: InjectionToken<MatSelectTrigger>;
  65. /** Change event object that is emitted when the select value has changed. */
  66. declare class MatSelectChange<T = any> {
  67. /** Reference to the select that emitted the change event. */
  68. source: MatSelect;
  69. /** Current value of the select that emitted the event. */
  70. value: T;
  71. constructor(
  72. /** Reference to the select that emitted the change event. */
  73. source: MatSelect,
  74. /** Current value of the select that emitted the event. */
  75. value: T);
  76. }
  77. declare class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, MatFormFieldControl<any> {
  78. protected _viewportRuler: ViewportRuler;
  79. protected _changeDetectorRef: ChangeDetectorRef;
  80. readonly _elementRef: ElementRef<any>;
  81. private _dir;
  82. private _idGenerator;
  83. private _renderer;
  84. protected _parentFormField: MatFormField | null;
  85. ngControl: NgControl;
  86. private _liveAnnouncer;
  87. protected _defaultOptions: MatSelectConfig | null;
  88. protected _animationsDisabled: boolean;
  89. private _initialized;
  90. private _cleanupDetach;
  91. /** All of the defined select options. */
  92. options: QueryList<MatOption>;
  93. /** All of the defined groups of options. */
  94. optionGroups: QueryList<MatOptgroup>;
  95. /** User-supplied override of the trigger element. */
  96. customTrigger: MatSelectTrigger;
  97. /**
  98. * This position config ensures that the top "start" corner of the overlay
  99. * is aligned with with the top "start" of the origin by default (overlapping
  100. * the trigger completely). If the panel cannot fit below the trigger, it
  101. * will fall back to a position above the trigger.
  102. */
  103. _positions: ConnectedPosition[];
  104. /** Scrolls a particular option into the view. */
  105. _scrollOptionIntoView(index: number): void;
  106. /** Called when the panel has been opened and the overlay has settled on its final position. */
  107. private _positioningSettled;
  108. /** Creates a change event object that should be emitted by the select. */
  109. private _getChangeEvent;
  110. /** Factory function used to create a scroll strategy for this select. */
  111. private _scrollStrategyFactory;
  112. /** Whether or not the overlay panel is open. */
  113. private _panelOpen;
  114. /** Comparison function to specify which option is displayed. Defaults to object equality. */
  115. private _compareWith;
  116. /** Unique id for this input. */
  117. private _uid;
  118. /** Current `aria-labelledby` value for the select trigger. */
  119. private _triggerAriaLabelledBy;
  120. /**
  121. * Keeps track of the previous form control assigned to the select.
  122. * Used to detect if it has changed.
  123. */
  124. private _previousControl;
  125. /** Emits whenever the component is destroyed. */
  126. protected readonly _destroy: Subject<void>;
  127. /** Tracks the error state of the select. */
  128. private _errorStateTracker;
  129. /**
  130. * Emits whenever the component state changes and should cause the parent
  131. * form-field to update. Implemented as part of `MatFormFieldControl`.
  132. * @docs-private
  133. */
  134. readonly stateChanges: Subject<void>;
  135. /**
  136. * Disable the automatic labeling to avoid issues like #27241.
  137. * @docs-private
  138. */
  139. readonly disableAutomaticLabeling = true;
  140. /**
  141. * Implemented as part of MatFormFieldControl.
  142. * @docs-private
  143. */
  144. userAriaDescribedBy: string;
  145. /** Deals with the selection logic. */
  146. _selectionModel: SelectionModel<MatOption>;
  147. /** Manages keyboard events for options in the panel. */
  148. _keyManager: ActiveDescendantKeyManager<MatOption>;
  149. /** Ideal origin for the overlay panel. */
  150. _preferredOverlayOrigin: CdkOverlayOrigin | ElementRef | undefined;
  151. /** Width of the overlay panel. */
  152. _overlayWidth: string | number;
  153. /** `View -> model callback called when value changes` */
  154. _onChange: (value: any) => void;
  155. /** `View -> model callback called when select has been touched` */
  156. _onTouched: () => void;
  157. /** ID for the DOM node containing the select's value. */
  158. _valueId: string;
  159. /** Strategy that will be used to handle scrolling while the select panel is open. */
  160. _scrollStrategy: ScrollStrategy;
  161. _overlayPanelClass: string | string[];
  162. /** Whether the select is focused. */
  163. get focused(): boolean;
  164. private _focused;
  165. /** A name for this control that can be used by `mat-form-field`. */
  166. controlType: string;
  167. /** Trigger that opens the select. */
  168. trigger: ElementRef;
  169. /** Panel containing the select options. */
  170. panel: ElementRef;
  171. /** Overlay pane containing the options. */
  172. protected _overlayDir: CdkConnectedOverlay;
  173. /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
  174. panelClass: string | string[] | Set<string> | {
  175. [key: string]: any;
  176. };
  177. /** Whether the select is disabled. */
  178. disabled: boolean;
  179. /** Whether ripples in the select are disabled. */
  180. disableRipple: boolean;
  181. /** Tab index of the select. */
  182. tabIndex: number;
  183. /** Whether checkmark indicator for single-selection options is hidden. */
  184. get hideSingleSelectionIndicator(): boolean;
  185. set hideSingleSelectionIndicator(value: boolean);
  186. private _hideSingleSelectionIndicator;
  187. /** Placeholder to be shown if no value has been selected. */
  188. get placeholder(): string;
  189. set placeholder(value: string);
  190. private _placeholder;
  191. /** Whether the component is required. */
  192. get required(): boolean;
  193. set required(value: boolean);
  194. private _required;
  195. /** Whether the user should be allowed to select multiple options. */
  196. get multiple(): boolean;
  197. set multiple(value: boolean);
  198. private _multiple;
  199. /** Whether to center the active option over the trigger. */
  200. disableOptionCentering: boolean;
  201. /**
  202. * Function to compare the option values with the selected values. The first argument
  203. * is a value from an option. The second is a value from the selection. A boolean
  204. * should be returned.
  205. */
  206. get compareWith(): (o1: any, o2: any) => boolean;
  207. set compareWith(fn: (o1: any, o2: any) => boolean);
  208. /** Value of the select control. */
  209. get value(): any;
  210. set value(newValue: any);
  211. private _value;
  212. /** Aria label of the select. */
  213. ariaLabel: string;
  214. /** Input that can be used to specify the `aria-labelledby` attribute. */
  215. ariaLabelledby: string;
  216. /** Object used to control when error messages are shown. */
  217. get errorStateMatcher(): ErrorStateMatcher;
  218. set errorStateMatcher(value: ErrorStateMatcher);
  219. /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
  220. typeaheadDebounceInterval: number;
  221. /**
  222. * Function used to sort the values in a select in multiple mode.
  223. * Follows the same logic as `Array.prototype.sort`.
  224. */
  225. sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number;
  226. /** Unique id of the element. */
  227. get id(): string;
  228. set id(value: string);
  229. private _id;
  230. /** Whether the select is in an error state. */
  231. get errorState(): boolean;
  232. set errorState(value: boolean);
  233. /**
  234. * Width of the panel. If set to `auto`, the panel will match the trigger width.
  235. * If set to null or an empty string, the panel will grow to match the longest option's text.
  236. */
  237. panelWidth: string | number | null;
  238. /**
  239. * By default selecting an option with a `null` or `undefined` value will reset the select's
  240. * value. Enable this option if the reset behavior doesn't match your requirements and instead
  241. * the nullable options should become selected. The value of this input can be controlled app-wide
  242. * using the `MAT_SELECT_CONFIG` injection token.
  243. */
  244. canSelectNullableOptions: boolean;
  245. /** Combined stream of all of the child options' change events. */
  246. readonly optionSelectionChanges: Observable<MatOptionSelectionChange>;
  247. /** Event emitted when the select panel has been toggled. */
  248. readonly openedChange: EventEmitter<boolean>;
  249. /** Event emitted when the select has been opened. */
  250. readonly _openedStream: Observable<void>;
  251. /** Event emitted when the select has been closed. */
  252. readonly _closedStream: Observable<void>;
  253. /** Event emitted when the selected value has been changed by the user. */
  254. readonly selectionChange: EventEmitter<MatSelectChange<any>>;
  255. /**
  256. * Event that emits whenever the raw value of the select changes. This is here primarily
  257. * to facilitate the two-way binding for the `value` input.
  258. * @docs-private
  259. */
  260. readonly valueChange: EventEmitter<any>;
  261. constructor(...args: unknown[]);
  262. ngOnInit(): void;
  263. ngAfterContentInit(): void;
  264. ngDoCheck(): void;
  265. ngOnChanges(changes: SimpleChanges): void;
  266. ngOnDestroy(): void;
  267. /** Toggles the overlay panel open or closed. */
  268. toggle(): void;
  269. /** Opens the overlay panel. */
  270. open(): void;
  271. /**
  272. * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
  273. * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options
  274. * panel. Track the modal we have changed so we can undo the changes on destroy.
  275. */
  276. private _trackedModal;
  277. /**
  278. * If the autocomplete trigger is inside of an `aria-modal` element, connect
  279. * that modal to the options panel with `aria-owns`.
  280. *
  281. * For some browser + screen reader combinations, when navigation is inside
  282. * of an `aria-modal` element, the screen reader treats everything outside
  283. * of that modal as hidden or invisible.
  284. *
  285. * This causes a problem when the combobox trigger is _inside_ of a modal, because the
  286. * options panel is rendered _outside_ of that modal, preventing screen reader navigation
  287. * from reaching the panel.
  288. *
  289. * We can work around this issue by applying `aria-owns` to the modal with the `id` of
  290. * the options panel. This effectively communicates to assistive technology that the
  291. * options panel is part of the same interaction as the modal.
  292. *
  293. * At time of this writing, this issue is present in VoiceOver.
  294. * See https://github.com/angular/components/issues/20694
  295. */
  296. private _applyModalPanelOwnership;
  297. /** Clears the reference to the listbox overlay element from the modal it was added to. */
  298. private _clearFromModal;
  299. /** Closes the overlay panel and focuses the host element. */
  300. close(): void;
  301. /** Triggers the exit animation and detaches the overlay at the end. */
  302. private _exitAndDetach;
  303. /** Detaches the current overlay directive. */
  304. private _detachOverlay;
  305. /**
  306. * Sets the select's value. Part of the ControlValueAccessor interface
  307. * required to integrate with Angular's core forms API.
  308. *
  309. * @param value New value to be written to the model.
  310. */
  311. writeValue(value: any): void;
  312. /**
  313. * Saves a callback function to be invoked when the select's value
  314. * changes from user input. Part of the ControlValueAccessor interface
  315. * required to integrate with Angular's core forms API.
  316. *
  317. * @param fn Callback to be triggered when the value changes.
  318. */
  319. registerOnChange(fn: (value: any) => void): void;
  320. /**
  321. * Saves a callback function to be invoked when the select is blurred
  322. * by the user. Part of the ControlValueAccessor interface required
  323. * to integrate with Angular's core forms API.
  324. *
  325. * @param fn Callback to be triggered when the component has been touched.
  326. */
  327. registerOnTouched(fn: () => {}): void;
  328. /**
  329. * Disables the select. Part of the ControlValueAccessor interface required
  330. * to integrate with Angular's core forms API.
  331. *
  332. * @param isDisabled Sets whether the component is disabled.
  333. */
  334. setDisabledState(isDisabled: boolean): void;
  335. /** Whether or not the overlay panel is open. */
  336. get panelOpen(): boolean;
  337. /** The currently selected option. */
  338. get selected(): MatOption | MatOption[];
  339. /** The value displayed in the trigger. */
  340. get triggerValue(): string;
  341. /** Refreshes the error state of the select. */
  342. updateErrorState(): void;
  343. /** Whether the element is in RTL mode. */
  344. _isRtl(): boolean;
  345. /** Handles all keydown events on the select. */
  346. _handleKeydown(event: KeyboardEvent): void;
  347. /** Handles keyboard events while the select is closed. */
  348. private _handleClosedKeydown;
  349. /** Handles keyboard events when the selected is open. */
  350. private _handleOpenKeydown;
  351. /** Handles keyboard events coming from the overlay. */
  352. protected _handleOverlayKeydown(event: KeyboardEvent): void;
  353. _onFocus(): void;
  354. /**
  355. * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
  356. * "blur" to the panel when it opens, causing a false positive.
  357. */
  358. _onBlur(): void;
  359. /** Returns the theme to be used on the panel. */
  360. _getPanelTheme(): string;
  361. /** Whether the select has a value. */
  362. get empty(): boolean;
  363. private _initializeSelection;
  364. /**
  365. * Sets the selected option based on a value. If no option can be
  366. * found with the designated value, the select trigger is cleared.
  367. */
  368. private _setSelectionByValue;
  369. /**
  370. * Finds and selects and option based on its value.
  371. * @returns Option that has the corresponding value.
  372. */
  373. private _selectOptionByValue;
  374. /** Assigns a specific value to the select. Returns whether the value has changed. */
  375. private _assignValue;
  376. private _skipPredicate;
  377. /** Gets how wide the overlay panel should be. */
  378. private _getOverlayWidth;
  379. /** Syncs the parent state with the individual options. */
  380. _syncParentProperties(): void;
  381. /** Sets up a key manager to listen to keyboard events on the overlay panel. */
  382. private _initKeyManager;
  383. /** Drops current option subscriptions and IDs and resets from scratch. */
  384. private _resetOptions;
  385. /** Invoked when an option is clicked. */
  386. private _onSelect;
  387. /** Sorts the selected values in the selected based on their order in the panel. */
  388. private _sortValues;
  389. /** Emits change event to set the model value. */
  390. private _propagateChanges;
  391. /**
  392. * Highlights the selected item. If no option is selected, it will highlight
  393. * the first *enabled* option.
  394. */
  395. private _highlightCorrectOption;
  396. /** Whether the panel is allowed to open. */
  397. protected _canOpen(): boolean;
  398. /** Focuses the select element. */
  399. focus(options?: FocusOptions): void;
  400. /** Gets the aria-labelledby for the select panel. */
  401. _getPanelAriaLabelledby(): string | null;
  402. /** Determines the `aria-activedescendant` to be set on the host. */
  403. _getAriaActiveDescendant(): string | null;
  404. /** Gets the aria-labelledby of the select component trigger. */
  405. private _getTriggerAriaLabelledby;
  406. /**
  407. * Implemented as part of MatFormFieldControl.
  408. * @docs-private
  409. */
  410. setDescribedByIds(ids: string[]): void;
  411. /**
  412. * Implemented as part of MatFormFieldControl.
  413. * @docs-private
  414. */
  415. onContainerClick(): void;
  416. /**
  417. * Implemented as part of MatFormFieldControl.
  418. * @docs-private
  419. */
  420. get shouldLabelFloat(): boolean;
  421. static ɵfac: i0.ɵɵFactoryDeclaration<MatSelect, never>;
  422. static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disableOptionCentering": { "alias": "disableOptionCentering"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "typeaheadDebounceInterval": { "alias": "typeaheadDebounceInterval"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "id": { "alias": "id"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "canSelectNullableOptions": { "alias": "canSelectNullableOptions"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], true, never>;
  423. static ngAcceptInputType_disabled: unknown;
  424. static ngAcceptInputType_disableRipple: unknown;
  425. static ngAcceptInputType_tabIndex: unknown;
  426. static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
  427. static ngAcceptInputType_required: unknown;
  428. static ngAcceptInputType_multiple: unknown;
  429. static ngAcceptInputType_disableOptionCentering: unknown;
  430. static ngAcceptInputType_typeaheadDebounceInterval: unknown;
  431. static ngAcceptInputType_canSelectNullableOptions: unknown;
  432. }
  433. /**
  434. * Allows the user to customize the trigger that is displayed when the select has a value.
  435. */
  436. declare class MatSelectTrigger {
  437. static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectTrigger, never>;
  438. static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectTrigger, "mat-select-trigger", never, {}, {}, never, never, true, never>;
  439. }
  440. declare class MatSelectModule {
  441. static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectModule, never>;
  442. static ɵmod: i0.ɵɵNgModuleDeclaration<MatSelectModule, never, [typeof i2.OverlayModule, typeof MatOptionModule, typeof MatCommonModule, typeof MatSelect, typeof MatSelectTrigger], [typeof i5.CdkScrollableModule, typeof MatFormFieldModule, typeof MatSelect, typeof MatSelectTrigger, typeof MatOptionModule, typeof MatCommonModule]>;
  443. static ɵinj: i0.ɵɵInjectorDeclaration<MatSelectModule>;
  444. }
  445. export { MatSelectModule as M, MAT_SELECT_SCROLL_STRATEGY as a, MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY as b, MAT_SELECT_CONFIG as d, MAT_SELECT_SCROLL_STRATEGY_PROVIDER as e, MAT_SELECT_TRIGGER as f, MatSelectChange as g, MatSelect as h, MatSelectTrigger as i };
  446. export type { MatSelectConfig as c };