@openmrs/ngx-formentry 3.0.1-pre.49 → 3.0.1-pre.50

package/bundles/openmrs-ngx-formentry.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('moment'), require('lodash'), require('@angular-extensions/elements'), require('ngx-file-uploader-openmrs'), require('@angular/platform-browser'), require('rxjs/operators'), require('@ng-select/ng-select'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('@angular/cdk/keycodes'), require('@angular/cdk/coercion'), require('@angular/cdk/a11y'), require('@angular/animations'), require('ngx-webcam'), require('@angular/cdk/platform')) :
     typeof define === 'function' && define.amd ? define('@openmrs/ngx-formentry', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'moment', 'lodash', '@angular-extensions/elements', 'ngx-file-uploader-openmrs', '@angular/platform-browser', 'rxjs/operators', '@ng-select/ng-select', '@angular/cdk/portal', '@angular/cdk/overlay', '@angular/cdk/keycodes', '@angular/cdk/coercion', '@angular/cdk/a11y', '@angular/animations', 'ngx-webcam', '@angular/cdk/platform'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.openmrs = global.openmrs || {}, global.openmrs["ngx-formentry"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.moment, global.lodash, global["@angular-extensions/elements"], global["ngx-file-uploader-openmrs"], global.ng.platformBrowser, global.rxjs.operators, global["@ng-select/ng-select"], global.ng.cdk.portal, global.ng.cdk.overlay, global.ng.cdk.keycodes, global.ng.cdk.coercion, global.ng.cdk.a11y, global.ng.animations, global["ngx-webcam"], global.ng.cdk.platform));
-})(this, (function (exports, i0, i1, i19, rxjs, moment, _, i2, i1$2, i1$1, operators, i1$3, i2$1, i1$6, keycodes, coercion, i1$4, i1$5, ngxWebcam, i1$7) { 'use strict';
+})(this, (function (exports, i0, i1, i20, rxjs, moment, _, i2, i1$2, i1$1, operators, i1$3, i2$1, i1$6, keycodes, coercion, i1$4, i1$5, ngxWebcam, i1$7) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +26,7 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i19__namespace = /*#__PURE__*/_interopNamespace(i19);
+    var i20__namespace = /*#__PURE__*/_interopNamespace(i20);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
     var ___namespace = /*#__PURE__*/_interopNamespace(_);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
@@ -605,7 +605,7 @@
             configurable: true
         });
         ControlRelations.prototype.addRelatedControls = function (relatedTo) {
-            if (relatedTo instanceof i19.AbstractControl) {
+            if (relatedTo instanceof i20.AbstractControl) {
                 this.relations.push(new ControlRelation(this._relationFor, relatedTo));
             }
             if (relatedTo instanceof Array) {
@@ -1400,7 +1400,7 @@
             _super.prototype.setValue.call(this, value);
         };
         return AfeFormControl;
-    }(i19.FormControl));
+    }(i20.FormControl));
 
     var AfeFormGroup = /** @class */ (function (_super) {
         __extends(AfeFormGroup, _super);
@@ -1463,7 +1463,7 @@
             _super.prototype.setValue.call(this, value);
         };
         return AfeFormGroup;
-    }(i19.FormGroup));
+    }(i20.FormGroup));
 
     var AfeFormArray = /** @class */ (function (_super) {
         __extends(AfeFormArray, _super);
@@ -1554,7 +1554,7 @@
             _super.prototype.setValue.call(this, value);
         };
         return AfeFormArray;
-    }(i19.FormArray));
+    }(i20.FormArray));
 
     exports.AfeControlType = void 0;
     (function (AfeControlType) {
@@ -1580,6 +1580,7 @@
             this.alert = options.alert;
             this.historicalDataValue = options.historicalDataValue;
             this.calculateExpression = options.calculateExpression;
+            this.allowRadioUnselect = options.allowRadioUnselect;
         }
         QuestionBase.prototype.setHistoricalValue = function (v) {
             this.enableHistoricalValue = v;
@@ -2214,14 +2215,14 @@
         });
         Object.defineProperty(ValidationFactory.prototype, "minLengthValidator", {
             get: function () {
-                return i19.Validators.minLength;
+                return i20.Validators.minLength;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ValidationFactory.prototype, "maxLengthValidator", {
             get: function () {
-                return i19.Validators.maxLength;
+                return i20.Validators.maxLength;
             },
             enumerable: false,
             configurable: true
@@ -2728,7 +2729,7 @@
     CustomControlWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     CustomControlWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomControlWrapperComponent, selector: "app-custom-control-wrapper", inputs: { question: "question" }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: i0.forwardRef(function () { return CustomControlWrapperComponent; })
             }
@@ -2740,7 +2741,7 @@
                         templateUrl: 'custom-control-wrapper.component.html',
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 multi: true,
                                 useExisting: i0.forwardRef(function () { return CustomControlWrapperComponent; })
                             }
@@ -2882,7 +2883,7 @@
     Select.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Select, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     Select.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Select, selector: "ibm-select", inputs: { display: "display", label: "label", helperText: "helperText", invalidText: "invalidText", warn: "warn", warnText: "warnText", id: "id", size: "size", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", theme: "theme", ariaLabel: "ariaLabel", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 useExisting: Select,
                 multi: true
             }
@@ -2897,7 +2898,7 @@
                         ],
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 useExisting: Select,
                                 multi: true
                             }
@@ -3143,11 +3144,11 @@
     FileUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileUploadComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
     FileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "app-file-upload", inputs: { dataSource: "dataSource" }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return FileUploadComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<lib-ngx-file-uploader\n  [srcUrl]=\"pdfUrl\"\n  [formEntry]=\"formEntryMode\"\n  [(ngModel)]=\"fileUuid\"\n  (_onClear)=\"clearValue()\"\n  (uploadData)=\"onFileChange($event)\"\n>\n</lib-ngx-file-uploader>\n<div *ngIf=\"fileUuid\">\n  <img\n    *ngIf=\"!pdfUploaded\"\n    class=\"img-responsive\"\n    [src]=\"fileUuid | secure: this.dataSource.fetchFile\"\n    alt=\"\"\n  />\n</div>\n", styles: ["\n      img {\n        margin-left: auto;\n        margin-right: auto;\n        display: block;\n      }\n    "], components: [{ type: i1__namespace$2.NgxFileUploaderComponent, selector: "lib-ngx-file-uploader", inputs: ["singleFile", "formEntry", "srcUrl", "source"], outputs: ["fileChanged", "uploadData", "_onClear"] }], directives: [{ type: i19__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "secure": SecurePipe } });
+        ], ngImport: i0__namespace, template: "<lib-ngx-file-uploader\n  [srcUrl]=\"pdfUrl\"\n  [formEntry]=\"formEntryMode\"\n  [(ngModel)]=\"fileUuid\"\n  (_onClear)=\"clearValue()\"\n  (uploadData)=\"onFileChange($event)\"\n>\n</lib-ngx-file-uploader>\n<div *ngIf=\"fileUuid\">\n  <img\n    *ngIf=\"!pdfUploaded\"\n    class=\"img-responsive\"\n    [src]=\"fileUuid | secure: this.dataSource.fetchFile\"\n    alt=\"\"\n  />\n</div>\n", styles: ["\n      img {\n        margin-left: auto;\n        margin-right: auto;\n        display: block;\n      }\n    "], components: [{ type: i1__namespace$2.NgxFileUploaderComponent, selector: "lib-ngx-file-uploader", inputs: ["singleFile", "formEntry", "srcUrl", "source"], outputs: ["fileChanged", "uploadData", "_onClear"] }], directives: [{ type: i20__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "secure": SecurePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileUploadComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3155,7 +3156,7 @@
                         templateUrl: 'file-upload.component.html',
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return FileUploadComponent; }),
                                 multi: true
                             }
@@ -3271,11 +3272,11 @@
     RemoteSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteSelectComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
     RemoteSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RemoteSelectComponent, selector: "ngx-remote-select", inputs: { placeholder: "placeholder", componentID: "componentID", disabled: "disabled", theme: "theme", dataSource: "dataSource" }, outputs: { done: "done" }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return RemoteSelectComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<div>\n  <ng-select\n    [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n    [disabled]=\"disabled\"\n    [items]=\"remoteOptions$ | async\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"false\"\n    [hideSelected]=\"true\"\n    [compareWith]=\"compareItems\"\n    [trackByFn]=\"trackByFn\"\n    [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i1__namespace$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1__namespace.AsyncPipe } });
+        ], ngImport: i0__namespace, template: "<div>\n  <ng-select\n    [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n    [disabled]=\"disabled\"\n    [items]=\"remoteOptions$ | async\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"false\"\n    [hideSelected]=\"true\"\n    [compareWith]=\"compareItems\"\n    [trackByFn]=\"trackByFn\"\n    [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i1__namespace$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3283,7 +3284,7 @@
                         templateUrl: 'remote-select.component.html',
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return RemoteSelectComponent; }),
                                 multi: true
                             }
@@ -7888,12 +7889,12 @@
 
     /* eslint-disable @angular-eslint/no-host-metadata-property */
     var OWL_DATETIME_VALUE_ACCESSOR$1 = {
-        provide: i19.NG_VALUE_ACCESSOR,
+        provide: i20.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return OwlDateTimeInputDirective; }),
         multi: true
     };
     var OWL_DATETIME_VALIDATORS = {
-        provide: i19.NG_VALIDATORS,
+        provide: i20.NG_VALIDATORS,
         useExisting: i0.forwardRef(function () { return OwlDateTimeInputDirective; }),
         multi: true
     };
@@ -8008,7 +8009,7 @@
                     : { owlDateTimeRange: true };
             };
             /** The combined form control validator for this input. */
-            this.validator = i19.Validators.compose([
+            this.validator = i20.Validators.compose([
                 this.parseValidator,
                 this.minValidator,
                 this.maxValidator,
@@ -8669,11 +8670,11 @@
     NgxDatetimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDatetimeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     NgxDatetimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NgxDatetimeComponent, selector: "ngx-datetimepicker", inputs: { id: "id", theme: "theme", datePickerFormat: "datePickerFormat", showWeeks: "showWeeks", weeks: "weeks" }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return NgxDatetimeComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<div class=\"date-time-picker-container\">\n  <div\n    data-date-picker\n    data-date-picker-type=\"single\"\n    class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n    [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\"\n  >\n    <div class=\"cds--date-picker-container fill\">\n      <div class=\"cds--date-picker-input__wrapper\">\n        <input\n          [disabled]=\"isDisabled\"\n          (dateTimeChange)=\"onInput($event)\"\n          type=\"text\"\n          class=\"cds--date-picker__input fill\"\n          [id]=\"id\"\n          [value]=\"value\"\n          [owlDateTime]=\"dt1\"\n          [owlDateTimeTrigger]=\"dt1\"\n          placeholder=\"mm/dd/yyyy\"\n          data-date-picker-input\n        />\n        <svg\n          [owlDateTimeTrigger]=\"dt1\"\n          focusable=\"false\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          style=\"will-change: transform\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          data-date-picker-icon=\"true\"\n          class=\"cds--date-picker__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n          ></path>\n        </svg>\n      </div>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showWeeks\"\n    class=\"cds--select some-class week-select-wrapper\"\n    [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n  >\n    <div class=\"cds--select-input__wrapper\">\n      <select\n        (change)=\"onWeeksSelected($event.target.value)\"\n        id=\"select-1\"\n        class=\"cds--select-input\"\n      >\n        <option\n          class=\"cds--select-option\"\n          value=\"placeholder-item\"\n          disabled=\"\"\n          hidden=\"\"\n          selected=\"\"\n        >\n          Select Weeks\n        </option>\n        <option\n          class=\"cds--select-option\"\n          [value]=\"week\"\n          *ngFor=\"let week of weeks\"\n        >\n          {{week}} Weeks\n        </option>\n      </select>\n      <svg\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n        class=\"cds--select__arrow\"\n      >\n        <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n      </svg>\n    </div>\n  </div>\n</div>\n<owl-date-time\n  [pickerType]=\"datePickerFormat ? datePickerFormat :'calendar'\"\n  [disabled]=\"isDisabled\"\n  #dt1\n></owl-date-time>\n", styles: [".date-time-picker-container{display:flex;justify-content:space-between}.week-select-wrapper{margin-left:1rem;width:30%}\n"], components: [{ type: OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled", "rangeSeparator"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i19__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        ], ngImport: i0__namespace, template: "<div class=\"date-time-picker-container\">\n  <div\n    data-date-picker\n    data-date-picker-type=\"single\"\n    class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n    [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\"\n  >\n    <div class=\"cds--date-picker-container fill\">\n      <div class=\"cds--date-picker-input__wrapper\">\n        <input\n          [disabled]=\"isDisabled\"\n          (dateTimeChange)=\"onInput($event)\"\n          type=\"text\"\n          class=\"cds--date-picker__input fill\"\n          [id]=\"id\"\n          [value]=\"value\"\n          [owlDateTime]=\"dt1\"\n          [owlDateTimeTrigger]=\"dt1\"\n          placeholder=\"mm/dd/yyyy\"\n          data-date-picker-input\n        />\n        <svg\n          [owlDateTimeTrigger]=\"dt1\"\n          focusable=\"false\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          style=\"will-change: transform\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          data-date-picker-icon=\"true\"\n          class=\"cds--date-picker__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n          ></path>\n        </svg>\n      </div>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showWeeks\"\n    class=\"cds--select some-class week-select-wrapper\"\n    [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n  >\n    <div class=\"cds--select-input__wrapper\">\n      <select\n        (change)=\"onWeeksSelected($event.target.value)\"\n        id=\"select-1\"\n        class=\"cds--select-input\"\n      >\n        <option\n          class=\"cds--select-option\"\n          value=\"placeholder-item\"\n          disabled=\"\"\n          hidden=\"\"\n          selected=\"\"\n        >\n          Select Weeks\n        </option>\n        <option\n          class=\"cds--select-option\"\n          [value]=\"week\"\n          *ngFor=\"let week of weeks\"\n        >\n          {{week}} Weeks\n        </option>\n      </select>\n      <svg\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n        class=\"cds--select__arrow\"\n      >\n        <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n      </svg>\n    </div>\n  </div>\n</div>\n<owl-date-time\n  [pickerType]=\"datePickerFormat ? datePickerFormat :'calendar'\"\n  [disabled]=\"isDisabled\"\n  #dt1\n></owl-date-time>\n", styles: [".date-time-picker-container{display:flex;justify-content:space-between}.week-select-wrapper{margin-left:1rem;width:30%}\n"], components: [{ type: OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled", "rangeSeparator"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i20__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDatetimeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8682,7 +8683,7 @@
                         styleUrls: ['./ngx-datetime-picker.css'],
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return NgxDatetimeComponent; }),
                                 multi: true
                             }
@@ -8874,7 +8875,7 @@
     NumberInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     NumberInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumberInputComponent, selector: "number-input", inputs: { theme: "theme", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", id: "id", size: "size", required: "required", value: "value", min: "min", max: "max", label: "label", helperText: "helperText", invalidText: "invalidText", step: "step", precision: "precision", warn: "warn", warnText: "warnText", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel" }, outputs: { change: "change" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return NumberInputComponent; }),
                 multi: true
             }
@@ -8886,7 +8887,7 @@
                         templateUrl: 'number-input.component.html',
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return NumberInputComponent; }),
                                 multi: true
                             }
@@ -8937,6 +8938,90 @@
                     args: ['focusout']
                 }] } });
 
+    var RadioButtonControlComponent = /** @class */ (function () {
+        function RadioButtonControlComponent() {
+            this.onChange = function (change) { };
+            this.onTouched = function () { };
+        }
+        RadioButtonControlComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.options = this.options.map(function (option) {
+                if (_this.selected == option.value) {
+                    _this.selected = option.value;
+                    Object.assign(option, { checked: true });
+                }
+                return option;
+            });
+        };
+        RadioButtonControlComponent.prototype.ngAfterViewInit = function () { };
+        RadioButtonControlComponent.prototype.writeValue = function (value) { };
+        RadioButtonControlComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        RadioButtonControlComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        RadioButtonControlComponent.prototype.selectOpt = function (option, event) {
+            var _this = this;
+            this.options.forEach(function (o) {
+                if (event.target.checked && o.value == option.value) {
+                    _this.selected = o.value;
+                    Object.assign(o, { checked: true });
+                }
+                else {
+                    _this.selected = null;
+                    Object.assign(o, { checked: false });
+                }
+            });
+        };
+        RadioButtonControlComponent.prototype.selectUnselectOpt = function (option, event) {
+            var _this = this;
+            this.options.forEach(function (o) {
+                if (event.target.checked &&
+                    _this.selected == o.value &&
+                    _this.selected == option.value) {
+                    _this.selected = null;
+                    Object.assign(o, { checked: false });
+                }
+                else if (event.target.checked && o.value == option.value) {
+                    _this.selected = o.value;
+                    Object.assign(o, { checked: true });
+                }
+            });
+        };
+        return RadioButtonControlComponent;
+    }());
+    RadioButtonControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RadioButtonControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonControlComponent, selector: "radio", inputs: { id: "id", selected: "selected", options: "options", allowRadioUnselect: "allowRadioUnselect" }, providers: [
+            {
+                provide: i20.NG_VALUE_ACCESSOR,
+                useExisting: i0.forwardRef(function () { return RadioButtonControlComponent; }),
+                multi: true
+            }
+        ], ngImport: i0__namespace, template: "<fieldset class=\"bx--fieldset\">\n  <div *ngFor=\"let option of options; let i = index\" class=\"bx--form-item bx--radio-wrapper\">\n    <label class=\"form-control no-border\">\n      <input type=\"radio\" [id]=\"id + '_' + i\" name=\"id\" [checked]=\"option.checked\" [value]=\"option.value\"  (click)=\"allowRadioUnselect ? selectOpt(option, $event) : selectUnselectOpt(option, $event)\" />\n      {{ option.label }}\n    </label>\n  </div>\n</fieldset>\n\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonControlComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'radio',
+                        templateUrl: './radio.component.html',
+                        providers: [
+                            {
+                                provide: i20.NG_VALUE_ACCESSOR,
+                                useExisting: i0.forwardRef(function () { return RadioButtonControlComponent; }),
+                                multi: true
+                            }
+                        ]
+                    }]
+            }], propDecorators: { id: [{
+                    type: i0.Input
+                }], selected: [{
+                    type: i0.Input
+                }], options: [{
+                    type: i0.Input
+                }], allowRadioUnselect: [{
+                    type: i0.Input
+                }] } });
+
     var CheckboxControlComponent = /** @class */ (function () {
         function CheckboxControlComponent() {
             this._value = [];
@@ -9004,7 +9089,7 @@
     CheckboxControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     CheckboxControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxControlComponent, selector: "checkbox", inputs: { id: "id", options: "options", selected: "selected" }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return CheckboxControlComponent; }),
                 multi: true
             }
@@ -9016,7 +9101,7 @@
                         templateUrl: './checkbox.component.html',
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return CheckboxControlComponent; }),
                                 multi: true
                             }
@@ -9827,7 +9912,7 @@
         return FormRendererComponent;
     }());
     FormRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: i1.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FormRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormRendererComponent, selector: "form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ngx-tab-set (onSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ngx-tab\n      [tabTitle]=\"question.label\"\n      *ngFor=\"let question of node.question.questions; let i = index\"\n    >\n      <form-renderer\n        [node]=\"node.children[question.key]\"\n        [parentComponent]=\"this\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      >\n      </form-renderer>\n    </ngx-tab>\n\n    <div *ngIf=\"showErrors()\" class=\"container\">\n      <div\n        data-notification\n        *ngFor=\"let errorNode of errorNodes\"\n        class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n        role=\"alert\"\n        (click)=\"announceErrorField(errorNode)\"\n      >\n        <div class=\"cds--inline-notification__details\">\n          <div class=\"cds--inline-notification__text-wrapper\">\n            <p class=\"cds--inline-notification__title\">\n              {{ errorNode.question.label }}\n            </p>\n            <p class=\"cds--inline-notification__subtitle\">\n              {{ getControlError(errorNode) }}\n            </p>\n          </div>\n        </div>\n        <button\n          tabindex=\"0\"\n          class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n          type=\"button\"\n        >\n          Fix\n        </button>\n        <svg\n          focusable=\"false\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          style=\"will-change: transform\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"cds--inline-notification__icon\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n          ></path>\n          <path\n            d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n            data-icon-path=\"inner-path\"\n            opacity=\"0\"\n          ></path>\n        </svg>\n      </div>\n    </div>\n  </ngx-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n  <!--Page Components-->\n  <app-custom-component-wrapper\n    [dark]=\"theme === 'light'\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </app-custom-component-wrapper>\n  <form-renderer\n    *ngFor=\"let question of node.question.questions\"\n    [parentComponent]=\"this\"\n    [node]=\"node.children[question.key]\"\n    [parentGroup]=\"parentGroup\"\n    [labelMap]=\"labelMap\"\n  ></form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n  <div\n    class=\"cds--accordion__item\"\n    [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\"\n  >\n    <button\n      class=\"cds--accordion__heading\"\n      type=\"button\"\n      [attr.aria-expanded]=\"isCollapsed ? 'false' : 'true'\"\n      aria-controls=\"accordion-item-0\"\n      (click)=\"isCollapsed = !isCollapsed\"\n    >\n      <svg\n        class=\"cds--accordion__arrow\"\n        ibmIcon=\"chevron--right\"\n        size=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        aria-hidden=\"true\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n      </svg>\n      <p class=\"cds--accordion__title\">\n        {{ node.question.label }}\n      </p>\n    </button>\n    <div [collapse]=\"isCollapsed\">\n      <!--Section Components-->\n      <app-custom-component-wrapper\n        [dark]=\"theme === 'light'\"\n        [componentConfigs]=\"node.question.componentConfigs\"\n      >\n      </app-custom-component-wrapper>\n      <div\n        class=\"cds--accordion__content accordion-content-override\"\n        [ngClass]=\"{\n          'accordion-content-dark': theme === 'light'\n        }\"\n      >\n        <form-renderer\n          *ngFor=\"let question of node.question.questions\"\n          [parentComponent]=\"this\"\n          [node]=\"node.children[question.key]\"\n          [parentGroup]=\"parentGroup\"\n          [labelMap]=\"labelMap\"\n        ></form-renderer>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- MESSAGES -->\n<div\n  *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n  class=\"alert alert-warning\"\n>\n  <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n<div\n  *ngIf=\"node.question.controlType === 0\"\n  [formGroup]=\"parentGroup\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <app-custom-component-wrapper\n    [dark]=\"!(theme === 'light')\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </app-custom-component-wrapper>\n  <div class=\"cds--form-item\">\n    <!--LEAF CONTROL-->\n    <div class=\"question-area\">\n      <a\n        class=\"form-tooltip pull-right\"\n        (click)=\"toggleInformation(node.question.extras.id)\"\n        data-placement=\"right\"\n        *ngIf=\"\n          node.question &&\n          node.question.extras.questionInfo &&\n          node.question.extras.questionInfo !== '' &&\n          node.question.extras.questionInfo !== ' '\n        \"\n      >\n        <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n      </a>\n\n      <label\n        *ngIf=\"node.question.label\"\n        [style.color]=\"hasErrors() ? 'red' : ''\"\n        class=\"cds--label\"\n        [attr.for]=\"node.question.key\"\n      >\n        {{ node.question.required ? '*' : '' }}\n        {{ node.question.prefix ? node.question.prefix + ' ' : ''\n        }}{{ node.question.label }}\n      </label>\n\n      <div\n        *ngIf=\"\n          node.question.extras.questionOptions.customControl;\n          else nativeControls\n        \"\n      >\n        <app-custom-control-wrapper\n          [formControlName]=\"node.question.key\"\n          [id]=\"node.question.key + 'id'\"\n          [question]=\"node.question\"\n        >\n        </app-custom-control-wrapper>\n      </div>\n\n      <ng-template #nativeControls>\n        <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n          <ibm-select\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'select'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n          >\n            <option *ngFor=\"let o of node.question.options\" [value]=\"o.value\">\n              {{ o.label }}\n            </option>\n          </ibm-select>\n\n          <div *ngSwitchCase=\"'file'\">\n            <app-file-upload\n              [dataSource]=\"dataSource\"\n              [formControlName]=\"node.question.key\"\n              [id]=\"node.question.key + 'id'\"\n              (fileChanged)=\"upload($event)\"\n            >\n            </app-file-upload>\n          </div>\n\n          <textarea\n            [theme]=\"theme\"\n            ibmTextArea\n            [ngClass]=\"{\n              'cds--text-area--light': theme === 'light',\n              'cds--text-area--invalid': !node.control.valid\n            }\"\n            [placeholder]=\"node.question.placeholder\"\n            [rows]=\"node.question.rows\"\n            class=\"cds--text-area\"\n            *ngSwitchCase=\"'textarea'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\"\n          >\n          </textarea>\n\n          <ngx-remote-select\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'remote-select'\"\n            [placeholder]=\"node.question.placeholder\"\n            tabindex=\"0\"\n            [dataSource]=\"dataSource\"\n            [componentID]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n          ></ngx-remote-select>\n\n          <ngx-datetimepicker\n            [weeks]=\"node.question.extras.questionOptions.weeksList\"\n            [showWeeks]=\"node.question.showWeeksAdder\"\n            [theme]=\"theme\"\n            [id]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\"\n            *ngSwitchCase=\"'date'\"\n            [datePickerFormat]=\"node.question.datePickerFormat\"\n          >\n          </ngx-datetimepicker>\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'multi-select'\"\n            [items]=\"node.question.options\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [multiple]=\"true\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n          </ng-select>\n\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'single-select'\"\n            [items]=\"node.question.options\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n          </ng-select>\n\n          <number-input\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'number'\"\n            [id]=\"node.question.key + 'id'\"\n            [min]=\"node.question.extras.questionOptions.min\"\n            [max]=\"node.question.extras.questionOptions.max\"\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\"\n          >\n          </number-input>\n\n          <input\n            [theme]=\"theme\"\n            class=\"cds--text-input\"\n            ibmText\n            *ngSwitchDefault\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\"\n            [type]=\"node.question.renderingType\"\n            [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\"\n          />\n\n          <div *ngSwitchCase=\"'radio'\">\n            <div\n              *ngFor=\"let o of node.question.options\"\n              [ngClass]=\"{\n                'in-line': node.question.orientation === 'horizontal'\n              }\"\n            >\n              <label class=\"form-control no-border\">\n                <input\n                  type=\"radio\"\n                  [formControlName]=\"node.question.key\"\n                  [id]=\"node.question.key + 'id'\"\n                  [value]=\"o.value\"\n                />\n                {{ o.label }}\n              </label>\n            </div>\n          </div>\n\n          <div *ngSwitchCase=\"'checkbox'\">\n            <checkbox\n              [id]=\"node.question.key + 'id'\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [selected]=\"node.control.value\"\n            ></checkbox>\n          </div>\n\n          <div\n            *ngIf=\"\n              node.question.enableHistoricalValue &&\n              node.question.historicalDisplay\n            \"\n            style=\"margin-top: 2px\"\n          >\n            <div class=\"container-fluid\">\n              <div class=\"row\">\n                <div class=\"col-xs-9\">\n                  <span class=\"text-warning\">Previous Value: </span>\n                  <strong>{{ node.question.historicalDisplay?.text }}</strong>\n                  <span *ngIf=\"node.question.showHistoricalValueDate\">\n                    <span> | </span>\n                    <strong class=\"text-primary\"\n                      >{{ node.question.historicalDisplay?._date | date }}\n                    </strong>\n                    <span\n                      class=\"text-primary\"\n                      *ngIf=\"\n                        node.question.historicalDisplay &&\n                        node.question.historicalDisplay._date\n                      \"\n                    >\n                      ({{\n                        node.question.historicalDisplay._date | timeAgo\n                      }})</span\n                    >\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  [node]=\"node\"\n                  [name]=\"'historyValue'\"\n                  class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\"\n                >\n                  Use Value\n                </button>\n              </div>\n            </div>\n          </div>\n          <appointments-overview [node]=\"node\"></appointments-overview>\n          <div *ngIf=\"hasErrors()\">\n            <div *ngFor=\"let e of errors()\">\n              <span class=\"text-danger\">{{ e }}</span>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n\n      <div\n        class=\"question-info col-md-12 col-lg-12 col-sm-12\"\n        id=\"{{ node.question.extras.id }}\"\n        *ngIf=\"\n          node.question &&\n          node.question.extras.questionInfo &&\n          node.question.extras.questionInfo !== '' &&\n          node.question.extras.questionInfo !== ' '\n        \"\n      >\n        {{ node.question.extras.questionInfo }}\n      </div>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"node.question.controlType === 1\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <!--ARRAY CONTROL-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div class=\"well\" style=\"padding: 2px\" *ngSwitchCase=\"'repeating'\">\n      <h4 style=\"margin: 2px; font-weight: bold\">{{ node.question.label }}</h4>\n      <hr\n        style=\"\n          margin-left: -2px;\n          margin-right: -2px;\n          margin-bottom: 4px;\n          margin-top: 8px;\n          border-width: 2px;\n        \"\n      />\n      <div [ngSwitch]=\"node.question.extras.type\">\n        <div *ngSwitchCase=\"'testOrder'\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <form-renderer\n              *ngFor=\"let question of child.question.questions\"\n              [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\"\n              [parentGroup]=\"child.control\"\n              [labelMap]=\"labelMap\"\n            ></form-renderer>\n            <div>{{ child.orderNumber }}</div>\n            <button\n              type=\"button \"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <form-renderer\n              *ngFor=\"let question of child.question.questions\"\n              [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\"\n              [parentGroup]=\"child.control\"\n              [labelMap]=\"labelMap\"\n            ></form-renderer>\n            <button\n              type=\"button \"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"cds--btn cds--btn--primary\"\n        (click)=\"node.createChildNode()\"\n      >\n        Add\n      </button>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"node.question.controlType === 2\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <!--GROUP-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div *ngSwitchCase=\"'group'\">\n      <form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></form-renderer>\n    </div>\n    <div\n      *ngSwitchCase=\"'field-set'\"\n      style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n    >\n      <form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></form-renderer>\n    </div>\n  </div>\n</div>\n", styles: [".slider{width:auto;margin:30px}.slick-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:bold}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transtion-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:1.5rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box}.question-area{width:100%;max-width:18rem}.in-line{display:inline-block;padding-right:.5rem}\n"], components: [{ type: TabSetComponent, selector: "ngx-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["onSelect"] }, { type: TabComponent, selector: "ngx-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap"] }, { type: CustomComponentWrapperComponent, selector: "app-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "app-custom-control-wrapper", inputs: ["question"] }, { type: Select, selector: "ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "app-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ngx-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ngx-datetimepicker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: i1__namespace$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: NumberInputComponent, selector: "number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["change"] }, { type: CheckboxControlComponent, selector: "checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "appointments-overview", inputs: ["node"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { type: i19__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i19__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i19__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i19__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i19__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: Option$1, selector: "option" }, { type: i19__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: TextArea, selector: "[ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInput, selector: "[ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { type: i19__namespace.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }], pipes: { "date": i1__namespace.DatePipe, "timeAgo": TimeAgoPipe } });
+    FormRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormRendererComponent, selector: "form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ngx-tab-set (onSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ngx-tab\n      [tabTitle]=\"question.label\"\n      *ngFor=\"let question of node.question.questions; let i = index\"\n    >\n      <form-renderer\n        [node]=\"node.children[question.key]\"\n        [parentComponent]=\"this\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      >\n      </form-renderer>\n    </ngx-tab>\n\n    <div *ngIf=\"showErrors()\" class=\"container\">\n      <div\n        data-notification\n        *ngFor=\"let errorNode of errorNodes\"\n        class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n        role=\"alert\"\n        (click)=\"announceErrorField(errorNode)\"\n      >\n        <div class=\"cds--inline-notification__details\">\n          <div class=\"cds--inline-notification__text-wrapper\">\n            <p class=\"cds--inline-notification__title\">\n              {{ errorNode.question.label }}\n            </p>\n            <p class=\"cds--inline-notification__subtitle\">\n              {{ getControlError(errorNode) }}\n            </p>\n          </div>\n        </div>\n        <button\n          tabindex=\"0\"\n          class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n          type=\"button\"\n        >\n          Fix\n        </button>\n        <svg\n          focusable=\"false\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          style=\"will-change: transform\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"cds--inline-notification__icon\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 20 20\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n          ></path>\n          <path\n            d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n            data-icon-path=\"inner-path\"\n            opacity=\"0\"\n          ></path>\n        </svg>\n      </div>\n    </div>\n  </ngx-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n  <!--Page Components-->\n  <app-custom-component-wrapper\n    [dark]=\"theme === 'light'\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </app-custom-component-wrapper>\n  <form-renderer\n    *ngFor=\"let question of node.question.questions\"\n    [parentComponent]=\"this\"\n    [node]=\"node.children[question.key]\"\n    [parentGroup]=\"parentGroup\"\n    [labelMap]=\"labelMap\"\n  ></form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n  <div\n    class=\"cds--accordion__item\"\n    [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\"\n  >\n    <button\n      class=\"cds--accordion__heading\"\n      type=\"button\"\n      [attr.aria-expanded]=\"isCollapsed ? 'false' : 'true'\"\n      aria-controls=\"accordion-item-0\"\n      (click)=\"isCollapsed = !isCollapsed\"\n    >\n      <svg\n        class=\"cds--accordion__arrow\"\n        ibmIcon=\"chevron--right\"\n        size=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        aria-hidden=\"true\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n      </svg>\n      <p class=\"cds--accordion__title\">\n        {{ node.question.label }}\n      </p>\n    </button>\n    <div [collapse]=\"isCollapsed\">\n      <!--Section Components-->\n      <app-custom-component-wrapper\n        [dark]=\"theme === 'light'\"\n        [componentConfigs]=\"node.question.componentConfigs\"\n      >\n      </app-custom-component-wrapper>\n      <div\n        class=\"cds--accordion__content accordion-content-override\"\n        [ngClass]=\"{\n          'accordion-content-dark': theme === 'light'\n        }\"\n      >\n        <form-renderer\n          *ngFor=\"let question of node.question.questions\"\n          [parentComponent]=\"this\"\n          [node]=\"node.children[question.key]\"\n          [parentGroup]=\"parentGroup\"\n          [labelMap]=\"labelMap\"\n        ></form-renderer>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- MESSAGES -->\n<div\n  *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n  class=\"alert alert-warning\"\n>\n  <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n<div\n  *ngIf=\"node.question.controlType === 0\"\n  [formGroup]=\"parentGroup\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <app-custom-component-wrapper\n    [dark]=\"!(theme === 'light')\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </app-custom-component-wrapper>\n  <div class=\"cds--form-item\">\n    <!--LEAF CONTROL-->\n    <div class=\"question-area\">\n      <a\n        class=\"form-tooltip pull-right\"\n        (click)=\"toggleInformation(node.question.extras.id)\"\n        data-placement=\"right\"\n        *ngIf=\"\n          node.question &&\n          node.question.extras.questionInfo &&\n          node.question.extras.questionInfo !== '' &&\n          node.question.extras.questionInfo !== ' '\n        \"\n      >\n        <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n      </a>\n\n      <label\n        *ngIf=\"node.question.label\"\n        [style.color]=\"hasErrors() ? 'red' : ''\"\n        class=\"cds--label\"\n        [attr.for]=\"node.question.key\"\n      >\n        {{ node.question.required ? '*' : '' }}\n        {{ node.question.prefix ? node.question.prefix + ' ' : ''\n        }}{{ node.question.label }}\n      </label>\n\n      <div\n        *ngIf=\"\n          node.question.extras.questionOptions.customControl;\n          else nativeControls\n        \"\n      >\n        <app-custom-control-wrapper\n          [formControlName]=\"node.question.key\"\n          [id]=\"node.question.key + 'id'\"\n          [question]=\"node.question\"\n        >\n        </app-custom-control-wrapper>\n      </div>\n\n      <ng-template #nativeControls>\n        <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n          <ibm-select\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'select'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n          >\n            <option *ngFor=\"let o of node.question.options\" [value]=\"o.value\">\n              {{ o.label }}\n            </option>\n          </ibm-select>\n\n          <div *ngSwitchCase=\"'file'\">\n            <app-file-upload\n              [dataSource]=\"dataSource\"\n              [formControlName]=\"node.question.key\"\n              [id]=\"node.question.key + 'id'\"\n              (fileChanged)=\"upload($event)\"\n            >\n            </app-file-upload>\n          </div>\n\n          <textarea\n            [theme]=\"theme\"\n            ibmTextArea\n            [ngClass]=\"{\n              'cds--text-area--light': theme === 'light',\n              'cds--text-area--invalid': !node.control.valid\n            }\"\n            [placeholder]=\"node.question.placeholder\"\n            [rows]=\"node.question.rows\"\n            class=\"cds--text-area\"\n            *ngSwitchCase=\"'textarea'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\"\n          >\n          </textarea>\n\n          <ngx-remote-select\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'remote-select'\"\n            [placeholder]=\"node.question.placeholder\"\n            tabindex=\"0\"\n            [dataSource]=\"dataSource\"\n            [componentID]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n          ></ngx-remote-select>\n\n          <ngx-datetimepicker\n            [weeks]=\"node.question.extras.questionOptions.weeksList\"\n            [showWeeks]=\"node.question.showWeeksAdder\"\n            [theme]=\"theme\"\n            [id]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\"\n            *ngSwitchCase=\"'date'\"\n            [datePickerFormat]=\"node.question.datePickerFormat\"\n          >\n          </ngx-datetimepicker>\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'multi-select'\"\n            [items]=\"node.question.options\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [multiple]=\"true\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n          </ng-select>\n\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'single-select'\"\n            [items]=\"node.question.options\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n          </ng-select>\n\n          <number-input\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'number'\"\n            [id]=\"node.question.key + 'id'\"\n            [min]=\"node.question.extras.questionOptions.min\"\n            [max]=\"node.question.extras.questionOptions.max\"\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\"\n          >\n          </number-input>\n\n          <input\n            [theme]=\"theme\"\n            class=\"cds--text-input\"\n            ibmText\n            *ngSwitchDefault\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\"\n            [type]=\"node.question.renderingType\"\n            [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\"\n          />\n\n          <div *ngSwitchCase=\"'radio'\">\n            <radio [id]=\"node.question.key + 'id'\" [formControlName]=\"node.question.key\"\n                   [options]=\"node.question.options\" [selected]=\"node.control.value\" [allowRadioUnselect]=\"node.question.allowRadioUnselect\"></radio>\n          </div>\n\n          <div *ngSwitchCase=\"'checkbox'\">\n            <checkbox\n              [id]=\"node.question.key + 'id'\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [selected]=\"node.control.value\"\n            ></checkbox>\n          </div>\n\n          <div\n            *ngIf=\"\n              node.question.enableHistoricalValue &&\n              node.question.historicalDisplay\n            \"\n            style=\"margin-top: 2px\"\n          >\n            <div class=\"container-fluid\">\n              <div class=\"row\">\n                <div class=\"col-xs-9\">\n                  <span class=\"text-warning\">Previous Value: </span>\n                  <strong>{{ node.question.historicalDisplay?.text }}</strong>\n                  <span *ngIf=\"node.question.showHistoricalValueDate\">\n                    <span> | </span>\n                    <strong class=\"text-primary\"\n                      >{{ node.question.historicalDisplay?._date | date }}\n                    </strong>\n                    <span\n                      class=\"text-primary\"\n                      *ngIf=\"\n                        node.question.historicalDisplay &&\n                        node.question.historicalDisplay._date\n                      \"\n                    >\n                      ({{\n                        node.question.historicalDisplay._date | timeAgo\n                      }})</span\n                    >\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  [node]=\"node\"\n                  [name]=\"'historyValue'\"\n                  class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\"\n                >\n                  Use Value\n                </button>\n              </div>\n            </div>\n          </div>\n          <appointments-overview [node]=\"node\"></appointments-overview>\n          <div *ngIf=\"hasErrors()\">\n            <div *ngFor=\"let e of errors()\">\n              <span class=\"text-danger\">{{ e }}</span>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n\n      <div\n        class=\"question-info col-md-12 col-lg-12 col-sm-12\"\n        id=\"{{ node.question.extras.id }}\"\n        *ngIf=\"\n          node.question &&\n          node.question.extras.questionInfo &&\n          node.question.extras.questionInfo !== '' &&\n          node.question.extras.questionInfo !== ' '\n        \"\n      >\n        {{ node.question.extras.questionInfo }}\n      </div>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"node.question.controlType === 1\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <!--ARRAY CONTROL-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div class=\"well\" style=\"padding: 2px\" *ngSwitchCase=\"'repeating'\">\n      <h4 style=\"margin: 2px; font-weight: bold\">{{ node.question.label }}</h4>\n      <hr\n        style=\"\n          margin-left: -2px;\n          margin-right: -2px;\n          margin-bottom: 4px;\n          margin-top: 8px;\n          border-width: 2px;\n        \"\n      />\n      <div [ngSwitch]=\"node.question.extras.type\">\n        <div *ngSwitchCase=\"'testOrder'\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <form-renderer\n              *ngFor=\"let question of child.question.questions\"\n              [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\"\n              [parentGroup]=\"child.control\"\n              [labelMap]=\"labelMap\"\n            ></form-renderer>\n            <div>{{ child.orderNumber }}</div>\n            <button\n              type=\"button \"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <form-renderer\n              *ngFor=\"let question of child.question.questions\"\n              [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\"\n              [parentGroup]=\"child.control\"\n              [labelMap]=\"labelMap\"\n            ></form-renderer>\n            <button\n              type=\"button \"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"cds--btn cds--btn--primary\"\n        (click)=\"node.createChildNode()\"\n      >\n        Add\n      </button>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"node.question.controlType === 2\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <!--GROUP-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div *ngSwitchCase=\"'group'\">\n      <form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></form-renderer>\n    </div>\n    <div\n      *ngSwitchCase=\"'field-set'\"\n      style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n    >\n      <form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></form-renderer>\n    </div>\n  </div>\n</div>\n", styles: [".slider{width:auto;margin:30px}.slick-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:bold}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transtion-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:1.5rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box}.question-area{width:100%;max-width:18rem}.in-line{display:inline-block;padding-right:.5rem}\n"], components: [{ type: TabSetComponent, selector: "ngx-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["onSelect"] }, { type: TabComponent, selector: "ngx-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap"] }, { type: CustomComponentWrapperComponent, selector: "app-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "app-custom-control-wrapper", inputs: ["question"] }, { type: Select, selector: "ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "app-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ngx-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ngx-datetimepicker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: i1__namespace$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: NumberInputComponent, selector: "number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["change"] }, { type: RadioButtonControlComponent, selector: "radio", inputs: ["id", "selected", "options", "allowRadioUnselect"] }, { type: CheckboxControlComponent, selector: "checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "appointments-overview", inputs: ["node"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { type: i20__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i20__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i20__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i20__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: Option$1, selector: "option" }, { type: i20__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: TextArea, selector: "[ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInput, selector: "[ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "date": i1__namespace.DatePipe, "timeAgo": TimeAgoPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9912,12 +9997,12 @@
         return NumberInputModule;
     }());
     NumberInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NumberInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, declarations: [NumberInputComponent], imports: [i1.CommonModule, i19.FormsModule], exports: [NumberInputComponent] });
-    NumberInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, providers: [], imports: [[i1.CommonModule, i19.FormsModule]] });
+    NumberInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, declarations: [NumberInputComponent], imports: [i1.CommonModule, i20.FormsModule], exports: [NumberInputComponent] });
+    NumberInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, providers: [], imports: [[i1.CommonModule, i20.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i19.FormsModule],
+                        imports: [i1.CommonModule, i20.FormsModule],
                         exports: [NumberInputComponent],
                         declarations: [NumberInputComponent],
                         providers: []
@@ -9949,13 +10034,13 @@
     }());
     RemoteFileUploadModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     RemoteFileUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, declarations: [FileUploadComponent], imports: [i1.CommonModule,
-            i19.FormsModule,
+            i20.FormsModule,
             SharedModule,
             ngxWebcam.WebcamModule,
             i1$2.NgxFileUploaderModule], exports: [FileUploadComponent] });
     RemoteFileUploadModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, providers: [], imports: [[
                 i1.CommonModule,
-                i19.FormsModule,
+                i20.FormsModule,
                 SharedModule,
                 ngxWebcam.WebcamModule,
                 i1$2.NgxFileUploaderModule
@@ -9965,7 +10050,7 @@
                 args: [{
                         imports: [
                             i1.CommonModule,
-                            i19.FormsModule,
+                            i20.FormsModule,
                             SharedModule,
                             ngxWebcam.WebcamModule,
                             i1$2.NgxFileUploaderModule
@@ -10417,7 +10502,7 @@
     DateTimePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     DateTimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "date-time-picker", inputs: { modelValue: "modelValue", showDate: "showDate", showTime: "showTime", showWeeks: "showWeeks", weeks: "weeks" }, outputs: { onDateChange: "onDateChange" }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return DateTimePickerComponent; }),
                 multi: true
             }
@@ -10430,7 +10515,7 @@
                         styleUrls: ['./date-time-picker.component.css'],
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return DateTimePickerComponent; }),
                                 multi: true
                             }
@@ -10463,16 +10548,16 @@
             TimePickerComponent,
             ModalComponent,
             MomentPipe,
-            DateTimePickerComponent], imports: [i1.CommonModule, i19.FormsModule], exports: [DatePickerComponent,
+            DateTimePickerComponent], imports: [i1.CommonModule, i20.FormsModule], exports: [DatePickerComponent,
             TimePickerComponent,
             ModalComponent,
             MomentPipe,
             DateTimePickerComponent] });
-    DateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, providers: [], imports: [[i1.CommonModule, i19.FormsModule]] });
+    DateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, providers: [], imports: [[i1.CommonModule, i20.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i19.FormsModule],
+                        imports: [i1.CommonModule, i20.FormsModule],
                         declarations: [
                             DatePickerComponent,
                             TimePickerComponent,
@@ -10492,7 +10577,7 @@
             }] });
 
     var OWL_DATETIME_VALUE_ACCESSOR = {
-        provide: i19.NG_VALUE_ACCESSOR,
+        provide: i20.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return OwlDateTimeInlineComponent; }),
         multi: true
     };
@@ -11325,12 +11410,12 @@
     }());
     NgxDateTimePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     NgxDateTimePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, declarations: [NgxDatetimeComponent], imports: [i1.CommonModule,
-            i19.FormsModule,
+            i20.FormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule], exports: [NgxDatetimeComponent] });
     NgxDateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, providers: [], imports: [[
                 i1.CommonModule,
-                i19.FormsModule,
+                i20.FormsModule,
                 OwlDateTimeModule,
                 OwlNativeDateTimeModule
             ]] });
@@ -11340,7 +11425,7 @@
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
                         imports: [
                             i1.CommonModule,
-                            i19.FormsModule,
+                            i20.FormsModule,
                             OwlDateTimeModule,
                             OwlNativeDateTimeModule
                         ],
@@ -11421,7 +11506,7 @@
     AfeNgSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AfeNgSelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
     AfeNgSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AfeNgSelectComponent, selector: "afe-ng-select", inputs: { dataSource: "dataSource", multiple: "multiple", extras: "extras" }, providers: [
             {
-                provide: i19.NG_VALUE_ACCESSOR,
+                provide: i20.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return AfeNgSelectComponent; }),
                 multi: true
             }
@@ -11433,7 +11518,7 @@
                         template: "<ng-select\n    (searchInputText)=\"getChangingText($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [options]=\"question_options\"\n    [multiple]=\"multiple\"\n  >\n  </ng-select> ",
                         providers: [
                             {
-                                provide: i19.NG_VALUE_ACCESSOR,
+                                provide: i20.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return AfeNgSelectComponent; }),
                                 multi: true
                             }
@@ -11809,7 +11894,7 @@
         __extends(CheckBoxQuestion, _super);
         function CheckBoxQuestion(options) {
             var _this = _super.call(this, options) || this;
-            _this.renderingType = 'checkbox' || 'radio';
+            _this.renderingType = 'checkbox';
             _this.options = options.options || [];
             _this.controlType = exports.AfeControlType.AfeFormControl;
             return _this;
@@ -11817,6 +11902,19 @@
         return CheckBoxQuestion;
     }(QuestionBase));
 
+    var RadioButtonQuestion = /** @class */ (function (_super) {
+        __extends(RadioButtonQuestion, _super);
+        function RadioButtonQuestion(options) {
+            var _this = _super.call(this, options) || this;
+            _this.renderingType = 'radio';
+            _this.allowRadioUnselect = options.allowRadioUnselect === false;
+            _this.options = options.options || [];
+            _this.controlType = exports.AfeControlType.AfeFormControl;
+            return _this;
+        }
+        return RadioButtonQuestion;
+    }(QuestionBase));
+
     var Form = /** @class */ (function () {
         function Form(schema, formFactory, questionFactory) {
             this.schema = schema;
@@ -12587,6 +12685,38 @@
             this.addCalculatorProperty(schemaQuestion, question);
             return question;
         };
+        QuestionFactory.prototype.toRadioButtonQuestion = function (schemaQuestion) {
+            var question = new RadioButtonQuestion({
+                options: [],
+                type: '',
+                key: ''
+            });
+            question.label = schemaQuestion.label;
+            question.key = schemaQuestion.id;
+            question.extras = schemaQuestion;
+            question.allowRadioUnselect =
+                schemaQuestion.questionOptions.allowRadioUnselect;
+            question.options = schemaQuestion.questionOptions.answers.map(function (obj) {
+                return {
+                    label: obj.label,
+                    value: obj.concept
+                };
+            });
+            question.options.splice(0, 0);
+            question.renderingType = schemaQuestion.questionOptions.rendering;
+            var mappings = {
+                label: 'label',
+                required: 'required',
+                id: 'key'
+            };
+            question.componentConfigs = schemaQuestion.componentConfigs || [];
+            this.copyProperties(mappings, schemaQuestion, question);
+            this.addDisableOrHideProperty(schemaQuestion, question);
+            this.addAlertProperty(schemaQuestion, question);
+            this.addHistoricalExpressions(schemaQuestion, question);
+            this.addCalculatorProperty(schemaQuestion, question);
+            return question;
+        };
         QuestionFactory.prototype.toMultiCheckboxQuestion = function (schemaQuestion) {
             var question = new MultiSelectQuestion({
                 renderType: '',
@@ -13099,7 +13229,7 @@
                 case 'encounterProvider':
                     return this.toEncounterProviderQuestion(schema);
                 case 'radio':
-                    return this.toCheckBoxQuestion(schema);
+                    return this.toRadioButtonQuestion(schema);
                 case 'checkbox':
                     return this.toCheckBoxQuestion(schema);
                 case 'encounterProvider':
@@ -15162,12 +15292,12 @@
         return NgxRemoteSelectModule;
     }());
     NgxRemoteSelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NgxRemoteSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [i1.CommonModule, i1$3.NgSelectModule, i19.FormsModule], exports: [RemoteSelectComponent] });
-    NgxRemoteSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, providers: [], imports: [[i1.CommonModule, i1$3.NgSelectModule, i19.FormsModule]] });
+    NgxRemoteSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [i1.CommonModule, i1$3.NgSelectModule, i20.FormsModule], exports: [RemoteSelectComponent] });
+    NgxRemoteSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, providers: [], imports: [[i1.CommonModule, i1$3.NgSelectModule, i20.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i1$3.NgSelectModule, i19.FormsModule],
+                        imports: [i1.CommonModule, i1$3.NgSelectModule, i20.FormsModule],
                         exports: [RemoteSelectComponent],
                         declarations: [RemoteSelectComponent],
                         providers: []
@@ -15180,14 +15310,31 @@
         return CheckboxModule;
     }());
     CheckboxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, declarations: [CheckboxControlComponent], imports: [i1.CommonModule, i19.FormsModule], exports: [CheckboxControlComponent] });
-    CheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, imports: [[i1.CommonModule, i19.FormsModule]] });
+    CheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, declarations: [CheckboxControlComponent], imports: [i1.CommonModule, i20.FormsModule], exports: [CheckboxControlComponent] });
+    CheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, imports: [[i1.CommonModule, i20.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [CheckboxControlComponent],
                         exports: [CheckboxControlComponent],
-                        imports: [i1.CommonModule, i19.FormsModule]
+                        imports: [i1.CommonModule, i20.FormsModule]
+                    }]
+            }] });
+
+    var RadioModule = /** @class */ (function () {
+        function RadioModule() {
+        }
+        return RadioModule;
+    }());
+    RadioModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    RadioModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, declarations: [RadioButtonControlComponent], imports: [i1.CommonModule, i20.FormsModule], exports: [RadioButtonControlComponent] });
+    RadioModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, imports: [[i1.CommonModule, i20.FormsModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [RadioButtonControlComponent],
+                        exports: [RadioButtonControlComponent],
+                        imports: [i1.CommonModule, i20.FormsModule]
                     }]
             }] });
 
@@ -15253,14 +15400,14 @@
         return SelectModule;
     }());
     SelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, declarations: [Select, Option$1, OptGroup], imports: [i1.CommonModule, i19.FormsModule], exports: [Select, Option$1, OptGroup] });
-    SelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, imports: [[i1.CommonModule, i19.FormsModule]] });
+    SelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, declarations: [Select, Option$1, OptGroup], imports: [i1.CommonModule, i20.FormsModule], exports: [Select, Option$1, OptGroup] });
+    SelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, imports: [[i1.CommonModule, i20.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [Select, Option$1, OptGroup],
                         exports: [Select, Option$1, OptGroup],
-                        imports: [i1.CommonModule, i19.FormsModule]
+                        imports: [i1.CommonModule, i20.FormsModule]
                     }]
             }] });
 
@@ -15392,14 +15539,14 @@
         return InputModule;
     }());
     InputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    InputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, declarations: [Label, TextInput, TextArea], imports: [i1.CommonModule, i19.FormsModule], exports: [Label, TextInput, TextArea] });
-    InputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, imports: [[i1.CommonModule, i19.FormsModule]] });
+    InputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, declarations: [Label, TextInput, TextArea], imports: [i1.CommonModule, i20.FormsModule], exports: [Label, TextInput, TextArea] });
+    InputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, imports: [[i1.CommonModule, i20.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [Label, TextInput, TextArea],
                         exports: [Label, TextInput, TextArea],
-                        imports: [i1.CommonModule, i19.FormsModule]
+                        imports: [i1.CommonModule, i20.FormsModule]
                     }]
             }] });
 
@@ -15409,13 +15556,13 @@
         return CustomControlWrapperModule;
     }());
     CustomControlWrapperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CustomControlWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [i1.CommonModule, i19.FormsModule, i2.LazyElementsModule], exports: [CustomControlWrapperComponent] });
-    CustomControlWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, providers: [], imports: [[i1.CommonModule, i19.FormsModule, i2.LazyElementsModule]] });
+    CustomControlWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [i1.CommonModule, i20.FormsModule, i2.LazyElementsModule], exports: [CustomControlWrapperComponent] });
+    CustomControlWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, providers: [], imports: [[i1.CommonModule, i20.FormsModule, i2.LazyElementsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
-                        imports: [i1.CommonModule, i19.FormsModule, i2.LazyElementsModule],
+                        imports: [i1.CommonModule, i20.FormsModule, i2.LazyElementsModule],
                         exports: [CustomControlWrapperComponent],
                         declarations: [CustomControlWrapperComponent],
                         providers: []
@@ -15454,7 +15601,7 @@
             ErrorRendererComponent,
             TimeAgoPipe,
             CollapseDirective], imports: [i1.CommonModule,
-            i19.ReactiveFormsModule,
+            i20.ReactiveFormsModule,
             SelectModule,
             i1$3.NgSelectModule,
             NumberInputModule,
@@ -15464,6 +15611,7 @@
             // NoopAnimationsModule,
             RemoteFileUploadModule,
             CheckboxModule,
+            RadioModule,
             NgxDateTimePickerModule,
             SharedModule,
             CustomControlWrapperModule,
@@ -15473,7 +15621,7 @@
             DateTimePickerModule,
             NgxDateTimePickerModule] });
     FormEntryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormEntryModule, providers: [
-            i19.FormBuilder,
+            i20.FormBuilder,
             FormControlService,
             FormErrorsService,
             ValidationFactory,
@@ -15495,7 +15643,7 @@
             DebugModeService
         ], imports: [[
                 i1.CommonModule,
-                i19.ReactiveFormsModule,
+                i20.ReactiveFormsModule,
                 SelectModule,
                 i1$3.NgSelectModule,
                 NumberInputModule,
@@ -15505,6 +15653,7 @@
                 // NoopAnimationsModule,
                 RemoteFileUploadModule,
                 CheckboxModule,
+                RadioModule,
                 NgxDateTimePickerModule,
                 SharedModule,
                 CustomControlWrapperModule,
@@ -15518,7 +15667,7 @@
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
                         imports: [
                             i1.CommonModule,
-                            i19.ReactiveFormsModule,
+                            i20.ReactiveFormsModule,
                             SelectModule,
                             i1$3.NgSelectModule,
                             NumberInputModule,
@@ -15528,6 +15677,7 @@
                             // NoopAnimationsModule,
                             RemoteFileUploadModule,
                             CheckboxModule,
+                            RadioModule,
                             NgxDateTimePickerModule,
                             SharedModule,
                             CustomControlWrapperModule,
@@ -15544,7 +15694,7 @@
                             CollapseDirective
                         ],
                         providers: [
-                            i19.FormBuilder,
+                            i20.FormBuilder,
                             FormControlService,
                             FormErrorsService,
                             ValidationFactory,