123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. (function (factory) {
  2. if (typeof module === "object" && typeof module.exports === "object") {
  3. var v = factory(require, exports);
  4. if (v !== undefined) module.exports = v;
  5. }
  6. else if (typeof define === "function" && define.amd) {
  7. define(["require", "exports", "@angular/core", "@angular/forms", "../list/list-header", "../../util/util"], factory);
  8. }
  9. })(function (require, exports) {
  10. "use strict";
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var forms_1 = require("@angular/forms");
  14. var list_header_1 = require("../list/list-header");
  15. var util_1 = require("../../util/util");
  16. /**
  17. * @name RadioGroup
  18. * @description
  19. * A radio group is a group of [radio buttons](../RadioButton). It allows
  20. * a user to select at most one radio button from a set. Checking one radio
  21. * button that belongs to a radio group unchecks any previous checked
  22. * radio button within the same group.
  23. *
  24. * See the [Angular Forms Docs](https://angular.io/docs/ts/latest/guide/forms.html)
  25. * for more information on forms and inputs.
  26. *
  27. * @usage
  28. * ```html
  29. * <ion-list radio-group [(ngModel)]="autoManufacturers">
  30. *
  31. * <ion-list-header>
  32. * Auto Manufacturers
  33. * </ion-list-header>
  34. *
  35. * <ion-item>
  36. * <ion-label>Cord</ion-label>
  37. * <ion-radio value="cord"></ion-radio>
  38. * </ion-item>
  39. *
  40. * <ion-item>
  41. * <ion-label>Duesenberg</ion-label>
  42. * <ion-radio value="duesenberg"></ion-radio>
  43. * </ion-item>
  44. *
  45. * <ion-item>
  46. * <ion-label>Hudson</ion-label>
  47. * <ion-radio value="hudson"></ion-radio>
  48. * </ion-item>
  49. *
  50. * <ion-item>
  51. * <ion-label>Packard</ion-label>
  52. * <ion-radio value="packard"></ion-radio>
  53. * </ion-item>
  54. *
  55. * <ion-item>
  56. * <ion-label>Studebaker</ion-label>
  57. * <ion-radio value="studebaker"></ion-radio>
  58. * </ion-item>
  59. *
  60. * </ion-list>
  61. * ```
  62. *
  63. * @demo /docs/demos/src/radio/
  64. * @see {@link /docs/components#radio Radio Component Docs}
  65. * @see {@link ../RadioButton RadioButton API Docs}
  66. */
  67. var RadioGroup = (function () {
  68. function RadioGroup(_renderer, _elementRef, _cd) {
  69. this._renderer = _renderer;
  70. this._elementRef = _elementRef;
  71. this._cd = _cd;
  72. /**
  73. * @internal
  74. */
  75. this._disabled = false;
  76. /**
  77. * @hidden
  78. */
  79. this._btns = [];
  80. /**
  81. * @hidden
  82. */
  83. this._ids = -1;
  84. /**
  85. * @hidden
  86. */
  87. this._init = false;
  88. /**
  89. * @output {any} Emitted when the selected button has changed.
  90. */
  91. this.ionChange = new core_1.EventEmitter();
  92. this.id = ++radioGroupIds;
  93. }
  94. Object.defineProperty(RadioGroup.prototype, "disabled", {
  95. /**
  96. * @input {boolean} If true, the user cannot interact with any of the buttons in the group.
  97. */
  98. get: function () {
  99. return this._disabled;
  100. },
  101. set: function (val) {
  102. this._disabled = util_1.isTrueProperty(val);
  103. },
  104. enumerable: true,
  105. configurable: true
  106. });
  107. /**
  108. * @hidden
  109. */
  110. RadioGroup.prototype.ngAfterContentInit = function () {
  111. var activeButton = this._btns.find(function (b) { return b.checked; });
  112. if (activeButton) {
  113. this._setActive(activeButton);
  114. }
  115. };
  116. /**
  117. * @hidden
  118. */
  119. RadioGroup.prototype.writeValue = function (val) {
  120. (void 0) /* console.debug */;
  121. this.value = val;
  122. if (this._init) {
  123. this._update();
  124. this.onTouched();
  125. this.ionChange.emit(val);
  126. }
  127. this._init = true;
  128. };
  129. /**
  130. * @hidden
  131. */
  132. RadioGroup.prototype.registerOnChange = function (fn) {
  133. var _this = this;
  134. this._fn = fn;
  135. this.onChange = function (val) {
  136. // onChange used when there's an formControlName
  137. (void 0) /* console.debug */;
  138. fn(val);
  139. _this.value = val;
  140. _this._update();
  141. _this.onTouched();
  142. _this.ionChange.emit(val);
  143. };
  144. };
  145. /**
  146. * @hidden
  147. */
  148. RadioGroup.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
  149. /**
  150. * @hidden
  151. */
  152. RadioGroup.prototype._update = function () {
  153. var _this = this;
  154. // loop through each of the radiobuttons
  155. var hasChecked = false;
  156. this._btns.forEach(function (radioButton) {
  157. // check this radiobutton if its value is
  158. // the same as the radiogroups value
  159. radioButton.checked = util_1.isCheckedProperty(_this.value, radioButton.value) && !hasChecked;
  160. if (radioButton.checked) {
  161. // if this button is checked, then set it as
  162. // the radiogroup's active descendant
  163. _this._setActive(radioButton);
  164. hasChecked = true;
  165. }
  166. });
  167. };
  168. /**
  169. * @hidden
  170. */
  171. RadioGroup.prototype._setActive = function (radioButton) {
  172. this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', radioButton.id);
  173. };
  174. /**
  175. * @hidden
  176. */
  177. RadioGroup.prototype.add = function (button) {
  178. var _this = this;
  179. this._btns.push(button);
  180. // listen for radiobutton select events
  181. button.ionSelect.subscribe(function (val) {
  182. // this radiobutton has been selected
  183. _this.onChange(val);
  184. });
  185. return this.id + '-' + (++this._ids);
  186. };
  187. /**
  188. * @hidden
  189. */
  190. RadioGroup.prototype.remove = function (button) {
  191. var index = this._btns.indexOf(button);
  192. if (index > -1) {
  193. if (button.value === this.value) {
  194. this.value = null;
  195. }
  196. this._btns.splice(index, 1);
  197. }
  198. };
  199. Object.defineProperty(RadioGroup.prototype, "_header", {
  200. /**
  201. * @hidden
  202. */
  203. set: function (header) {
  204. if (header) {
  205. if (!header.id) {
  206. header.id = 'rg-hdr-' + this.id;
  207. }
  208. this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
  209. }
  210. },
  211. enumerable: true,
  212. configurable: true
  213. });
  214. /**
  215. * @hidden
  216. */
  217. RadioGroup.prototype.onChange = function (val) {
  218. // onChange used when there is not an formControlName
  219. (void 0) /* console.debug */;
  220. this.value = val;
  221. this._update();
  222. this.onTouched();
  223. this.ionChange.emit(val);
  224. this._cd.detectChanges();
  225. };
  226. /**
  227. * @hidden
  228. */
  229. RadioGroup.prototype.onTouched = function () { };
  230. /**
  231. * @hidden
  232. */
  233. RadioGroup.prototype.setDisabledState = function (isDisabled) {
  234. this.disabled = isDisabled;
  235. };
  236. RadioGroup.decorators = [
  237. { type: core_1.Directive, args: [{
  238. selector: '[radio-group]',
  239. host: {
  240. 'role': 'radiogroup'
  241. },
  242. providers: [{ provide: forms_1.NG_VALUE_ACCESSOR, useExisting: RadioGroup, multi: true }],
  243. },] },
  244. ];
  245. /** @nocollapse */
  246. RadioGroup.ctorParameters = function () { return [
  247. { type: core_1.Renderer, },
  248. { type: core_1.ElementRef, },
  249. { type: core_1.ChangeDetectorRef, },
  250. ]; };
  251. RadioGroup.propDecorators = {
  252. 'disabled': [{ type: core_1.Input },],
  253. 'ionChange': [{ type: core_1.Output },],
  254. '_header': [{ type: core_1.ContentChild, args: [list_header_1.ListHeader,] },],
  255. };
  256. return RadioGroup;
  257. }());
  258. exports.RadioGroup = RadioGroup;
  259. var radioGroupIds = -1;
  260. });
  261. //# sourceMappingURL=radio-group.js.map