@angular/material 19.0.0-next.9 → 19.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (232) hide show
  1. package/autocomplete/_autocomplete-theme.scss +8 -4
  2. package/autocomplete/index.d.ts +5 -6
  3. package/badge/_badge-theme.scss +10 -6
  4. package/badge/index.d.ts +1 -2
  5. package/bottom-sheet/_bottom-sheet-theme.scss +8 -4
  6. package/button/_button-theme.scss +10 -6
  7. package/button/_fab-theme.scss +10 -6
  8. package/button/_icon-button-theme.scss +8 -4
  9. package/button/index.d.ts +1 -1
  10. package/button-toggle/_button-toggle-theme.scss +11 -6
  11. package/button-toggle/index.d.ts +2 -1
  12. package/card/_card-theme.scss +8 -4
  13. package/card/index.d.ts +2 -3
  14. package/checkbox/_checkbox-theme.scss +10 -6
  15. package/chips/_chips-theme.scss +10 -6
  16. package/core/_core-theme.scss +4 -7
  17. package/core/_core.scss +2 -5
  18. package/core/m2/_theming.scss +2 -1
  19. package/core/option/_optgroup-theme.scss +8 -4
  20. package/core/option/_option-theme.scss +10 -6
  21. package/core/ripple/_ripple-theme.scss +8 -4
  22. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +10 -6
  23. package/core/theming/_config-validation.scss +4 -4
  24. package/core/theming/_definition.scss +12 -2
  25. package/core/theming/_theming.scss +2 -1
  26. package/core/tokens/_m3-system.scss +55 -39
  27. package/core/tokens/_m3-tokens.scss +3 -3
  28. package/core/tokens/_token-definition.scss +4 -3
  29. package/core/tokens/m2/mat/_badge.scss +1 -1
  30. package/core/tokens/m2/mat/_datepicker.scss +1 -1
  31. package/core/tokens/m2/mat/_menu.scss +5 -3
  32. package/core/tokens/m2/mat/_sort.scss +1 -1
  33. package/core/tokens/m3/mat/_menu.scss +6 -3
  34. package/core/tokens/m3/mdc/_filled-text-field.scss +9 -11
  35. package/datepicker/_datepicker-theme.scss +10 -6
  36. package/datepicker/index.d.ts +36 -37
  37. package/dialog/_dialog-theme.scss +8 -4
  38. package/dialog/index.d.ts +1 -0
  39. package/divider/_divider-theme.scss +8 -4
  40. package/expansion/_expansion-theme.scss +8 -4
  41. package/fesm2022/autocomplete/testing.mjs +2 -5
  42. package/fesm2022/autocomplete/testing.mjs.map +1 -1
  43. package/fesm2022/autocomplete.mjs +225 -151
  44. package/fesm2022/autocomplete.mjs.map +1 -1
  45. package/fesm2022/badge/testing.mjs +2 -5
  46. package/fesm2022/badge/testing.mjs.map +1 -1
  47. package/fesm2022/badge.mjs +45 -36
  48. package/fesm2022/badge.mjs.map +1 -1
  49. package/fesm2022/bottom-sheet/testing.mjs +1 -1
  50. package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
  51. package/fesm2022/bottom-sheet.mjs +79 -57
  52. package/fesm2022/bottom-sheet.mjs.map +1 -1
  53. package/fesm2022/button/testing.mjs +2 -2
  54. package/fesm2022/button/testing.mjs.map +1 -1
  55. package/fesm2022/button-toggle/testing.mjs +4 -7
  56. package/fesm2022/button-toggle/testing.mjs.map +1 -1
  57. package/fesm2022/button-toggle.mjs +84 -47
  58. package/fesm2022/button-toggle.mjs.map +1 -1
  59. package/fesm2022/button.mjs +98 -71
  60. package/fesm2022/button.mjs.map +1 -1
  61. package/fesm2022/card/testing.mjs +3 -6
  62. package/fesm2022/card/testing.mjs.map +1 -1
  63. package/fesm2022/card.mjs +53 -55
  64. package/fesm2022/card.mjs.map +1 -1
  65. package/fesm2022/checkbox/testing.mjs +4 -7
  66. package/fesm2022/checkbox/testing.mjs.map +1 -1
  67. package/fesm2022/checkbox.mjs +105 -63
  68. package/fesm2022/checkbox.mjs.map +1 -1
  69. package/fesm2022/chips/testing.mjs +11 -14
  70. package/fesm2022/chips/testing.mjs.map +1 -1
  71. package/fesm2022/chips.mjs +317 -268
  72. package/fesm2022/chips.mjs.map +1 -1
  73. package/fesm2022/core/testing.mjs +5 -11
  74. package/fesm2022/core/testing.mjs.map +1 -1
  75. package/fesm2022/core.mjs +237 -187
  76. package/fesm2022/core.mjs.map +1 -1
  77. package/fesm2022/datepicker/testing.mjs +13 -22
  78. package/fesm2022/datepicker/testing.mjs.map +1 -1
  79. package/fesm2022/datepicker.mjs +821 -568
  80. package/fesm2022/datepicker.mjs.map +1 -1
  81. package/fesm2022/dialog/testing.mjs +15 -9
  82. package/fesm2022/dialog/testing.mjs.map +1 -1
  83. package/fesm2022/dialog.mjs +221 -153
  84. package/fesm2022/dialog.mjs.map +1 -1
  85. package/fesm2022/divider/testing.mjs +1 -1
  86. package/fesm2022/divider/testing.mjs.map +1 -1
  87. package/fesm2022/divider.mjs +9 -11
  88. package/fesm2022/divider.mjs.map +1 -1
  89. package/fesm2022/expansion/testing.mjs +7 -10
  90. package/fesm2022/expansion/testing.mjs.map +1 -1
  91. package/fesm2022/expansion.mjs +85 -76
  92. package/fesm2022/expansion.mjs.map +1 -1
  93. package/fesm2022/form-field/testing.mjs +12 -15
  94. package/fesm2022/form-field/testing.mjs.map +1 -1
  95. package/fesm2022/form-field.mjs +179 -126
  96. package/fesm2022/form-field.mjs.map +1 -1
  97. package/fesm2022/grid-list/testing.mjs +11 -17
  98. package/fesm2022/grid-list/testing.mjs.map +1 -1
  99. package/fesm2022/grid-list.mjs +72 -50
  100. package/fesm2022/grid-list.mjs.map +1 -1
  101. package/fesm2022/icon/testing.mjs +8 -8
  102. package/fesm2022/icon/testing.mjs.map +1 -1
  103. package/fesm2022/icon.mjs +65 -45
  104. package/fesm2022/icon.mjs.map +1 -1
  105. package/fesm2022/input/testing.mjs +3 -3
  106. package/fesm2022/input/testing.mjs.map +1 -1
  107. package/fesm2022/input.mjs +104 -72
  108. package/fesm2022/input.mjs.map +1 -1
  109. package/fesm2022/list/testing.mjs +21 -38
  110. package/fesm2022/list/testing.mjs.map +1 -1
  111. package/fesm2022/list.mjs +191 -180
  112. package/fesm2022/list.mjs.map +1 -1
  113. package/fesm2022/menu/testing.mjs +3 -6
  114. package/fesm2022/menu/testing.mjs.map +1 -1
  115. package/fesm2022/menu.mjs +178 -168
  116. package/fesm2022/menu.mjs.map +1 -1
  117. package/fesm2022/paginator/testing.mjs +10 -13
  118. package/fesm2022/paginator/testing.mjs.map +1 -1
  119. package/fesm2022/paginator.mjs +84 -59
  120. package/fesm2022/paginator.mjs.map +1 -1
  121. package/fesm2022/progress-bar/testing.mjs +1 -1
  122. package/fesm2022/progress-bar/testing.mjs.map +1 -1
  123. package/fesm2022/progress-bar.mjs +35 -34
  124. package/fesm2022/progress-bar.mjs.map +1 -1
  125. package/fesm2022/progress-spinner/testing.mjs +1 -1
  126. package/fesm2022/progress-spinner/testing.mjs.map +1 -1
  127. package/fesm2022/progress-spinner.mjs +27 -13
  128. package/fesm2022/progress-spinner.mjs.map +1 -1
  129. package/fesm2022/radio/testing.mjs +6 -12
  130. package/fesm2022/radio/testing.mjs.map +1 -1
  131. package/fesm2022/radio.mjs +123 -88
  132. package/fesm2022/radio.mjs.map +1 -1
  133. package/fesm2022/select/testing.mjs +6 -9
  134. package/fesm2022/select/testing.mjs.map +1 -1
  135. package/fesm2022/select.mjs +220 -182
  136. package/fesm2022/select.mjs.map +1 -1
  137. package/fesm2022/sidenav/testing.mjs +6 -6
  138. package/fesm2022/sidenav/testing.mjs.map +1 -1
  139. package/fesm2022/sidenav.mjs +132 -119
  140. package/fesm2022/sidenav.mjs.map +1 -1
  141. package/fesm2022/slide-toggle/testing.mjs +3 -6
  142. package/fesm2022/slide-toggle/testing.mjs.map +1 -1
  143. package/fesm2022/slide-toggle.mjs +78 -49
  144. package/fesm2022/slide-toggle.mjs.map +1 -1
  145. package/fesm2022/slider/testing.mjs +2 -2
  146. package/fesm2022/slider/testing.mjs.map +1 -1
  147. package/fesm2022/slider.mjs +260 -190
  148. package/fesm2022/slider.mjs.map +1 -1
  149. package/fesm2022/snack-bar/testing.mjs +4 -7
  150. package/fesm2022/snack-bar/testing.mjs.map +1 -1
  151. package/fesm2022/snack-bar.mjs +141 -107
  152. package/fesm2022/snack-bar.mjs.map +1 -1
  153. package/fesm2022/sort/testing.mjs +3 -6
  154. package/fesm2022/sort/testing.mjs.map +1 -1
  155. package/fesm2022/sort.mjs +93 -72
  156. package/fesm2022/sort.mjs.map +1 -1
  157. package/fesm2022/stepper/testing.mjs +4 -4
  158. package/fesm2022/stepper/testing.mjs.map +1 -1
  159. package/fesm2022/stepper.mjs +143 -105
  160. package/fesm2022/stepper.mjs.map +1 -1
  161. package/fesm2022/table/testing.mjs +13 -25
  162. package/fesm2022/table/testing.mjs.map +1 -1
  163. package/fesm2022/table.mjs +182 -177
  164. package/fesm2022/table.mjs.map +1 -1
  165. package/fesm2022/tabs/testing.mjs +5 -5
  166. package/fesm2022/tabs/testing.mjs.map +1 -1
  167. package/fesm2022/tabs.mjs +326 -247
  168. package/fesm2022/tabs.mjs.map +1 -1
  169. package/fesm2022/timepicker/testing.mjs +7 -16
  170. package/fesm2022/timepicker/testing.mjs.map +1 -1
  171. package/fesm2022/timepicker.mjs +157 -153
  172. package/fesm2022/timepicker.mjs.map +1 -1
  173. package/fesm2022/toolbar/testing.mjs +2 -5
  174. package/fesm2022/toolbar/testing.mjs.map +1 -1
  175. package/fesm2022/toolbar.mjs +25 -15
  176. package/fesm2022/toolbar.mjs.map +1 -1
  177. package/fesm2022/tooltip/testing.mjs +6 -9
  178. package/fesm2022/tooltip/testing.mjs.map +1 -1
  179. package/fesm2022/tooltip.mjs +96 -72
  180. package/fesm2022/tooltip.mjs.map +1 -1
  181. package/fesm2022/tree/testing.mjs +3 -6
  182. package/fesm2022/tree/testing.mjs.map +1 -1
  183. package/fesm2022/tree.mjs +56 -54
  184. package/fesm2022/tree.mjs.map +1 -1
  185. package/form-field/_form-field-theme.scss +9 -5
  186. package/form-field/index.d.ts +9 -9
  187. package/grid-list/_grid-list-theme.scss +8 -4
  188. package/icon/_icon-theme.scss +10 -6
  189. package/input/_input-theme.scss +8 -4
  190. package/list/_list-theme.scss +8 -4
  191. package/list/index.d.ts +20 -21
  192. package/menu/_menu-theme.scss +8 -4
  193. package/menu/index.d.ts +15 -17
  194. package/package.json +2 -2
  195. package/paginator/_paginator-theme.scss +8 -4
  196. package/prebuilt-themes/azure-blue.css +1 -1
  197. package/prebuilt-themes/cyan-orange.css +1 -1
  198. package/prebuilt-themes/deeppurple-amber.css +1 -1
  199. package/prebuilt-themes/indigo-pink.css +1 -1
  200. package/prebuilt-themes/magenta-violet.css +1 -1
  201. package/prebuilt-themes/pink-bluegrey.css +1 -1
  202. package/prebuilt-themes/purple-green.css +1 -1
  203. package/prebuilt-themes/rose-red.css +1 -1
  204. package/progress-bar/_progress-bar-theme.scss +11 -9
  205. package/progress-spinner/_progress-spinner-theme.scss +11 -9
  206. package/progress-spinner/index.d.ts +3 -4
  207. package/radio/_radio-theme.scss +10 -6
  208. package/radio/index.d.ts +2 -3
  209. package/schematics/ng-add/index.js +1 -1
  210. package/schematics/ng-add/index.mjs +1 -1
  211. package/schematics/ng-add/theming/create-custom-theme.js +1 -6
  212. package/schematics/ng-add/theming/create-custom-theme.mjs +1 -6
  213. package/schematics/ng-generate/theme-color/index_bundled.js +35 -9
  214. package/schematics/ng-generate/theme-color/index_bundled.js.map +2 -2
  215. package/schematics/ng-update/index_bundled.js +6 -1
  216. package/schematics/ng-update/index_bundled.js.map +1 -1
  217. package/select/_select-theme.scss +10 -6
  218. package/select/index.d.ts +7 -7
  219. package/sidenav/_sidenav-theme.scss +8 -4
  220. package/slide-toggle/_slide-toggle-theme.scss +10 -6
  221. package/slider/_slider-theme.scss +10 -6
  222. package/snack-bar/_snack-bar-theme.scss +10 -6
  223. package/sort/_sort-theme.scss +8 -4
  224. package/stepper/_stepper-theme.scss +10 -6
  225. package/stepper/index.d.ts +14 -15
  226. package/table/_table-theme.scss +8 -4
  227. package/tabs/_tabs-theme.scss +10 -6
  228. package/timepicker/_timepicker-theme.scss +10 -6
  229. package/toolbar/_toolbar-theme.scss +10 -6
  230. package/tooltip/_tooltip-theme.scss +8 -4
  231. package/tooltip/index.d.ts +5 -6
  232. package/tree/_tree-theme.scss +8 -4
@@ -1,5 +1,4 @@
1
1
  import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
2
- import { NgClass, CommonModule } from '@angular/common';
3
2
  import * as i0 from '@angular/core';
4
3
  import { InjectionToken, inject, ChangeDetectorRef, ElementRef, EventEmitter, HostAttributeToken, booleanAttribute, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, ContentChild, Input, ViewChild, Output, Directive, NgModule } from '@angular/core';
5
4
  import { _countGroupLabelsBeforeOption, _getOptionScrollPosition, ErrorStateMatcher, _ErrorStateTracker, MAT_OPTION_PARENT_COMPONENT, MatOption, MAT_OPTGROUP, MatOptionModule, MatCommonModule } from '@angular/material/core';
@@ -7,14 +6,15 @@ export { MatOptgroup, MatOption } from '@angular/material/core';
7
6
  import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
8
7
  export { MatError, MatFormField, MatHint, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';
9
8
  import { ViewportRuler, CdkScrollableModule } from '@angular/cdk/scrolling';
10
- import { LiveAnnouncer, removeAriaReferencedId, addAriaReferencedId, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
9
+ import { _IdGenerator, LiveAnnouncer, removeAriaReferencedId, addAriaReferencedId, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
11
10
  import { Directionality } from '@angular/cdk/bidi';
12
11
  import { SelectionModel } from '@angular/cdk/collections';
13
12
  import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, hasModifierKey, A } from '@angular/cdk/keycodes';
14
- import { Validators, NgControl, NgForm, FormGroupDirective } from '@angular/forms';
13
+ import { NgControl, Validators, NgForm, FormGroupDirective } from '@angular/forms';
15
14
  import { Subject, defer, merge } from 'rxjs';
16
15
  import { startWith, switchMap, filter, map, distinctUntilChanged, takeUntil, take } from 'rxjs/operators';
17
16
  import { trigger, transition, query, animateChild, state, style, animate } from '@angular/animations';
17
+ import { NgClass } from '@angular/common';
18
18
 
19
19
  /**
20
20
  * The following are all the animations for the mat-select component, with each
@@ -74,7 +74,6 @@ function getMatSelectNonFunctionValueError() {
74
74
  return Error('`compareWith` must be a function.');
75
75
  }
76
76
 
77
- let nextUniqueId = 0;
78
77
  /** Injection token that determines the scroll handling while a select is open. */
79
78
  const MAT_SELECT_SCROLL_STRATEGY = new InjectionToken('mat-select-scroll-strategy', {
80
79
  providedIn: 'root',
@@ -103,6 +102,8 @@ const MAT_SELECT_SCROLL_STRATEGY_PROVIDER = {
103
102
  const MAT_SELECT_TRIGGER = new InjectionToken('MatSelectTrigger');
104
103
  /** Change event object that is emitted when the select value has changed. */
105
104
  class MatSelectChange {
105
+ source;
106
+ value;
106
107
  constructor(
107
108
  /** Reference to the select that emitted the change event. */
108
109
  source,
@@ -113,6 +114,57 @@ class MatSelectChange {
113
114
  }
114
115
  }
115
116
  class MatSelect {
117
+ _viewportRuler = inject(ViewportRuler);
118
+ _changeDetectorRef = inject(ChangeDetectorRef);
119
+ _elementRef = inject(ElementRef);
120
+ _dir = inject(Directionality, { optional: true });
121
+ _idGenerator = inject(_IdGenerator);
122
+ _parentFormField = inject(MAT_FORM_FIELD, { optional: true });
123
+ ngControl = inject(NgControl, { self: true, optional: true });
124
+ _liveAnnouncer = inject(LiveAnnouncer);
125
+ _defaultOptions = inject(MAT_SELECT_CONFIG, { optional: true });
126
+ /** All of the defined select options. */
127
+ options;
128
+ // TODO(crisbeto): this is only necessary for the non-MDC select, but it's technically a
129
+ // public API so we have to keep it. It should be deprecated and removed eventually.
130
+ /** All of the defined groups of options. */
131
+ optionGroups;
132
+ /** User-supplied override of the trigger element. */
133
+ customTrigger;
134
+ /**
135
+ * This position config ensures that the top "start" corner of the overlay
136
+ * is aligned with with the top "start" of the origin by default (overlapping
137
+ * the trigger completely). If the panel cannot fit below the trigger, it
138
+ * will fall back to a position above the trigger.
139
+ */
140
+ _positions = [
141
+ {
142
+ originX: 'start',
143
+ originY: 'bottom',
144
+ overlayX: 'start',
145
+ overlayY: 'top',
146
+ },
147
+ {
148
+ originX: 'end',
149
+ originY: 'bottom',
150
+ overlayX: 'end',
151
+ overlayY: 'top',
152
+ },
153
+ {
154
+ originX: 'start',
155
+ originY: 'top',
156
+ overlayX: 'start',
157
+ overlayY: 'bottom',
158
+ panelClass: 'mat-mdc-select-panel-above',
159
+ },
160
+ {
161
+ originX: 'end',
162
+ originY: 'top',
163
+ overlayX: 'end',
164
+ overlayY: 'bottom',
165
+ panelClass: 'mat-mdc-select-panel-above',
166
+ },
167
+ ];
116
168
  /** Scrolls a particular option into the view. */
117
169
  _scrollOptionIntoView(index) {
118
170
  const option = this.options.toArray()[index];
@@ -139,10 +191,81 @@ class MatSelect {
139
191
  _getChangeEvent(value) {
140
192
  return new MatSelectChange(this, value);
141
193
  }
194
+ /** Factory function used to create a scroll strategy for this select. */
195
+ _scrollStrategyFactory = inject(MAT_SELECT_SCROLL_STRATEGY);
196
+ /** Whether or not the overlay panel is open. */
197
+ _panelOpen = false;
198
+ /** Comparison function to specify which option is displayed. Defaults to object equality. */
199
+ _compareWith = (o1, o2) => o1 === o2;
200
+ /** Unique id for this input. */
201
+ _uid = this._idGenerator.getId('mat-select-');
202
+ /** Current `aria-labelledby` value for the select trigger. */
203
+ _triggerAriaLabelledBy = null;
204
+ /**
205
+ * Keeps track of the previous form control assigned to the select.
206
+ * Used to detect if it has changed.
207
+ */
208
+ _previousControl;
209
+ /** Emits whenever the component is destroyed. */
210
+ _destroy = new Subject();
211
+ /** Tracks the error state of the select. */
212
+ _errorStateTracker;
213
+ /**
214
+ * Emits whenever the component state changes and should cause the parent
215
+ * form-field to update. Implemented as part of `MatFormFieldControl`.
216
+ * @docs-private
217
+ */
218
+ stateChanges = new Subject();
219
+ /**
220
+ * Disable the automatic labeling to avoid issues like #27241.
221
+ * @docs-private
222
+ */
223
+ disableAutomaticLabeling = true;
224
+ /**
225
+ * Implemented as part of MatFormFieldControl.
226
+ * @docs-private
227
+ */
228
+ userAriaDescribedBy;
229
+ /** Deals with the selection logic. */
230
+ _selectionModel;
231
+ /** Manages keyboard events for options in the panel. */
232
+ _keyManager;
233
+ /** Ideal origin for the overlay panel. */
234
+ _preferredOverlayOrigin;
235
+ /** Width of the overlay panel. */
236
+ _overlayWidth;
237
+ /** `View -> model callback called when value changes` */
238
+ _onChange = () => { };
239
+ /** `View -> model callback called when select has been touched` */
240
+ _onTouched = () => { };
241
+ /** ID for the DOM node containing the select's value. */
242
+ _valueId = this._idGenerator.getId('mat-select-value-');
243
+ /** Emits when the panel element is finished transforming in. */
244
+ _panelDoneAnimatingStream = new Subject();
245
+ /** Strategy that will be used to handle scrolling while the select panel is open. */
246
+ _scrollStrategy;
247
+ _overlayPanelClass = this._defaultOptions?.overlayPanelClass || '';
142
248
  /** Whether the select is focused. */
143
249
  get focused() {
144
250
  return this._focused || this._panelOpen;
145
251
  }
252
+ _focused = false;
253
+ /** A name for this control that can be used by `mat-form-field`. */
254
+ controlType = 'mat-select';
255
+ /** Trigger that opens the select. */
256
+ trigger;
257
+ /** Panel containing the select options. */
258
+ panel;
259
+ /** Overlay pane containing the options. */
260
+ _overlayDir;
261
+ /** Classes to be passed to the select panel. Supports the same syntax as `ngClass`. */
262
+ panelClass;
263
+ /** Whether the select is disabled. */
264
+ disabled = false;
265
+ /** Whether ripples in the select are disabled. */
266
+ disableRipple = false;
267
+ /** Tab index of the select. */
268
+ tabIndex = 0;
146
269
  /** Whether checkmark indicator for single-selection options is hidden. */
147
270
  get hideSingleSelectionIndicator() {
148
271
  return this._hideSingleSelectionIndicator;
@@ -151,6 +274,7 @@ class MatSelect {
151
274
  this._hideSingleSelectionIndicator = value;
152
275
  this._syncParentProperties();
153
276
  }
277
+ _hideSingleSelectionIndicator = this._defaultOptions?.hideSingleSelectionIndicator ?? false;
154
278
  /** Placeholder to be shown if no value has been selected. */
155
279
  get placeholder() {
156
280
  return this._placeholder;
@@ -159,6 +283,7 @@ class MatSelect {
159
283
  this._placeholder = value;
160
284
  this.stateChanges.next();
161
285
  }
286
+ _placeholder;
162
287
  /** Whether the component is required. */
163
288
  get required() {
164
289
  return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
@@ -167,6 +292,7 @@ class MatSelect {
167
292
  this._required = value;
168
293
  this.stateChanges.next();
169
294
  }
295
+ _required;
170
296
  /** Whether the user should be allowed to select multiple options. */
171
297
  get multiple() {
172
298
  return this._multiple;
@@ -177,6 +303,9 @@ class MatSelect {
177
303
  }
178
304
  this._multiple = value;
179
305
  }
306
+ _multiple = false;
307
+ /** Whether to center the active option over the trigger. */
308
+ disableOptionCentering = this._defaultOptions?.disableOptionCentering ?? false;
180
309
  /**
181
310
  * Function to compare the option values with the selected values. The first argument
182
311
  * is a value from an option. The second is a value from the selection. A boolean
@@ -205,6 +334,11 @@ class MatSelect {
205
334
  this._onChange(newValue);
206
335
  }
207
336
  }
337
+ _value;
338
+ /** Aria label of the select. */
339
+ ariaLabel = '';
340
+ /** Input that can be used to specify the `aria-labelledby` attribute. */
341
+ ariaLabelledby;
208
342
  /** Object used to control when error messages are shown. */
209
343
  get errorStateMatcher() {
210
344
  return this._errorStateTracker.matcher;
@@ -212,6 +346,13 @@ class MatSelect {
212
346
  set errorStateMatcher(value) {
213
347
  this._errorStateTracker.matcher = value;
214
348
  }
349
+ /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
350
+ typeaheadDebounceInterval;
351
+ /**
352
+ * Function used to sort the values in a select in multiple mode.
353
+ * Follows the same logic as `Array.prototype.sort`.
354
+ */
355
+ sortComparator;
215
356
  /** Unique id of the element. */
216
357
  get id() {
217
358
  return this._id;
@@ -220,6 +361,7 @@ class MatSelect {
220
361
  this._id = value || this._uid;
221
362
  this.stateChanges.next();
222
363
  }
364
+ _id;
223
365
  /** Whether the select is in an error state. */
224
366
  get errorState() {
225
367
  return this._errorStateTracker.errorState;
@@ -227,156 +369,37 @@ class MatSelect {
227
369
  set errorState(value) {
228
370
  this._errorStateTracker.errorState = value;
229
371
  }
372
+ /**
373
+ * Width of the panel. If set to `auto`, the panel will match the trigger width.
374
+ * If set to null or an empty string, the panel will grow to match the longest option's text.
375
+ */
376
+ panelWidth = this._defaultOptions && typeof this._defaultOptions.panelWidth !== 'undefined'
377
+ ? this._defaultOptions.panelWidth
378
+ : 'auto';
379
+ _initialized = new Subject();
380
+ /** Combined stream of all of the child options' change events. */
381
+ optionSelectionChanges = defer(() => {
382
+ const options = this.options;
383
+ if (options) {
384
+ return options.changes.pipe(startWith(options), switchMap(() => merge(...options.map(option => option.onSelectionChange))));
385
+ }
386
+ return this._initialized.pipe(switchMap(() => this.optionSelectionChanges));
387
+ });
388
+ /** Event emitted when the select panel has been toggled. */
389
+ openedChange = new EventEmitter();
390
+ /** Event emitted when the select has been opened. */
391
+ _openedStream = this.openedChange.pipe(filter(o => o), map(() => { }));
392
+ /** Event emitted when the select has been closed. */
393
+ _closedStream = this.openedChange.pipe(filter(o => !o), map(() => { }));
394
+ /** Event emitted when the selected value has been changed by the user. */
395
+ selectionChange = new EventEmitter();
396
+ /**
397
+ * Event that emits whenever the raw value of the select changes. This is here primarily
398
+ * to facilitate the two-way binding for the `value` input.
399
+ * @docs-private
400
+ */
401
+ valueChange = new EventEmitter();
230
402
  constructor() {
231
- this._viewportRuler = inject(ViewportRuler);
232
- this._changeDetectorRef = inject(ChangeDetectorRef);
233
- this._elementRef = inject(ElementRef);
234
- this._dir = inject(Directionality, { optional: true });
235
- this._parentFormField = inject(MAT_FORM_FIELD, { optional: true });
236
- this.ngControl = inject(NgControl, { self: true, optional: true });
237
- this._liveAnnouncer = inject(LiveAnnouncer);
238
- this._defaultOptions = inject(MAT_SELECT_CONFIG, { optional: true });
239
- /**
240
- * This position config ensures that the top "start" corner of the overlay
241
- * is aligned with with the top "start" of the origin by default (overlapping
242
- * the trigger completely). If the panel cannot fit below the trigger, it
243
- * will fall back to a position above the trigger.
244
- */
245
- this._positions = [
246
- {
247
- originX: 'start',
248
- originY: 'bottom',
249
- overlayX: 'start',
250
- overlayY: 'top',
251
- },
252
- {
253
- originX: 'end',
254
- originY: 'bottom',
255
- overlayX: 'end',
256
- overlayY: 'top',
257
- },
258
- {
259
- originX: 'start',
260
- originY: 'top',
261
- overlayX: 'start',
262
- overlayY: 'bottom',
263
- panelClass: 'mat-mdc-select-panel-above',
264
- },
265
- {
266
- originX: 'end',
267
- originY: 'top',
268
- overlayX: 'end',
269
- overlayY: 'bottom',
270
- panelClass: 'mat-mdc-select-panel-above',
271
- },
272
- ];
273
- /** Factory function used to create a scroll strategy for this select. */
274
- this._scrollStrategyFactory = inject(MAT_SELECT_SCROLL_STRATEGY);
275
- /** Whether or not the overlay panel is open. */
276
- this._panelOpen = false;
277
- /** Comparison function to specify which option is displayed. Defaults to object equality. */
278
- this._compareWith = (o1, o2) => o1 === o2;
279
- /** Unique id for this input. */
280
- this._uid = `mat-select-${nextUniqueId++}`;
281
- /** Current `aria-labelledby` value for the select trigger. */
282
- this._triggerAriaLabelledBy = null;
283
- /** Emits whenever the component is destroyed. */
284
- this._destroy = new Subject();
285
- /**
286
- * Emits whenever the component state changes and should cause the parent
287
- * form-field to update. Implemented as part of `MatFormFieldControl`.
288
- * @docs-private
289
- */
290
- this.stateChanges = new Subject();
291
- /**
292
- * Disable the automatic labeling to avoid issues like #27241.
293
- * @docs-private
294
- */
295
- this.disableAutomaticLabeling = true;
296
- /** `View -> model callback called when value changes` */
297
- this._onChange = () => { };
298
- /** `View -> model callback called when select has been touched` */
299
- this._onTouched = () => { };
300
- /** ID for the DOM node containing the select's value. */
301
- this._valueId = `mat-select-value-${nextUniqueId++}`;
302
- /** Emits when the panel element is finished transforming in. */
303
- this._panelDoneAnimatingStream = new Subject();
304
- this._overlayPanelClass = this._defaultOptions?.overlayPanelClass || '';
305
- this._focused = false;
306
- /** A name for this control that can be used by `mat-form-field`. */
307
- this.controlType = 'mat-select';
308
- /** Whether the select is disabled. */
309
- this.disabled = false;
310
- /** Whether ripples in the select are disabled. */
311
- this.disableRipple = false;
312
- /** Tab index of the select. */
313
- this.tabIndex = 0;
314
- this._hideSingleSelectionIndicator = this._defaultOptions?.hideSingleSelectionIndicator ?? false;
315
- this._multiple = false;
316
- /** Whether to center the active option over the trigger. */
317
- this.disableOptionCentering = this._defaultOptions?.disableOptionCentering ?? false;
318
- /** Aria label of the select. */
319
- this.ariaLabel = '';
320
- /**
321
- * Width of the panel. If set to `auto`, the panel will match the trigger width.
322
- * If set to null or an empty string, the panel will grow to match the longest option's text.
323
- */
324
- this.panelWidth = this._defaultOptions && typeof this._defaultOptions.panelWidth !== 'undefined'
325
- ? this._defaultOptions.panelWidth
326
- : 'auto';
327
- this._initialized = new Subject();
328
- /** Combined stream of all of the child options' change events. */
329
- this.optionSelectionChanges = defer(() => {
330
- const options = this.options;
331
- if (options) {
332
- return options.changes.pipe(startWith(options), switchMap(() => merge(...options.map(option => option.onSelectionChange))));
333
- }
334
- return this._initialized.pipe(switchMap(() => this.optionSelectionChanges));
335
- });
336
- /** Event emitted when the select panel has been toggled. */
337
- this.openedChange = new EventEmitter();
338
- /** Event emitted when the select has been opened. */
339
- this._openedStream = this.openedChange.pipe(filter(o => o), map(() => { }));
340
- /** Event emitted when the select has been closed. */
341
- this._closedStream = this.openedChange.pipe(filter(o => !o), map(() => { }));
342
- /** Event emitted when the selected value has been changed by the user. */
343
- this.selectionChange = new EventEmitter();
344
- /**
345
- * Event that emits whenever the raw value of the select changes. This is here primarily
346
- * to facilitate the two-way binding for the `value` input.
347
- * @docs-private
348
- */
349
- this.valueChange = new EventEmitter();
350
- /**
351
- * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
352
- * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options
353
- * panel. Track the modal we have changed so we can undo the changes on destroy.
354
- */
355
- this._trackedModal = null;
356
- // `skipPredicate` determines if key manager should avoid putting a given option in the tab
357
- // order. Allow disabled list items to receive focus via keyboard to align with WAI ARIA
358
- // recommendation.
359
- //
360
- // Normally WAI ARIA's instructions are to exclude disabled items from the tab order, but it
361
- // makes a few exceptions for compound widgets.
362
- //
363
- // From [Developing a Keyboard Interface](
364
- // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/):
365
- // "For the following composite widget elements, keep them focusable when disabled: Options in a
366
- // Listbox..."
367
- //
368
- // The user can focus disabled options using the keyboard, but the user cannot click disabled
369
- // options.
370
- this._skipPredicate = (option) => {
371
- if (this.panelOpen) {
372
- // Support keyboard focusing disabled options in an ARIA listbox.
373
- return false;
374
- }
375
- // When the panel is closed, skip over disabled options. Support options via the UP/DOWN arrow
376
- // keys on a closed select. ARIA listbox interaction pattern is less relevant when the panel is
377
- // closed.
378
- return option.disabled;
379
- };
380
403
  const defaultErrorStateMatcher = inject(ErrorStateMatcher);
381
404
  const parentForm = inject(NgForm, { optional: true });
382
405
  const parentFormGroup = inject(FormGroupDirective, { optional: true });
@@ -499,6 +522,12 @@ class MatSelect {
499
522
  // Required for the MDC form field to pick up when the overlay has been opened.
500
523
  this.stateChanges.next();
501
524
  }
525
+ /**
526
+ * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
527
+ * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options
528
+ * panel. Track the modal we have changed so we can undo the changes on destroy.
529
+ */
530
+ _trackedModal = null;
502
531
  /**
503
532
  * If the autocomplete trigger is inside of an `aria-modal` element, connect
504
533
  * that modal to the options panel with `aria-owns`.
@@ -819,6 +848,30 @@ class MatSelect {
819
848
  }
820
849
  return false;
821
850
  }
851
+ // `skipPredicate` determines if key manager should avoid putting a given option in the tab
852
+ // order. Allow disabled list items to receive focus via keyboard to align with WAI ARIA
853
+ // recommendation.
854
+ //
855
+ // Normally WAI ARIA's instructions are to exclude disabled items from the tab order, but it
856
+ // makes a few exceptions for compound widgets.
857
+ //
858
+ // From [Developing a Keyboard Interface](
859
+ // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/):
860
+ // "For the following composite widget elements, keep them focusable when disabled: Options in a
861
+ // Listbox..."
862
+ //
863
+ // The user can focus disabled options using the keyboard, but the user cannot click disabled
864
+ // options.
865
+ _skipPredicate = (option) => {
866
+ if (this.panelOpen) {
867
+ // Support keyboard focusing disabled options in an ARIA listbox.
868
+ return false;
869
+ }
870
+ // When the panel is closed, skip over disabled options. Support options via the UP/DOWN arrow
871
+ // keys on a closed select. ARIA listbox interaction pattern is less relevant when the panel is
872
+ // closed.
873
+ return option.disabled;
874
+ };
822
875
  /** Gets how wide the overlay panel should be. */
823
876
  _getOverlayWidth(preferredOrigin) {
824
877
  if (this.panelWidth === 'auto') {
@@ -1047,13 +1100,13 @@ class MatSelect {
1047
1100
  // want the label to only float when there's a value.
1048
1101
  return this.panelOpen || !this.empty || (this.focused && !!this.placeholder);
1049
1102
  }
1050
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1051
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: MatSelect, isStandalone: true, selector: "mat-select", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], panelClass: "panelClass", disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute], placeholder: "placeholder", required: ["required", "required", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], disableOptionCentering: ["disableOptionCentering", "disableOptionCentering", booleanAttribute], compareWith: "compareWith", value: "value", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], errorStateMatcher: "errorStateMatcher", typeaheadDebounceInterval: ["typeaheadDebounceInterval", "typeaheadDebounceInterval", numberAttribute], sortComparator: "sortComparator", id: "id", panelWidth: "panelWidth" }, outputs: { openedChange: "openedChange", _openedStream: "opened", _closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-label": "ariaLabel || null", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "attr.aria-activedescendant": "_getAriaActiveDescendant()", "class.mat-mdc-select-disabled": "disabled", "class.mat-mdc-select-invalid": "errorState", "class.mat-mdc-select-required": "required", "class.mat-mdc-select-empty": "empty", "class.mat-mdc-select-multiple": "multiple" }, classAttribute: "mat-mdc-select" }, providers: [
1103
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
1104
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.0", type: MatSelect, isStandalone: true, selector: "mat-select", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], panelClass: "panelClass", disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute], placeholder: "placeholder", required: ["required", "required", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], disableOptionCentering: ["disableOptionCentering", "disableOptionCentering", booleanAttribute], compareWith: "compareWith", value: "value", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], errorStateMatcher: "errorStateMatcher", typeaheadDebounceInterval: ["typeaheadDebounceInterval", "typeaheadDebounceInterval", numberAttribute], sortComparator: "sortComparator", id: "id", panelWidth: "panelWidth" }, outputs: { openedChange: "openedChange", _openedStream: "opened", _closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-label": "ariaLabel || null", "attr.aria-required": "required.toString()", "attr.aria-disabled": "disabled.toString()", "attr.aria-invalid": "errorState", "attr.aria-activedescendant": "_getAriaActiveDescendant()", "class.mat-mdc-select-disabled": "disabled", "class.mat-mdc-select-invalid": "errorState", "class.mat-mdc-select-required": "required", "class.mat-mdc-select-empty": "empty", "class.mat-mdc-select-multiple": "multiple" }, classAttribute: "mat-mdc-select" }, providers: [
1052
1105
  { provide: MatFormFieldControl, useExisting: MatSelect },
1053
1106
  { provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect },
1054
- ], queries: [{ propertyName: "customTrigger", first: true, predicate: MAT_SELECT_TRIGGER, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }, { propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }], exportAs: ["matSelect"], usesOnChanges: true, ngImport: i0, template: "<div cdk-overlay-origin\n class=\"mat-mdc-select-trigger\"\n (click)=\"open()\"\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n #trigger>\n\n <div class=\"mat-mdc-select-value\" [attr.id]=\"_valueId\">\n @if (empty) {\n <span class=\"mat-mdc-select-placeholder mat-mdc-select-min-line\">{{placeholder}}</span>\n } @else {\n <span class=\"mat-mdc-select-value-text\">\n @if (customTrigger) {\n <ng-content select=\"mat-select-trigger\"></ng-content>\n } @else {\n <span class=\"mat-mdc-select-min-line\">{{triggerValue}}</span>\n }\n </span>\n }\n </div>\n\n <div class=\"mat-mdc-select-arrow-wrapper\">\n <div class=\"mat-mdc-select-arrow\">\n <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M7 10l5 5 5-5z\"/>\n </svg>\n </div>\n </div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\n [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"_positions\"\n [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n (backdropClick)=\"close()\"\n (attach)=\"_onAttached()\"\n (detach)=\"close()\">\n <div\n #panel\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open {{ _getPanelTheme() }}\"\n [attr.id]=\"id + '-panel'\"\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [ngClass]=\"panelClass\"\n [@transformPanel]=\"'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n (keydown)=\"_handleKeydown($event)\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var(--mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12))}.mat-mdc-select-disabled{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-form-field-appearance-fill .mdc-text-field--no-label .mat-mdc-select-arrow-wrapper{transform:none}.mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow,.mat-form-field-invalid:not(.mat-form-field-disabled) .mat-mdc-form-field-infix::after{color:var(--mat-select-invalid-arrow-color, var(--mat-sys-error))}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--mat-select-focused-arrow-color, var(--mat-sys-primary))}.mat-mdc-form-field .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow{color:var(--mat-select-disabled-arrow-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}@media(forced-colors: active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}@media(forced-colors: active){div.mat-mdc-select-panel{outline:solid 1px}}.cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{border-top-left-radius:0;border-top-right-radius:0;transform-origin:top center}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:bottom center}div.mat-mdc-select-panel .mat-mdc-option{--mdc-list-list-item-container-color: var(--mat-select-panel-background-color)}.mat-mdc-select-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-form-field-hide-placeholder .mat-mdc-select-placeholder{color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);transition:none;display:block}.mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{cursor:pointer}.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mat-mdc-floating-label{max-width:calc(100% - 18px)}.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mdc-floating-label--float-above{max-width:calc(100%/0.75 - 24px)}.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-text-field--label-floating .mdc-notched-outline__notch{max-width:calc(100% - 24px)}.mat-mdc-select-min-line:empty::before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}.mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper{transform:var(--mat-select-arrow-transform, translateY(-8px))}"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [matSelectAnimations.transformPanel], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1107
+ ], queries: [{ propertyName: "customTrigger", first: true, predicate: MAT_SELECT_TRIGGER, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }, { propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }], exportAs: ["matSelect"], usesOnChanges: true, ngImport: i0, template: "<div cdk-overlay-origin\n class=\"mat-mdc-select-trigger\"\n (click)=\"open()\"\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n #trigger>\n\n <div class=\"mat-mdc-select-value\" [attr.id]=\"_valueId\">\n @if (empty) {\n <span class=\"mat-mdc-select-placeholder mat-mdc-select-min-line\">{{placeholder}}</span>\n } @else {\n <span class=\"mat-mdc-select-value-text\">\n @if (customTrigger) {\n <ng-content select=\"mat-select-trigger\"></ng-content>\n } @else {\n <span class=\"mat-mdc-select-min-line\">{{triggerValue}}</span>\n }\n </span>\n }\n </div>\n\n <div class=\"mat-mdc-select-arrow-wrapper\">\n <div class=\"mat-mdc-select-arrow\">\n <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M7 10l5 5 5-5z\"/>\n </svg>\n </div>\n </div>\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n cdkConnectedOverlayHasBackdrop\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\n [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayPositions]=\"_positions\"\n [cdkConnectedOverlayWidth]=\"_overlayWidth\"\n (backdropClick)=\"close()\"\n (attach)=\"_onAttached()\"\n (detach)=\"close()\">\n <div\n #panel\n role=\"listbox\"\n tabindex=\"-1\"\n class=\"mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open {{ _getPanelTheme() }}\"\n [attr.id]=\"id + '-panel'\"\n [attr.aria-multiselectable]=\"multiple\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\n [ngClass]=\"panelClass\"\n [@transformPanel]=\"'showing'\"\n (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\n (keydown)=\"_handleKeydown($event)\">\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".mat-mdc-select{display:inline-block;width:100%;outline:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--mat-select-enabled-trigger-text-color, var(--mat-sys-on-surface));font-family:var(--mat-select-trigger-text-font, var(--mat-sys-body-large-font));line-height:var(--mat-select-trigger-text-line-height, var(--mat-sys-body-large-line-height));font-size:var(--mat-select-trigger-text-size, var(--mat-sys-body-large-size));font-weight:var(--mat-select-trigger-text-weight, var(--mat-sys-body-large-weight));letter-spacing:var(--mat-select-trigger-text-tracking, var(--mat-sys-body-large-tracking))}div.mat-mdc-select-panel{box-shadow:var(--mat-select-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12))}.mat-mdc-select-disabled{color:var(--mat-select-disabled-trigger-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-trigger{display:inline-flex;align-items:center;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.mat-mdc-select-disabled .mat-mdc-select-trigger{-webkit-user-select:none;user-select:none;cursor:default}.mat-mdc-select-value{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-select-value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-mdc-select-arrow-wrapper{height:24px;flex-shrink:0;display:inline-flex;align-items:center}.mat-form-field-appearance-fill .mdc-text-field--no-label .mat-mdc-select-arrow-wrapper{transform:none}.mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow,.mat-form-field-invalid:not(.mat-form-field-disabled) .mat-mdc-form-field-infix::after{color:var(--mat-select-invalid-arrow-color, var(--mat-sys-error))}.mat-mdc-select-arrow{width:10px;height:5px;position:relative;color:var(--mat-select-enabled-arrow-color, var(--mat-sys-on-surface-variant))}.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:var(--mat-select-focused-arrow-color, var(--mat-sys-primary))}.mat-mdc-form-field .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow{color:var(--mat-select-disabled-arrow-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-select-arrow svg{fill:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}@media(forced-colors: active){.mat-mdc-select-arrow svg{fill:CanvasText}.mat-mdc-select-disabled .mat-mdc-select-arrow svg{fill:GrayText}}div.mat-mdc-select-panel{width:100%;max-height:275px;outline:0;overflow:auto;padding:8px 0;border-radius:4px;box-sizing:border-box;position:static;background-color:var(--mat-select-panel-background-color, var(--mat-sys-surface-container))}@media(forced-colors: active){div.mat-mdc-select-panel{outline:solid 1px}}.cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{border-top-left-radius:0;border-top-right-radius:0;transform-origin:top center}.mat-mdc-select-panel-above div.mat-mdc-select-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:bottom center}div.mat-mdc-select-panel .mat-mdc-option{--mdc-list-list-item-container-color: var(--mat-select-panel-background-color)}.mat-mdc-select-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);color:var(--mat-select-placeholder-text-color, var(--mat-sys-on-surface-variant))}._mat-animation-noopable .mat-mdc-select-placeholder{transition:none}.mat-form-field-hide-placeholder .mat-mdc-select-placeholder{color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);transition:none;display:block}.mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{cursor:pointer}.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mat-mdc-floating-label{max-width:calc(100% - 18px)}.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mdc-floating-label--float-above{max-width:calc(100%/0.75 - 24px)}.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-text-field--label-floating .mdc-notched-outline__notch{max-width:calc(100% - 24px)}.mat-mdc-select-min-line:empty::before{content:\" \";white-space:pre;width:1px;display:inline-block;visibility:hidden}.mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper{transform:var(--mat-select-arrow-transform, translateY(-8px))}"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [matSelectAnimations.transformPanel], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1055
1108
  }
1056
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatSelect, decorators: [{
1109
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatSelect, decorators: [{
1057
1110
  type: Component,
1058
1111
  args: [{ selector: 'mat-select', exportAs: 'matSelect', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
1059
1112
  'role': 'combobox',
@@ -1166,10 +1219,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
1166
1219
  * Allows the user to customize the trigger that is displayed when the select has a value.
1167
1220
  */
1168
1221
  class MatSelectTrigger {
1169
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1170
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatSelectTrigger, isStandalone: true, selector: "mat-select-trigger", providers: [{ provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger }], ngImport: i0 }); }
1222
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1223
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatSelectTrigger, isStandalone: true, selector: "mat-select-trigger", providers: [{ provide: MAT_SELECT_TRIGGER, useExisting: MatSelectTrigger }], ngImport: i0 });
1171
1224
  }
1172
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatSelectTrigger, decorators: [{
1225
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatSelectTrigger, decorators: [{
1173
1226
  type: Directive,
1174
1227
  args: [{
1175
1228
  selector: 'mat-select-trigger',
@@ -1178,37 +1231,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
1178
1231
  }] });
1179
1232
 
1180
1233
  class MatSelectModule {
1181
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1182
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatSelectModule, imports: [CommonModule,
1183
- OverlayModule,
1184
- MatOptionModule,
1185
- MatCommonModule,
1186
- MatSelect,
1187
- MatSelectTrigger], exports: [CdkScrollableModule,
1234
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1235
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatSelectModule, imports: [OverlayModule, MatOptionModule, MatCommonModule, MatSelect, MatSelectTrigger], exports: [CdkScrollableModule,
1188
1236
  MatFormFieldModule,
1189
1237
  MatSelect,
1190
1238
  MatSelectTrigger,
1191
1239
  MatOptionModule,
1192
- MatCommonModule] }); }
1193
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatSelectModule, providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [CommonModule,
1194
- OverlayModule,
1195
- MatOptionModule,
1196
- MatCommonModule, CdkScrollableModule,
1240
+ MatCommonModule] });
1241
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatSelectModule, providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER], imports: [OverlayModule, MatOptionModule, MatCommonModule, CdkScrollableModule,
1197
1242
  MatFormFieldModule,
1198
1243
  MatOptionModule,
1199
- MatCommonModule] }); }
1244
+ MatCommonModule] });
1200
1245
  }
1201
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatSelectModule, decorators: [{
1246
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatSelectModule, decorators: [{
1202
1247
  type: NgModule,
1203
1248
  args: [{
1204
- imports: [
1205
- CommonModule,
1206
- OverlayModule,
1207
- MatOptionModule,
1208
- MatCommonModule,
1209
- MatSelect,
1210
- MatSelectTrigger,
1211
- ],
1249
+ imports: [OverlayModule, MatOptionModule, MatCommonModule, MatSelect, MatSelectTrigger],
1212
1250
  exports: [
1213
1251
  CdkScrollableModule,
1214
1252
  MatFormFieldModule,