radio-button.js 8.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. import { Component, ElementRef, EventEmitter, HostListener, Input, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
  12. import { Config } from '../../config/config';
  13. import { Form } from '../../util/form';
  14. import { Ion } from '../ion';
  15. import { isBlank, isCheckedProperty, isPresent, isTrueProperty } from '../../util/util';
  16. import { Item } from '../item/item';
  17. import { RadioGroup } from './radio-group';
  18. /**
  19. * @description
  20. * A radio button is a button that can be either checked or unchecked. A user can tap
  21. * the button to check or uncheck it. It can also be checked from the template using
  22. * the `checked` property.
  23. *
  24. * Use an element with a `radio-group` attribute to group a set of radio buttons. When
  25. * radio buttons are inside a [radio group](../RadioGroup), exactly one radio button
  26. * in the group can be checked at any time. If a radio button is not placed in a group,
  27. * they will all have the ability to be checked at the same time.
  28. *
  29. * See the [Angular Forms Docs](https://angular.io/docs/ts/latest/guide/forms.html) for
  30. * more information on forms and input.
  31. *
  32. * @usage
  33. * ```html
  34. * <ion-list radio-group [(ngModel)]="relationship">
  35. * <ion-item>
  36. * <ion-label>Friends</ion-label>
  37. * <ion-radio value="friends" checked></ion-radio>
  38. * </ion-item>
  39. * <ion-item>
  40. * <ion-label>Family</ion-label>
  41. * <ion-radio value="family"></ion-radio>
  42. * </ion-item>
  43. * <ion-item>
  44. * <ion-label>Enemies</ion-label>
  45. * <ion-radio value="enemies" [disabled]="isDisabled"></ion-radio>
  46. * </ion-item>
  47. * </ion-list>
  48. * ```
  49. * @demo /docs/demos/src/radio/
  50. * @see {@link /docs/components#radio Radio Component Docs}
  51. * @see {@link ../RadioGroup RadioGroup API Docs}
  52. */
  53. var RadioButton = (function (_super) {
  54. __extends(RadioButton, _super);
  55. function RadioButton(_form, config, elementRef, renderer, _item, _group) {
  56. var _this = _super.call(this, config, elementRef, renderer, 'radio') || this;
  57. _this._form = _form;
  58. _this._item = _item;
  59. _this._group = _group;
  60. /**
  61. * @internal
  62. */
  63. _this._checked = false;
  64. /**
  65. * @internal
  66. */
  67. _this._disabled = false;
  68. /**
  69. * @internal
  70. */
  71. _this._value = null;
  72. /**
  73. * @output {any} Emitted when the radio button is selected.
  74. */
  75. _this.ionSelect = new EventEmitter();
  76. _form.register(_this);
  77. if (_group) {
  78. // register with the radiogroup
  79. _this.id = 'rb-' + _group.add(_this);
  80. }
  81. if (_item) {
  82. // register the input inside of the item
  83. // reset to the item's id instead of the radiogroup id
  84. _this.id = 'rb-' + _item.registerInput('radio');
  85. _this._labelId = 'lbl-' + _item.id;
  86. _this._item.setElementClass('item-radio', true);
  87. }
  88. return _this;
  89. }
  90. Object.defineProperty(RadioButton.prototype, "color", {
  91. /**
  92. * @input {string} The color to use from your Sass `$colors` map.
  93. * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
  94. * For more information, see [Theming your App](/docs/theming/theming-your-app).
  95. */
  96. set: function (val) {
  97. this._setColor(val);
  98. if (this._item) {
  99. this._item._updateColor(val, 'item-radio');
  100. }
  101. },
  102. enumerable: true,
  103. configurable: true
  104. });
  105. Object.defineProperty(RadioButton.prototype, "value", {
  106. /**
  107. * @input {any} The value of the radio button. Defaults to the generated id.
  108. */
  109. get: function () {
  110. // if the value is not defined then use it's unique id
  111. return isBlank(this._value) ? this.id : this._value;
  112. },
  113. set: function (val) {
  114. this._value = val;
  115. },
  116. enumerable: true,
  117. configurable: true
  118. });
  119. Object.defineProperty(RadioButton.prototype, "checked", {
  120. /**
  121. * @input {boolean} If true, the element is selected, and other buttons in the group are unselected.
  122. */
  123. get: function () {
  124. return this._checked;
  125. },
  126. set: function (val) {
  127. this._checked = isTrueProperty(val);
  128. if (this._item) {
  129. this._item.setElementClass('item-radio-checked', this._checked);
  130. }
  131. },
  132. enumerable: true,
  133. configurable: true
  134. });
  135. Object.defineProperty(RadioButton.prototype, "disabled", {
  136. /**
  137. * @input {boolean} If true, the user cannot interact with this element.
  138. */
  139. get: function () {
  140. return this._disabled || (this._group != null && this._group.disabled);
  141. },
  142. set: function (val) {
  143. this._disabled = isTrueProperty(val);
  144. this._item && this._item.setElementClass('item-radio-disabled', this._disabled);
  145. },
  146. enumerable: true,
  147. configurable: true
  148. });
  149. /**
  150. * @hidden
  151. */
  152. RadioButton.prototype.initFocus = function () {
  153. this._elementRef.nativeElement.querySelector('button').focus();
  154. };
  155. /**
  156. * @internal
  157. */
  158. RadioButton.prototype._click = function (ev) {
  159. (void 0) /* console.debug */;
  160. ev.preventDefault();
  161. ev.stopPropagation();
  162. this.checked = true;
  163. this.ionSelect.emit(this.value);
  164. };
  165. /**
  166. * @internal
  167. */
  168. RadioButton.prototype.ngOnInit = function () {
  169. if (this._group && isPresent(this._group.value)) {
  170. this.checked = isCheckedProperty(this._group.value, this.value);
  171. }
  172. if (this._group && this._group.disabled) {
  173. this.disabled = this._group.disabled;
  174. }
  175. };
  176. /**
  177. * @internal
  178. */
  179. RadioButton.prototype.ngOnDestroy = function () {
  180. this._form.deregister(this);
  181. this._group && this._group.remove(this);
  182. };
  183. RadioButton.decorators = [
  184. { type: Component, args: [{
  185. selector: 'ion-radio',
  186. template: '<div class="radio-icon" [class.radio-checked]="_checked"> ' +
  187. '<div class="radio-inner"></div> ' +
  188. '</div> ' +
  189. '<button role="radio" ' +
  190. 'type="button" ' +
  191. 'ion-button="item-cover" ' +
  192. '[id]="id" ' +
  193. '[attr.aria-checked]="_checked" ' +
  194. '[attr.aria-labelledby]="_labelId" ' +
  195. '[attr.aria-disabled]="_disabled" ' +
  196. 'class="item-cover"> ' +
  197. '</button>',
  198. host: {
  199. '[class.radio-disabled]': '_disabled'
  200. },
  201. encapsulation: ViewEncapsulation.None,
  202. },] },
  203. ];
  204. /** @nocollapse */
  205. RadioButton.ctorParameters = function () { return [
  206. { type: Form, },
  207. { type: Config, },
  208. { type: ElementRef, },
  209. { type: Renderer, },
  210. { type: Item, decorators: [{ type: Optional },] },
  211. { type: RadioGroup, decorators: [{ type: Optional },] },
  212. ]; };
  213. RadioButton.propDecorators = {
  214. 'color': [{ type: Input },],
  215. 'ionSelect': [{ type: Output },],
  216. 'value': [{ type: Input },],
  217. 'checked': [{ type: Input },],
  218. 'disabled': [{ type: Input },],
  219. '_click': [{ type: HostListener, args: ['click', ['$event'],] },],
  220. };
  221. return RadioButton;
  222. }(Ion));
  223. export { RadioButton };
  224. //# sourceMappingURL=radio-button.js.map