moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
185 lines • 15 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, EventEmitter, Input, Output, Optional, Self } from '@angular/core';
import { AbstractFormControl } from '../../models/abstract-form-control';
import { LabelReplacementTag } from '../../models/error-message.interface';
import { NgControl } from '@angular/forms';
/**
* RadioComponent is a single radio which can be used to have multiple radios
* based on the radio label values.
*
* To display radio in a vertical style use display="table-row-group" by default
* it shows in horizontal or inline display, display='inline-block' You can
* have many radio's and the number is based on the Radio label Value. For 3
* radio buttons, radioLabels value is of type IRadioItems[].
*
* \@example
*
* Reactive Form
* <common-radio name='choice'
* label='Do you live in Canada'
* display='table-row-group'
* [radioLabels]=='[{label: "No", value: false},{label: "Yes", value: true}]'
* FormControlName='choice'>
* </common-radio>
*
* Template Form
* <common-radio name='ageCategory'
* [(ngModel)]="age"
* label='How old are you?'
* display='table-row-group'
* [radioLabels]='[{label: "0-18 years", value: 0},{label: "19 years and older", value: 1}]'>
* </common-radio>
*
* @export
*
* @record
*/
export function IRadioItems() { }
if (false) {
/** @type {?} */
IRadioItems.prototype.label;
/** @type {?} */
IRadioItems.prototype.value;
}
var RadioComponent = /** @class */ (function (_super) {
tslib_1.__extends(RadioComponent, _super);
function RadioComponent(controlDir) {
var _this = _super.call(this) || this;
_this.controlDir = controlDir;
_this._value = '';
_this._defaultErrMsg = {
required: LabelReplacementTag + " is required."
};
_this.radioLabels = [
{ label: 'No', value: false },
{ label: 'Yes', value: true }
];
_this.required = false;
_this.display = 'inline-block';
_this.valueChange = new EventEmitter();
if (controlDir) {
controlDir.valueAccessor = _this;
}
return _this;
}
Object.defineProperty(RadioComponent.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this._value;
},
set: /**
* @param {?} val
* @return {?}
*/
function (val) {
this._value = val;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
RadioComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
_super.prototype.ngOnInit.call(this);
};
/**
* @param {?} val
* @return {?}
*/
RadioComponent.prototype.setStatus = /**
* @param {?} val
* @return {?}
*/
function (val) {
this._value = val;
this._onChange(val);
this._onTouched();
this.valueChange.emit(val);
};
/**
* @param {?} fn
* @return {?}
*/
RadioComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
RadioComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/**
* @param {?} value
* @return {?}
*/
RadioComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this._value = value;
};
RadioComponent.decorators = [
{ type: Component, args: [{
selector: 'common-radio',
template: "<fieldset>\r\n <legend *ngIf=\"label; else noLabel;\" class=\"radio-box--legend\" tabindex=\"-1\">{{label}}</legend>\r\n <div class=\"text-muted\" *ngIf=\"instructionText; else noInstructionText;\" >{{instructionText}}</div>\r\n <div *ngFor=\"let val of radioLabels\" [ngStyle]=\"{'display': display}\" >\r\n <div class=\"md-radio\">\r\n <input type=\"radio\"\r\n name=\"selection__{{objectId}}\"\r\n id=\"{{val.value}}_{{objectId}}\"\r\n [disabled]=\"disabled\"\r\n [value]=\"val.value\"\r\n (click)=\"setStatus(val.value);\"\r\n [checked]=\"_value == val.value\"\r\n [required]=\"required\"\r\n tabindex=\"0\">\r\n <label for=\"{{val.value}}_{{objectId}}\">\r\n {{val.label}}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <common-error-container\r\n [displayError]=\"controlDir && !disabled && (controlDir.touched || controlDir.dirty) && controlDir?.errors\">\r\n <div *ngIf=\"controlDir?.errors?.required\">{{_defaultErrMsg.required}}</div>\r\n </common-error-container>\r\n</fieldset>\r\n\r\n\r\n<ng-template #noLabel>\r\n <legend class=\"radio-box--legend\" tabindex=\"-1\">\r\n <ng-content></ng-content>\r\n </legend>\r\n</ng-template>\r\n\r\n<ng-template #noInstructionText>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n",
styles: [".radio-box--legend{font-size:inherit;font-weight:700}@-webkit-keyframes ripple{0%{box-shadow:0 0 0 1px transparent}50%{box-shadow:0 0 0 15px rgba(0,0,0,.1)}100%{box-shadow:0 0 0 15px transparent}}@keyframes ripple{0%{box-shadow:0 0 0 1px transparent}50%{box-shadow:0 0 0 15px rgba(0,0,0,.1)}100%{box-shadow:0 0 0 15px transparent}}.md-radio{margin:10px 0;display:block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.md-radio input[type=radio]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.md-radio input[type=radio]:checked+label:before{border-color:#036;-webkit-animation:.2s linear forwards ripple;animation:.2s linear forwards ripple}.md-radio input[type=radio]:checked+label:after{-webkit-transform:scale(1);transform:scale(1)}.md-radio input[type=radio]:focus+label:before{box-shadow:0 0 0 5px rgba(0,0,0,.1);-webkit-animation:none;animation:none}.md-radio label{display:inline-block;height:auto;position:relative;padding:0 30px;margin-bottom:0;margin-left:30px;cursor:pointer;vertical-align:bottom}.md-radio label:after,.md-radio label:before{position:absolute;content:'';border-radius:50%;transition:transform .3s,border-color .3s,-webkit-transform .3s}.md-radio label:before{left:0;top:0;width:20px;height:20px;border:2px solid rgba(0,0,0,.54)}.md-radio label:after{top:5px;left:5px;width:10px;height:10px;-webkit-transform:scale(0);transform:scale(0);background:#036}"]
}] }
];
/** @nocollapse */
RadioComponent.ctorParameters = function () { return [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
]; };
RadioComponent.propDecorators = {
radioLabels: [{ type: Input }],
required: [{ type: Input }],
label: [{ type: Input }],
value: [{ type: Input }],
display: [{ type: Input }],
instructionText: [{ type: Input }],
valueChange: [{ type: Output }]
};
return RadioComponent;
}(AbstractFormControl));
export { RadioComponent };
if (false) {
/** @type {?} */
RadioComponent.prototype._value;
/** @type {?} */
RadioComponent.prototype._defaultErrMsg;
/** @type {?} */
RadioComponent.prototype.radioLabels;
/** @type {?} */
RadioComponent.prototype.required;
/** @type {?} */
RadioComponent.prototype.label;
/** @type {?} */
RadioComponent.prototype.display;
/** @type {?} */
RadioComponent.prototype.instructionText;
/** @type {?} */
RadioComponent.prototype.valueChange;
/** @type {?} */
RadioComponent.prototype.controlDir;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbW9oLWNvbW1vbi1saWIvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9yYWRpby9yYWRpby5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDL0YsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDekUsT0FBTyxFQUFFLG1CQUFtQixFQUFnQixNQUFNLHNDQUFzQyxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFnQzNDLGlDQUlDOzs7SUFIQyw0QkFBYzs7SUFDZCw0QkFBVzs7QUFHYjtJQUtvQywwQ0FBbUI7SUEyQnJELHdCQUF3QyxVQUFxQjtRQUE3RCxZQUNFLGlCQUFPLFNBSVI7UUFMdUMsZ0JBQVUsR0FBVixVQUFVLENBQVc7UUF6QjdELFlBQU0sR0FBUSxFQUFFLENBQUM7UUFDakIsb0JBQWMsR0FBaUI7WUFDN0IsUUFBUSxFQUFLLG1CQUFtQixrQkFBZTtTQUNoRCxDQUFDO1FBRU8saUJBQVcsR0FBa0I7WUFDcEMsRUFBQyxLQUFLLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUM7WUFDM0IsRUFBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUM7U0FDNUIsQ0FBQztRQUNPLGNBQVEsR0FBWSxLQUFLLENBQUM7UUFXMUIsYUFBTyxHQUF3QyxjQUFjLENBQUM7UUFHN0QsaUJBQVcsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUlqRSxJQUFLLFVBQVUsRUFBRztZQUNoQixVQUFVLENBQUMsYUFBYSxHQUFHLEtBQUksQ0FBQztTQUNqQzs7SUFDSCxDQUFDO0lBbEJELHNCQUNJLGlDQUFLOzs7O1FBR1Q7WUFDRSxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7UUFDckIsQ0FBQzs7Ozs7UUFORCxVQUNXLEdBQVE7WUFDakIsSUFBSSxDQUFDLE1BQU0sR0FBRyxHQUFHLENBQUM7UUFDcEIsQ0FBQzs7O09BQUE7Ozs7SUFpQkQsaUNBQVE7OztJQUFSO1FBQ0UsaUJBQU0sUUFBUSxXQUFFLENBQUM7SUFDbkIsQ0FBQzs7Ozs7SUFFRCxrQ0FBUzs7OztJQUFULFVBQVUsR0FBUTtRQUNoQixJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztRQUVsQixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNsQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM3QixDQUFDOzs7OztJQUVELHlDQUFnQjs7OztJQUFoQixVQUFpQixFQUFPO1FBQ3RCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7Ozs7O0lBRUQsMENBQWlCOzs7O0lBQWpCLFVBQWtCLEVBQU87UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQzs7Ozs7SUFFRCxtQ0FBVTs7OztJQUFWLFVBQVcsS0FBVTtRQUNuQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztJQUN0QixDQUFDOztnQkE3REYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO29CQUN4QiwyMkNBQXFDOztpQkFFdEM7Ozs7Z0JBekNRLFNBQVMsdUJBcUVGLFFBQVEsWUFBSSxJQUFJOzs7OEJBcEI3QixLQUFLOzJCQUlMLEtBQUs7d0JBRUwsS0FBSzt3QkFDTCxLQUFLOzBCQVFMLEtBQUs7a0NBQ0wsS0FBSzs4QkFFTCxNQUFNOztJQWdDVCxxQkFBQztDQUFBLEFBOURELENBS29DLG1CQUFtQixHQXlEdEQ7U0F6RFksY0FBYzs7O0lBRXpCLGdDQUFpQjs7SUFDakIsd0NBRUU7O0lBRUYscUNBR0U7O0lBQ0Ysa0NBQW1DOztJQUVuQywrQkFBdUI7O0lBU3ZCLGlDQUF1RTs7SUFDdkUseUNBQWlDOztJQUVqQyxxQ0FBbUU7O0lBRXRELG9DQUFnRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBPcHRpb25hbCwgU2VsZiwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEFic3RyYWN0Rm9ybUNvbnRyb2wgfSBmcm9tICcuLi8uLi9tb2RlbHMvYWJzdHJhY3QtZm9ybS1jb250cm9sJztcclxuaW1wb3J0IHsgTGFiZWxSZXBsYWNlbWVudFRhZywgRXJyb3JNZXNzYWdlIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2Vycm9yLW1lc3NhZ2UuaW50ZXJmYWNlJztcclxuaW1wb3J0IHsgTmdDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuLyoqXHJcbiAqIFJhZGlvQ29tcG9uZW50IGlzIGEgc2luZ2xlIHJhZGlvIHdoaWNoIGNhbiBiZSB1c2VkIHRvIGhhdmUgbXVsdGlwbGUgcmFkaW9zXHJcbiAqIGJhc2VkIG9uIHRoZSByYWRpbyBsYWJlbCB2YWx1ZXMuXHJcbiAqXHJcbiAqIFRvIGRpc3BsYXkgcmFkaW8gaW4gYSB2ZXJ0aWNhbCBzdHlsZSB1c2UgZGlzcGxheT1cInRhYmxlLXJvdy1ncm91cFwiIGJ5IGRlZmF1bHRcclxuICogaXQgc2hvd3MgaW4gaG9yaXpvbnRhbCBvciBpbmxpbmUgZGlzcGxheSwgZGlzcGxheT0naW5saW5lLWJsb2NrJyBZb3UgY2FuXHJcbiAqIGhhdmUgbWFueSByYWRpbydzIGFuZCB0aGUgbnVtYmVyIGlzIGJhc2VkIG9uIHRoZSBSYWRpbyBsYWJlbCBWYWx1ZS4gRm9yIDNcclxuICogcmFkaW8gYnV0dG9ucywgcmFkaW9MYWJlbHMgdmFsdWUgaXMgb2YgdHlwZSBJUmFkaW9JdGVtc1tdLlxyXG4qXHJcbiAqIEBleGFtcGxlXHJcbiAqXHJcbiAqICBSZWFjdGl2ZSBGb3JtXHJcbiAqICAgICAgICA8Y29tbW9uLXJhZGlvIG5hbWU9J2Nob2ljZSdcclxuICogICAgICAgICAgbGFiZWw9J0RvIHlvdSBsaXZlIGluIENhbmFkYSdcclxuICogICAgICAgICAgZGlzcGxheT0ndGFibGUtcm93LWdyb3VwJ1xyXG4gKiAgICAgICAgICBbcmFkaW9MYWJlbHNdPT0nW3tsYWJlbDogXCJOb1wiLCB2YWx1ZTogZmFsc2V9LHtsYWJlbDogXCJZZXNcIiwgdmFsdWU6IHRydWV9XSdcclxuICogICAgICAgICAgRm9ybUNvbnRyb2xOYW1lPSdjaG9pY2UnPlxyXG4gKiAgICAgICAgPC9jb21tb24tcmFkaW8+XHJcbiAqXHJcbiAqICBUZW1wbGF0ZSBGb3JtXHJcbiAqICAgICAgICA8Y29tbW9uLXJhZGlvIG5hbWU9J2FnZUNhdGVnb3J5J1xyXG4gKiAgICAgICAgICBbKG5nTW9kZWwpXT1cImFnZVwiXHJcbiAqICAgICAgICAgIGxhYmVsPSdIb3cgb2xkIGFyZSB5b3U/J1xyXG4gKiAgICAgICAgICBkaXNwbGF5PSd0YWJsZS1yb3ctZ3JvdXAnXHJcbiAqICAgICAgICAgIFtyYWRpb0xhYmVsc109J1t7bGFiZWw6IFwiMC0xOCB5ZWFyc1wiLCB2YWx1ZTogMH0se2xhYmVsOiBcIjE5IHllYXJzIGFuZCBvbGRlclwiLCB2YWx1ZTogMX1dJz5cclxuICogICAgICAgIDwvY29tbW9uLXJhZGlvPlxyXG4gKlxyXG4gKiBAZXhwb3J0XHJcbiAqXHJcbiAqL1xyXG5leHBvcnQgaW50ZXJmYWNlIElSYWRpb0l0ZW1zIHtcclxuICBsYWJlbDogc3RyaW5nO1xyXG4gIHZhbHVlOiBhbnk7XHJcbiAgLy8gVE9ETzogTWFrZSB2YWx1ZSBnZW5lcmljIDxUPlxyXG59XHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY29tbW9uLXJhZGlvJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcmFkaW8uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3JhZGlvLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFJhZGlvQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RGb3JtQ29udHJvbCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIF92YWx1ZTogYW55ID0gJyc7XHJcbiAgX2RlZmF1bHRFcnJNc2c6IEVycm9yTWVzc2FnZSA9IHtcclxuICAgIHJlcXVpcmVkOiBgJHtMYWJlbFJlcGxhY2VtZW50VGFnfSBpcyByZXF1aXJlZC5gXHJcbiAgfTtcclxuXHJcbiAgQElucHV0KCkgcmFkaW9MYWJlbHM6IElSYWRpb0l0ZW1zW10gPSBbXHJcbiAgICB7bGFiZWw6ICdObycsIHZhbHVlOiBmYWxzZX0sXHJcbiAgICB7bGFiZWw6ICdZZXMnLCB2YWx1ZTogdHJ1ZX1cclxuICBdO1xyXG4gIEBJbnB1dCgpIHJlcXVpcmVkOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XHJcbiAgQElucHV0KClcclxuICBzZXQgdmFsdWUoIHZhbDogYW55ICkge1xyXG4gICAgdGhpcy5fdmFsdWUgPSB2YWw7XHJcbiAgfVxyXG4gIGdldCB2YWx1ZSgpIHtcclxuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcclxuICB9XHJcblxyXG4gIEBJbnB1dCgpIGRpc3BsYXk6ICd0YWJsZS1yb3ctZ3JvdXAnIHwgJ2lubGluZS1ibG9jaycgID0gJ2lubGluZS1ibG9jayc7XHJcbiAgQElucHV0KCkgaW5zdHJ1Y3Rpb25UZXh0OiBzdHJpbmc7XHJcblxyXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgY29uc3RydWN0b3IoIEBPcHRpb25hbCgpIEBTZWxmKCkgcHVibGljIGNvbnRyb2xEaXI6IE5nQ29udHJvbCApIHtcclxuICAgIHN1cGVyKCk7XHJcbiAgICBpZiAoIGNvbnRyb2xEaXIgKSB7XHJcbiAgICAgIGNvbnRyb2xEaXIudmFsdWVBY2Nlc3NvciA9IHRoaXM7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHN1cGVyLm5nT25Jbml0KCk7XHJcbiAgfVxyXG5cclxuICBzZXRTdGF0dXModmFsOiBhbnkpIHtcclxuICAgIHRoaXMuX3ZhbHVlID0gdmFsO1xyXG5cclxuICAgIHRoaXMuX29uQ2hhbmdlKHZhbCk7XHJcbiAgICB0aGlzLl9vblRvdWNoZWQoKTtcclxuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh2YWwpO1xyXG4gIH1cclxuXHJcbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XHJcbiAgICB0aGlzLl9vbkNoYW5nZSA9IGZuO1xyXG4gIH1cclxuXHJcbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5fb25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XHJcbiAgfVxyXG59XHJcbiJdfQ==