radio-group.js 7.2KB

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