radio.es5.js 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946
  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 { __extends } from 'tslib';
  9. import { FocusMonitor } from '@angular/cdk/a11y';
  10. import { coerceBooleanProperty } from '@angular/cdk/coercion';
  11. import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
  12. import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, EventEmitter, forwardRef, Inject, InjectionToken, Input, Optional, Output, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
  13. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  14. import { mixinDisableRipple, mixinTabIndex, MatCommonModule, MatRippleModule } from '@angular/material/core';
  15. import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
  16. import { CommonModule } from '@angular/common';
  17. /**
  18. * @fileoverview added by tsickle
  19. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  20. */
  21. /** @type {?} */
  22. var MAT_RADIO_DEFAULT_OPTIONS = new InjectionToken('mat-radio-default-options', {
  23. providedIn: 'root',
  24. factory: MAT_RADIO_DEFAULT_OPTIONS_FACTORY
  25. });
  26. /**
  27. * @return {?}
  28. */
  29. function MAT_RADIO_DEFAULT_OPTIONS_FACTORY() {
  30. return {
  31. color: 'accent'
  32. };
  33. }
  34. // Increasing integer for generating unique ids for radio components.
  35. /** @type {?} */
  36. var nextUniqueId = 0;
  37. /**
  38. * Provider Expression that allows mat-radio-group to register as a ControlValueAccessor. This
  39. * allows it to support [(ngModel)] and ngControl.
  40. * \@docs-private
  41. * @type {?}
  42. */
  43. var MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
  44. provide: NG_VALUE_ACCESSOR,
  45. useExisting: forwardRef((/**
  46. * @return {?}
  47. */
  48. function () { return MatRadioGroup; })),
  49. multi: true
  50. };
  51. /**
  52. * Change event object emitted by MatRadio and MatRadioGroup.
  53. */
  54. var /**
  55. * Change event object emitted by MatRadio and MatRadioGroup.
  56. */
  57. MatRadioChange = /** @class */ (function () {
  58. function MatRadioChange(source, value) {
  59. this.source = source;
  60. this.value = value;
  61. }
  62. return MatRadioChange;
  63. }());
  64. /**
  65. * A group of radio buttons. May contain one or more `<mat-radio-button>` elements.
  66. */
  67. var MatRadioGroup = /** @class */ (function () {
  68. function MatRadioGroup(_changeDetector) {
  69. this._changeDetector = _changeDetector;
  70. /**
  71. * Selected value for the radio group.
  72. */
  73. this._value = null;
  74. /**
  75. * The HTML name attribute applied to radio buttons in this group.
  76. */
  77. this._name = "mat-radio-group-" + nextUniqueId++;
  78. /**
  79. * The currently selected radio button. Should match value.
  80. */
  81. this._selected = null;
  82. /**
  83. * Whether the `value` has been set to its initial value.
  84. */
  85. this._isInitialized = false;
  86. /**
  87. * Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
  88. */
  89. this._labelPosition = 'after';
  90. /**
  91. * Whether the radio group is disabled.
  92. */
  93. this._disabled = false;
  94. /**
  95. * Whether the radio group is required.
  96. */
  97. this._required = false;
  98. /**
  99. * The method to be called in order to update ngModel
  100. */
  101. this._controlValueAccessorChangeFn = (/**
  102. * @return {?}
  103. */
  104. function () { });
  105. /**
  106. * onTouch function registered via registerOnTouch (ControlValueAccessor).
  107. * \@docs-private
  108. */
  109. this.onTouched = (/**
  110. * @return {?}
  111. */
  112. function () { });
  113. /**
  114. * Event emitted when the group value changes.
  115. * Change events are only emitted when the value changes due to user interaction with
  116. * a radio button (the same behavior as `<input type-"radio">`).
  117. */
  118. this.change = new EventEmitter();
  119. }
  120. Object.defineProperty(MatRadioGroup.prototype, "name", {
  121. /** Name of the radio button group. All radio buttons inside this group will use this name. */
  122. get: /**
  123. * Name of the radio button group. All radio buttons inside this group will use this name.
  124. * @return {?}
  125. */
  126. function () { return this._name; },
  127. set: /**
  128. * @param {?} value
  129. * @return {?}
  130. */
  131. function (value) {
  132. this._name = value;
  133. this._updateRadioButtonNames();
  134. },
  135. enumerable: true,
  136. configurable: true
  137. });
  138. Object.defineProperty(MatRadioGroup.prototype, "labelPosition", {
  139. /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
  140. get: /**
  141. * Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
  142. * @return {?}
  143. */
  144. function () {
  145. return this._labelPosition;
  146. },
  147. set: /**
  148. * @param {?} v
  149. * @return {?}
  150. */
  151. function (v) {
  152. this._labelPosition = v === 'before' ? 'before' : 'after';
  153. this._markRadiosForCheck();
  154. },
  155. enumerable: true,
  156. configurable: true
  157. });
  158. Object.defineProperty(MatRadioGroup.prototype, "value", {
  159. /**
  160. * Value for the radio-group. Should equal the value of the selected radio button if there is
  161. * a corresponding radio button with a matching value. If there is not such a corresponding
  162. * radio button, this value persists to be applied in case a new radio button is added with a
  163. * matching value.
  164. */
  165. get: /**
  166. * Value for the radio-group. Should equal the value of the selected radio button if there is
  167. * a corresponding radio button with a matching value. If there is not such a corresponding
  168. * radio button, this value persists to be applied in case a new radio button is added with a
  169. * matching value.
  170. * @return {?}
  171. */
  172. function () { return this._value; },
  173. set: /**
  174. * @param {?} newValue
  175. * @return {?}
  176. */
  177. function (newValue) {
  178. if (this._value !== newValue) {
  179. // Set this before proceeding to ensure no circular loop occurs with selection.
  180. this._value = newValue;
  181. this._updateSelectedRadioFromValue();
  182. this._checkSelectedRadioButton();
  183. }
  184. },
  185. enumerable: true,
  186. configurable: true
  187. });
  188. /**
  189. * @return {?}
  190. */
  191. MatRadioGroup.prototype._checkSelectedRadioButton = /**
  192. * @return {?}
  193. */
  194. function () {
  195. if (this._selected && !this._selected.checked) {
  196. this._selected.checked = true;
  197. }
  198. };
  199. Object.defineProperty(MatRadioGroup.prototype, "selected", {
  200. /**
  201. * The currently selected radio button. If set to a new radio button, the radio group value
  202. * will be updated to match the new selected button.
  203. */
  204. get: /**
  205. * The currently selected radio button. If set to a new radio button, the radio group value
  206. * will be updated to match the new selected button.
  207. * @return {?}
  208. */
  209. function () { return this._selected; },
  210. set: /**
  211. * @param {?} selected
  212. * @return {?}
  213. */
  214. function (selected) {
  215. this._selected = selected;
  216. this.value = selected ? selected.value : null;
  217. this._checkSelectedRadioButton();
  218. },
  219. enumerable: true,
  220. configurable: true
  221. });
  222. Object.defineProperty(MatRadioGroup.prototype, "disabled", {
  223. /** Whether the radio group is disabled */
  224. get: /**
  225. * Whether the radio group is disabled
  226. * @return {?}
  227. */
  228. function () { return this._disabled; },
  229. set: /**
  230. * @param {?} value
  231. * @return {?}
  232. */
  233. function (value) {
  234. this._disabled = coerceBooleanProperty(value);
  235. this._markRadiosForCheck();
  236. },
  237. enumerable: true,
  238. configurable: true
  239. });
  240. Object.defineProperty(MatRadioGroup.prototype, "required", {
  241. /** Whether the radio group is required */
  242. get: /**
  243. * Whether the radio group is required
  244. * @return {?}
  245. */
  246. function () { return this._required; },
  247. set: /**
  248. * @param {?} value
  249. * @return {?}
  250. */
  251. function (value) {
  252. this._required = coerceBooleanProperty(value);
  253. this._markRadiosForCheck();
  254. },
  255. enumerable: true,
  256. configurable: true
  257. });
  258. /**
  259. * Initialize properties once content children are available.
  260. * This allows us to propagate relevant attributes to associated buttons.
  261. */
  262. /**
  263. * Initialize properties once content children are available.
  264. * This allows us to propagate relevant attributes to associated buttons.
  265. * @return {?}
  266. */
  267. MatRadioGroup.prototype.ngAfterContentInit = /**
  268. * Initialize properties once content children are available.
  269. * This allows us to propagate relevant attributes to associated buttons.
  270. * @return {?}
  271. */
  272. function () {
  273. // Mark this component as initialized in AfterContentInit because the initial value can
  274. // possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the
  275. // NgModel occurs *after* the OnInit of the MatRadioGroup.
  276. this._isInitialized = true;
  277. };
  278. /**
  279. * Mark this group as being "touched" (for ngModel). Meant to be called by the contained
  280. * radio buttons upon their blur.
  281. */
  282. /**
  283. * Mark this group as being "touched" (for ngModel). Meant to be called by the contained
  284. * radio buttons upon their blur.
  285. * @return {?}
  286. */
  287. MatRadioGroup.prototype._touch = /**
  288. * Mark this group as being "touched" (for ngModel). Meant to be called by the contained
  289. * radio buttons upon their blur.
  290. * @return {?}
  291. */
  292. function () {
  293. if (this.onTouched) {
  294. this.onTouched();
  295. }
  296. };
  297. /**
  298. * @private
  299. * @return {?}
  300. */
  301. MatRadioGroup.prototype._updateRadioButtonNames = /**
  302. * @private
  303. * @return {?}
  304. */
  305. function () {
  306. var _this = this;
  307. if (this._radios) {
  308. this._radios.forEach((/**
  309. * @param {?} radio
  310. * @return {?}
  311. */
  312. function (radio) {
  313. radio.name = _this.name;
  314. radio._markForCheck();
  315. }));
  316. }
  317. };
  318. /** Updates the `selected` radio button from the internal _value state. */
  319. /**
  320. * Updates the `selected` radio button from the internal _value state.
  321. * @private
  322. * @return {?}
  323. */
  324. MatRadioGroup.prototype._updateSelectedRadioFromValue = /**
  325. * Updates the `selected` radio button from the internal _value state.
  326. * @private
  327. * @return {?}
  328. */
  329. function () {
  330. var _this = this;
  331. // If the value already matches the selected radio, do nothing.
  332. /** @type {?} */
  333. var isAlreadySelected = this._selected !== null && this._selected.value === this._value;
  334. if (this._radios && !isAlreadySelected) {
  335. this._selected = null;
  336. this._radios.forEach((/**
  337. * @param {?} radio
  338. * @return {?}
  339. */
  340. function (radio) {
  341. radio.checked = _this.value === radio.value;
  342. if (radio.checked) {
  343. _this._selected = radio;
  344. }
  345. }));
  346. }
  347. };
  348. /** Dispatch change event with current selection and group value. */
  349. /**
  350. * Dispatch change event with current selection and group value.
  351. * @return {?}
  352. */
  353. MatRadioGroup.prototype._emitChangeEvent = /**
  354. * Dispatch change event with current selection and group value.
  355. * @return {?}
  356. */
  357. function () {
  358. if (this._isInitialized) {
  359. this.change.emit(new MatRadioChange((/** @type {?} */ (this._selected)), this._value));
  360. }
  361. };
  362. /**
  363. * @return {?}
  364. */
  365. MatRadioGroup.prototype._markRadiosForCheck = /**
  366. * @return {?}
  367. */
  368. function () {
  369. if (this._radios) {
  370. this._radios.forEach((/**
  371. * @param {?} radio
  372. * @return {?}
  373. */
  374. function (radio) { return radio._markForCheck(); }));
  375. }
  376. };
  377. /**
  378. * Sets the model value. Implemented as part of ControlValueAccessor.
  379. * @param value
  380. */
  381. /**
  382. * Sets the model value. Implemented as part of ControlValueAccessor.
  383. * @param {?} value
  384. * @return {?}
  385. */
  386. MatRadioGroup.prototype.writeValue = /**
  387. * Sets the model value. Implemented as part of ControlValueAccessor.
  388. * @param {?} value
  389. * @return {?}
  390. */
  391. function (value) {
  392. this.value = value;
  393. this._changeDetector.markForCheck();
  394. };
  395. /**
  396. * Registers a callback to be triggered when the model value changes.
  397. * Implemented as part of ControlValueAccessor.
  398. * @param fn Callback to be registered.
  399. */
  400. /**
  401. * Registers a callback to be triggered when the model value changes.
  402. * Implemented as part of ControlValueAccessor.
  403. * @param {?} fn Callback to be registered.
  404. * @return {?}
  405. */
  406. MatRadioGroup.prototype.registerOnChange = /**
  407. * Registers a callback to be triggered when the model value changes.
  408. * Implemented as part of ControlValueAccessor.
  409. * @param {?} fn Callback to be registered.
  410. * @return {?}
  411. */
  412. function (fn) {
  413. this._controlValueAccessorChangeFn = fn;
  414. };
  415. /**
  416. * Registers a callback to be triggered when the control is touched.
  417. * Implemented as part of ControlValueAccessor.
  418. * @param fn Callback to be registered.
  419. */
  420. /**
  421. * Registers a callback to be triggered when the control is touched.
  422. * Implemented as part of ControlValueAccessor.
  423. * @param {?} fn Callback to be registered.
  424. * @return {?}
  425. */
  426. MatRadioGroup.prototype.registerOnTouched = /**
  427. * Registers a callback to be triggered when the control is touched.
  428. * Implemented as part of ControlValueAccessor.
  429. * @param {?} fn Callback to be registered.
  430. * @return {?}
  431. */
  432. function (fn) {
  433. this.onTouched = fn;
  434. };
  435. /**
  436. * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
  437. * @param isDisabled Whether the control should be disabled.
  438. */
  439. /**
  440. * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
  441. * @param {?} isDisabled Whether the control should be disabled.
  442. * @return {?}
  443. */
  444. MatRadioGroup.prototype.setDisabledState = /**
  445. * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
  446. * @param {?} isDisabled Whether the control should be disabled.
  447. * @return {?}
  448. */
  449. function (isDisabled) {
  450. this.disabled = isDisabled;
  451. this._changeDetector.markForCheck();
  452. };
  453. MatRadioGroup.decorators = [
  454. { type: Directive, args: [{
  455. selector: 'mat-radio-group',
  456. exportAs: 'matRadioGroup',
  457. providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
  458. host: {
  459. 'role': 'radiogroup',
  460. 'class': 'mat-radio-group',
  461. },
  462. },] },
  463. ];
  464. /** @nocollapse */
  465. MatRadioGroup.ctorParameters = function () { return [
  466. { type: ChangeDetectorRef }
  467. ]; };
  468. MatRadioGroup.propDecorators = {
  469. change: [{ type: Output }],
  470. _radios: [{ type: ContentChildren, args: [forwardRef((/**
  471. * @return {?}
  472. */
  473. function () { return MatRadioButton; })), { descendants: true },] }],
  474. color: [{ type: Input }],
  475. name: [{ type: Input }],
  476. labelPosition: [{ type: Input }],
  477. value: [{ type: Input }],
  478. selected: [{ type: Input }],
  479. disabled: [{ type: Input }],
  480. required: [{ type: Input }]
  481. };
  482. return MatRadioGroup;
  483. }());
  484. // Boilerplate for applying mixins to MatRadioButton.
  485. /**
  486. * \@docs-private
  487. */
  488. var
  489. // Boilerplate for applying mixins to MatRadioButton.
  490. /**
  491. * \@docs-private
  492. */
  493. MatRadioButtonBase = /** @class */ (function () {
  494. function MatRadioButtonBase(_elementRef) {
  495. this._elementRef = _elementRef;
  496. }
  497. return MatRadioButtonBase;
  498. }());
  499. // As per Material design specifications the selection control radio should use the accent color
  500. // palette by default. https://material.io/guidelines/components/selection-controls.html
  501. /** @type {?} */
  502. var _MatRadioButtonMixinBase = mixinDisableRipple(mixinTabIndex(MatRadioButtonBase));
  503. /**
  504. * A Material design radio-button. Typically placed inside of `<mat-radio-group>` elements.
  505. */
  506. var MatRadioButton = /** @class */ (function (_super) {
  507. __extends(MatRadioButton, _super);
  508. function MatRadioButton(radioGroup, elementRef, _changeDetector, _focusMonitor, _radioDispatcher, _animationMode, _providerOverride) {
  509. var _this = _super.call(this, elementRef) || this;
  510. _this._changeDetector = _changeDetector;
  511. _this._focusMonitor = _focusMonitor;
  512. _this._radioDispatcher = _radioDispatcher;
  513. _this._animationMode = _animationMode;
  514. _this._providerOverride = _providerOverride;
  515. _this._uniqueId = "mat-radio-" + ++nextUniqueId;
  516. /**
  517. * The unique ID for the radio button.
  518. */
  519. _this.id = _this._uniqueId;
  520. /**
  521. * Event emitted when the checked state of this radio button changes.
  522. * Change events are only emitted when the value changes due to user interaction with
  523. * the radio button (the same behavior as `<input type-"radio">`).
  524. */
  525. _this.change = new EventEmitter();
  526. /**
  527. * Whether this radio is checked.
  528. */
  529. _this._checked = false;
  530. /**
  531. * Value assigned to this radio.
  532. */
  533. _this._value = null;
  534. /**
  535. * Unregister function for _radioDispatcher
  536. */
  537. _this._removeUniqueSelectionListener = (/**
  538. * @return {?}
  539. */
  540. function () { });
  541. // Assertions. Ideally these should be stripped out by the compiler.
  542. // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
  543. _this.radioGroup = radioGroup;
  544. _this._removeUniqueSelectionListener =
  545. _radioDispatcher.listen((/**
  546. * @param {?} id
  547. * @param {?} name
  548. * @return {?}
  549. */
  550. function (id, name) {
  551. if (id !== _this.id && name === _this.name) {
  552. _this.checked = false;
  553. }
  554. }));
  555. return _this;
  556. }
  557. Object.defineProperty(MatRadioButton.prototype, "checked", {
  558. /** Whether this radio button is checked. */
  559. get: /**
  560. * Whether this radio button is checked.
  561. * @return {?}
  562. */
  563. function () { return this._checked; },
  564. set: /**
  565. * @param {?} value
  566. * @return {?}
  567. */
  568. function (value) {
  569. /** @type {?} */
  570. var newCheckedState = coerceBooleanProperty(value);
  571. if (this._checked !== newCheckedState) {
  572. this._checked = newCheckedState;
  573. if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) {
  574. this.radioGroup.selected = this;
  575. }
  576. else if (!newCheckedState && this.radioGroup && this.radioGroup.value === this.value) {
  577. // When unchecking the selected radio button, update the selected radio
  578. // property on the group.
  579. this.radioGroup.selected = null;
  580. }
  581. if (newCheckedState) {
  582. // Notify all radio buttons with the same name to un-check.
  583. this._radioDispatcher.notify(this.id, this.name);
  584. }
  585. this._changeDetector.markForCheck();
  586. }
  587. },
  588. enumerable: true,
  589. configurable: true
  590. });
  591. Object.defineProperty(MatRadioButton.prototype, "value", {
  592. /** The value of this radio button. */
  593. get: /**
  594. * The value of this radio button.
  595. * @return {?}
  596. */
  597. function () { return this._value; },
  598. set: /**
  599. * @param {?} value
  600. * @return {?}
  601. */
  602. function (value) {
  603. if (this._value !== value) {
  604. this._value = value;
  605. if (this.radioGroup !== null) {
  606. if (!this.checked) {
  607. // Update checked when the value changed to match the radio group's value
  608. this.checked = this.radioGroup.value === value;
  609. }
  610. if (this.checked) {
  611. this.radioGroup.selected = this;
  612. }
  613. }
  614. }
  615. },
  616. enumerable: true,
  617. configurable: true
  618. });
  619. Object.defineProperty(MatRadioButton.prototype, "labelPosition", {
  620. /** Whether the label should appear after or before the radio button. Defaults to 'after' */
  621. get: /**
  622. * Whether the label should appear after or before the radio button. Defaults to 'after'
  623. * @return {?}
  624. */
  625. function () {
  626. return this._labelPosition || (this.radioGroup && this.radioGroup.labelPosition) || 'after';
  627. },
  628. set: /**
  629. * @param {?} value
  630. * @return {?}
  631. */
  632. function (value) {
  633. this._labelPosition = value;
  634. },
  635. enumerable: true,
  636. configurable: true
  637. });
  638. Object.defineProperty(MatRadioButton.prototype, "disabled", {
  639. /** Whether the radio button is disabled. */
  640. get: /**
  641. * Whether the radio button is disabled.
  642. * @return {?}
  643. */
  644. function () {
  645. return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
  646. },
  647. set: /**
  648. * @param {?} value
  649. * @return {?}
  650. */
  651. function (value) {
  652. /** @type {?} */
  653. var newDisabledState = coerceBooleanProperty(value);
  654. if (this._disabled !== newDisabledState) {
  655. this._disabled = newDisabledState;
  656. this._changeDetector.markForCheck();
  657. }
  658. },
  659. enumerable: true,
  660. configurable: true
  661. });
  662. Object.defineProperty(MatRadioButton.prototype, "required", {
  663. /** Whether the radio button is required. */
  664. get: /**
  665. * Whether the radio button is required.
  666. * @return {?}
  667. */
  668. function () {
  669. return this._required || (this.radioGroup && this.radioGroup.required);
  670. },
  671. set: /**
  672. * @param {?} value
  673. * @return {?}
  674. */
  675. function (value) {
  676. this._required = coerceBooleanProperty(value);
  677. },
  678. enumerable: true,
  679. configurable: true
  680. });
  681. Object.defineProperty(MatRadioButton.prototype, "color", {
  682. /** Theme color of the radio button. */
  683. get: /**
  684. * Theme color of the radio button.
  685. * @return {?}
  686. */
  687. function () {
  688. return this._color ||
  689. (this.radioGroup && this.radioGroup.color) ||
  690. this._providerOverride && this._providerOverride.color || 'accent';
  691. },
  692. set: /**
  693. * @param {?} newValue
  694. * @return {?}
  695. */
  696. function (newValue) { this._color = newValue; },
  697. enumerable: true,
  698. configurable: true
  699. });
  700. Object.defineProperty(MatRadioButton.prototype, "inputId", {
  701. /** ID of the native input element inside `<mat-radio-button>` */
  702. get: /**
  703. * ID of the native input element inside `<mat-radio-button>`
  704. * @return {?}
  705. */
  706. function () { return (this.id || this._uniqueId) + "-input"; },
  707. enumerable: true,
  708. configurable: true
  709. });
  710. /** Focuses the radio button. */
  711. /**
  712. * Focuses the radio button.
  713. * @param {?=} options
  714. * @return {?}
  715. */
  716. MatRadioButton.prototype.focus = /**
  717. * Focuses the radio button.
  718. * @param {?=} options
  719. * @return {?}
  720. */
  721. function (options) {
  722. this._focusMonitor.focusVia(this._inputElement, 'keyboard', options);
  723. };
  724. /**
  725. * Marks the radio button as needing checking for change detection.
  726. * This method is exposed because the parent radio group will directly
  727. * update bound properties of the radio button.
  728. */
  729. /**
  730. * Marks the radio button as needing checking for change detection.
  731. * This method is exposed because the parent radio group will directly
  732. * update bound properties of the radio button.
  733. * @return {?}
  734. */
  735. MatRadioButton.prototype._markForCheck = /**
  736. * Marks the radio button as needing checking for change detection.
  737. * This method is exposed because the parent radio group will directly
  738. * update bound properties of the radio button.
  739. * @return {?}
  740. */
  741. function () {
  742. // When group value changes, the button will not be notified. Use `markForCheck` to explicit
  743. // update radio button's status
  744. this._changeDetector.markForCheck();
  745. };
  746. /**
  747. * @return {?}
  748. */
  749. MatRadioButton.prototype.ngOnInit = /**
  750. * @return {?}
  751. */
  752. function () {
  753. if (this.radioGroup) {
  754. // If the radio is inside a radio group, determine if it should be checked
  755. this.checked = this.radioGroup.value === this._value;
  756. // Copy name from parent radio group
  757. this.name = this.radioGroup.name;
  758. }
  759. };
  760. /**
  761. * @return {?}
  762. */
  763. MatRadioButton.prototype.ngAfterViewInit = /**
  764. * @return {?}
  765. */
  766. function () {
  767. var _this = this;
  768. this._focusMonitor
  769. .monitor(this._elementRef, true)
  770. .subscribe((/**
  771. * @param {?} focusOrigin
  772. * @return {?}
  773. */
  774. function (focusOrigin) {
  775. if (!focusOrigin && _this.radioGroup) {
  776. _this.radioGroup._touch();
  777. }
  778. }));
  779. };
  780. /**
  781. * @return {?}
  782. */
  783. MatRadioButton.prototype.ngOnDestroy = /**
  784. * @return {?}
  785. */
  786. function () {
  787. this._focusMonitor.stopMonitoring(this._elementRef);
  788. this._removeUniqueSelectionListener();
  789. };
  790. /** Dispatch change event with current value. */
  791. /**
  792. * Dispatch change event with current value.
  793. * @private
  794. * @return {?}
  795. */
  796. MatRadioButton.prototype._emitChangeEvent = /**
  797. * Dispatch change event with current value.
  798. * @private
  799. * @return {?}
  800. */
  801. function () {
  802. this.change.emit(new MatRadioChange(this, this._value));
  803. };
  804. /**
  805. * @return {?}
  806. */
  807. MatRadioButton.prototype._isRippleDisabled = /**
  808. * @return {?}
  809. */
  810. function () {
  811. return this.disableRipple || this.disabled;
  812. };
  813. /**
  814. * @param {?} event
  815. * @return {?}
  816. */
  817. MatRadioButton.prototype._onInputClick = /**
  818. * @param {?} event
  819. * @return {?}
  820. */
  821. function (event) {
  822. // We have to stop propagation for click events on the visual hidden input element.
  823. // By default, when a user clicks on a label element, a generated click event will be
  824. // dispatched on the associated input element. Since we are using a label element as our
  825. // root container, the click event on the `radio-button` will be executed twice.
  826. // The real click event will bubble up, and the generated click event also tries to bubble up.
  827. // This will lead to multiple click events.
  828. // Preventing bubbling for the second event will solve that issue.
  829. event.stopPropagation();
  830. };
  831. /**
  832. * Triggered when the radio button received a click or the input recognized any change.
  833. * Clicking on a label element, will trigger a change event on the associated input.
  834. */
  835. /**
  836. * Triggered when the radio button received a click or the input recognized any change.
  837. * Clicking on a label element, will trigger a change event on the associated input.
  838. * @param {?} event
  839. * @return {?}
  840. */
  841. MatRadioButton.prototype._onInputChange = /**
  842. * Triggered when the radio button received a click or the input recognized any change.
  843. * Clicking on a label element, will trigger a change event on the associated input.
  844. * @param {?} event
  845. * @return {?}
  846. */
  847. function (event) {
  848. // We always have to stop propagation on the change event.
  849. // Otherwise the change event, from the input element, will bubble up and
  850. // emit its event object to the `change` output.
  851. event.stopPropagation();
  852. /** @type {?} */
  853. var groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
  854. this.checked = true;
  855. this._emitChangeEvent();
  856. if (this.radioGroup) {
  857. this.radioGroup._controlValueAccessorChangeFn(this.value);
  858. if (groupValueChanged) {
  859. this.radioGroup._emitChangeEvent();
  860. }
  861. }
  862. };
  863. MatRadioButton.decorators = [
  864. { type: Component, args: [{selector: 'mat-radio-button',
  865. 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>",
  866. 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}}"],
  867. inputs: ['disableRipple', 'tabIndex'],
  868. encapsulation: ViewEncapsulation.None,
  869. exportAs: 'matRadioButton',
  870. host: {
  871. 'class': 'mat-radio-button',
  872. '[class.mat-radio-checked]': 'checked',
  873. '[class.mat-radio-disabled]': 'disabled',
  874. '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
  875. '[class.mat-primary]': 'color === "primary"',
  876. '[class.mat-accent]': 'color === "accent"',
  877. '[class.mat-warn]': 'color === "warn"',
  878. // Needs to be -1 so the `focus` event still fires.
  879. '[attr.tabindex]': '-1',
  880. '[attr.id]': 'id',
  881. // Note: under normal conditions focus shouldn't land on this element, however it may be
  882. // programmatically set, for example inside of a focus trap, in this case we want to forward
  883. // the focus to the native element.
  884. '(focus)': '_inputElement.nativeElement.focus()',
  885. },
  886. changeDetection: ChangeDetectionStrategy.OnPush,
  887. },] },
  888. ];
  889. /** @nocollapse */
  890. MatRadioButton.ctorParameters = function () { return [
  891. { type: MatRadioGroup, decorators: [{ type: Optional }] },
  892. { type: ElementRef },
  893. { type: ChangeDetectorRef },
  894. { type: FocusMonitor },
  895. { type: UniqueSelectionDispatcher },
  896. { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] },
  897. { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MAT_RADIO_DEFAULT_OPTIONS,] }] }
  898. ]; };
  899. MatRadioButton.propDecorators = {
  900. id: [{ type: Input }],
  901. name: [{ type: Input }],
  902. ariaLabel: [{ type: Input, args: ['aria-label',] }],
  903. ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
  904. ariaDescribedby: [{ type: Input, args: ['aria-describedby',] }],
  905. checked: [{ type: Input }],
  906. value: [{ type: Input }],
  907. labelPosition: [{ type: Input }],
  908. disabled: [{ type: Input }],
  909. required: [{ type: Input }],
  910. color: [{ type: Input }],
  911. change: [{ type: Output }],
  912. _inputElement: [{ type: ViewChild, args: ['input', { static: false },] }]
  913. };
  914. return MatRadioButton;
  915. }(_MatRadioButtonMixinBase));
  916. /**
  917. * @fileoverview added by tsickle
  918. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  919. */
  920. var MatRadioModule = /** @class */ (function () {
  921. function MatRadioModule() {
  922. }
  923. MatRadioModule.decorators = [
  924. { type: NgModule, args: [{
  925. imports: [CommonModule, MatRippleModule, MatCommonModule],
  926. exports: [MatRadioGroup, MatRadioButton, MatCommonModule],
  927. declarations: [MatRadioGroup, MatRadioButton],
  928. },] },
  929. ];
  930. return MatRadioModule;
  931. }());
  932. /**
  933. * @fileoverview added by tsickle
  934. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  935. */
  936. /**
  937. * @fileoverview added by tsickle
  938. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  939. */
  940. export { MatRadioModule, MAT_RADIO_DEFAULT_OPTIONS_FACTORY, MAT_RADIO_DEFAULT_OPTIONS, MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, MatRadioChange, MatRadioGroup, MatRadioButton };
  941. //# sourceMappingURL=radio.es5.js.map