| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261 |
- (function (factory) {
- if (typeof module === "object" && typeof module.exports === "object") {
- var v = factory(require, exports);
- if (v !== undefined) module.exports = v;
- }
- else if (typeof define === "function" && define.amd) {
- define(["require", "exports", "@angular/core", "@angular/forms", "../list/list-header", "../../util/util"], factory);
- }
- })(function (require, exports) {
- "use strict";
- Object.defineProperty(exports, "__esModule", { value: true });
- var core_1 = require("@angular/core");
- var forms_1 = require("@angular/forms");
- var list_header_1 = require("../list/list-header");
- var util_1 = require("../../util/util");
- /**
- * @name RadioGroup
- * @description
- * A radio group is a group of [radio buttons](../RadioButton). It allows
- * a user to select at most one radio button from a set. Checking one radio
- * button that belongs to a radio group unchecks any previous checked
- * radio button within the same group.
- *
- * See the [Angular Forms Docs](https://angular.io/docs/ts/latest/guide/forms.html)
- * for more information on forms and inputs.
- *
- * @usage
- * ```html
- * <ion-list radio-group [(ngModel)]="autoManufacturers">
- *
- * <ion-list-header>
- * Auto Manufacturers
- * </ion-list-header>
- *
- * <ion-item>
- * <ion-label>Cord</ion-label>
- * <ion-radio value="cord"></ion-radio>
- * </ion-item>
- *
- * <ion-item>
- * <ion-label>Duesenberg</ion-label>
- * <ion-radio value="duesenberg"></ion-radio>
- * </ion-item>
- *
- * <ion-item>
- * <ion-label>Hudson</ion-label>
- * <ion-radio value="hudson"></ion-radio>
- * </ion-item>
- *
- * <ion-item>
- * <ion-label>Packard</ion-label>
- * <ion-radio value="packard"></ion-radio>
- * </ion-item>
- *
- * <ion-item>
- * <ion-label>Studebaker</ion-label>
- * <ion-radio value="studebaker"></ion-radio>
- * </ion-item>
- *
- * </ion-list>
- * ```
- *
- * @demo /docs/demos/src/radio/
- * @see {@link /docs/components#radio Radio Component Docs}
- * @see {@link ../RadioButton RadioButton API Docs}
- */
- var RadioGroup = (function () {
- function RadioGroup(_renderer, _elementRef, _cd) {
- this._renderer = _renderer;
- this._elementRef = _elementRef;
- this._cd = _cd;
- /**
- * @internal
- */
- this._disabled = false;
- /**
- * @hidden
- */
- this._btns = [];
- /**
- * @hidden
- */
- this._ids = -1;
- /**
- * @hidden
- */
- this._init = false;
- /**
- * @output {any} Emitted when the selected button has changed.
- */
- this.ionChange = new core_1.EventEmitter();
- this.id = ++radioGroupIds;
- }
- Object.defineProperty(RadioGroup.prototype, "disabled", {
- /**
- * @input {boolean} If true, the user cannot interact with any of the buttons in the group.
- */
- get: function () {
- return this._disabled;
- },
- set: function (val) {
- this._disabled = util_1.isTrueProperty(val);
- },
- enumerable: true,
- configurable: true
- });
- /**
- * @hidden
- */
- RadioGroup.prototype.ngAfterContentInit = function () {
- var activeButton = this._btns.find(function (b) { return b.checked; });
- if (activeButton) {
- this._setActive(activeButton);
- }
- };
- /**
- * @hidden
- */
- RadioGroup.prototype.writeValue = function (val) {
- (void 0) /* console.debug */;
- this.value = val;
- if (this._init) {
- this._update();
- this.onTouched();
- this.ionChange.emit(val);
- }
- this._init = true;
- };
- /**
- * @hidden
- */
- RadioGroup.prototype.registerOnChange = function (fn) {
- var _this = this;
- this._fn = fn;
- this.onChange = function (val) {
- // onChange used when there's an formControlName
- (void 0) /* console.debug */;
- fn(val);
- _this.value = val;
- _this._update();
- _this.onTouched();
- _this.ionChange.emit(val);
- };
- };
- /**
- * @hidden
- */
- RadioGroup.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
- /**
- * @hidden
- */
- RadioGroup.prototype._update = function () {
- var _this = this;
- // loop through each of the radiobuttons
- var hasChecked = false;
- this._btns.forEach(function (radioButton) {
- // check this radiobutton if its value is
- // the same as the radiogroups value
- radioButton.checked = util_1.isCheckedProperty(_this.value, radioButton.value) && !hasChecked;
- if (radioButton.checked) {
- // if this button is checked, then set it as
- // the radiogroup's active descendant
- _this._setActive(radioButton);
- hasChecked = true;
- }
- });
- };
- /**
- * @hidden
- */
- RadioGroup.prototype._setActive = function (radioButton) {
- this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', radioButton.id);
- };
- /**
- * @hidden
- */
- RadioGroup.prototype.add = function (button) {
- var _this = this;
- this._btns.push(button);
- // listen for radiobutton select events
- button.ionSelect.subscribe(function (val) {
- // this radiobutton has been selected
- _this.onChange(val);
- });
- return this.id + '-' + (++this._ids);
- };
- /**
- * @hidden
- */
- RadioGroup.prototype.remove = function (button) {
- var index = this._btns.indexOf(button);
- if (index > -1) {
- if (button.value === this.value) {
- this.value = null;
- }
- this._btns.splice(index, 1);
- }
- };
- Object.defineProperty(RadioGroup.prototype, "_header", {
- /**
- * @hidden
- */
- set: function (header) {
- if (header) {
- if (!header.id) {
- header.id = 'rg-hdr-' + this.id;
- }
- this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
- }
- },
- enumerable: true,
- configurable: true
- });
- /**
- * @hidden
- */
- RadioGroup.prototype.onChange = function (val) {
- // onChange used when there is not an formControlName
- (void 0) /* console.debug */;
- this.value = val;
- this._update();
- this.onTouched();
- this.ionChange.emit(val);
- this._cd.detectChanges();
- };
- /**
- * @hidden
- */
- RadioGroup.prototype.onTouched = function () { };
- /**
- * @hidden
- */
- RadioGroup.prototype.setDisabledState = function (isDisabled) {
- this.disabled = isDisabled;
- };
- RadioGroup.decorators = [
- { type: core_1.Directive, args: [{
- selector: '[radio-group]',
- host: {
- 'role': 'radiogroup'
- },
- providers: [{ provide: forms_1.NG_VALUE_ACCESSOR, useExisting: RadioGroup, multi: true }],
- },] },
- ];
- /** @nocollapse */
- RadioGroup.ctorParameters = function () { return [
- { type: core_1.Renderer, },
- { type: core_1.ElementRef, },
- { type: core_1.ChangeDetectorRef, },
- ]; };
- RadioGroup.propDecorators = {
- 'disabled': [{ type: core_1.Input },],
- 'ionChange': [{ type: core_1.Output },],
- '_header': [{ type: core_1.ContentChild, args: [list_header_1.ListHeader,] },],
- };
- return RadioGroup;
- }());
- exports.RadioGroup = RadioGroup;
- var radioGroupIds = -1;
- });
- //# sourceMappingURL=radio-group.js.map
|