carbon-components-angular
Version:
Next generation components
344 lines (341 loc) • 11.7 kB
JavaScript
/*!
*
* Neutrino v0.0.0 | radio-group.component.js
*
* Copyright 2014, 2018 IBM
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ChangeDetectorRef, ContentChildren, Component, ElementRef, EventEmitter, forwardRef, Input, Output, QueryList, Renderer2, HostBinding } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { Radio } from "./radio.component";
/**
* Used to emit changes performed on a `Radio`.
* @export
* @class RadioChange
*/
var RadioChange = /** @class */ (function () {
function RadioChange() {
}
return RadioChange;
}());
export { RadioChange };
/**
* class: RadioGroup
*
* selector: `ibm-radio-group`
*
* source: `src/forms/radio.component.ts`
*
*
* Ex:
* ```html
* <ibm-radio-group [(ngModel)]="radio">
* <ibm-radio *ngFor="let one of manyRadios" [value]="one">
* Radio {{one}}
* </ibm-radio>
* </ibm-radio-group>
*
* Radio selected: {{radio}}
* ```
*
* ```typescript
* manyRadios = ["one", "two", "three", "four", "five", "six"];
* ```
*
* Also see: [`Radio`](#ibm-radio)
*
*/
var RadioGroup = /** @class */ (function () {
/**
* Creates an instance of RadioGroup.
*/
function RadioGroup(changeDetectorRef, elementRef, renderer) {
this.changeDetectorRef = changeDetectorRef;
this.elementRef = elementRef;
this.renderer = renderer;
/**
* Emits event notifying other classes of a change using a `RadioChange` class.
* @type {EventEmitter<RadioChange>}
*/
this.change = new EventEmitter();
/**
* Determines the render size of the `Radio` inputs within the group.
*/
this.size = "md";
/**
* Binds 'radiogroup' value to the role attribute for `RadioGroup`.
*/
this.role = "radiogroup";
/**
* Binds 'bx--radio-button-group' value to the class for `RadioGroup`.
*/
this.radioButtonGroupClass = true;
/**
* To track whether the `RadioGroup` has been initialized.
*/
this.isInitialized = false;
/**
* Reflects whether or not the input is disabled and cannot be selected.
*/
this._disabled = false;
/**
* The value of the selected option within the `RadioGroup`.
*/
this._value = null;
/**
* The `Radio` within the `RadioGroup` that is selected.
*/
this._selected = null;
/**
* The name attribute associated with the `RadioGroup`.
*/
this._name = "radio-group-" + RadioGroup.radioGroupCount;
/**
* Needed to properly implement ControlValueAccessor.
*/
this.onTouched = function () { };
/**
* Method set in registerOnChange to propagate changes back to the form.
*/
this.propagateChange = function (_) { };
RadioGroup.radioGroupCount++;
}
Object.defineProperty(RadioGroup.prototype, "selected", {
/**
* Returns the `Radio` that is selected within the `RadioGroup`.
* @readonly
*/
get: function () {
return this._selected;
},
/**
* Sets the passed in `Radio` item as the selected input within the `RadioGroup`.
*/
set: function (selected) {
this._selected = selected;
this.value = selected ? selected.value : null;
this.checkSelectedRadio();
},
enumerable: true,
configurable: true
});
Object.defineProperty(RadioGroup.prototype, "value", {
/**
* Returns the value/state of the selected `Radio` within the `RadioGroup`.
*/
get: function () {
return this._value;
},
/**
* Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.
*/
set: function (newValue) {
if (this._value !== newValue) {
this._value = newValue;
this.updateSelectedRadioFromValue();
this.checkSelectedRadio();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(RadioGroup.prototype, "name", {
/**
* Returns the associated name of the `RadioGroup`.
*/
get: function () {
return this._name;
},
/**
* Replaces the name associated with the `RadioGroup` with the provided parameter.
*/
set: function (name) {
this._name = name;
this.updateRadioNames();
},
enumerable: true,
configurable: true
});
Object.defineProperty(RadioGroup.prototype, "disabled", {
/**
* Returns the disabled value in the `RadioGroup` if there is one.
*/
get: function () {
return this._disabled;
},
/**
* Updates the disabled value using the provided parameter and marks the radios to be checked for
* changes.
*/
set: function (value) {
this._disabled = value;
this.markRadiosForCheck();
},
enumerable: true,
configurable: true
});
/**
* Updates the selected `Radio` to be checked (selected).
*/
RadioGroup.prototype.checkSelectedRadio = function () {
if (this._selected && !this._selected.checked) {
this._selected.checked = true;
}
};
/**
* Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).
*/
RadioGroup.prototype.updateSelectedRadioFromValue = function () {
var _this = this;
var alreadySelected = this._selected != null && this._selected.value === this._value;
if (this.radios != null && !alreadySelected) {
this._selected = null;
this.radios.forEach(function (radio) {
radio.checked = _this.value === radio.value;
if (radio.checked) {
_this._selected = radio;
}
});
}
};
/**
* Creates a class of `RadioChange` to emit the change in the `RadioGroup`.
*/
RadioGroup.prototype.emitChangeEvent = function () {
if (this.isInitialized) {
var event_1 = new RadioChange();
event_1.source = this._selected;
event_1.value = this._value;
this.change.emit(event_1);
}
};
/**
* Calls the `markForCheck()` function within the `changeDetectorRef` class
* to trigger Angular's change detection on each radio item.
*/
RadioGroup.prototype.markRadiosForCheck = function () {
if (this.radios) {
this.radios.forEach(function (radio) { return radio.markForCheck(); });
}
};
/**
* Synchronizes the names of the radio items with the name of the `RadioGroup`.
*/
RadioGroup.prototype.updateRadioNames = function () {
var _this = this;
if (this.radios) {
this.radios.forEach(function (radio) { return radio.name = _this.name; });
}
};
/**
* Updates the value of the `RadioGroup` using the provided parameter.
*/
RadioGroup.prototype.writeValue = function (value) {
this.value = value;
this.changeDetectorRef.markForCheck();
};
/**
* Callback triggered when a `Radio` within the `RadioGroup` is changed.
*/
RadioGroup.prototype.touch = function () {
if (this.onTouched) {
this.onTouched();
}
};
/**
* Builds variant class on the radio items within the `RadioGroup`.
*/
RadioGroup.prototype.ngOnInit = function () {
// Build variant class
var className = "radio" + (this.size !== "md" ? "--" + this.size : "");
// Add class to host element
this.renderer.addClass(this.elementRef.nativeElement, className);
};
/**
* Marks this component as initialized to avoid the initial value getting set by `NgModel` on `RadioGroup`.
* This avoids `NgModel` setting the initial value before the OnInit of the `RadioGroup`.
*/
RadioGroup.prototype.ngAfterContentInit = function () {
var _this = this;
// Mark this component as initialized in AfterContentInit because the initial value can
// possibly be set by NgModel on RadioGroup, and it is possible that the OnInit of the
// NgModel occurs *after* the OnInit of the RadioGroup.
this.isInitialized = true;
this.updateFocusableRadio();
this.radios.changes.subscribe(function (updatedRadios) {
_this.radios = updatedRadios;
_this.updateFocusableRadio();
});
};
RadioGroup.prototype.updateFocusableRadio = function () {
if (this.radios && !this.radios.some(function (radio) { return radio.checked; })) {
this.radios.forEach(function (radio) { return radio.needsToBeFocusable = false; });
this.radios.first.needsToBeFocusable = true;
this.radios.forEach(function (radio) { return radio.changeDetectorRef.detectChanges(); });
}
};
/**
* Used to set method to propagate changes back to the form.
*/
RadioGroup.prototype.registerOnChange = function (fn) {
var _this = this;
this.propagateChange = function (value) {
_this.value = value;
fn(value);
};
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the checkbox is touched.
*/
RadioGroup.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
/**
* Used for creating the `RadioGroup` 'name' property dynamically.
*/
RadioGroup.radioGroupCount = 0;
RadioGroup.decorators = [
{ type: Component, args: [{
selector: "ibm-radio-group",
template: "<ng-content></ng-content>",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: RadioGroup,
multi: true
}
]
},] },
];
/** @nocollapse */
RadioGroup.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: Renderer2 }
]; };
RadioGroup.propDecorators = {
change: [{ type: Output }],
radios: [{ type: ContentChildren, args: [forwardRef(function () { return Radio; }),] }],
size: [{ type: Input }],
selected: [{ type: Input }],
value: [{ type: Input }],
name: [{ type: Input }],
disabled: [{ type: Input }],
role: [{ type: HostBinding, args: ["attr.role",] }],
radioButtonGroupClass: [{ type: HostBinding, args: ["class.bx--radio-button-group",] }]
};
return RadioGroup;
}());
export { RadioGroup };
//# sourceMappingURL=radio-group.component.js.map