@angular/material 21.0.0-next.9 → 21.0.0-rc.0

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 (202) hide show
  1. package/core/tokens/_classes.scss +1 -1
  2. package/core/tokens/m2/_md-sys-color.scss +17 -17
  3. package/fesm2022/_animation-chunk.mjs +10 -16
  4. package/fesm2022/_animation-chunk.mjs.map +1 -1
  5. package/fesm2022/_date-formats-chunk.mjs +68 -164
  6. package/fesm2022/_date-formats-chunk.mjs.map +1 -1
  7. package/fesm2022/_date-range-input-harness-chunk.mjs +284 -463
  8. package/fesm2022/_date-range-input-harness-chunk.mjs.map +1 -1
  9. package/fesm2022/_error-options-chunk.mjs +56 -19
  10. package/fesm2022/_error-options-chunk.mjs.map +1 -1
  11. package/fesm2022/_error-state-chunk.mjs +24 -31
  12. package/fesm2022/_error-state-chunk.mjs.map +1 -1
  13. package/fesm2022/_form-field-chunk.mjs +1224 -1017
  14. package/fesm2022/_form-field-chunk.mjs.map +1 -1
  15. package/fesm2022/_icon-button-chunk.mjs +243 -187
  16. package/fesm2022/_icon-button-chunk.mjs.map +1 -1
  17. package/fesm2022/_icon-registry-chunk.mjs +350 -575
  18. package/fesm2022/_icon-registry-chunk.mjs.map +1 -1
  19. package/fesm2022/_input-harness-chunk.mjs +56 -107
  20. package/fesm2022/_input-harness-chunk.mjs.map +1 -1
  21. package/fesm2022/_input-value-accessor-chunk.mjs +0 -6
  22. package/fesm2022/_input-value-accessor-chunk.mjs.map +1 -1
  23. package/fesm2022/_internal-form-field-chunk.mjs +59 -19
  24. package/fesm2022/_internal-form-field-chunk.mjs.map +1 -1
  25. package/fesm2022/_line-chunk.mjs +83 -43
  26. package/fesm2022/_line-chunk.mjs.map +1 -1
  27. package/fesm2022/_option-chunk.mjs +348 -311
  28. package/fesm2022/_option-chunk.mjs.map +1 -1
  29. package/fesm2022/_option-harness-chunk.mjs +23 -39
  30. package/fesm2022/_option-harness-chunk.mjs.map +1 -1
  31. package/fesm2022/_option-module-chunk.mjs +36 -10
  32. package/fesm2022/_option-module-chunk.mjs.map +1 -1
  33. package/fesm2022/_pseudo-checkbox-chunk.mjs +79 -44
  34. package/fesm2022/_pseudo-checkbox-chunk.mjs.map +1 -1
  35. package/fesm2022/_pseudo-checkbox-module-chunk.mjs +36 -10
  36. package/fesm2022/_pseudo-checkbox-module-chunk.mjs.map +1 -1
  37. package/fesm2022/_public-api-chunk.mjs +71 -134
  38. package/fesm2022/_public-api-chunk.mjs.map +1 -1
  39. package/fesm2022/_ripple-chunk.mjs +504 -600
  40. package/fesm2022/_ripple-chunk.mjs.map +1 -1
  41. package/fesm2022/_ripple-loader-chunk.mjs +120 -138
  42. package/fesm2022/_ripple-loader-chunk.mjs.map +1 -1
  43. package/fesm2022/_ripple-module-chunk.mjs +36 -10
  44. package/fesm2022/_ripple-module-chunk.mjs.map +1 -1
  45. package/fesm2022/_structural-styles-chunk.mjs +37 -10
  46. package/fesm2022/_structural-styles-chunk.mjs.map +1 -1
  47. package/fesm2022/_tooltip-chunk.mjs +810 -888
  48. package/fesm2022/_tooltip-chunk.mjs.map +1 -1
  49. package/fesm2022/autocomplete-testing.mjs +62 -86
  50. package/fesm2022/autocomplete-testing.mjs.map +1 -1
  51. package/fesm2022/autocomplete.mjs +965 -1126
  52. package/fesm2022/autocomplete.mjs.map +1 -1
  53. package/fesm2022/badge-testing.mjs +38 -54
  54. package/fesm2022/badge-testing.mjs.map +1 -1
  55. package/fesm2022/badge.mjs +321 -272
  56. package/fesm2022/badge.mjs.map +1 -1
  57. package/fesm2022/bottom-sheet-testing.mjs +10 -24
  58. package/fesm2022/bottom-sheet-testing.mjs.map +1 -1
  59. package/fesm2022/bottom-sheet.mjs +349 -344
  60. package/fesm2022/bottom-sheet.mjs.map +1 -1
  61. package/fesm2022/button-testing.mjs +60 -94
  62. package/fesm2022/button-testing.mjs.map +1 -1
  63. package/fesm2022/button-toggle-testing.mjs +76 -125
  64. package/fesm2022/button-toggle-testing.mjs.map +1 -1
  65. package/fesm2022/button-toggle.mjs +752 -662
  66. package/fesm2022/button-toggle.mjs.map +1 -1
  67. package/fesm2022/button.mjs +263 -158
  68. package/fesm2022/button.mjs.map +1 -1
  69. package/fesm2022/card-testing.mjs +19 -33
  70. package/fesm2022/card-testing.mjs.map +1 -1
  71. package/fesm2022/card.mjs +576 -272
  72. package/fesm2022/card.mjs.map +1 -1
  73. package/fesm2022/checkbox-testing.mjs +71 -123
  74. package/fesm2022/checkbox-testing.mjs.map +1 -1
  75. package/fesm2022/checkbox.mjs +515 -477
  76. package/fesm2022/checkbox.mjs.map +1 -1
  77. package/fesm2022/chips-testing.mjs +201 -344
  78. package/fesm2022/chips-testing.mjs.map +1 -1
  79. package/fesm2022/chips.mjs +2552 -2289
  80. package/fesm2022/chips.mjs.map +1 -1
  81. package/fesm2022/core-testing.mjs +14 -28
  82. package/fesm2022/core-testing.mjs.map +1 -1
  83. package/fesm2022/core.mjs +357 -328
  84. package/fesm2022/core.mjs.map +1 -1
  85. package/fesm2022/datepicker-testing.mjs +15 -25
  86. package/fesm2022/datepicker-testing.mjs.map +1 -1
  87. package/fesm2022/datepicker.mjs +4826 -4563
  88. package/fesm2022/datepicker.mjs.map +1 -1
  89. package/fesm2022/dialog-testing.mjs +93 -129
  90. package/fesm2022/dialog-testing.mjs.map +1 -1
  91. package/fesm2022/dialog.mjs +810 -829
  92. package/fesm2022/dialog.mjs.map +1 -1
  93. package/fesm2022/divider-testing.mjs +10 -11
  94. package/fesm2022/divider-testing.mjs.map +1 -1
  95. package/fesm2022/divider.mjs +119 -43
  96. package/fesm2022/divider.mjs.map +1 -1
  97. package/fesm2022/expansion-testing.mjs +74 -130
  98. package/fesm2022/expansion-testing.mjs.map +1 -1
  99. package/fesm2022/expansion.mjs +703 -515
  100. package/fesm2022/expansion.mjs.map +1 -1
  101. package/fesm2022/form-field-testing-control.mjs +16 -33
  102. package/fesm2022/form-field-testing-control.mjs.map +1 -1
  103. package/fesm2022/form-field-testing.mjs +118 -179
  104. package/fesm2022/form-field-testing.mjs.map +1 -1
  105. package/fesm2022/form-field.mjs +36 -10
  106. package/fesm2022/form-field.mjs.map +1 -1
  107. package/fesm2022/grid-list-testing.mjs +65 -113
  108. package/fesm2022/grid-list-testing.mjs.map +1 -1
  109. package/fesm2022/grid-list.mjs +559 -494
  110. package/fesm2022/grid-list.mjs.map +1 -1
  111. package/fesm2022/icon-testing.mjs +148 -127
  112. package/fesm2022/icon-testing.mjs.map +1 -1
  113. package/fesm2022/icon.mjs +325 -351
  114. package/fesm2022/icon.mjs.map +1 -1
  115. package/fesm2022/input-testing.mjs +59 -99
  116. package/fesm2022/input-testing.mjs.map +1 -1
  117. package/fesm2022/input.mjs +457 -520
  118. package/fesm2022/input.mjs.map +1 -1
  119. package/fesm2022/list-testing.mjs +251 -434
  120. package/fesm2022/list-testing.mjs.map +1 -1
  121. package/fesm2022/list.mjs +1522 -1204
  122. package/fesm2022/list.mjs.map +1 -1
  123. package/fesm2022/material.mjs +0 -5
  124. package/fesm2022/material.mjs.map +1 -1
  125. package/fesm2022/menu-testing.mjs +159 -228
  126. package/fesm2022/menu-testing.mjs.map +1 -1
  127. package/fesm2022/menu.mjs +1338 -1343
  128. package/fesm2022/menu.mjs.map +1 -1
  129. package/fesm2022/paginator-testing.mjs +55 -79
  130. package/fesm2022/paginator-testing.mjs.map +1 -1
  131. package/fesm2022/paginator.mjs +381 -309
  132. package/fesm2022/paginator.mjs.map +1 -1
  133. package/fesm2022/progress-bar-testing.mjs +12 -21
  134. package/fesm2022/progress-bar-testing.mjs.map +1 -1
  135. package/fesm2022/progress-bar.mjs +224 -169
  136. package/fesm2022/progress-bar.mjs.map +1 -1
  137. package/fesm2022/progress-spinner-testing.mjs +13 -23
  138. package/fesm2022/progress-spinner-testing.mjs.map +1 -1
  139. package/fesm2022/progress-spinner.mjs +235 -160
  140. package/fesm2022/progress-spinner.mjs.map +1 -1
  141. package/fesm2022/radio-testing.mjs +133 -208
  142. package/fesm2022/radio-testing.mjs.map +1 -1
  143. package/fesm2022/radio.mjs +712 -679
  144. package/fesm2022/radio.mjs.map +1 -1
  145. package/fesm2022/select-testing.mjs +83 -117
  146. package/fesm2022/select-testing.mjs.map +1 -1
  147. package/fesm2022/select.mjs +1116 -1246
  148. package/fesm2022/select.mjs.map +1 -1
  149. package/fesm2022/sidenav-testing.mjs +54 -120
  150. package/fesm2022/sidenav-testing.mjs.map +1 -1
  151. package/fesm2022/sidenav.mjs +1078 -995
  152. package/fesm2022/sidenav.mjs.map +1 -1
  153. package/fesm2022/slide-toggle-testing.mjs +57 -92
  154. package/fesm2022/slide-toggle-testing.mjs.map +1 -1
  155. package/fesm2022/slide-toggle.mjs +369 -279
  156. package/fesm2022/slide-toggle.mjs.map +1 -1
  157. package/fesm2022/slider-testing.mjs +90 -138
  158. package/fesm2022/slider-testing.mjs.map +1 -1
  159. package/fesm2022/slider.mjs +1651 -1716
  160. package/fesm2022/slider.mjs.map +1 -1
  161. package/fesm2022/snack-bar-testing.mjs +40 -87
  162. package/fesm2022/snack-bar-testing.mjs.map +1 -1
  163. package/fesm2022/snack-bar.mjs +763 -714
  164. package/fesm2022/snack-bar.mjs.map +1 -1
  165. package/fesm2022/sort-testing.mjs +45 -66
  166. package/fesm2022/sort-testing.mjs.map +1 -1
  167. package/fesm2022/sort.mjs +419 -344
  168. package/fesm2022/sort.mjs.map +1 -1
  169. package/fesm2022/stepper-testing.mjs +78 -154
  170. package/fesm2022/stepper-testing.mjs.map +1 -1
  171. package/fesm2022/stepper.mjs +790 -498
  172. package/fesm2022/stepper.mjs.map +1 -1
  173. package/fesm2022/table-testing.mjs +120 -213
  174. package/fesm2022/table-testing.mjs.map +1 -1
  175. package/fesm2022/table.mjs +1026 -684
  176. package/fesm2022/table.mjs.map +1 -1
  177. package/fesm2022/tabs-testing.mjs +125 -197
  178. package/fesm2022/tabs-testing.mjs.map +1 -1
  179. package/fesm2022/tabs.mjs +2351 -2028
  180. package/fesm2022/tabs.mjs.map +1 -1
  181. package/fesm2022/timepicker-testing.mjs +113 -172
  182. package/fesm2022/timepicker-testing.mjs.map +1 -1
  183. package/fesm2022/timepicker.mjs +1019 -826
  184. package/fesm2022/timepicker.mjs.map +1 -1
  185. package/fesm2022/toolbar-testing.mjs +16 -27
  186. package/fesm2022/toolbar-testing.mjs.map +1 -1
  187. package/fesm2022/toolbar.mjs +163 -78
  188. package/fesm2022/toolbar.mjs.map +1 -1
  189. package/fesm2022/tooltip-testing.mjs +41 -52
  190. package/fesm2022/tooltip-testing.mjs.map +1 -1
  191. package/fesm2022/tooltip.mjs +36 -10
  192. package/fesm2022/tooltip.mjs.map +1 -1
  193. package/fesm2022/tree-testing.mjs +86 -162
  194. package/fesm2022/tree-testing.mjs.map +1 -1
  195. package/fesm2022/tree.mjs +638 -466
  196. package/fesm2022/tree.mjs.map +1 -1
  197. package/package.json +2 -2
  198. package/schematics/ng-add/index.js +1 -1
  199. package/types/expansion.d.ts +4 -2
  200. package/types/menu-testing.d.ts +2 -0
  201. package/types/select.d.ts +1 -1
  202. package/types/timepicker.d.ts +1 -0
@@ -14,705 +14,738 @@ import '@angular/cdk/layout';
14
14
  import '@angular/cdk/platform';
15
15
  import '@angular/cdk/coercion';
16
16
 
17
- /** Change event object emitted by radio button and radio group. */
18
17
  class MatRadioChange {
19
- source;
20
- value;
21
- constructor(
22
- /** The radio button that emits the change event. */
23
- source,
24
- /** The value of the radio button. */
25
- value) {
26
- this.source = source;
27
- this.value = value;
28
- }
18
+ source;
19
+ value;
20
+ constructor(source, value) {
21
+ this.source = source;
22
+ this.value = value;
23
+ }
29
24
  }
30
- /**
31
- * Provider Expression that allows mat-radio-group to register as a ControlValueAccessor. This
32
- * allows it to support [(ngModel)] and ngControl.
33
- * @docs-private
34
- */
35
25
  const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
36
- provide: NG_VALUE_ACCESSOR,
37
- useExisting: forwardRef(() => MatRadioGroup),
38
- multi: true,
26
+ provide: NG_VALUE_ACCESSOR,
27
+ useExisting: forwardRef(() => MatRadioGroup),
28
+ multi: true
39
29
  };
40
- /**
41
- * Injection token that can be used to inject instances of `MatRadioGroup`. It serves as
42
- * alternative token to the actual `MatRadioGroup` class which could cause unnecessary
43
- * retention of the class and its component metadata.
44
- */
45
30
  const MAT_RADIO_GROUP = new InjectionToken('MatRadioGroup');
46
31
  const MAT_RADIO_DEFAULT_OPTIONS = new InjectionToken('mat-radio-default-options', {
47
- providedIn: 'root',
48
- factory: () => ({
49
- color: 'accent',
50
- disabledInteractive: false,
51
- }),
32
+ providedIn: 'root',
33
+ factory: () => ({
34
+ color: 'accent',
35
+ disabledInteractive: false
36
+ })
52
37
  });
53
- /**
54
- * A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
55
- */
56
38
  class MatRadioGroup {
57
- _changeDetector = inject(ChangeDetectorRef);
58
- /** Selected value for the radio group. */
59
- _value = null;
60
- /** The HTML name attribute applied to radio buttons in this group. */
61
- _name = inject(_IdGenerator).getId('mat-radio-group-');
62
- /** The currently selected radio button. Should match value. */
63
- _selected = null;
64
- /** Whether the `value` has been set to its initial value. */
65
- _isInitialized = false;
66
- /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
67
- _labelPosition = 'after';
68
- /** Whether the radio group is disabled. */
69
- _disabled = false;
70
- /** Whether the radio group is required. */
71
- _required = false;
72
- /** Subscription to changes in amount of radio buttons. */
73
- _buttonChanges;
74
- /** The method to be called in order to update ngModel */
75
- _controlValueAccessorChangeFn = () => { };
76
- /**
77
- * onTouch function registered via registerOnTouch (ControlValueAccessor).
78
- * @docs-private
79
- */
80
- onTouched = () => { };
81
- /**
82
- * Event emitted when the group value changes.
83
- * Change events are only emitted when the value changes due to user interaction with
84
- * a radio button (the same behavior as `<input type-"radio">`).
85
- */
86
- change = new EventEmitter();
87
- /** Child radio buttons. */
88
- _radios;
89
- /**
90
- * Theme color of the radio buttons in the group. This API is supported in M2
91
- * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/radio/styling.
92
- *
93
- * For information on applying color variants in M3, see
94
- * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
95
- */
96
- color;
97
- /** Name of the radio button group. All radio buttons inside this group will use this name. */
98
- get name() {
99
- return this._name;
100
- }
101
- set name(value) {
102
- this._name = value;
103
- this._updateRadioButtonNames();
104
- }
105
- /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
106
- get labelPosition() {
107
- return this._labelPosition;
108
- }
109
- set labelPosition(v) {
110
- this._labelPosition = v === 'before' ? 'before' : 'after';
111
- this._markRadiosForCheck();
112
- }
113
- /**
114
- * Value for the radio-group. Should equal the value of the selected radio button if there is
115
- * a corresponding radio button with a matching value. If there is not such a corresponding
116
- * radio button, this value persists to be applied in case a new radio button is added with a
117
- * matching value.
118
- */
119
- get value() {
120
- return this._value;
121
- }
122
- set value(newValue) {
123
- if (this._value !== newValue) {
124
- // Set this before proceeding to ensure no circular loop occurs with selection.
125
- this._value = newValue;
126
- this._updateSelectedRadioFromValue();
127
- this._checkSelectedRadioButton();
128
- }
129
- }
130
- _checkSelectedRadioButton() {
131
- if (this._selected && !this._selected.checked) {
132
- this._selected.checked = true;
133
- }
134
- }
135
- /**
136
- * The currently selected radio button. If set to a new radio button, the radio group value
137
- * will be updated to match the new selected button.
138
- */
139
- get selected() {
140
- return this._selected;
141
- }
142
- set selected(selected) {
143
- this._selected = selected;
144
- this.value = selected ? selected.value : null;
145
- this._checkSelectedRadioButton();
146
- }
147
- /** Whether the radio group is disabled */
148
- get disabled() {
149
- return this._disabled;
150
- }
151
- set disabled(value) {
152
- this._disabled = value;
153
- this._markRadiosForCheck();
154
- }
155
- /** Whether the radio group is required */
156
- get required() {
157
- return this._required;
158
- }
159
- set required(value) {
160
- this._required = value;
161
- this._markRadiosForCheck();
162
- }
163
- /** Whether buttons in the group should be interactive while they're disabled. */
164
- get disabledInteractive() {
165
- return this._disabledInteractive;
166
- }
167
- set disabledInteractive(value) {
168
- this._disabledInteractive = value;
169
- this._markRadiosForCheck();
170
- }
171
- _disabledInteractive = false;
172
- constructor() { }
173
- /**
174
- * Initialize properties once content children are available.
175
- * This allows us to propagate relevant attributes to associated buttons.
176
- */
177
- ngAfterContentInit() {
178
- // Mark this component as initialized in AfterContentInit because the initial value can
179
- // possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the
180
- // NgModel occurs *after* the OnInit of the MatRadioGroup.
181
- this._isInitialized = true;
182
- // Clear the `selected` button when it's destroyed since the tabindex of the rest of the
183
- // buttons depends on it. Note that we don't clear the `value`, because the radio button
184
- // may be swapped out with a similar one and there are some internal apps that depend on
185
- // that behavior.
186
- this._buttonChanges = this._radios.changes.subscribe(() => {
187
- if (this.selected && !this._radios.find(radio => radio === this.selected)) {
188
- this._selected = null;
189
- }
190
- });
191
- }
192
- ngOnDestroy() {
193
- this._buttonChanges?.unsubscribe();
194
- }
195
- /**
196
- * Mark this group as being "touched" (for ngModel). Meant to be called by the contained
197
- * radio buttons upon their blur.
198
- */
199
- _touch() {
200
- if (this.onTouched) {
201
- this.onTouched();
202
- }
203
- }
204
- _updateRadioButtonNames() {
205
- if (this._radios) {
206
- this._radios.forEach(radio => {
207
- radio.name = this.name;
208
- radio._markForCheck();
209
- });
210
- }
211
- }
212
- /** Updates the `selected` radio button from the internal _value state. */
213
- _updateSelectedRadioFromValue() {
214
- // If the value already matches the selected radio, do nothing.
215
- const isAlreadySelected = this._selected !== null && this._selected.value === this._value;
216
- if (this._radios && !isAlreadySelected) {
217
- this._selected = null;
218
- this._radios.forEach(radio => {
219
- radio.checked = this.value === radio.value;
220
- if (radio.checked) {
221
- this._selected = radio;
222
- }
223
- });
224
- }
225
- }
226
- /** Dispatch change event with current selection and group value. */
227
- _emitChangeEvent() {
228
- if (this._isInitialized) {
229
- this.change.emit(new MatRadioChange(this._selected, this._value));
230
- }
231
- }
232
- _markRadiosForCheck() {
233
- if (this._radios) {
234
- this._radios.forEach(radio => radio._markForCheck());
39
+ _changeDetector = inject(ChangeDetectorRef);
40
+ _value = null;
41
+ _name = inject(_IdGenerator).getId('mat-radio-group-');
42
+ _selected = null;
43
+ _isInitialized = false;
44
+ _labelPosition = 'after';
45
+ _disabled = false;
46
+ _required = false;
47
+ _buttonChanges;
48
+ _controlValueAccessorChangeFn = () => {};
49
+ onTouched = () => {};
50
+ change = new EventEmitter();
51
+ _radios;
52
+ color;
53
+ get name() {
54
+ return this._name;
55
+ }
56
+ set name(value) {
57
+ this._name = value;
58
+ this._updateRadioButtonNames();
59
+ }
60
+ get labelPosition() {
61
+ return this._labelPosition;
62
+ }
63
+ set labelPosition(v) {
64
+ this._labelPosition = v === 'before' ? 'before' : 'after';
65
+ this._markRadiosForCheck();
66
+ }
67
+ get value() {
68
+ return this._value;
69
+ }
70
+ set value(newValue) {
71
+ if (this._value !== newValue) {
72
+ this._value = newValue;
73
+ this._updateSelectedRadioFromValue();
74
+ this._checkSelectedRadioButton();
75
+ }
76
+ }
77
+ _checkSelectedRadioButton() {
78
+ if (this._selected && !this._selected.checked) {
79
+ this._selected.checked = true;
80
+ }
81
+ }
82
+ get selected() {
83
+ return this._selected;
84
+ }
85
+ set selected(selected) {
86
+ this._selected = selected;
87
+ this.value = selected ? selected.value : null;
88
+ this._checkSelectedRadioButton();
89
+ }
90
+ get disabled() {
91
+ return this._disabled;
92
+ }
93
+ set disabled(value) {
94
+ this._disabled = value;
95
+ this._markRadiosForCheck();
96
+ }
97
+ get required() {
98
+ return this._required;
99
+ }
100
+ set required(value) {
101
+ this._required = value;
102
+ this._markRadiosForCheck();
103
+ }
104
+ get disabledInteractive() {
105
+ return this._disabledInteractive;
106
+ }
107
+ set disabledInteractive(value) {
108
+ this._disabledInteractive = value;
109
+ this._markRadiosForCheck();
110
+ }
111
+ _disabledInteractive = false;
112
+ constructor() {}
113
+ ngAfterContentInit() {
114
+ this._isInitialized = true;
115
+ this._buttonChanges = this._radios.changes.subscribe(() => {
116
+ if (this.selected && !this._radios.find(radio => radio === this.selected)) {
117
+ this._selected = null;
118
+ }
119
+ });
120
+ }
121
+ ngOnDestroy() {
122
+ this._buttonChanges?.unsubscribe();
123
+ }
124
+ _touch() {
125
+ if (this.onTouched) {
126
+ this.onTouched();
127
+ }
128
+ }
129
+ _updateRadioButtonNames() {
130
+ if (this._radios) {
131
+ this._radios.forEach(radio => {
132
+ radio.name = this.name;
133
+ radio._markForCheck();
134
+ });
135
+ }
136
+ }
137
+ _updateSelectedRadioFromValue() {
138
+ const isAlreadySelected = this._selected !== null && this._selected.value === this._value;
139
+ if (this._radios && !isAlreadySelected) {
140
+ this._selected = null;
141
+ this._radios.forEach(radio => {
142
+ radio.checked = this.value === radio.value;
143
+ if (radio.checked) {
144
+ this._selected = radio;
235
145
  }
236
- }
237
- /**
238
- * Sets the model value. Implemented as part of ControlValueAccessor.
239
- * @param value
240
- */
241
- writeValue(value) {
242
- this.value = value;
243
- this._changeDetector.markForCheck();
244
- }
245
- /**
246
- * Registers a callback to be triggered when the model value changes.
247
- * Implemented as part of ControlValueAccessor.
248
- * @param fn Callback to be registered.
249
- */
250
- registerOnChange(fn) {
251
- this._controlValueAccessorChangeFn = fn;
252
- }
253
- /**
254
- * Registers a callback to be triggered when the control is touched.
255
- * Implemented as part of ControlValueAccessor.
256
- * @param fn Callback to be registered.
257
- */
258
- registerOnTouched(fn) {
259
- this.onTouched = fn;
260
- }
261
- /**
262
- * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
263
- * @param isDisabled Whether the control should be disabled.
264
- */
265
- setDisabledState(isDisabled) {
266
- this.disabled = isDisabled;
267
- this._changeDetector.markForCheck();
268
- }
269
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
270
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.2.0-next.2", type: MatRadioGroup, isStandalone: true, selector: "mat-radio-group", inputs: { color: "color", name: "name", labelPosition: "labelPosition", value: "value", selected: "selected", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute] }, outputs: { change: "change" }, host: { attributes: { "role": "radiogroup" }, classAttribute: "mat-mdc-radio-group" }, providers: [
271
- MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR,
272
- { provide: MAT_RADIO_GROUP, useExisting: MatRadioGroup },
273
- ], queries: [{ propertyName: "_radios", predicate: i0.forwardRef(() => MatRadioButton), descendants: true }], exportAs: ["matRadioGroup"], ngImport: i0 });
146
+ });
147
+ }
148
+ }
149
+ _emitChangeEvent() {
150
+ if (this._isInitialized) {
151
+ this.change.emit(new MatRadioChange(this._selected, this._value));
152
+ }
153
+ }
154
+ _markRadiosForCheck() {
155
+ if (this._radios) {
156
+ this._radios.forEach(radio => radio._markForCheck());
157
+ }
158
+ }
159
+ writeValue(value) {
160
+ this.value = value;
161
+ this._changeDetector.markForCheck();
162
+ }
163
+ registerOnChange(fn) {
164
+ this._controlValueAccessorChangeFn = fn;
165
+ }
166
+ registerOnTouched(fn) {
167
+ this.onTouched = fn;
168
+ }
169
+ setDisabledState(isDisabled) {
170
+ this.disabled = isDisabled;
171
+ this._changeDetector.markForCheck();
172
+ }
173
+ static ɵfac = i0.ɵɵngDeclareFactory({
174
+ minVersion: "12.0.0",
175
+ version: "20.2.0-next.2",
176
+ ngImport: i0,
177
+ type: MatRadioGroup,
178
+ deps: [],
179
+ target: i0.ɵɵFactoryTarget.Directive
180
+ });
181
+ static ɵdir = i0.ɵɵngDeclareDirective({
182
+ minVersion: "16.1.0",
183
+ version: "20.2.0-next.2",
184
+ type: MatRadioGroup,
185
+ isStandalone: true,
186
+ selector: "mat-radio-group",
187
+ inputs: {
188
+ color: "color",
189
+ name: "name",
190
+ labelPosition: "labelPosition",
191
+ value: "value",
192
+ selected: "selected",
193
+ disabled: ["disabled", "disabled", booleanAttribute],
194
+ required: ["required", "required", booleanAttribute],
195
+ disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute]
196
+ },
197
+ outputs: {
198
+ change: "change"
199
+ },
200
+ host: {
201
+ attributes: {
202
+ "role": "radiogroup"
203
+ },
204
+ classAttribute: "mat-mdc-radio-group"
205
+ },
206
+ providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, {
207
+ provide: MAT_RADIO_GROUP,
208
+ useExisting: MatRadioGroup
209
+ }],
210
+ queries: [{
211
+ propertyName: "_radios",
212
+ predicate: i0.forwardRef(() => MatRadioButton),
213
+ descendants: true
214
+ }],
215
+ exportAs: ["matRadioGroup"],
216
+ ngImport: i0
217
+ });
274
218
  }
275
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatRadioGroup, decorators: [{
276
- type: Directive,
277
- args: [{
278
- selector: 'mat-radio-group',
279
- exportAs: 'matRadioGroup',
280
- providers: [
281
- MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR,
282
- { provide: MAT_RADIO_GROUP, useExisting: MatRadioGroup },
283
- ],
284
- host: {
285
- 'role': 'radiogroup',
286
- 'class': 'mat-mdc-radio-group',
287
- },
288
- }]
289
- }], ctorParameters: () => [], propDecorators: { change: [{
290
- type: Output
291
- }], _radios: [{
292
- type: ContentChildren,
293
- args: [forwardRef(() => MatRadioButton), { descendants: true }]
294
- }], color: [{
295
- type: Input
296
- }], name: [{
297
- type: Input
298
- }], labelPosition: [{
299
- type: Input
300
- }], value: [{
301
- type: Input
302
- }], selected: [{
303
- type: Input
304
- }], disabled: [{
305
- type: Input,
306
- args: [{ transform: booleanAttribute }]
307
- }], required: [{
308
- type: Input,
309
- args: [{ transform: booleanAttribute }]
310
- }], disabledInteractive: [{
311
- type: Input,
312
- args: [{ transform: booleanAttribute }]
313
- }] } });
219
+ i0.ɵɵngDeclareClassMetadata({
220
+ minVersion: "12.0.0",
221
+ version: "20.2.0-next.2",
222
+ ngImport: i0,
223
+ type: MatRadioGroup,
224
+ decorators: [{
225
+ type: Directive,
226
+ args: [{
227
+ selector: 'mat-radio-group',
228
+ exportAs: 'matRadioGroup',
229
+ providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, {
230
+ provide: MAT_RADIO_GROUP,
231
+ useExisting: MatRadioGroup
232
+ }],
233
+ host: {
234
+ 'role': 'radiogroup',
235
+ 'class': 'mat-mdc-radio-group'
236
+ }
237
+ }]
238
+ }],
239
+ ctorParameters: () => [],
240
+ propDecorators: {
241
+ change: [{
242
+ type: Output
243
+ }],
244
+ _radios: [{
245
+ type: ContentChildren,
246
+ args: [forwardRef(() => MatRadioButton), {
247
+ descendants: true
248
+ }]
249
+ }],
250
+ color: [{
251
+ type: Input
252
+ }],
253
+ name: [{
254
+ type: Input
255
+ }],
256
+ labelPosition: [{
257
+ type: Input
258
+ }],
259
+ value: [{
260
+ type: Input
261
+ }],
262
+ selected: [{
263
+ type: Input
264
+ }],
265
+ disabled: [{
266
+ type: Input,
267
+ args: [{
268
+ transform: booleanAttribute
269
+ }]
270
+ }],
271
+ required: [{
272
+ type: Input,
273
+ args: [{
274
+ transform: booleanAttribute
275
+ }]
276
+ }],
277
+ disabledInteractive: [{
278
+ type: Input,
279
+ args: [{
280
+ transform: booleanAttribute
281
+ }]
282
+ }]
283
+ }
284
+ });
314
285
  class MatRadioButton {
315
- _elementRef = inject(ElementRef);
316
- _changeDetector = inject(ChangeDetectorRef);
317
- _focusMonitor = inject(FocusMonitor);
318
- _radioDispatcher = inject(UniqueSelectionDispatcher);
319
- _defaultOptions = inject(MAT_RADIO_DEFAULT_OPTIONS, {
320
- optional: true,
321
- });
322
- _ngZone = inject(NgZone);
323
- _renderer = inject(Renderer2);
324
- _uniqueId = inject(_IdGenerator).getId('mat-radio-');
325
- _cleanupClick;
326
- /** The unique ID for the radio button. */
327
- id = this._uniqueId;
328
- /** Analog to HTML 'name' attribute used to group radios for unique selection. */
329
- name;
330
- /** Used to set the 'aria-label' attribute on the underlying input element. */
331
- ariaLabel;
332
- /** The 'aria-labelledby' attribute takes precedence as the element's text alternative. */
333
- ariaLabelledby;
334
- /** The 'aria-describedby' attribute is read after the element's label and field type. */
335
- ariaDescribedby;
336
- /** Whether ripples are disabled inside the radio button */
337
- disableRipple = false;
338
- /** Tabindex of the radio button. */
339
- tabIndex = 0;
340
- /** Whether this radio button is checked. */
341
- get checked() {
342
- return this._checked;
343
- }
344
- set checked(value) {
345
- if (this._checked !== value) {
346
- this._checked = value;
347
- if (value && this.radioGroup && this.radioGroup.value !== this.value) {
348
- this.radioGroup.selected = this;
349
- }
350
- else if (!value && this.radioGroup && this.radioGroup.value === this.value) {
351
- // When unchecking the selected radio button, update the selected radio
352
- // property on the group.
353
- this.radioGroup.selected = null;
354
- }
355
- if (value) {
356
- // Notify all radio buttons with the same name to un-check.
357
- this._radioDispatcher.notify(this.id, this.name);
358
- }
359
- this._changeDetector.markForCheck();
360
- }
361
- }
362
- /** The value of this radio button. */
363
- get value() {
364
- return this._value;
365
- }
366
- set value(value) {
367
- if (this._value !== value) {
368
- this._value = value;
369
- if (this.radioGroup !== null) {
370
- if (!this.checked) {
371
- // Update checked when the value changed to match the radio group's value
372
- this.checked = this.radioGroup.value === value;
373
- }
374
- if (this.checked) {
375
- this.radioGroup.selected = this;
376
- }
377
- }
378
- }
379
- }
380
- /** Whether the label should appear after or before the radio button. Defaults to 'after' */
381
- get labelPosition() {
382
- return this._labelPosition || (this.radioGroup && this.radioGroup.labelPosition) || 'after';
383
- }
384
- set labelPosition(value) {
385
- this._labelPosition = value;
386
- }
387
- _labelPosition;
388
- /** Whether the radio button is disabled. */
389
- get disabled() {
390
- return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
391
- }
392
- set disabled(value) {
393
- this._setDisabled(value);
394
- }
395
- /** Whether the radio button is required. */
396
- get required() {
397
- return this._required || (this.radioGroup && this.radioGroup.required);
398
- }
399
- set required(value) {
400
- if (value !== this._required) {
401
- this._changeDetector.markForCheck();
402
- }
403
- this._required = value;
404
- }
405
- /**
406
- * Theme color of the radio button. This API is supported in M2 themes only, it
407
- * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/radio/styling.
408
- *
409
- * For information on applying color variants in M3, see
410
- * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
411
- */
412
- get color() {
413
- // As per M2 design specifications the selection control radio should use the accent color
414
- // palette by default. https://m2.material.io/components/radio-buttons#specs
415
- return (this._color ||
416
- (this.radioGroup && this.radioGroup.color) ||
417
- (this._defaultOptions && this._defaultOptions.color) ||
418
- 'accent');
419
- }
420
- set color(newValue) {
421
- this._color = newValue;
422
- }
423
- _color;
424
- /** Whether the radio button should remain interactive when it is disabled. */
425
- get disabledInteractive() {
426
- return (this._disabledInteractive || (this.radioGroup !== null && this.radioGroup.disabledInteractive));
427
- }
428
- set disabledInteractive(value) {
429
- this._disabledInteractive = value;
430
- }
431
- _disabledInteractive;
432
- /**
433
- * Event emitted when the checked state of this radio button changes.
434
- * Change events are only emitted when the value changes due to user interaction with
435
- * the radio button (the same behavior as `<input type-"radio">`).
436
- */
437
- change = new EventEmitter();
438
- /** The parent radio group. May or may not be present. */
439
- radioGroup;
440
- /** ID of the native input element inside `<mat-radio-button>` */
441
- get inputId() {
442
- return `${this.id || this._uniqueId}-input`;
443
- }
444
- /** Whether this radio is checked. */
445
- _checked = false;
446
- /** Whether this radio is disabled. */
447
- _disabled;
448
- /** Whether this radio is required. */
449
- _required;
450
- /** Value assigned to this radio. */
451
- _value = null;
452
- /** Unregister function for _radioDispatcher */
453
- _removeUniqueSelectionListener = () => { };
454
- /** Previous value of the input's tabindex. */
455
- _previousTabIndex;
456
- /** The native `<input type=radio>` element */
457
- _inputElement;
458
- /** Trigger elements for the ripple events. */
459
- _rippleTrigger;
460
- /** Whether animations are disabled. */
461
- _noopAnimations = _animationsDisabled();
462
- _injector = inject(Injector);
463
- constructor() {
464
- inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
465
- const radioGroup = inject(MAT_RADIO_GROUP, { optional: true });
466
- const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
467
- // Assertions. Ideally these should be stripped out by the compiler.
468
- // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
469
- this.radioGroup = radioGroup;
470
- this._disabledInteractive = this._defaultOptions?.disabledInteractive ?? false;
471
- if (tabIndex) {
472
- this.tabIndex = numberAttribute(tabIndex, 0);
473
- }
474
- }
475
- /** Focuses the radio button. */
476
- focus(options, origin) {
477
- if (origin) {
478
- this._focusMonitor.focusVia(this._inputElement, origin, options);
286
+ _elementRef = inject(ElementRef);
287
+ _changeDetector = inject(ChangeDetectorRef);
288
+ _focusMonitor = inject(FocusMonitor);
289
+ _radioDispatcher = inject(UniqueSelectionDispatcher);
290
+ _defaultOptions = inject(MAT_RADIO_DEFAULT_OPTIONS, {
291
+ optional: true
292
+ });
293
+ _ngZone = inject(NgZone);
294
+ _renderer = inject(Renderer2);
295
+ _uniqueId = inject(_IdGenerator).getId('mat-radio-');
296
+ _cleanupClick;
297
+ id = this._uniqueId;
298
+ name;
299
+ ariaLabel;
300
+ ariaLabelledby;
301
+ ariaDescribedby;
302
+ disableRipple = false;
303
+ tabIndex = 0;
304
+ get checked() {
305
+ return this._checked;
306
+ }
307
+ set checked(value) {
308
+ if (this._checked !== value) {
309
+ this._checked = value;
310
+ if (value && this.radioGroup && this.radioGroup.value !== this.value) {
311
+ this.radioGroup.selected = this;
312
+ } else if (!value && this.radioGroup && this.radioGroup.value === this.value) {
313
+ this.radioGroup.selected = null;
314
+ }
315
+ if (value) {
316
+ this._radioDispatcher.notify(this.id, this.name);
317
+ }
318
+ this._changeDetector.markForCheck();
319
+ }
320
+ }
321
+ get value() {
322
+ return this._value;
323
+ }
324
+ set value(value) {
325
+ if (this._value !== value) {
326
+ this._value = value;
327
+ if (this.radioGroup !== null) {
328
+ if (!this.checked) {
329
+ this.checked = this.radioGroup.value === value;
479
330
  }
480
- else {
481
- this._inputElement.nativeElement.focus(options);
331
+ if (this.checked) {
332
+ this.radioGroup.selected = this;
482
333
  }
483
- }
484
- /**
485
- * Marks the radio button as needing checking for change detection.
486
- * This method is exposed because the parent radio group will directly
487
- * update bound properties of the radio button.
488
- */
489
- _markForCheck() {
490
- // When group value changes, the button will not be notified. Use `markForCheck` to explicit
491
- // update radio button's status
492
- this._changeDetector.markForCheck();
493
- }
494
- ngOnInit() {
495
- if (this.radioGroup) {
496
- // If the radio is inside a radio group, determine if it should be checked
497
- this.checked = this.radioGroup.value === this._value;
498
- if (this.checked) {
499
- this.radioGroup.selected = this;
500
- }
501
- // Copy name from parent radio group
502
- this.name = this.radioGroup.name;
334
+ }
335
+ }
336
+ }
337
+ get labelPosition() {
338
+ return this._labelPosition || this.radioGroup && this.radioGroup.labelPosition || 'after';
339
+ }
340
+ set labelPosition(value) {
341
+ this._labelPosition = value;
342
+ }
343
+ _labelPosition;
344
+ get disabled() {
345
+ return this._disabled || this.radioGroup !== null && this.radioGroup.disabled;
346
+ }
347
+ set disabled(value) {
348
+ this._setDisabled(value);
349
+ }
350
+ get required() {
351
+ return this._required || this.radioGroup && this.radioGroup.required;
352
+ }
353
+ set required(value) {
354
+ if (value !== this._required) {
355
+ this._changeDetector.markForCheck();
356
+ }
357
+ this._required = value;
358
+ }
359
+ get color() {
360
+ return this._color || this.radioGroup && this.radioGroup.color || this._defaultOptions && this._defaultOptions.color || 'accent';
361
+ }
362
+ set color(newValue) {
363
+ this._color = newValue;
364
+ }
365
+ _color;
366
+ get disabledInteractive() {
367
+ return this._disabledInteractive || this.radioGroup !== null && this.radioGroup.disabledInteractive;
368
+ }
369
+ set disabledInteractive(value) {
370
+ this._disabledInteractive = value;
371
+ }
372
+ _disabledInteractive;
373
+ change = new EventEmitter();
374
+ radioGroup;
375
+ get inputId() {
376
+ return `${this.id || this._uniqueId}-input`;
377
+ }
378
+ _checked = false;
379
+ _disabled;
380
+ _required;
381
+ _value = null;
382
+ _removeUniqueSelectionListener = () => {};
383
+ _previousTabIndex;
384
+ _inputElement;
385
+ _rippleTrigger;
386
+ _noopAnimations = _animationsDisabled();
387
+ _injector = inject(Injector);
388
+ constructor() {
389
+ inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
390
+ const radioGroup = inject(MAT_RADIO_GROUP, {
391
+ optional: true
392
+ });
393
+ const tabIndex = inject(new HostAttributeToken('tabindex'), {
394
+ optional: true
395
+ });
396
+ this.radioGroup = radioGroup;
397
+ this._disabledInteractive = this._defaultOptions?.disabledInteractive ?? false;
398
+ if (tabIndex) {
399
+ this.tabIndex = numberAttribute(tabIndex, 0);
400
+ }
401
+ }
402
+ focus(options, origin) {
403
+ if (origin) {
404
+ this._focusMonitor.focusVia(this._inputElement, origin, options);
405
+ } else {
406
+ this._inputElement.nativeElement.focus(options);
407
+ }
408
+ }
409
+ _markForCheck() {
410
+ this._changeDetector.markForCheck();
411
+ }
412
+ ngOnInit() {
413
+ if (this.radioGroup) {
414
+ this.checked = this.radioGroup.value === this._value;
415
+ if (this.checked) {
416
+ this.radioGroup.selected = this;
417
+ }
418
+ this.name = this.radioGroup.name;
419
+ }
420
+ this._removeUniqueSelectionListener = this._radioDispatcher.listen((id, name) => {
421
+ if (id !== this.id && name === this.name) {
422
+ this.checked = false;
423
+ }
424
+ });
425
+ }
426
+ ngDoCheck() {
427
+ this._updateTabIndex();
428
+ }
429
+ ngAfterViewInit() {
430
+ this._updateTabIndex();
431
+ this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {
432
+ if (!focusOrigin && this.radioGroup) {
433
+ this.radioGroup._touch();
434
+ }
435
+ });
436
+ this._ngZone.runOutsideAngular(() => {
437
+ this._cleanupClick = this._renderer.listen(this._inputElement.nativeElement, 'click', this._onInputClick);
438
+ });
439
+ }
440
+ ngOnDestroy() {
441
+ this._cleanupClick?.();
442
+ this._focusMonitor.stopMonitoring(this._elementRef);
443
+ this._removeUniqueSelectionListener();
444
+ }
445
+ _emitChangeEvent() {
446
+ this.change.emit(new MatRadioChange(this, this._value));
447
+ }
448
+ _isRippleDisabled() {
449
+ return this.disableRipple || this.disabled;
450
+ }
451
+ _onInputInteraction(event) {
452
+ event.stopPropagation();
453
+ if (!this.checked && !this.disabled) {
454
+ const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
455
+ this.checked = true;
456
+ this._emitChangeEvent();
457
+ if (this.radioGroup) {
458
+ this.radioGroup._controlValueAccessorChangeFn(this.value);
459
+ if (groupValueChanged) {
460
+ this.radioGroup._emitChangeEvent();
503
461
  }
504
- this._removeUniqueSelectionListener = this._radioDispatcher.listen((id, name) => {
505
- if (id !== this.id && name === this.name) {
506
- this.checked = false;
462
+ }
463
+ }
464
+ }
465
+ _onTouchTargetClick(event) {
466
+ this._onInputInteraction(event);
467
+ if (!this.disabled || this.disabledInteractive) {
468
+ this._inputElement?.nativeElement.focus();
469
+ }
470
+ }
471
+ _setDisabled(value) {
472
+ if (this._disabled !== value) {
473
+ this._disabled = value;
474
+ this._changeDetector.markForCheck();
475
+ }
476
+ }
477
+ _onInputClick = event => {
478
+ if (this.disabled && this.disabledInteractive) {
479
+ event.preventDefault();
480
+ }
481
+ };
482
+ _updateTabIndex() {
483
+ const group = this.radioGroup;
484
+ let value;
485
+ if (!group || !group.selected || this.disabled) {
486
+ value = this.tabIndex;
487
+ } else {
488
+ value = group.selected === this ? this.tabIndex : -1;
489
+ }
490
+ if (value !== this._previousTabIndex) {
491
+ const input = this._inputElement?.nativeElement;
492
+ if (input) {
493
+ input.setAttribute('tabindex', value + '');
494
+ this._previousTabIndex = value;
495
+ afterNextRender(() => {
496
+ queueMicrotask(() => {
497
+ if (group && group.selected && group.selected !== this && document.activeElement === input) {
498
+ group.selected?._inputElement.nativeElement.focus();
499
+ if (document.activeElement === input) {
500
+ this._inputElement.nativeElement.blur();
501
+ }
507
502
  }
503
+ });
504
+ }, {
505
+ injector: this._injector
508
506
  });
509
- }
510
- ngDoCheck() {
511
- this._updateTabIndex();
512
- }
513
- ngAfterViewInit() {
514
- this._updateTabIndex();
515
- this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {
516
- if (!focusOrigin && this.radioGroup) {
517
- this.radioGroup._touch();
518
- }
519
- });
520
- // We bind this outside of the zone, because:
521
- // 1. Its logic is completely DOM-related so we can avoid some change detections.
522
- // 2. There appear to be some internal tests that break when this triggers a change detection.
523
- this._ngZone.runOutsideAngular(() => {
524
- this._cleanupClick = this._renderer.listen(this._inputElement.nativeElement, 'click', this._onInputClick);
525
- });
526
- }
527
- ngOnDestroy() {
528
- this._cleanupClick?.();
529
- this._focusMonitor.stopMonitoring(this._elementRef);
530
- this._removeUniqueSelectionListener();
531
- }
532
- /** Dispatch change event with current value. */
533
- _emitChangeEvent() {
534
- this.change.emit(new MatRadioChange(this, this._value));
535
- }
536
- _isRippleDisabled() {
537
- return this.disableRipple || this.disabled;
538
- }
539
- /** Triggered when the radio button receives an interaction from the user. */
540
- _onInputInteraction(event) {
541
- // We always have to stop propagation on the change event.
542
- // Otherwise the change event, from the input element, will bubble up and
543
- // emit its event object to the `change` output.
544
- event.stopPropagation();
545
- if (!this.checked && !this.disabled) {
546
- const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
547
- this.checked = true;
548
- this._emitChangeEvent();
549
- if (this.radioGroup) {
550
- this.radioGroup._controlValueAccessorChangeFn(this.value);
551
- if (groupValueChanged) {
552
- this.radioGroup._emitChangeEvent();
553
- }
554
- }
555
- }
556
- }
557
- /** Triggered when the user clicks on the touch target. */
558
- _onTouchTargetClick(event) {
559
- this._onInputInteraction(event);
560
- if (!this.disabled || this.disabledInteractive) {
561
- // Normally the input should be focused already, but if the click
562
- // comes from the touch target, then we might have to focus it ourselves.
563
- this._inputElement?.nativeElement.focus();
564
- }
565
- }
566
- /** Sets the disabled state and marks for check if a change occurred. */
567
- _setDisabled(value) {
568
- if (this._disabled !== value) {
569
- this._disabled = value;
570
- this._changeDetector.markForCheck();
571
- }
572
- }
573
- /** Called when the input is clicked. */
574
- _onInputClick = (event) => {
575
- // If the input is disabled while interactive, we need to prevent the
576
- // selection from happening in this event handler. Note that even though
577
- // this happens on `click` events, the logic applies when the user is
578
- // navigating with the keyboard as well. An alternative way of doing
579
- // this is by resetting the `checked` state in the `change` callback but
580
- // it isn't optimal, because it can allow a pre-checked disabled button
581
- // to be un-checked. This approach seems to cover everything.
582
- if (this.disabled && this.disabledInteractive) {
583
- event.preventDefault();
584
- }
585
- };
586
- /** Gets the tabindex for the underlying input element. */
587
- _updateTabIndex() {
588
- const group = this.radioGroup;
589
- let value;
590
- // Implement a roving tabindex if the button is inside a group. For most cases this isn't
591
- // necessary, because the browser handles the tab order for inputs inside a group automatically,
592
- // but we need an explicitly higher tabindex for the selected button in order for things like
593
- // the focus trap to pick it up correctly.
594
- if (!group || !group.selected || this.disabled) {
595
- value = this.tabIndex;
596
- }
597
- else {
598
- value = group.selected === this ? this.tabIndex : -1;
599
- }
600
- if (value !== this._previousTabIndex) {
601
- // We have to set the tabindex directly on the DOM node, because it depends on
602
- // the selected state which is prone to "changed after checked errors".
603
- const input = this._inputElement?.nativeElement;
604
- if (input) {
605
- input.setAttribute('tabindex', value + '');
606
- this._previousTabIndex = value;
607
- // Wait for any pending tabindex changes to be applied
608
- afterNextRender(() => {
609
- queueMicrotask(() => {
610
- // The radio group uses a "selection follows focus" pattern for tab management, so if this
611
- // radio button is currently focused and another radio button in the group becomes
612
- // selected, we should move focus to the newly selected radio button to maintain
613
- // consistency between the focused and selected states.
614
- if (group &&
615
- group.selected &&
616
- group.selected !== this &&
617
- document.activeElement === input) {
618
- group.selected?._inputElement.nativeElement.focus();
619
- // If this radio button still has focus, the selected one must be disabled. In this
620
- // case the radio group as a whole should lose focus.
621
- if (document.activeElement === input) {
622
- this._inputElement.nativeElement.blur();
623
- }
624
- }
625
- });
626
- }, { injector: this._injector });
627
- }
628
- }
629
- }
630
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatRadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
631
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.0-next.2", type: MatRadioButton, isStandalone: true, selector: "mat-radio-button", inputs: { id: "id", name: "name", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], checked: ["checked", "checked", booleanAttribute], value: "value", labelPosition: "labelPosition", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], color: "color", disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "attr.id": "id", "class.mat-primary": "color === \"primary\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "class.mat-mdc-radio-checked": "checked", "class.mat-mdc-radio-disabled": "disabled", "class.mat-mdc-radio-disabled-interactive": "disabledInteractive", "class._mat-animation-noopable": "_noopAnimations", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "mat-mdc-radio-button" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "_rippleTrigger", first: true, predicate: ["formField"], descendants: true, read: ElementRef, static: true }], exportAs: ["matRadioButton"], ngImport: i0, template: "<div mat-internal-form-field [labelPosition]=\"labelPosition\" #formField>\n <div class=\"mdc-radio\" [class.mdc-radio--disabled]=\"disabled\">\n <!-- Render this element first so the input is on top. -->\n <div class=\"mat-mdc-radio-touch-target\" (click)=\"_onTouchTargetClick($event)\"></div>\n <!--\n Note that we set `aria-invalid=\"false\"` on the input, because otherwise some screen readers\n will read out \"required, invalid data\" for each radio button that hasn't been checked.\n An alternate approach is to use `aria-required` instead of `required`, however we have an\n internal check which enforces that elements marked as `aria-required` also have the `required`\n attribute which ends up re-introducing the issue for us.\n -->\n <input #input class=\"mdc-radio__native-control\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled && !disabledInteractive\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n aria-invalid=\"false\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-disabled]=\"disabled && disabledInteractive ? 'true' : null\"\n (change)=\"_onInputInteraction($event)\">\n <div class=\"mdc-radio__background\">\n <div class=\"mdc-radio__outer-circle\"></div>\n <div class=\"mdc-radio__inner-circle\"></div>\n </div>\n <div mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"_rippleTrigger.nativeElement\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\">\n <div class=\"mat-ripple-element mat-radio-persistent-ripple\"></div>\n </div>\n </div>\n <label class=\"mdc-label\" [for]=\"inputId\">\n <ng-content></ng-content>\n </label>\n</div>\n", styles: [".mat-mdc-radio-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-radio-button .mdc-radio{display:inline-block;position:relative;flex:0 0 auto;box-sizing:content-box;width:20px;height:20px;cursor:pointer;will-change:opacity,transform,border-color,color;padding:calc((var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:not([disabled]):not(:focus)~.mdc-radio__background::before{opacity:.04;transform:scale(1)}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:not([disabled])~.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-hover-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-pressed-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__background{display:inline-block;position:relative;box-sizing:border-box;width:20px;height:20px}.mat-mdc-radio-button .mdc-radio__background::before{position:absolute;transform:scale(0, 0);border-radius:50%;opacity:0;pointer-events:none;content:\"\";transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),transform 90ms cubic-bezier(0.4, 0, 0.6, 1);width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px);top:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2);left:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio__outer-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}.mat-mdc-radio-button .mdc-radio__inner-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;transform:scale(0);border-radius:50%;transition:transform 90ms cubic-bezier(0.4, 0, 0.6, 1),background-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}@media(forced-colors: active){.mat-mdc-radio-button .mdc-radio__inner-circle{background-color:CanvasText !important}}.mat-mdc-radio-button .mdc-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;top:0;right:0;left:0;cursor:inherit;z-index:1;width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:focus+.mdc-radio__background::before{transform:scale(1);opacity:.12;transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{cursor:default}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-icon-color, var(--mat-sys-on-surface-variant))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle{transform:scale(0.5);transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled{pointer-events:auto}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__background::before,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__outer-circle,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__inner-circle{transition:none !important}.mat-mdc-radio-button label{cursor:pointer}.mat-mdc-radio-button .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before{background-color:var(--mat-radio-checked-ripple-color, var(--mat-sys-primary))}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mat-internal-form-field{color:var(--mat-radio-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-radio-label-text-font, var(--mat-sys-body-medium-font));line-height:var(--mat-radio-label-text-line-height, var(--mat-sys-body-medium-line-height));font-size:var(--mat-radio-label-text-size, var(--mat-sys-body-medium-size));letter-spacing:var(--mat-radio-label-text-tracking, var(--mat-sys-body-medium-tracking));font-weight:var(--mat-radio-label-text-weight, var(--mat-sys-body-medium-weight))}.mat-mdc-radio-button .mdc-radio--disabled+label{color:var(--mat-radio-disabled-label-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-radio-button .mat-radio-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:50%}.mat-mdc-radio-button .mat-radio-ripple>.mat-ripple-element{opacity:.14}.mat-mdc-radio-button .mat-radio-ripple::before{border-radius:50%}.mat-mdc-radio-button .mdc-radio>.mdc-radio__native-control:focus:enabled:not(:checked)~.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-focus-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before{content:\"\"}.mat-mdc-radio-disabled{cursor:default;pointer-events:none}.mat-mdc-radio-disabled.mat-mdc-radio-disabled-interactive{pointer-events:auto}.mat-mdc-radio-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-radio-touch-target-size, 48px);width:var(--mat-radio-touch-target-size, 48px);transform:translate(-50%, -50%);display:var(--mat-radio-touch-target-display, block)}[dir=rtl] .mat-mdc-radio-touch-target{left:auto;right:50%;transform:translate(50%, -50%)}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: _MatInternalFormField, selector: "div[mat-internal-form-field]", inputs: ["labelPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
507
+ }
508
+ }
509
+ }
510
+ static ɵfac = i0.ɵɵngDeclareFactory({
511
+ minVersion: "12.0.0",
512
+ version: "20.2.0-next.2",
513
+ ngImport: i0,
514
+ type: MatRadioButton,
515
+ deps: [],
516
+ target: i0.ɵɵFactoryTarget.Component
517
+ });
518
+ static ɵcmp = i0.ɵɵngDeclareComponent({
519
+ minVersion: "16.1.0",
520
+ version: "20.2.0-next.2",
521
+ type: MatRadioButton,
522
+ isStandalone: true,
523
+ selector: "mat-radio-button",
524
+ inputs: {
525
+ id: "id",
526
+ name: "name",
527
+ ariaLabel: ["aria-label", "ariaLabel"],
528
+ ariaLabelledby: ["aria-labelledby", "ariaLabelledby"],
529
+ ariaDescribedby: ["aria-describedby", "ariaDescribedby"],
530
+ disableRipple: ["disableRipple", "disableRipple", booleanAttribute],
531
+ tabIndex: ["tabIndex", "tabIndex", value => value == null ? 0 : numberAttribute(value)],
532
+ checked: ["checked", "checked", booleanAttribute],
533
+ value: "value",
534
+ labelPosition: "labelPosition",
535
+ disabled: ["disabled", "disabled", booleanAttribute],
536
+ required: ["required", "required", booleanAttribute],
537
+ color: "color",
538
+ disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute]
539
+ },
540
+ outputs: {
541
+ change: "change"
542
+ },
543
+ host: {
544
+ listeners: {
545
+ "focus": "_inputElement.nativeElement.focus()"
546
+ },
547
+ properties: {
548
+ "attr.id": "id",
549
+ "class.mat-primary": "color === \"primary\"",
550
+ "class.mat-accent": "color === \"accent\"",
551
+ "class.mat-warn": "color === \"warn\"",
552
+ "class.mat-mdc-radio-checked": "checked",
553
+ "class.mat-mdc-radio-disabled": "disabled",
554
+ "class.mat-mdc-radio-disabled-interactive": "disabledInteractive",
555
+ "class._mat-animation-noopable": "_noopAnimations",
556
+ "attr.tabindex": "null",
557
+ "attr.aria-label": "null",
558
+ "attr.aria-labelledby": "null",
559
+ "attr.aria-describedby": "null"
560
+ },
561
+ classAttribute: "mat-mdc-radio-button"
562
+ },
563
+ viewQueries: [{
564
+ propertyName: "_inputElement",
565
+ first: true,
566
+ predicate: ["input"],
567
+ descendants: true
568
+ }, {
569
+ propertyName: "_rippleTrigger",
570
+ first: true,
571
+ predicate: ["formField"],
572
+ descendants: true,
573
+ read: ElementRef,
574
+ static: true
575
+ }],
576
+ exportAs: ["matRadioButton"],
577
+ ngImport: i0,
578
+ template: "<div mat-internal-form-field [labelPosition]=\"labelPosition\" #formField>\n <div class=\"mdc-radio\" [class.mdc-radio--disabled]=\"disabled\">\n <!-- Render this element first so the input is on top. -->\n <div class=\"mat-mdc-radio-touch-target\" (click)=\"_onTouchTargetClick($event)\"></div>\n <!--\n Note that we set `aria-invalid=\"false\"` on the input, because otherwise some screen readers\n will read out \"required, invalid data\" for each radio button that hasn't been checked.\n An alternate approach is to use `aria-required` instead of `required`, however we have an\n internal check which enforces that elements marked as `aria-required` also have the `required`\n attribute which ends up re-introducing the issue for us.\n -->\n <input #input class=\"mdc-radio__native-control\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled && !disabledInteractive\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n aria-invalid=\"false\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-disabled]=\"disabled && disabledInteractive ? 'true' : null\"\n (change)=\"_onInputInteraction($event)\">\n <div class=\"mdc-radio__background\">\n <div class=\"mdc-radio__outer-circle\"></div>\n <div class=\"mdc-radio__inner-circle\"></div>\n </div>\n <div mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"_rippleTrigger.nativeElement\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\">\n <div class=\"mat-ripple-element mat-radio-persistent-ripple\"></div>\n </div>\n </div>\n <label class=\"mdc-label\" [for]=\"inputId\">\n <ng-content></ng-content>\n </label>\n</div>\n",
579
+ styles: [".mat-mdc-radio-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-radio-button .mdc-radio{display:inline-block;position:relative;flex:0 0 auto;box-sizing:content-box;width:20px;height:20px;cursor:pointer;will-change:opacity,transform,border-color,color;padding:calc((var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:not([disabled]):not(:focus)~.mdc-radio__background::before{opacity:.04;transform:scale(1)}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:not([disabled])~.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-hover-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-pressed-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__background{display:inline-block;position:relative;box-sizing:border-box;width:20px;height:20px}.mat-mdc-radio-button .mdc-radio__background::before{position:absolute;transform:scale(0, 0);border-radius:50%;opacity:0;pointer-events:none;content:\"\";transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),transform 90ms cubic-bezier(0.4, 0, 0.6, 1);width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px);top:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2);left:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio__outer-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}.mat-mdc-radio-button .mdc-radio__inner-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;transform:scale(0);border-radius:50%;transition:transform 90ms cubic-bezier(0.4, 0, 0.6, 1),background-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}@media(forced-colors: active){.mat-mdc-radio-button .mdc-radio__inner-circle{background-color:CanvasText !important}}.mat-mdc-radio-button .mdc-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;top:0;right:0;left:0;cursor:inherit;z-index:1;width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:focus+.mdc-radio__background::before{transform:scale(1);opacity:.12;transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{cursor:default}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-icon-color, var(--mat-sys-on-surface-variant))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle{transform:scale(0.5);transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled{pointer-events:auto}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__background::before,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__outer-circle,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__inner-circle{transition:none !important}.mat-mdc-radio-button label{cursor:pointer}.mat-mdc-radio-button .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before{background-color:var(--mat-radio-checked-ripple-color, var(--mat-sys-primary))}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mat-internal-form-field{color:var(--mat-radio-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-radio-label-text-font, var(--mat-sys-body-medium-font));line-height:var(--mat-radio-label-text-line-height, var(--mat-sys-body-medium-line-height));font-size:var(--mat-radio-label-text-size, var(--mat-sys-body-medium-size));letter-spacing:var(--mat-radio-label-text-tracking, var(--mat-sys-body-medium-tracking));font-weight:var(--mat-radio-label-text-weight, var(--mat-sys-body-medium-weight))}.mat-mdc-radio-button .mdc-radio--disabled+label{color:var(--mat-radio-disabled-label-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-radio-button .mat-radio-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:50%}.mat-mdc-radio-button .mat-radio-ripple>.mat-ripple-element{opacity:.14}.mat-mdc-radio-button .mat-radio-ripple::before{border-radius:50%}.mat-mdc-radio-button .mdc-radio>.mdc-radio__native-control:focus:enabled:not(:checked)~.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-focus-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before{content:\"\"}.mat-mdc-radio-disabled{cursor:default;pointer-events:none}.mat-mdc-radio-disabled.mat-mdc-radio-disabled-interactive{pointer-events:auto}.mat-mdc-radio-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-radio-touch-target-size, 48px);width:var(--mat-radio-touch-target-size, 48px);transform:translate(-50%, -50%);display:var(--mat-radio-touch-target-display, block)}[dir=rtl] .mat-mdc-radio-touch-target{left:auto;right:50%;transform:translate(50%, -50%)}\n"],
580
+ dependencies: [{
581
+ kind: "directive",
582
+ type: MatRipple,
583
+ selector: "[mat-ripple], [matRipple]",
584
+ inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"],
585
+ exportAs: ["matRipple"]
586
+ }, {
587
+ kind: "component",
588
+ type: _MatInternalFormField,
589
+ selector: "div[mat-internal-form-field]",
590
+ inputs: ["labelPosition"]
591
+ }],
592
+ changeDetection: i0.ChangeDetectionStrategy.OnPush,
593
+ encapsulation: i0.ViewEncapsulation.None
594
+ });
632
595
  }
633
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatRadioButton, decorators: [{
634
- type: Component,
635
- args: [{ selector: 'mat-radio-button', host: {
636
- 'class': 'mat-mdc-radio-button',
637
- '[attr.id]': 'id',
638
- '[class.mat-primary]': 'color === "primary"',
639
- '[class.mat-accent]': 'color === "accent"',
640
- '[class.mat-warn]': 'color === "warn"',
641
- '[class.mat-mdc-radio-checked]': 'checked',
642
- '[class.mat-mdc-radio-disabled]': 'disabled',
643
- '[class.mat-mdc-radio-disabled-interactive]': 'disabledInteractive',
644
- '[class._mat-animation-noopable]': '_noopAnimations',
645
- // Needs to be removed since it causes some a11y issues (see #21266).
646
- '[attr.tabindex]': 'null',
647
- '[attr.aria-label]': 'null',
648
- '[attr.aria-labelledby]': 'null',
649
- '[attr.aria-describedby]': 'null',
650
- // Note: under normal conditions focus shouldn't land on this element, however it may be
651
- // programmatically set, for example inside of a focus trap, in this case we want to forward
652
- // the focus to the native element.
653
- '(focus)': '_inputElement.nativeElement.focus()',
654
- }, exportAs: 'matRadioButton', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, _MatInternalFormField], template: "<div mat-internal-form-field [labelPosition]=\"labelPosition\" #formField>\n <div class=\"mdc-radio\" [class.mdc-radio--disabled]=\"disabled\">\n <!-- Render this element first so the input is on top. -->\n <div class=\"mat-mdc-radio-touch-target\" (click)=\"_onTouchTargetClick($event)\"></div>\n <!--\n Note that we set `aria-invalid=\"false\"` on the input, because otherwise some screen readers\n will read out \"required, invalid data\" for each radio button that hasn't been checked.\n An alternate approach is to use `aria-required` instead of `required`, however we have an\n internal check which enforces that elements marked as `aria-required` also have the `required`\n attribute which ends up re-introducing the issue for us.\n -->\n <input #input class=\"mdc-radio__native-control\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled && !disabledInteractive\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n aria-invalid=\"false\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-disabled]=\"disabled && disabledInteractive ? 'true' : null\"\n (change)=\"_onInputInteraction($event)\">\n <div class=\"mdc-radio__background\">\n <div class=\"mdc-radio__outer-circle\"></div>\n <div class=\"mdc-radio__inner-circle\"></div>\n </div>\n <div mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"_rippleTrigger.nativeElement\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\">\n <div class=\"mat-ripple-element mat-radio-persistent-ripple\"></div>\n </div>\n </div>\n <label class=\"mdc-label\" [for]=\"inputId\">\n <ng-content></ng-content>\n </label>\n</div>\n", styles: [".mat-mdc-radio-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-radio-button .mdc-radio{display:inline-block;position:relative;flex:0 0 auto;box-sizing:content-box;width:20px;height:20px;cursor:pointer;will-change:opacity,transform,border-color,color;padding:calc((var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:not([disabled]):not(:focus)~.mdc-radio__background::before{opacity:.04;transform:scale(1)}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:not([disabled])~.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-hover-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-pressed-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__background{display:inline-block;position:relative;box-sizing:border-box;width:20px;height:20px}.mat-mdc-radio-button .mdc-radio__background::before{position:absolute;transform:scale(0, 0);border-radius:50%;opacity:0;pointer-events:none;content:\"\";transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),transform 90ms cubic-bezier(0.4, 0, 0.6, 1);width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px);top:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2);left:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio__outer-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}.mat-mdc-radio-button .mdc-radio__inner-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;transform:scale(0);border-radius:50%;transition:transform 90ms cubic-bezier(0.4, 0, 0.6, 1),background-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}@media(forced-colors: active){.mat-mdc-radio-button .mdc-radio__inner-circle{background-color:CanvasText !important}}.mat-mdc-radio-button .mdc-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;top:0;right:0;left:0;cursor:inherit;z-index:1;width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:focus+.mdc-radio__background::before{transform:scale(1);opacity:.12;transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{cursor:default}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-icon-color, var(--mat-sys-on-surface-variant))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle{transform:scale(0.5);transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled{pointer-events:auto}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__background::before,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__outer-circle,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__inner-circle{transition:none !important}.mat-mdc-radio-button label{cursor:pointer}.mat-mdc-radio-button .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before{background-color:var(--mat-radio-checked-ripple-color, var(--mat-sys-primary))}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mat-internal-form-field{color:var(--mat-radio-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-radio-label-text-font, var(--mat-sys-body-medium-font));line-height:var(--mat-radio-label-text-line-height, var(--mat-sys-body-medium-line-height));font-size:var(--mat-radio-label-text-size, var(--mat-sys-body-medium-size));letter-spacing:var(--mat-radio-label-text-tracking, var(--mat-sys-body-medium-tracking));font-weight:var(--mat-radio-label-text-weight, var(--mat-sys-body-medium-weight))}.mat-mdc-radio-button .mdc-radio--disabled+label{color:var(--mat-radio-disabled-label-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-radio-button .mat-radio-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:50%}.mat-mdc-radio-button .mat-radio-ripple>.mat-ripple-element{opacity:.14}.mat-mdc-radio-button .mat-radio-ripple::before{border-radius:50%}.mat-mdc-radio-button .mdc-radio>.mdc-radio__native-control:focus:enabled:not(:checked)~.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-focus-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before{content:\"\"}.mat-mdc-radio-disabled{cursor:default;pointer-events:none}.mat-mdc-radio-disabled.mat-mdc-radio-disabled-interactive{pointer-events:auto}.mat-mdc-radio-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-radio-touch-target-size, 48px);width:var(--mat-radio-touch-target-size, 48px);transform:translate(-50%, -50%);display:var(--mat-radio-touch-target-display, block)}[dir=rtl] .mat-mdc-radio-touch-target{left:auto;right:50%;transform:translate(50%, -50%)}\n"] }]
655
- }], ctorParameters: () => [], propDecorators: { id: [{
656
- type: Input
657
- }], name: [{
658
- type: Input
659
- }], ariaLabel: [{
660
- type: Input,
661
- args: ['aria-label']
662
- }], ariaLabelledby: [{
663
- type: Input,
664
- args: ['aria-labelledby']
665
- }], ariaDescribedby: [{
666
- type: Input,
667
- args: ['aria-describedby']
668
- }], disableRipple: [{
669
- type: Input,
670
- args: [{ transform: booleanAttribute }]
671
- }], tabIndex: [{
672
- type: Input,
673
- args: [{
674
- transform: (value) => (value == null ? 0 : numberAttribute(value)),
675
- }]
676
- }], checked: [{
677
- type: Input,
678
- args: [{ transform: booleanAttribute }]
679
- }], value: [{
680
- type: Input
681
- }], labelPosition: [{
682
- type: Input
683
- }], disabled: [{
684
- type: Input,
685
- args: [{ transform: booleanAttribute }]
686
- }], required: [{
687
- type: Input,
688
- args: [{ transform: booleanAttribute }]
689
- }], color: [{
690
- type: Input
691
- }], disabledInteractive: [{
692
- type: Input,
693
- args: [{ transform: booleanAttribute }]
694
- }], change: [{
695
- type: Output
696
- }], _inputElement: [{
697
- type: ViewChild,
698
- args: ['input']
699
- }], _rippleTrigger: [{
700
- type: ViewChild,
701
- args: ['formField', { read: ElementRef, static: true }]
702
- }] } });
596
+ i0.ɵɵngDeclareClassMetadata({
597
+ minVersion: "12.0.0",
598
+ version: "20.2.0-next.2",
599
+ ngImport: i0,
600
+ type: MatRadioButton,
601
+ decorators: [{
602
+ type: Component,
603
+ args: [{
604
+ selector: 'mat-radio-button',
605
+ host: {
606
+ 'class': 'mat-mdc-radio-button',
607
+ '[attr.id]': 'id',
608
+ '[class.mat-primary]': 'color === "primary"',
609
+ '[class.mat-accent]': 'color === "accent"',
610
+ '[class.mat-warn]': 'color === "warn"',
611
+ '[class.mat-mdc-radio-checked]': 'checked',
612
+ '[class.mat-mdc-radio-disabled]': 'disabled',
613
+ '[class.mat-mdc-radio-disabled-interactive]': 'disabledInteractive',
614
+ '[class._mat-animation-noopable]': '_noopAnimations',
615
+ '[attr.tabindex]': 'null',
616
+ '[attr.aria-label]': 'null',
617
+ '[attr.aria-labelledby]': 'null',
618
+ '[attr.aria-describedby]': 'null',
619
+ '(focus)': '_inputElement.nativeElement.focus()'
620
+ },
621
+ exportAs: 'matRadioButton',
622
+ encapsulation: ViewEncapsulation.None,
623
+ changeDetection: ChangeDetectionStrategy.OnPush,
624
+ imports: [MatRipple, _MatInternalFormField],
625
+ template: "<div mat-internal-form-field [labelPosition]=\"labelPosition\" #formField>\n <div class=\"mdc-radio\" [class.mdc-radio--disabled]=\"disabled\">\n <!-- Render this element first so the input is on top. -->\n <div class=\"mat-mdc-radio-touch-target\" (click)=\"_onTouchTargetClick($event)\"></div>\n <!--\n Note that we set `aria-invalid=\"false\"` on the input, because otherwise some screen readers\n will read out \"required, invalid data\" for each radio button that hasn't been checked.\n An alternate approach is to use `aria-required` instead of `required`, however we have an\n internal check which enforces that elements marked as `aria-required` also have the `required`\n attribute which ends up re-introducing the issue for us.\n -->\n <input #input class=\"mdc-radio__native-control\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled && !disabledInteractive\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n aria-invalid=\"false\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-disabled]=\"disabled && disabledInteractive ? 'true' : null\"\n (change)=\"_onInputInteraction($event)\">\n <div class=\"mdc-radio__background\">\n <div class=\"mdc-radio__outer-circle\"></div>\n <div class=\"mdc-radio__inner-circle\"></div>\n </div>\n <div mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"_rippleTrigger.nativeElement\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\">\n <div class=\"mat-ripple-element mat-radio-persistent-ripple\"></div>\n </div>\n </div>\n <label class=\"mdc-label\" [for]=\"inputId\">\n <ng-content></ng-content>\n </label>\n</div>\n",
626
+ styles: [".mat-mdc-radio-button{-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-mdc-radio-button .mdc-radio{display:inline-block;position:relative;flex:0 0 auto;box-sizing:content-box;width:20px;height:20px;cursor:pointer;will-change:opacity,transform,border-color,color;padding:calc((var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:not([disabled]):not(:focus)~.mdc-radio__background::before{opacity:.04;transform:scale(1)}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:not([disabled])~.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-hover-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:hover>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-pressed-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio:active>.mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__background{display:inline-block;position:relative;box-sizing:border-box;width:20px;height:20px}.mat-mdc-radio-button .mdc-radio__background::before{position:absolute;transform:scale(0, 0);border-radius:50%;opacity:0;pointer-events:none;content:\"\";transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1),transform 90ms cubic-bezier(0.4, 0, 0.6, 1);width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px);top:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2);left:calc(-1*(var(--mat-radio-state-layer-size, 40px) - 20px)/2)}.mat-mdc-radio-button .mdc-radio__outer-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border-width:2px;border-style:solid;border-radius:50%;transition:border-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}.mat-mdc-radio-button .mdc-radio__inner-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;transform:scale(0);border-radius:50%;transition:transform 90ms cubic-bezier(0.4, 0, 0.6, 1),background-color 90ms cubic-bezier(0.4, 0, 0.6, 1)}@media(forced-colors: active){.mat-mdc-radio-button .mdc-radio__inner-circle{background-color:CanvasText !important}}.mat-mdc-radio-button .mdc-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;top:0;right:0;left:0;cursor:inherit;z-index:1;width:var(--mat-radio-state-layer-size, 40px);height:var(--mat-radio-state-layer-size, 40px)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:focus+.mdc-radio__background::before{transform:scale(1);opacity:.12;transition:opacity 90ms cubic-bezier(0, 0, 0.2, 1),transform 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background{cursor:default}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:disabled+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-icon-color, var(--mat-sys-on-surface-variant))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary))}.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary, currentColor))}.mat-mdc-radio-button .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle{transform:scale(0.5);transition:transform 90ms cubic-bezier(0, 0, 0.2, 1),background-color 90ms cubic-bezier(0, 0, 0.2, 1)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled{pointer-events:auto}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:not(:checked)+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-unselected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__outer-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus+.mdc-radio__background>.mdc-radio__inner-circle,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control+.mdc-radio__background>.mdc-radio__inner-circle{background-color:var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));opacity:var(--mat-radio-disabled-selected-icon-opacity, 0.38)}.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__background::before,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__outer-circle,.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__inner-circle{transition:none !important}.mat-mdc-radio-button label{cursor:pointer}.mat-mdc-radio-button .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before{background-color:var(--mat-radio-checked-ripple-color, var(--mat-sys-primary))}.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mat-ripple-element,.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__background::before{background-color:var(--mat-radio-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button .mat-internal-form-field{color:var(--mat-radio-label-text-color, var(--mat-sys-on-surface));font-family:var(--mat-radio-label-text-font, var(--mat-sys-body-medium-font));line-height:var(--mat-radio-label-text-line-height, var(--mat-sys-body-medium-line-height));font-size:var(--mat-radio-label-text-size, var(--mat-sys-body-medium-size));letter-spacing:var(--mat-radio-label-text-tracking, var(--mat-sys-body-medium-tracking));font-weight:var(--mat-radio-label-text-weight, var(--mat-sys-body-medium-weight))}.mat-mdc-radio-button .mdc-radio--disabled+label{color:var(--mat-radio-disabled-label-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-mdc-radio-button .mat-radio-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:50%}.mat-mdc-radio-button .mat-radio-ripple>.mat-ripple-element{opacity:.14}.mat-mdc-radio-button .mat-radio-ripple::before{border-radius:50%}.mat-mdc-radio-button .mdc-radio>.mdc-radio__native-control:focus:enabled:not(:checked)~.mdc-radio__background>.mdc-radio__outer-circle{border-color:var(--mat-radio-unselected-focus-icon-color, var(--mat-sys-on-surface))}.mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before{content:\"\"}.mat-mdc-radio-disabled{cursor:default;pointer-events:none}.mat-mdc-radio-disabled.mat-mdc-radio-disabled-interactive{pointer-events:auto}.mat-mdc-radio-touch-target{position:absolute;top:50%;left:50%;height:var(--mat-radio-touch-target-size, 48px);width:var(--mat-radio-touch-target-size, 48px);transform:translate(-50%, -50%);display:var(--mat-radio-touch-target-display, block)}[dir=rtl] .mat-mdc-radio-touch-target{left:auto;right:50%;transform:translate(50%, -50%)}\n"]
627
+ }]
628
+ }],
629
+ ctorParameters: () => [],
630
+ propDecorators: {
631
+ id: [{
632
+ type: Input
633
+ }],
634
+ name: [{
635
+ type: Input
636
+ }],
637
+ ariaLabel: [{
638
+ type: Input,
639
+ args: ['aria-label']
640
+ }],
641
+ ariaLabelledby: [{
642
+ type: Input,
643
+ args: ['aria-labelledby']
644
+ }],
645
+ ariaDescribedby: [{
646
+ type: Input,
647
+ args: ['aria-describedby']
648
+ }],
649
+ disableRipple: [{
650
+ type: Input,
651
+ args: [{
652
+ transform: booleanAttribute
653
+ }]
654
+ }],
655
+ tabIndex: [{
656
+ type: Input,
657
+ args: [{
658
+ transform: value => value == null ? 0 : numberAttribute(value)
659
+ }]
660
+ }],
661
+ checked: [{
662
+ type: Input,
663
+ args: [{
664
+ transform: booleanAttribute
665
+ }]
666
+ }],
667
+ value: [{
668
+ type: Input
669
+ }],
670
+ labelPosition: [{
671
+ type: Input
672
+ }],
673
+ disabled: [{
674
+ type: Input,
675
+ args: [{
676
+ transform: booleanAttribute
677
+ }]
678
+ }],
679
+ required: [{
680
+ type: Input,
681
+ args: [{
682
+ transform: booleanAttribute
683
+ }]
684
+ }],
685
+ color: [{
686
+ type: Input
687
+ }],
688
+ disabledInteractive: [{
689
+ type: Input,
690
+ args: [{
691
+ transform: booleanAttribute
692
+ }]
693
+ }],
694
+ change: [{
695
+ type: Output
696
+ }],
697
+ _inputElement: [{
698
+ type: ViewChild,
699
+ args: ['input']
700
+ }],
701
+ _rippleTrigger: [{
702
+ type: ViewChild,
703
+ args: ['formField', {
704
+ read: ElementRef,
705
+ static: true
706
+ }]
707
+ }]
708
+ }
709
+ });
703
710
 
704
711
  class MatRadioModule {
705
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
706
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatRadioModule, imports: [MatRippleModule, MatRadioGroup, MatRadioButton], exports: [BidiModule, MatRadioGroup, MatRadioButton] });
707
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatRadioModule, imports: [MatRippleModule, MatRadioButton, BidiModule] });
712
+ static ɵfac = i0.ɵɵngDeclareFactory({
713
+ minVersion: "12.0.0",
714
+ version: "20.2.0-next.2",
715
+ ngImport: i0,
716
+ type: MatRadioModule,
717
+ deps: [],
718
+ target: i0.ɵɵFactoryTarget.NgModule
719
+ });
720
+ static ɵmod = i0.ɵɵngDeclareNgModule({
721
+ minVersion: "14.0.0",
722
+ version: "20.2.0-next.2",
723
+ ngImport: i0,
724
+ type: MatRadioModule,
725
+ imports: [MatRippleModule, MatRadioGroup, MatRadioButton],
726
+ exports: [BidiModule, MatRadioGroup, MatRadioButton]
727
+ });
728
+ static ɵinj = i0.ɵɵngDeclareInjector({
729
+ minVersion: "12.0.0",
730
+ version: "20.2.0-next.2",
731
+ ngImport: i0,
732
+ type: MatRadioModule,
733
+ imports: [MatRippleModule, MatRadioButton, BidiModule]
734
+ });
708
735
  }
709
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.2", ngImport: i0, type: MatRadioModule, decorators: [{
710
- type: NgModule,
711
- args: [{
712
- imports: [MatRippleModule, MatRadioGroup, MatRadioButton],
713
- exports: [BidiModule, MatRadioGroup, MatRadioButton],
714
- }]
715
- }] });
736
+ i0.ɵɵngDeclareClassMetadata({
737
+ minVersion: "12.0.0",
738
+ version: "20.2.0-next.2",
739
+ ngImport: i0,
740
+ type: MatRadioModule,
741
+ decorators: [{
742
+ type: NgModule,
743
+ args: [{
744
+ imports: [MatRippleModule, MatRadioGroup, MatRadioButton],
745
+ exports: [BidiModule, MatRadioGroup, MatRadioButton]
746
+ }]
747
+ }]
748
+ });
716
749
 
717
750
  export { MAT_RADIO_DEFAULT_OPTIONS, MAT_RADIO_GROUP, MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, MatRadioButton, MatRadioChange, MatRadioGroup, MatRadioModule };
718
751
  //# sourceMappingURL=radio.mjs.map