@blackbaud/skyux
Version:
SKY UX built on Angular 2
99 lines • 4.87 kB
JavaScript
import { Component, forwardRef, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/**
* Monotonically increasing integer used to auto-generate unique ids for checkbox components.
*/
var nextId = 0;
/**
* Provider Expression that allows sky-checkbox to register as a ControlValueAccessor.
* This allows it to support [(ngModel)].
*/
// tslint:disable no-forward-ref
export var SKY_RADIO_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return SkyRadioComponent; }),
multi: true
};
// tslint:enable
var SkyRadioComponent = (function () {
function SkyRadioComponent() {
/**
* Hidden label for screen readers.
*/
this.label = '';
this.id = "sky-radio-" + ++nextId;
this.disabled = false;
this.tabindex = 0;
/** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
/*istanbul ignore next */
this.onTouched = function () { };
/* istanbul ignore next */
this._controlValueAccessorChangeFn = function (value) { };
}
Object.defineProperty(SkyRadioComponent.prototype, "inputId", {
get: function () {
return "input-" + this.id;
},
enumerable: true,
configurable: true
});
/**
* Implemented as part of ControlValueAccessor.
*/
SkyRadioComponent.prototype.writeValue = function (value) {
this.selectedValue = value;
};
/**
* Implemented as part of ControlValueAccessor.
*/
SkyRadioComponent.prototype.registerOnChange = function (fn) {
this._controlValueAccessorChangeFn = fn;
};
/**
* Implemented as part of ControlValueAccessor.
*/
SkyRadioComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
SkyRadioComponent.prototype.onInputBlur = function () {
this.onTouched();
};
/**
* Event handler for checkbox input element.
* Toggles checked state if element is not disabled.
*/
SkyRadioComponent.prototype.onRadioChanged = function (newValue) {
/* istanbul ignore else */
/* sanity check */
if (!this.disabled) {
/* istanbul ignore else */
/* sanity check */
if (newValue !== this.selectedValue) {
this.selectedValue = newValue;
this._controlValueAccessorChangeFn(newValue);
}
}
};
return SkyRadioComponent;
}());
export { SkyRadioComponent };
SkyRadioComponent.decorators = [
{ type: Component, args: [{
selector: 'sky-radio',
template: "<label class=\"sky-radio-wrapper\">\n <input type=\"radio\"\n [id]=\"inputId\"\n [ngModel]=\"selectedValue\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"labelledBy\"\n (blur)=\"onInputBlur()\"\n (ngModelChange)=\"onRadioChanged($event)\"/>\n <span class=\"sky-radio\"></span>\n <ng-content select=\"sky-radio-label\"></ng-content>\n</label>\n",
styles: [".sky-radio-wrapper{display:inline-block;margin-bottom:5px;cursor:pointer}.sky-radio-wrapper input{opacity:0;position:absolute;height:22px;width:22px;margin:0;padding:0;cursor:pointer}.sky-radio{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;display:inline-block;height:22px;margin:0;padding:0;vertical-align:middle;width:22px;text-align:center;font-size:15px;border-radius:50%;line-height:19px}.sky-radio-wrapper input:hover+.sky-radio{border:2px solid #007ca6}.sky-radio-wrapper input:checked+.sky-radio{background-color:#007ca6;border-color:#007ca6;border-width:1px}.sky-radio-wrapper input:checked+.sky-radio:before{color:#fff;content:\"\\f00c\";font-family:FontAwesome;font-size:13px}.sky-radio-wrapper input:disabled+.sky-radio{background-color:#eeeeef;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;cursor:default}.sky-radio-wrapper input:focus+.sky-radio{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}\n"],
providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR]
},] },
];
/** @nocollapse */
SkyRadioComponent.ctorParameters = function () { return []; };
SkyRadioComponent.propDecorators = {
'label': [{ type: Input },],
'labelledBy': [{ type: Input },],
'id': [{ type: Input },],
'disabled': [{ type: Input },],
'tabindex': [{ type: Input },],
'name': [{ type: Input },],
'value': [{ type: Input },],
};
//# sourceMappingURL=radio.component.js.map