radio.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { FocusMonitor } from '@angular/cdk/a11y';
  9. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  10. import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
  11. import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EventEmitter, forwardRef, Inject, InjectionToken, Input, Optional, Output, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
  12. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  13. import { mixinDisableRipple, mixinTabIndex, MatCommonModule, MatRippleModule } from '@angular/material/core';
  14. import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
  15. import { CommonModule } from '@angular/common';
  16. /**
  17. * @fileoverview added by tsickle
  18. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  19. */
  20. /** @type {?} */
  21. const MAT_RADIO_DEFAULT_OPTIONS = new InjectionToken('mat-radio-default-options', {
  22. providedIn: 'root',
  23. factory: MAT_RADIO_DEFAULT_OPTIONS_FACTORY
  24. });
  25. /**
  26. * @return {?}
  27. */
  28. function MAT_RADIO_DEFAULT_OPTIONS_FACTORY() {
  29. return {
  30. color: 'accent'
  31. };
  32. }
  33. // Increasing integer for generating unique ids for radio components.
  34. /** @type {?} */
  35. let nextUniqueId = 0;
  36. /**
  37. * Provider Expression that allows mat-radio-group to register as a ControlValueAccessor. This
  38. * allows it to support [(ngModel)] and ngControl.
  39. * \@docs-private
  40. * @type {?}
  41. */
  42. const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
  43. provide: NG_VALUE_ACCESSOR,
  44. useExisting: forwardRef((/**
  45. * @return {?}
  46. */
  47. () => MatRadioGroup)),
  48. multi: true
  49. };
  50. /**
  51. * Change event object emitted by MatRadio and MatRadioGroup.
  52. */
  53. class MatRadioChange {
  54. /**
  55. * @param {?} source
  56. * @param {?} value
  57. */
  58. constructor(source, value) {
  59. this.source = source;
  60. this.value = value;
  61. }
  62. }
  63. /**
  64. * A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
  65. */
  66. class MatRadioGroup {
  67. /**
  68. * @param {?} _changeDetector
  69. */
  70. constructor(_changeDetector) {
  71. this._changeDetector = _changeDetector;
  72. /**
  73. * Selected value for the radio group.
  74. */
  75. this._value = null;
  76. /**
  77. * The HTML name attribute applied to radio buttons in this group.
  78. */
  79. this._name = `mat-radio-group-${nextUniqueId++}`;
  80. /**
  81. * The currently selected radio button. Should match value.
  82. */
  83. this._selected = null;
  84. /**
  85. * Whether the `value` has been set to its initial value.
  86. */
  87. this._isInitialized = false;
  88. /**
  89. * Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
  90. */
  91. this._labelPosition = 'after';
  92. /**
  93. * Whether the radio group is disabled.
  94. */
  95. this._disabled = false;
  96. /**
  97. * Whether the radio group is required.
  98. */
  99. this._required = false;
  100. /**
  101. * The method to be called in order to update ngModel
  102. */
  103. this._controlValueAccessorChangeFn = (/**
  104. * @return {?}
  105. */
  106. () => { });
  107. /**
  108. * onTouch function registered via registerOnTouch (ControlValueAccessor).
  109. * \@docs-private
  110. */
  111. this.onTouched = (/**
  112. * @return {?}
  113. */
  114. () => { });
  115. /**
  116. * Event emitted when the group value changes.
  117. * Change events are only emitted when the value changes due to user interaction with
  118. * a radio button (the same behavior as `<input type-"radio">`).
  119. */
  120. this.change = new EventEmitter();
  121. }
  122. /**
  123. * Name of the radio button group. All radio buttons inside this group will use this name.
  124. * @return {?}
  125. */
  126. get name() { return this._name; }
  127. /**
  128. * @param {?} value
  129. * @return {?}
  130. */
  131. set name(value) {
  132. this._name = value;
  133. this._updateRadioButtonNames();
  134. }
  135. /**
  136. * Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
  137. * @return {?}
  138. */
  139. get labelPosition() {
  140. return this._labelPosition;
  141. }
  142. /**
  143. * @param {?} v
  144. * @return {?}
  145. */
  146. set labelPosition(v) {
  147. this._labelPosition = v === 'before' ? 'before' : 'after';
  148. this._markRadiosForCheck();
  149. }
  150. /**
  151. * Value for the radio-group. Should equal the value of the selected radio button if there is
  152. * a corresponding radio button with a matching value. If there is not such a corresponding
  153. * radio button, this value persists to be applied in case a new radio button is added with a
  154. * matching value.
  155. * @return {?}
  156. */
  157. get value() { return this._value; }
  158. /**
  159. * @param {?} newValue
  160. * @return {?}
  161. */
  162. set value(newValue) {
  163. if (this._value !== newValue) {
  164. // Set this before proceeding to ensure no circular loop occurs with selection.
  165. this._value = newValue;
  166. this._updateSelectedRadioFromValue();
  167. this._checkSelectedRadioButton();
  168. }
  169. }
  170. /**
  171. * @return {?}
  172. */
  173. _checkSelectedRadioButton() {
  174. if (this._selected && !this._selected.checked) {
  175. this._selected.checked = true;
  176. }
  177. }
  178. /**
  179. * The currently selected radio button. If set to a new radio button, the radio group value
  180. * will be updated to match the new selected button.
  181. * @return {?}
  182. */
  183. get selected() { return this._selected; }
  184. /**
  185. * @param {?} selected
  186. * @return {?}
  187. */
  188. set selected(selected) {
  189. this._selected = selected;
  190. this.value = selected ? selected.value : null;
  191. this._checkSelectedRadioButton();
  192. }
  193. /**
  194. * Whether the radio group is disabled
  195. * @return {?}
  196. */
  197. get disabled() { return this._disabled; }
  198. /**
  199. * @param {?} value
  200. * @return {?}
  201. */
  202. set disabled(value) {
  203. this._disabled = coerceBooleanProperty(value);
  204. this._markRadiosForCheck();
  205. }
  206. /**
  207. * Whether the radio group is required
  208. * @return {?}
  209. */
  210. get required() { return this._required; }
  211. /**
  212. * @param {?} value
  213. * @return {?}
  214. */
  215. set required(value) {
  216. this._required = coerceBooleanProperty(value);
  217. this._markRadiosForCheck();
  218. }
  219. /**
  220. * Initialize properties once content children are available.
  221. * This allows us to propagate relevant attributes to associated buttons.
  222. * @return {?}
  223. */
  224. ngAfterContentInit() {
  225. // Mark this component as initialized in AfterContentInit because the initial value can
  226. // possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the
  227. // NgModel occurs *after* the OnInit of the MatRadioGroup.
  228. this._isInitialized = true;
  229. }
  230. /**
  231. * Mark this group as being "touched" (for ngModel). Meant to be called by the contained
  232. * radio buttons upon their blur.
  233. * @return {?}
  234. */
  235. _touch() {
  236. if (this.onTouched) {
  237. this.onTouched();
  238. }
  239. }
  240. /**
  241. * @private
  242. * @return {?}
  243. */
  244. _updateRadioButtonNames() {
  245. if (this._radios) {
  246. this._radios.forEach((/**
  247. * @param {?} radio
  248. * @return {?}
  249. */
  250. radio => {
  251. radio.name = this.name;
  252. radio._markForCheck();
  253. }));
  254. }
  255. }
  256. /**
  257. * Updates the `selected` radio button from the internal _value state.
  258. * @private
  259. * @return {?}
  260. */
  261. _updateSelectedRadioFromValue() {
  262. // If the value already matches the selected radio, do nothing.
  263. /** @type {?} */
  264. const isAlreadySelected = this._selected !== null && this._selected.value === this._value;
  265. if (this._radios && !isAlreadySelected) {
  266. this._selected = null;
  267. this._radios.forEach((/**
  268. * @param {?} radio
  269. * @return {?}
  270. */
  271. radio => {
  272. radio.checked = this.value === radio.value;
  273. if (radio.checked) {
  274. this._selected = radio;
  275. }
  276. }));
  277. }
  278. }
  279. /**
  280. * Dispatch change event with current selection and group value.
  281. * @return {?}
  282. */
  283. _emitChangeEvent() {
  284. if (this._isInitialized) {
  285. this.change.emit(new MatRadioChange((/** @type {?} */ (this._selected)), this._value));
  286. }
  287. }
  288. /**
  289. * @return {?}
  290. */
  291. _markRadiosForCheck() {
  292. if (this._radios) {
  293. this._radios.forEach((/**
  294. * @param {?} radio
  295. * @return {?}
  296. */
  297. radio => radio._markForCheck()));
  298. }
  299. }
  300. /**
  301. * Sets the model value. Implemented as part of ControlValueAccessor.
  302. * @param {?} value
  303. * @return {?}
  304. */
  305. writeValue(value) {
  306. this.value = value;
  307. this._changeDetector.markForCheck();
  308. }
  309. /**
  310. * Registers a callback to be triggered when the model value changes.
  311. * Implemented as part of ControlValueAccessor.
  312. * @param {?} fn Callback to be registered.
  313. * @return {?}
  314. */
  315. registerOnChange(fn) {
  316. this._controlValueAccessorChangeFn = fn;
  317. }
  318. /**
  319. * Registers a callback to be triggered when the control is touched.
  320. * Implemented as part of ControlValueAccessor.
  321. * @param {?} fn Callback to be registered.
  322. * @return {?}
  323. */
  324. registerOnTouched(fn) {
  325. this.onTouched = fn;
  326. }
  327. /**
  328. * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
  329. * @param {?} isDisabled Whether the control should be disabled.
  330. * @return {?}
  331. */
  332. setDisabledState(isDisabled) {
  333. this.disabled = isDisabled;
  334. this._changeDetector.markForCheck();
  335. }
  336. }
  337. MatRadioGroup.decorators = [
  338. { type: Directive, args: [{
  339. selector: 'mat-radio-group',
  340. exportAs: 'matRadioGroup',
  341. providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
  342. host: {
  343. 'role': 'radiogroup',
  344. 'class': 'mat-radio-group',
  345. },
  346. },] },
  347. ];
  348. /** @nocollapse */
  349. MatRadioGroup.ctorParameters = () => [
  350. { type: ChangeDetectorRef }
  351. ];
  352. MatRadioGroup.propDecorators = {
  353. change: [{ type: Output }],
  354. _radios: [{ type: ContentChildren, args: [forwardRef((/**
  355. * @return {?}
  356. */
  357. () => MatRadioButton)), { descendants: true },] }],
  358. color: [{ type: Input }],
  359. name: [{ type: Input }],
  360. labelPosition: [{ type: Input }],
  361. value: [{ type: Input }],
  362. selected: [{ type: Input }],
  363. disabled: [{ type: Input }],
  364. required: [{ type: Input }]
  365. };
  366. // Boilerplate for applying mixins to MatRadioButton.
  367. /**
  368. * \@docs-private
  369. */
  370. class MatRadioButtonBase {
  371. /**
  372. * @param {?} _elementRef
  373. */
  374. constructor(_elementRef) {
  375. this._elementRef = _elementRef;
  376. }
  377. }
  378. // As per Material design specifications the selection control radio should use the accent color
  379. // palette by default. https://material.io/guidelines/components/selection-controls.html
  380. /** @type {?} */
  381. const _MatRadioButtonMixinBase = mixinDisableRipple(mixinTabIndex(MatRadioButtonBase));
  382. /**
  383. * A Material design radio-button. Typically placed inside of `<mat-radio-group>` elements.
  384. */
  385. class MatRadioButton extends _MatRadioButtonMixinBase {
  386. /**
  387. * @param {?} radioGroup
  388. * @param {?} elementRef
  389. * @param {?} _changeDetector
  390. * @param {?} _focusMonitor
  391. * @param {?} _radioDispatcher
  392. * @param {?=} _animationMode
  393. * @param {?=} _providerOverride
  394. */
  395. constructor(radioGroup, elementRef, _changeDetector, _focusMonitor, _radioDispatcher, _animationMode, _providerOverride) {
  396. super(elementRef);
  397. this._changeDetector = _changeDetector;
  398. this._focusMonitor = _focusMonitor;
  399. this._radioDispatcher = _radioDispatcher;
  400. this._animationMode = _animationMode;
  401. this._providerOverride = _providerOverride;
  402. this._uniqueId = `mat-radio-${++nextUniqueId}`;
  403. /**
  404. * The unique ID for the radio button.
  405. */
  406. this.id = this._uniqueId;
  407. /**
  408. * Event emitted when the checked state of this radio button changes.
  409. * Change events are only emitted when the value changes due to user interaction with
  410. * the radio button (the same behavior as `<input type-"radio">`).
  411. */
  412. this.change = new EventEmitter();
  413. /**
  414. * Whether this radio is checked.
  415. */
  416. this._checked = false;
  417. /**
  418. * Value assigned to this radio.
  419. */
  420. this._value = null;
  421. /**
  422. * Unregister function for _radioDispatcher
  423. */
  424. this._removeUniqueSelectionListener = (/**
  425. * @return {?}
  426. */
  427. () => { });
  428. // Assertions. Ideally these should be stripped out by the compiler.
  429. // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
  430. this.radioGroup = radioGroup;
  431. this._removeUniqueSelectionListener =
  432. _radioDispatcher.listen((/**
  433. * @param {?} id
  434. * @param {?} name
  435. * @return {?}
  436. */
  437. (id, name) => {
  438. if (id !== this.id && name === this.name) {
  439. this.checked = false;
  440. }
  441. }));
  442. }
  443. /**
  444. * Whether this radio button is checked.
  445. * @return {?}
  446. */
  447. get checked() { return this._checked; }
  448. /**
  449. * @param {?} value
  450. * @return {?}
  451. */
  452. set checked(value) {
  453. /** @type {?} */
  454. const newCheckedState = coerceBooleanProperty(value);
  455. if (this._checked !== newCheckedState) {
  456. this._checked = newCheckedState;
  457. if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) {
  458. this.radioGroup.selected = this;
  459. }
  460. else if (!newCheckedState && this.radioGroup && this.radioGroup.value === this.value) {
  461. // When unchecking the selected radio button, update the selected radio
  462. // property on the group.
  463. this.radioGroup.selected = null;
  464. }
  465. if (newCheckedState) {
  466. // Notify all radio buttons with the same name to un-check.
  467. this._radioDispatcher.notify(this.id, this.name);
  468. }
  469. this._changeDetector.markForCheck();
  470. }
  471. }
  472. /**
  473. * The value of this radio button.
  474. * @return {?}
  475. */
  476. get value() { return this._value; }
  477. /**
  478. * @param {?} value
  479. * @return {?}
  480. */
  481. set value(value) {
  482. if (this._value !== value) {
  483. this._value = value;
  484. if (this.radioGroup !== null) {
  485. if (!this.checked) {
  486. // Update checked when the value changed to match the radio group's value
  487. this.checked = this.radioGroup.value === value;
  488. }
  489. if (this.checked) {
  490. this.radioGroup.selected = this;
  491. }
  492. }
  493. }
  494. }
  495. /**
  496. * Whether the label should appear after or before the radio button. Defaults to 'after'
  497. * @return {?}
  498. */
  499. get labelPosition() {
  500. return this._labelPosition || (this.radioGroup && this.radioGroup.labelPosition) || 'after';
  501. }
  502. /**
  503. * @param {?} value
  504. * @return {?}
  505. */
  506. set labelPosition(value) {
  507. this._labelPosition = value;
  508. }
  509. /**
  510. * Whether the radio button is disabled.
  511. * @return {?}
  512. */
  513. get disabled() {
  514. return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
  515. }
  516. /**
  517. * @param {?} value
  518. * @return {?}
  519. */
  520. set disabled(value) {
  521. /** @type {?} */
  522. const newDisabledState = coerceBooleanProperty(value);
  523. if (this._disabled !== newDisabledState) {
  524. this._disabled = newDisabledState;
  525. this._changeDetector.markForCheck();
  526. }
  527. }
  528. /**
  529. * Whether the radio button is required.
  530. * @return {?}
  531. */
  532. get required() {
  533. return this._required || (this.radioGroup && this.radioGroup.required);
  534. }
  535. /**
  536. * @param {?} value
  537. * @return {?}
  538. */
  539. set required(value) {
  540. this._required = coerceBooleanProperty(value);
  541. }
  542. /**
  543. * Theme color of the radio button.
  544. * @return {?}
  545. */
  546. get color() {
  547. return this._color ||
  548. (this.radioGroup && this.radioGroup.color) ||
  549. this._providerOverride && this._providerOverride.color || 'accent';
  550. }
  551. /**
  552. * @param {?} newValue
  553. * @return {?}
  554. */
  555. set color(newValue) { this._color = newValue; }
  556. /**
  557. * ID of the native input element inside `<mat-radio-button>`
  558. * @return {?}
  559. */
  560. get inputId() { return `${this.id || this._uniqueId}-input`; }
  561. /**
  562. * Focuses the radio button.
  563. * @param {?=} options
  564. * @return {?}
  565. */
  566. focus(options) {
  567. this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
  568. }
  569. /**
  570. * Marks the radio button as needing checking for change detection.
  571. * This method is exposed because the parent radio group will directly
  572. * update bound properties of the radio button.
  573. * @return {?}
  574. */
  575. _markForCheck() {
  576. // When group value changes, the button will not be notified. Use `markForCheck` to explicit
  577. // update radio button's status
  578. this._changeDetector.markForCheck();
  579. }
  580. /**
  581. * @return {?}
  582. */
  583. ngOnInit() {
  584. if (this.radioGroup) {
  585. // If the radio is inside a radio group, determine if it should be checked
  586. this.checked = this.radioGroup.value === this._value;
  587. // Copy name from parent radio group
  588. this.name = this.radioGroup.name;
  589. }
  590. }
  591. /**
  592. * @return {?}
  593. */
  594. ngAfterViewInit() {
  595. this._focusMonitor
  596. .monitor(this._elementRef, true)
  597. .subscribe((/**
  598. * @param {?} focusOrigin
  599. * @return {?}
  600. */
  601. focusOrigin => {
  602. if (!focusOrigin && this.radioGroup) {
  603. this.radioGroup._touch();
  604. }
  605. }));
  606. }
  607. /**
  608. * @return {?}
  609. */
  610. ngOnDestroy() {
  611. this._focusMonitor.stopMonitoring(this._elementRef);
  612. this._removeUniqueSelectionListener();
  613. }
  614. /**
  615. * Dispatch change event with current value.
  616. * @private
  617. * @return {?}
  618. */
  619. _emitChangeEvent() {
  620. this.change.emit(new MatRadioChange(this, this._value));
  621. }
  622. /**
  623. * @return {?}
  624. */
  625. _isRippleDisabled() {
  626. return this.disableRipple || this.disabled;
  627. }
  628. /**
  629. * @param {?} event
  630. * @return {?}
  631. */
  632. _onInputClick(event) {
  633. // We have to stop propagation for click events on the visual hidden input element.
  634. // By default, when a user clicks on a label element, a generated click event will be
  635. // dispatched on the associated input element. Since we are using a label element as our
  636. // root container, the click event on the `radio-button` will be executed twice.
  637. // The real click event will bubble up, and the generated click event also tries to bubble up.
  638. // This will lead to multiple click events.
  639. // Preventing bubbling for the second event will solve that issue.
  640. event.stopPropagation();
  641. }
  642. /**
  643. * Triggered when the radio button received a click or the input recognized any change.
  644. * Clicking on a label element, will trigger a change event on the associated input.
  645. * @param {?} event
  646. * @return {?}
  647. */
  648. _onInputChange(event) {
  649. // We always have to stop propagation on the change event.
  650. // Otherwise the change event, from the input element, will bubble up and
  651. // emit its event object to the `change` output.
  652. event.stopPropagation();
  653. /** @type {?} */
  654. const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
  655. this.checked = true;
  656. this._emitChangeEvent();
  657. if (this.radioGroup) {
  658. this.radioGroup._controlValueAccessorChangeFn(this.value);
  659. if (groupValueChanged) {
  660. this.radioGroup._emitChangeEvent();
  661. }
  662. }
  663. }
  664. }
  665. MatRadioButton.decorators = [
  666. { type: Component, args: [{selector: 'mat-radio-button',
  667. template: "<label [attr.for]=\"inputId\" class=\"mat-radio-label\" #label><div class=\"mat-radio-container\"><div class=\"mat-radio-outer-circle\"></div><div class=\"mat-radio-inner-circle\"></div><div mat-ripple class=\"mat-radio-ripple\" [matRippleTrigger]=\"label\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleCentered]=\"true\" [matRippleRadius]=\"20\" [matRippleAnimation]=\"{enterDuration: 150}\"><div class=\"mat-ripple-element mat-radio-persistent-ripple\"></div></div><input #input class=\"mat-radio-input cdk-visually-hidden\" type=\"radio\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.value]=\"value\" [required]=\"required\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaDescribedby\" (change)=\"_onInputChange($event)\" (click)=\"_onInputClick($event)\"></div><div class=\"mat-radio-label-content\" [class.mat-radio-label-before]=\"labelPosition == 'before'\"><span style=\"display:none\">&nbsp;</span><ng-content></ng-content></div></label>",
  668. styles: [".mat-radio-button{display:inline-block;-webkit-tap-highlight-color:transparent;outline:0}.mat-radio-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;vertical-align:middle;width:100%}.mat-radio-container{box-sizing:border-box;display:inline-block;position:relative;width:20px;height:20px;flex-shrink:0}.mat-radio-outer-circle{box-sizing:border-box;height:20px;left:0;position:absolute;top:0;transition:border-color ease 280ms;width:20px;border-width:2px;border-style:solid;border-radius:50%}._mat-animation-noopable .mat-radio-outer-circle{transition:none}.mat-radio-inner-circle{border-radius:50%;box-sizing:border-box;height:20px;left:0;position:absolute;top:0;transition:transform ease 280ms,background-color ease 280ms;width:20px;transform:scale(.001)}._mat-animation-noopable .mat-radio-inner-circle{transition:none}.mat-radio-checked .mat-radio-inner-circle{transform:scale(.5)}@media (-ms-high-contrast:active){.mat-radio-checked .mat-radio-inner-circle{border:solid 10px}}.mat-radio-label-content{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;display:inline-block;order:0;line-height:inherit;padding-left:8px;padding-right:0}[dir=rtl] .mat-radio-label-content{padding-right:8px;padding-left:0}.mat-radio-label-content.mat-radio-label-before{order:-1;padding-left:0;padding-right:8px}[dir=rtl] .mat-radio-label-content.mat-radio-label-before{padding-right:0;padding-left:8px}.mat-radio-disabled,.mat-radio-disabled .mat-radio-label{cursor:default}.mat-radio-button .mat-radio-ripple{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}.mat-radio-button .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple){opacity:.16}.mat-radio-persistent-ripple{width:100%;height:100%;transform:none}.mat-radio-container:hover .mat-radio-persistent-ripple{opacity:.04}.mat-radio-button:not(.mat-radio-disabled).cdk-keyboard-focused .mat-radio-persistent-ripple,.mat-radio-button:not(.mat-radio-disabled).cdk-program-focused .mat-radio-persistent-ripple{opacity:.12}.mat-radio-disabled .mat-radio-container:hover .mat-radio-persistent-ripple,.mat-radio-persistent-ripple{opacity:0}@media (hover:none){.mat-radio-container:hover .mat-radio-persistent-ripple{display:none}}.mat-radio-input{bottom:0;left:50%}@media (-ms-high-contrast:active){.mat-radio-disabled{opacity:.5}}"],
  669. inputs: ['disableRipple', 'tabIndex'],
  670. encapsulation: ViewEncapsulation.None,
  671. exportAs: 'matRadioButton',
  672. host: {
  673. 'class': 'mat-radio-button',
  674. '[class.mat-radio-checked]': 'checked',
  675. '[class.mat-radio-disabled]': 'disabled',
  676. '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
  677. '[class.mat-primary]': 'color === "primary"',
  678. '[class.mat-accent]': 'color === "accent"',
  679. '[class.mat-warn]': 'color === "warn"',
  680. // Needs to be -1 so the `focus` event still fires.
  681. '[attr.tabindex]': '-1',
  682. '[attr.id]': 'id',
  683. // Note: under normal conditions focus shouldn't land on this element, however it may be
  684. // programmatically set, for example inside of a focus trap, in this case we want to forward
  685. // the focus to the native element.
  686. '(focus)': '_inputElement.nativeElement.focus()',
  687. },
  688. changeDetection: ChangeDetectionStrategy.OnPush,
  689. },] },
  690. ];
  691. /** @nocollapse */
  692. MatRadioButton.ctorParameters = () => [
  693. { type: MatRadioGroup, decorators: [{ type: Optional }] },
  694. { type: ElementRef },
  695. { type: ChangeDetectorRef },
  696. { type: FocusMonitor },
  697. { type: UniqueSelectionDispatcher },
  698. { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] },
  699. { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_RADIO_DEFAULT_OPTIONS,] }] }
  700. ];
  701. MatRadioButton.propDecorators = {
  702. id: [{ type: Input }],
  703. name: [{ type: Input }],
  704. ariaLabel: [{ type: Input, args: ['aria-label',] }],
  705. ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
  706. ariaDescribedby: [{ type: Input, args: ['aria-describedby',] }],
  707. checked: [{ type: Input }],
  708. value: [{ type: Input }],
  709. labelPosition: [{ type: Input }],
  710. disabled: [{ type: Input }],
  711. required: [{ type: Input }],
  712. color: [{ type: Input }],
  713. change: [{ type: Output }],
  714. _inputElement: [{ type: ViewChild, args: ['input', { static: false },] }]
  715. };
  716. /**
  717. * @fileoverview added by tsickle
  718. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  719. */
  720. class MatRadioModule {
  721. }
  722. MatRadioModule.decorators = [
  723. { type: NgModule, args: [{
  724. imports: [CommonModule, MatRippleModule, MatCommonModule],
  725. exports: [MatRadioGroup, MatRadioButton, MatCommonModule],
  726. declarations: [MatRadioGroup, MatRadioButton],
  727. },] },
  728. ];
  729. /**
  730. * @fileoverview added by tsickle
  731. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  732. */
  733. /**
  734. * @fileoverview added by tsickle
  735. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  736. */
  737. export { MatRadioModule, MAT_RADIO_DEFAULT_OPTIONS_FACTORY, MAT_RADIO_DEFAULT_OPTIONS, MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, MatRadioChange, MatRadioGroup, MatRadioButton };
  738. //# sourceMappingURL=radio.js.map