carbon-components-angular
Version:
Next generation components
201 lines (198 loc) • 7.15 kB
JavaScript
/*!
*
* Neutrino v0.0.0 | radio.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.
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { ChangeDetectorRef, Component, ElementRef, Input, Optional, Renderer2, HostBinding } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { Checkbox } from "../checkbox/checkbox.component";
import { RadioGroup } from "./radio-group.component";
/**
* class: Radio (extends Checkbox)
*
* selector: `n-radio`
*
* source: `src/forms/radio.component.ts`
*
* ```html
* <ibm-radio [(ngModel)]="radioState">Radio</ibm-radio>
* ```
*
* Also see: [`RadioGroup`](#ibm-radio-group)
*
* @export
* @class Radio
* @extends {Checkbox}
* @implements {OnInit}
*/
var Radio = /** @class */ (function (_super) {
__extends(Radio, _super);
/**
* Creates an instance of Radio.
* @param {RadioGroup} radioGroup
* @param {ChangeDetectorRef} changeDetectorRef
* @param {ElementRef} elementRef
* @param {Renderer2} renderer
* @memberof Radio
*/
function Radio(radioGroup, changeDetectorRef, elementRef, renderer) {
var _this = _super.call(this, changeDetectorRef) || this;
_this.changeDetectorRef = changeDetectorRef;
_this.elementRef = elementRef;
_this.renderer = renderer;
/**
* Binds 'radio' value to the role attribute for `Radio`.
* @memberof Radio
*/
_this.role = "radio";
/**
* The id for the `Radio`.
* @type {string}
* @memberof Radio
*/
_this.id = "radio-" + Radio.radioCount;
/**
* The value of the `Radio`.
* @type {any}
* @memberof Radio
*/
_this._value = null;
Radio.radioCount++;
_this.radioGroup = radioGroup;
return _this;
}
Object.defineProperty(Radio.prototype, "value", {
/**
* Returns the value/state of the `Radio`.
* @readonly
* @type {any}
* @returns {any}
* @memberof Radio
*/
get: function () {
return this._value;
},
/**
* Replaces `@Input value` with the provided parameter supplied from the parent.
* @param {any} value
* @memberof Radio
*/
set: function (value) {
if (this._value !== value) {
this._value = value;
if (this.radioGroup != null) {
if (!this.checked) {
this.checked = this.radioGroup.value === value;
}
if (this.checked) {
this.radioGroup.selected = this;
}
}
}
},
enumerable: true,
configurable: true
});
/**
* If the component has an encompassing `RadioGroup` it synchronizes the name with that
* of the group.
* @memberof Radio
*/
Radio.prototype.ngOnInit = function () {
if (this.radioGroup) {
// if in group check if it needs checked and use group name
this.checked = this.radioGroup.value === this._value;
this.name = this.radioGroup.name;
}
};
/**
* Handles the event of a mouse click on the `Radio`.
* @param {Event} event
* @memberof Radio
*/
Radio.prototype.onClick = function (event) {
event.stopPropagation();
};
/**
* Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
* Emits the changes of both the `RadioGroup` and `Radio`.
* @param {Event} event
* @memberof Radio
*/
Radio.prototype.onChange = function (event) {
event.stopPropagation();
var groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
this.checked = true;
this.emitChangeEvent();
if (this.radioGroup) {
this.radioGroup.propagateChange(this.value);
this.radioGroup.touch();
if (groupValueChanged) {
this.radioGroup.emitChangeEvent();
}
}
};
/**
* Calls the `markForCheck()` function within the `changeDetectorRef` class
* to make sure that Angular's change detection is triggered for the input.
* @memberof Radio
*/
Radio.prototype.markForCheck = function () {
this.changeDetectorRef.markForCheck();
};
/**
* Used to dynamically create unique ids for the `Radio`.
* @static
* @memberof Radio
*/
Radio.radioCount = 0;
Radio.decorators = [
{ type: Component, args: [{
selector: "ibm-radio",
template: "\n\t\t<input\n\t\t\tclass=\"bx--radio-button\"\n\t\t\ttype=\"radio\"\n\t\t\t#inputCheckbox\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[name]=\"name\"\n\t\t\t[id]=\"id\"\n\t\t\t[required]=\"required\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t[tabindex]=\"(checked || needsToBeFocusable ? 0 : -1)\">\n\t\t<label\n\t\t\tclass=\"bx--radio-button__label\"\n\t\t\t[for]=\"id\">\n\t\t\t<span class=\"bx--radio-button__appearance\"></span>\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Radio,
multi: true
}
]
},] },
];
/** @nocollapse */
Radio.ctorParameters = function () { return [
{ type: RadioGroup, decorators: [{ type: Optional }] },
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: Renderer2 }
]; };
Radio.propDecorators = {
value: [{ type: Input }],
role: [{ type: HostBinding, args: ["attr.role",] }]
};
return Radio;
}(Checkbox));
export { Radio };
//# sourceMappingURL=radio.component.js.map