select.d.ts 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  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 { ActiveDescendantKeyManager, LiveAnnouncer } from '@angular/cdk/a11y';
  9. import { Directionality } from '@angular/cdk/bidi';
  10. import { SelectionModel } from '@angular/cdk/collections';
  11. import { CdkConnectedOverlay, Overlay, ScrollStrategy } from '@angular/cdk/overlay';
  12. import { ViewportRuler } from '@angular/cdk/scrolling';
  13. import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
  14. import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
  15. import { CanDisable, CanDisableCtor, CanDisableRipple, CanDisableRippleCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, MatOptgroup, MatOption, MatOptionSelectionChange } from '@angular/material/core';
  16. import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
  17. import { Observable, Subject } from 'rxjs';
  18. /**
  19. * The following style constants are necessary to save here in order
  20. * to properly calculate the alignment of the selected option over
  21. * the trigger element.
  22. */
  23. /** The max height of the select's overlay panel */
  24. export declare const SELECT_PANEL_MAX_HEIGHT = 256;
  25. /** The panel's padding on the x-axis */
  26. export declare const SELECT_PANEL_PADDING_X = 16;
  27. /** The panel's x axis padding if it is indented (e.g. there is an option group). */
  28. export declare const SELECT_PANEL_INDENT_PADDING_X: number;
  29. /** The height of the select items in `em` units. */
  30. export declare const SELECT_ITEM_HEIGHT_EM = 3;
  31. /**
  32. * Distance between the panel edge and the option text in
  33. * multi-selection mode.
  34. *
  35. * Calculated as:
  36. * (SELECT_PANEL_PADDING_X * 1.5) + 16 = 40
  37. * The padding is multiplied by 1.5 because the checkbox's margin is half the padding.
  38. * The checkbox width is 16px.
  39. */
  40. export declare const SELECT_MULTIPLE_PANEL_PADDING_X: number;
  41. /**
  42. * The select panel will only "fit" inside the viewport if it is positioned at
  43. * this value or more away from the viewport boundary.
  44. */
  45. export declare const SELECT_PANEL_VIEWPORT_PADDING = 8;
  46. /** Injection token that determines the scroll handling while a select is open. */
  47. export declare const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
  48. /** @docs-private */
  49. export declare function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
  50. /** @docs-private */
  51. export declare const MAT_SELECT_SCROLL_STRATEGY_PROVIDER: {
  52. provide: InjectionToken<() => ScrollStrategy>;
  53. deps: (typeof Overlay)[];
  54. useFactory: typeof MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY;
  55. };
  56. /** Change event object that is emitted when the select value has changed. */
  57. export declare class MatSelectChange {
  58. /** Reference to the select that emitted the change event. */
  59. source: MatSelect;
  60. /** Current value of the select that emitted the event. */
  61. value: any;
  62. constructor(
  63. /** Reference to the select that emitted the change event. */
  64. source: MatSelect,
  65. /** Current value of the select that emitted the event. */
  66. value: any);
  67. }
  68. /** @docs-private */
  69. declare class MatSelectBase {
  70. _elementRef: ElementRef;
  71. _defaultErrorStateMatcher: ErrorStateMatcher;
  72. _parentForm: NgForm;
  73. _parentFormGroup: FormGroupDirective;
  74. ngControl: NgControl;
  75. constructor(_elementRef: ElementRef, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
  76. }
  77. declare const _MatSelectMixinBase: CanDisableCtor & HasTabIndexCtor & CanDisableRippleCtor & CanUpdateErrorStateCtor & typeof MatSelectBase;
  78. /**
  79. * Allows the user to customize the trigger that is displayed when the select has a value.
  80. */
  81. export declare class MatSelectTrigger {
  82. }
  83. export declare class MatSelect extends _MatSelectMixinBase implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex, MatFormFieldControl<any>, CanUpdateErrorState, CanDisableRipple {
  84. private _viewportRuler;
  85. private _changeDetectorRef;
  86. private _ngZone;
  87. private _dir;
  88. private _parentFormField;
  89. ngControl: NgControl;
  90. /**
  91. * @deprecated _liveAnnouncer to be turned into a required parameter.
  92. * @breaking-change 8.0.0
  93. */
  94. private _liveAnnouncer?;
  95. private _scrollStrategyFactory;
  96. /** Whether or not the overlay panel is open. */
  97. private _panelOpen;
  98. /** Whether filling out the select is required in the form. */
  99. private _required;
  100. /** The scroll position of the overlay panel, calculated to center the selected option. */
  101. private _scrollTop;
  102. /** The placeholder displayed in the trigger of the select. */
  103. private _placeholder;
  104. /** Whether the component is in multiple selection mode. */
  105. private _multiple;
  106. /** Comparison function to specify which option is displayed. Defaults to object equality. */
  107. private _compareWith;
  108. /** Unique id for this input. */
  109. private _uid;
  110. /** Emits whenever the component is destroyed. */
  111. private readonly _destroy;
  112. /** The last measured value for the trigger's client bounding rect. */
  113. _triggerRect: ClientRect;
  114. /** The aria-describedby attribute on the select for improved a11y. */
  115. _ariaDescribedby: string;
  116. /** The cached font-size of the trigger element. */
  117. _triggerFontSize: number;
  118. /** Deals with the selection logic. */
  119. _selectionModel: SelectionModel<MatOption>;
  120. /** Manages keyboard events for options in the panel. */
  121. _keyManager: ActiveDescendantKeyManager<MatOption>;
  122. /** `View -> model callback called when value changes` */
  123. _onChange: (value: any) => void;
  124. /** `View -> model callback called when select has been touched` */
  125. _onTouched: () => void;
  126. /** The IDs of child options to be passed to the aria-owns attribute. */
  127. _optionIds: string;
  128. /** The value of the select panel's transform-origin property. */
  129. _transformOrigin: string;
  130. /** Emits when the panel element is finished transforming in. */
  131. _panelDoneAnimatingStream: Subject<string>;
  132. /** Strategy that will be used to handle scrolling while the select panel is open. */
  133. _scrollStrategy: ScrollStrategy;
  134. /**
  135. * The y-offset of the overlay panel in relation to the trigger's top start corner.
  136. * This must be adjusted to align the selected option text over the trigger text.
  137. * when the panel opens. Will change based on the y-position of the selected option.
  138. */
  139. _offsetY: number;
  140. /**
  141. * This position config ensures that the top "start" corner of the overlay
  142. * is aligned with with the top "start" of the origin by default (overlapping
  143. * the trigger completely). If the panel cannot fit below the trigger, it
  144. * will fall back to a position above the trigger.
  145. */
  146. _positions: {
  147. originX: string;
  148. originY: string;
  149. overlayX: string;
  150. overlayY: string;
  151. }[];
  152. /** Whether the component is disabling centering of the active option over the trigger. */
  153. private _disableOptionCentering;
  154. /** Whether the select is focused. */
  155. /**
  156. * @deprecated Setter to be removed as this property is intended to be readonly.
  157. * @breaking-change 8.0.0
  158. */
  159. focused: boolean;
  160. private _focused;
  161. /** A name for this control that can be used by `mat-form-field`. */
  162. controlType: string;
  163. /** Trigger that opens the select. */
  164. trigger: ElementRef;
  165. /** Panel containing the select options. */
  166. panel: ElementRef;
  167. /** Overlay pane containing the options. */
  168. overlayDir: CdkConnectedOverlay;
  169. /** All of the defined select options. */
  170. options: QueryList<MatOption>;
  171. /** All of the defined groups of options. */
  172. optionGroups: QueryList<MatOptgroup>;
  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. /** User-supplied override of the trigger element. */
  178. customTrigger: MatSelectTrigger;
  179. /** Placeholder to be shown if no value has been selected. */
  180. placeholder: string;
  181. /** Whether the component is required. */
  182. required: boolean;
  183. /** Whether the user should be allowed to select multiple options. */
  184. multiple: boolean;
  185. /** Whether to center the active option over the trigger. */
  186. disableOptionCentering: boolean;
  187. /**
  188. * Function to compare the option values with the selected values. The first argument
  189. * is a value from an option. The second is a value from the selection. A boolean
  190. * should be returned.
  191. */
  192. compareWith: (o1: any, o2: any) => boolean;
  193. /** Value of the select control. */
  194. value: any;
  195. private _value;
  196. /** Aria label of the select. If not specified, the placeholder will be used as label. */
  197. ariaLabel: string;
  198. /** Input that can be used to specify the `aria-labelledby` attribute. */
  199. ariaLabelledby: string;
  200. /** Object used to control when error messages are shown. */
  201. errorStateMatcher: ErrorStateMatcher;
  202. /**
  203. * Function used to sort the values in a select in multiple mode.
  204. * Follows the same logic as `Array.prototype.sort`.
  205. */
  206. sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number;
  207. /** Unique id of the element. */
  208. id: string;
  209. private _id;
  210. /** Combined stream of all of the child options' change events. */
  211. readonly optionSelectionChanges: Observable<MatOptionSelectionChange>;
  212. /** Event emitted when the select panel has been toggled. */
  213. readonly openedChange: EventEmitter<boolean>;
  214. /** Event emitted when the select has been opened. */
  215. readonly _openedStream: Observable<void>;
  216. /** Event emitted when the select has been closed. */
  217. readonly _closedStream: Observable<void>;
  218. /** Event emitted when the selected value has been changed by the user. */
  219. readonly selectionChange: EventEmitter<MatSelectChange>;
  220. /**
  221. * Event that emits whenever the raw value of the select changes. This is here primarily
  222. * to facilitate the two-way binding for the `value` input.
  223. * @docs-private
  224. */
  225. readonly valueChange: EventEmitter<any>;
  226. constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any,
  227. /**
  228. * @deprecated _liveAnnouncer to be turned into a required parameter.
  229. * @breaking-change 8.0.0
  230. */
  231. _liveAnnouncer?: LiveAnnouncer | undefined);
  232. ngOnInit(): void;
  233. ngAfterContentInit(): void;
  234. ngDoCheck(): void;
  235. ngOnChanges(changes: SimpleChanges): void;
  236. ngOnDestroy(): void;
  237. /** Toggles the overlay panel open or closed. */
  238. toggle(): void;
  239. /** Opens the overlay panel. */
  240. open(): void;
  241. /** Closes the overlay panel and focuses the host element. */
  242. close(): void;
  243. /**
  244. * Sets the select's value. Part of the ControlValueAccessor interface
  245. * required to integrate with Angular's core forms API.
  246. *
  247. * @param value New value to be written to the model.
  248. */
  249. writeValue(value: any): void;
  250. /**
  251. * Saves a callback function to be invoked when the select's value
  252. * changes from user input. Part of the ControlValueAccessor interface
  253. * required to integrate with Angular's core forms API.
  254. *
  255. * @param fn Callback to be triggered when the value changes.
  256. */
  257. registerOnChange(fn: (value: any) => void): void;
  258. /**
  259. * Saves a callback function to be invoked when the select is blurred
  260. * by the user. Part of the ControlValueAccessor interface required
  261. * to integrate with Angular's core forms API.
  262. *
  263. * @param fn Callback to be triggered when the component has been touched.
  264. */
  265. registerOnTouched(fn: () => {}): void;
  266. /**
  267. * Disables the select. Part of the ControlValueAccessor interface required
  268. * to integrate with Angular's core forms API.
  269. *
  270. * @param isDisabled Sets whether the component is disabled.
  271. */
  272. setDisabledState(isDisabled: boolean): void;
  273. /** Whether or not the overlay panel is open. */
  274. readonly panelOpen: boolean;
  275. /** The currently selected option. */
  276. readonly selected: MatOption | MatOption[];
  277. /** The value displayed in the trigger. */
  278. readonly triggerValue: string;
  279. /** Whether the element is in RTL mode. */
  280. _isRtl(): boolean;
  281. /** Handles all keydown events on the select. */
  282. _handleKeydown(event: KeyboardEvent): void;
  283. /** Handles keyboard events while the select is closed. */
  284. private _handleClosedKeydown;
  285. /** Handles keyboard events when the selected is open. */
  286. private _handleOpenKeydown;
  287. _onFocus(): void;
  288. /**
  289. * Calls the touched callback only if the panel is closed. Otherwise, the trigger will
  290. * "blur" to the panel when it opens, causing a false positive.
  291. */
  292. _onBlur(): void;
  293. /**
  294. * Callback that is invoked when the overlay panel has been attached.
  295. */
  296. _onAttached(): void;
  297. /** Returns the theme to be used on the panel. */
  298. _getPanelTheme(): string;
  299. /** Whether the select has a value. */
  300. readonly empty: boolean;
  301. private _initializeSelection;
  302. /**
  303. * Sets the selected option based on a value. If no option can be
  304. * found with the designated value, the select trigger is cleared.
  305. */
  306. private _setSelectionByValue;
  307. /**
  308. * Finds and selects and option based on its value.
  309. * @returns Option that has the corresponding value.
  310. */
  311. private _selectValue;
  312. /** Sets up a key manager to listen to keyboard events on the overlay panel. */
  313. private _initKeyManager;
  314. /** Drops current option subscriptions and IDs and resets from scratch. */
  315. private _resetOptions;
  316. /** Invoked when an option is clicked. */
  317. private _onSelect;
  318. /** Sorts the selected values in the selected based on their order in the panel. */
  319. private _sortValues;
  320. /** Emits change event to set the model value. */
  321. private _propagateChanges;
  322. /** Records option IDs to pass to the aria-owns property. */
  323. private _setOptionIds;
  324. /**
  325. * Highlights the selected item. If no option is selected, it will highlight
  326. * the first item instead.
  327. */
  328. private _highlightCorrectOption;
  329. /** Scrolls the active option into view. */
  330. private _scrollActiveOptionIntoView;
  331. /** Focuses the select element. */
  332. focus(options?: FocusOptions): void;
  333. /** Gets the index of the provided option in the option list. */
  334. private _getOptionIndex;
  335. /** Calculates the scroll position and x- and y-offsets of the overlay panel. */
  336. private _calculateOverlayPosition;
  337. /**
  338. * Calculates the scroll position of the select's overlay panel.
  339. *
  340. * Attempts to center the selected option in the panel. If the option is
  341. * too high or too low in the panel to be scrolled to the center, it clamps the
  342. * scroll position to the min or max scroll positions respectively.
  343. */
  344. _calculateOverlayScroll(selectedIndex: number, scrollBuffer: number, maxScroll: number): number;
  345. /** Returns the aria-label of the select component. */
  346. _getAriaLabel(): string | null;
  347. /** Returns the aria-labelledby of the select component. */
  348. _getAriaLabelledby(): string | null;
  349. /** Determines the `aria-activedescendant` to be set on the host. */
  350. _getAriaActiveDescendant(): string | null;
  351. /**
  352. * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
  353. * This must be adjusted to align the selected option text over the trigger text when
  354. * the panel opens. Will change based on LTR or RTL text direction. Note that the offset
  355. * can't be calculated until the panel has been attached, because we need to know the
  356. * content width in order to constrain the panel within the viewport.
  357. */
  358. private _calculateOverlayOffsetX;
  359. /**
  360. * Calculates the y-offset of the select's overlay panel in relation to the
  361. * top start corner of the trigger. It has to be adjusted in order for the
  362. * selected option to be aligned over the trigger when the panel opens.
  363. */
  364. private _calculateOverlayOffsetY;
  365. /**
  366. * Checks that the attempted overlay position will fit within the viewport.
  367. * If it will not fit, tries to adjust the scroll position and the associated
  368. * y-offset so the panel can open fully on-screen. If it still won't fit,
  369. * sets the offset back to 0 to allow the fallback position to take over.
  370. */
  371. private _checkOverlayWithinViewport;
  372. /** Adjusts the overlay panel up to fit in the viewport. */
  373. private _adjustPanelUp;
  374. /** Adjusts the overlay panel down to fit in the viewport. */
  375. private _adjustPanelDown;
  376. /** Sets the transform origin point based on the selected option. */
  377. private _getOriginBasedOnOption;
  378. /** Calculates the amount of items in the select. This includes options and group labels. */
  379. private _getItemCount;
  380. /** Calculates the height of the select's options. */
  381. private _getItemHeight;
  382. /**
  383. * Implemented as part of MatFormFieldControl.
  384. * @docs-private
  385. */
  386. setDescribedByIds(ids: string[]): void;
  387. /**
  388. * Implemented as part of MatFormFieldControl.
  389. * @docs-private
  390. */
  391. onContainerClick(): void;
  392. /**
  393. * Implemented as part of MatFormFieldControl.
  394. * @docs-private
  395. */
  396. readonly shouldLabelFloat: boolean;
  397. }
  398. export {};