moh-common-lib
Version:
A library of Angular components, services, and styles for B.C. Government Ministry of Health (MoH).
160 lines • 13.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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;
}
export class RadioComponent extends AbstractFormControl {
/**
* @param {?} controlDir
*/
constructor(controlDir) {
super();
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;
}
}
/**
* @param {?} val
* @return {?}
*/
set value(val) {
this._value = val;
}
/**
* @return {?}
*/
get value() {
return this._value;
}
/**
* @return {?}
*/
ngOnInit() {
super.ngOnInit();
}
/**
* @param {?} val
* @return {?}
*/
setStatus(val) {
this._value = val;
this._onChange(val);
this._onTouched();
this.valueChange.emit(val);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this._onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this._onTouched = fn;
}
/**
* @param {?} value
* @return {?}
*/
writeValue(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 = () => [
{ 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 }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbW9oLWNvbW1vbi1saWIvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9yYWRpby9yYWRpby5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN6RSxPQUFPLEVBQUUsbUJBQW1CLEVBQWdCLE1BQU0sc0NBQXNDLENBQUM7QUFDekYsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQWdDM0MsaUNBSUM7OztJQUhDLDRCQUFjOztJQUNkLDRCQUFXOztBQVFiLE1BQU0sT0FBTyxjQUFlLFNBQVEsbUJBQW1COzs7O0lBMkJyRCxZQUF3QyxVQUFxQjtRQUMzRCxLQUFLLEVBQUUsQ0FBQztRQUQ4QixlQUFVLEdBQVYsVUFBVSxDQUFXO1FBekI3RCxXQUFNLEdBQVEsRUFBRSxDQUFDO1FBQ2pCLG1CQUFjLEdBQWlCO1lBQzdCLFFBQVEsRUFBRSxHQUFHLG1CQUFtQixlQUFlO1NBQ2hELENBQUM7UUFFTyxnQkFBVyxHQUFrQjtZQUNwQyxFQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBQztZQUMzQixFQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBQztTQUM1QixDQUFDO1FBQ08sYUFBUSxHQUFZLEtBQUssQ0FBQztRQVcxQixZQUFPLEdBQXdDLGNBQWMsQ0FBQztRQUc3RCxnQkFBVyxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO1FBSWpFLElBQUssVUFBVSxFQUFHO1lBQ2hCLFVBQVUsQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1NBQ2pDO0lBQ0gsQ0FBQzs7Ozs7SUFsQkQsSUFDSSxLQUFLLENBQUUsR0FBUTtRQUNqQixJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztJQUNwQixDQUFDOzs7O0lBQ0QsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7Ozs7SUFjRCxRQUFRO1FBQ04sS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ25CLENBQUM7Ozs7O0lBRUQsU0FBUyxDQUFDLEdBQVE7UUFDaEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxHQUFHLENBQUM7UUFFbEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNwQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDbEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDN0IsQ0FBQzs7Ozs7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7Ozs7O0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUN2QixDQUFDOzs7OztJQUVELFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7OztZQTdERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGNBQWM7Z0JBQ3hCLDIyQ0FBcUM7O2FBRXRDOzs7O1lBekNRLFNBQVMsdUJBcUVGLFFBQVEsWUFBSSxJQUFJOzs7MEJBcEI3QixLQUFLO3VCQUlMLEtBQUs7b0JBRUwsS0FBSztvQkFDTCxLQUFLO3NCQVFMLEtBQUs7OEJBQ0wsS0FBSzswQkFFTCxNQUFNOzs7O0lBdkJQLGdDQUFpQjs7SUFDakIsd0NBRUU7O0lBRUYscUNBR0U7O0lBQ0Ysa0NBQW1DOztJQUVuQywrQkFBdUI7O0lBU3ZCLGlDQUF1RTs7SUFDdkUseUNBQWlDOztJQUVqQyxxQ0FBbUU7O0lBRXRELG9DQUFnRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBPcHRpb25hbCwgU2VsZiwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEFic3RyYWN0Rm9ybUNvbnRyb2wgfSBmcm9tICcuLi8uLi9tb2RlbHMvYWJzdHJhY3QtZm9ybS1jb250cm9sJztcclxuaW1wb3J0IHsgTGFiZWxSZXBsYWNlbWVudFRhZywgRXJyb3JNZXNzYWdlIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2Vycm9yLW1lc3NhZ2UuaW50ZXJmYWNlJztcclxuaW1wb3J0IHsgTmdDb250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuLyoqXHJcbiAqIFJhZGlvQ29tcG9uZW50IGlzIGEgc2luZ2xlIHJhZGlvIHdoaWNoIGNhbiBiZSB1c2VkIHRvIGhhdmUgbXVsdGlwbGUgcmFkaW9zXHJcbiAqIGJhc2VkIG9uIHRoZSByYWRpbyBsYWJlbCB2YWx1ZXMuXHJcbiAqXHJcbiAqIFRvIGRpc3BsYXkgcmFkaW8gaW4gYSB2ZXJ0aWNhbCBzdHlsZSB1c2UgZGlzcGxheT1cInRhYmxlLXJvdy1ncm91cFwiIGJ5IGRlZmF1bHRcclxuICogaXQgc2hvd3MgaW4gaG9yaXpvbnRhbCBvciBpbmxpbmUgZGlzcGxheSwgZGlzcGxheT0naW5saW5lLWJsb2NrJyBZb3UgY2FuXHJcbiAqIGhhdmUgbWFueSByYWRpbydzIGFuZCB0aGUgbnVtYmVyIGlzIGJhc2VkIG9uIHRoZSBSYWRpbyBsYWJlbCBWYWx1ZS4gRm9yIDNcclxuICogcmFkaW8gYnV0dG9ucywgcmFkaW9MYWJlbHMgdmFsdWUgaXMgb2YgdHlwZSBJUmFkaW9JdGVtc1tdLlxyXG4qXHJcbiAqIEBleGFtcGxlXHJcbiAqXHJcbiAqICBSZWFjdGl2ZSBGb3JtXHJcbiAqICAgICAgICA8Y29tbW9uLXJhZGlvIG5hbWU9J2Nob2ljZSdcclxuICogICAgICAgICAgbGFiZWw9J0RvIHlvdSBsaXZlIGluIENhbmFkYSdcclxuICogICAgICAgICAgZGlzcGxheT0ndGFibGUtcm93LWdyb3VwJ1xyXG4gKiAgICAgICAgICBbcmFkaW9MYWJlbHNdPT0nW3tsYWJlbDogXCJOb1wiLCB2YWx1ZTogZmFsc2V9LHtsYWJlbDogXCJZZXNcIiwgdmFsdWU6IHRydWV9XSdcclxuICogICAgICAgICAgRm9ybUNvbnRyb2xOYW1lPSdjaG9pY2UnPlxyXG4gKiAgICAgICAgPC9jb21tb24tcmFkaW8+XHJcbiAqXHJcbiAqICBUZW1wbGF0ZSBGb3JtXHJcbiAqICAgICAgICA8Y29tbW9uLXJhZGlvIG5hbWU9J2FnZUNhdGVnb3J5J1xyXG4gKiAgICAgICAgICBbKG5nTW9kZWwpXT1cImFnZVwiXHJcbiAqICAgICAgICAgIGxhYmVsPSdIb3cgb2xkIGFyZSB5b3U/J1xyXG4gKiAgICAgICAgICBkaXNwbGF5PSd0YWJsZS1yb3ctZ3JvdXAnXHJcbiAqICAgICAgICAgIFtyYWRpb0xhYmVsc109J1t7bGFiZWw6IFwiMC0xOCB5ZWFyc1wiLCB2YWx1ZTogMH0se2xhYmVsOiBcIjE5IHllYXJzIGFuZCBvbGRlclwiLCB2YWx1ZTogMX1dJz5cclxuICogICAgICAgIDwvY29tbW9uLXJhZGlvPlxyXG4gKlxyXG4gKiBAZXhwb3J0XHJcbiAqXHJcbiAqL1xyXG5leHBvcnQgaW50ZXJmYWNlIElSYWRpb0l0ZW1zIHtcclxuICBsYWJlbDogc3RyaW5nO1xyXG4gIHZhbHVlOiBhbnk7XHJcbiAgLy8gVE9ETzogTWFrZSB2YWx1ZSBnZW5lcmljIDxUPlxyXG59XHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY29tbW9uLXJhZGlvJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcmFkaW8uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3JhZGlvLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFJhZGlvQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RGb3JtQ29udHJvbCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIF92YWx1ZTogYW55ID0gJyc7XHJcbiAgX2RlZmF1bHRFcnJNc2c6IEVycm9yTWVzc2FnZSA9IHtcclxuICAgIHJlcXVpcmVkOiBgJHtMYWJlbFJlcGxhY2VtZW50VGFnfSBpcyByZXF1aXJlZC5gXHJcbiAgfTtcclxuXHJcbiAgQElucHV0KCkgcmFkaW9MYWJlbHM6IElSYWRpb0l0ZW1zW10gPSBbXHJcbiAgICB7bGFiZWw6ICdObycsIHZhbHVlOiBmYWxzZX0sXHJcbiAgICB7bGFiZWw6ICdZZXMnLCB2YWx1ZTogdHJ1ZX1cclxuICBdO1xyXG4gIEBJbnB1dCgpIHJlcXVpcmVkOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XHJcbiAgQElucHV0KClcclxuICBzZXQgdmFsdWUoIHZhbDogYW55ICkge1xyXG4gICAgdGhpcy5fdmFsdWUgPSB2YWw7XHJcbiAgfVxyXG4gIGdldCB2YWx1ZSgpIHtcclxuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcclxuICB9XHJcblxyXG4gIEBJbnB1dCgpIGRpc3BsYXk6ICd0YWJsZS1yb3ctZ3JvdXAnIHwgJ2lubGluZS1ibG9jaycgID0gJ2lubGluZS1ibG9jayc7XHJcbiAgQElucHV0KCkgaW5zdHJ1Y3Rpb25UZXh0OiBzdHJpbmc7XHJcblxyXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgY29uc3RydWN0b3IoIEBPcHRpb25hbCgpIEBTZWxmKCkgcHVibGljIGNvbnRyb2xEaXI6IE5nQ29udHJvbCApIHtcclxuICAgIHN1cGVyKCk7XHJcbiAgICBpZiAoIGNvbnRyb2xEaXIgKSB7XHJcbiAgICAgIGNvbnRyb2xEaXIudmFsdWVBY2Nlc3NvciA9IHRoaXM7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHN1cGVyLm5nT25Jbml0KCk7XHJcbiAgfVxyXG5cclxuICBzZXRTdGF0dXModmFsOiBhbnkpIHtcclxuICAgIHRoaXMuX3ZhbHVlID0gdmFsO1xyXG5cclxuICAgIHRoaXMuX29uQ2hhbmdlKHZhbCk7XHJcbiAgICB0aGlzLl9vblRvdWNoZWQoKTtcclxuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh2YWwpO1xyXG4gIH1cclxuXHJcbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XHJcbiAgICB0aGlzLl9vbkNoYW5nZSA9IGZuO1xyXG4gIH1cclxuXHJcbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5fb25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XHJcbiAgfVxyXG59XHJcbiJdfQ==