radio-group.js 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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. export class RadioGroup {
  57. constructor(_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. /**
  84. * @input {boolean} If true, the user cannot interact with any of the buttons in the group.
  85. */
  86. get disabled() {
  87. return this._disabled;
  88. }
  89. set disabled(val) {
  90. this._disabled = isTrueProperty(val);
  91. }
  92. /**
  93. * @hidden
  94. */
  95. ngAfterContentInit() {
  96. let activeButton = this._btns.find(b => b.checked);
  97. if (activeButton) {
  98. this._setActive(activeButton);
  99. }
  100. }
  101. /**
  102. * @hidden
  103. */
  104. writeValue(val) {
  105. (void 0) /* console.debug */;
  106. this.value = val;
  107. if (this._init) {
  108. this._update();
  109. this.onTouched();
  110. this.ionChange.emit(val);
  111. }
  112. this._init = true;
  113. }
  114. /**
  115. * @hidden
  116. */
  117. registerOnChange(fn) {
  118. this._fn = fn;
  119. this.onChange = (val) => {
  120. // onChange used when there's an formControlName
  121. (void 0) /* console.debug */;
  122. fn(val);
  123. this.value = val;
  124. this._update();
  125. this.onTouched();
  126. this.ionChange.emit(val);
  127. };
  128. }
  129. /**
  130. * @hidden
  131. */
  132. registerOnTouched(fn) { this.onTouched = fn; }
  133. /**
  134. * @hidden
  135. */
  136. _update() {
  137. // loop through each of the radiobuttons
  138. let hasChecked = false;
  139. this._btns.forEach(radioButton => {
  140. // check this radiobutton if its value is
  141. // the same as the radiogroups value
  142. radioButton.checked = isCheckedProperty(this.value, radioButton.value) && !hasChecked;
  143. if (radioButton.checked) {
  144. // if this button is checked, then set it as
  145. // the radiogroup's active descendant
  146. this._setActive(radioButton);
  147. hasChecked = true;
  148. }
  149. });
  150. }
  151. /**
  152. * @hidden
  153. */
  154. _setActive(radioButton) {
  155. this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', radioButton.id);
  156. }
  157. /**
  158. * @hidden
  159. */
  160. add(button) {
  161. this._btns.push(button);
  162. // listen for radiobutton select events
  163. button.ionSelect.subscribe((val) => {
  164. // this radiobutton has been selected
  165. this.onChange(val);
  166. });
  167. return this.id + '-' + (++this._ids);
  168. }
  169. /**
  170. * @hidden
  171. */
  172. remove(button) {
  173. let index = this._btns.indexOf(button);
  174. if (index > -1) {
  175. if (button.value === this.value) {
  176. this.value = null;
  177. }
  178. this._btns.splice(index, 1);
  179. }
  180. }
  181. /**
  182. * @hidden
  183. */
  184. set _header(header) {
  185. if (header) {
  186. if (!header.id) {
  187. header.id = 'rg-hdr-' + this.id;
  188. }
  189. this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
  190. }
  191. }
  192. /**
  193. * @hidden
  194. */
  195. onChange(val) {
  196. // onChange used when there is not an formControlName
  197. (void 0) /* console.debug */;
  198. this.value = val;
  199. this._update();
  200. this.onTouched();
  201. this.ionChange.emit(val);
  202. this._cd.detectChanges();
  203. }
  204. /**
  205. * @hidden
  206. */
  207. onTouched() { }
  208. /**
  209. * @hidden
  210. */
  211. setDisabledState(isDisabled) {
  212. this.disabled = isDisabled;
  213. }
  214. }
  215. RadioGroup.decorators = [
  216. { type: Directive, args: [{
  217. selector: '[radio-group]',
  218. host: {
  219. 'role': 'radiogroup'
  220. },
  221. providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioGroup, multi: true }],
  222. },] },
  223. ];
  224. /** @nocollapse */
  225. RadioGroup.ctorParameters = () => [
  226. { type: Renderer, },
  227. { type: ElementRef, },
  228. { type: ChangeDetectorRef, },
  229. ];
  230. RadioGroup.propDecorators = {
  231. 'disabled': [{ type: Input },],
  232. 'ionChange': [{ type: Output },],
  233. '_header': [{ type: ContentChild, args: [ListHeader,] },],
  234. };
  235. let radioGroupIds = -1;
  236. //# sourceMappingURL=radio-group.js.map