@openmrs/ngx-formentry 3.0.1-pre.64 → 3.0.1-pre.68

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

@@ -1579,7 +1579,7 @@
             this.alert = options.alert;
             this.historicalDataValue = options.historicalDataValue;
             this.calculateExpression = options.calculateExpression;
-            this.allowRadioUnselect = options.allowRadioUnselect;
+            this.allowUnselect = options.allowUnselect;
         }
         QuestionBase.prototype.setHistoricalValue = function (v) {
             this.enableHistoricalValue = v;
@@ -9207,64 +9207,72 @@
 
     var RadioButtonControlComponent = /** @class */ (function () {
         function RadioButtonControlComponent() {
-            this.onChange = function (change) { };
+            this._value = undefined;
+            this.onChange = function (args) { };
             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 });
+            this.options = this.options.map(function (opt) { return (Object.assign(Object.assign({}, opt), { checked: false })); });
+            if (Boolean(this.selected)) {
+                var maybeOpt = this.options.find(function (opt) { return opt.value === _this.selected; });
+                if (maybeOpt) {
+                    Object.assign(maybeOpt, { checked: true });
+                    this.value = this.selected;
                 }
-                return option;
-            });
+            }
+        };
+        RadioButtonControlComponent.prototype.writeValue = function (value) {
+            this.value = value;
         };
-        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 });
-                }
-            });
+        Object.defineProperty(RadioButtonControlComponent.prototype, "value", {
+            get: function () {
+                var _a;
+                return (_a = this._value) !== null && _a !== void 0 ? _a : "";
+            },
+            set: function (value) {
+                this._value = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RadioButtonControlComponent.prototype.handleClick = function (option) {
+            console.log("handleClick", option);
+            if (this.allowUnselect && option.checked) {
+                option.checked = false;
+                // doesn't fire by itself, so we create a synthetic change event
+                this.handleChange(option);
+            }
+            else if (!option.checked) {
+                option.checked = true;
+            }
         };
-        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 });
-                }
-            });
+        RadioButtonControlComponent.prototype.handleChange = function (option) {
+            console.log("handleChange", option);
+            if (!option.checked) {
+                this.value = undefined;
+            }
+            else {
+                this.value = option.value;
+            }
+            this.onChange(this.value);
         };
         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: "ofe-radio-button", inputs: { id: "id", selected: "selected", options: "options", allowRadioUnselect: "allowRadioUnselect" }, providers: [
+    RadioButtonControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: { id: "id", options: "options", selected: "selected", allowUnselect: "allowUnselect" }, providers: [
             {
                 provide: i19.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"] }] });
+        ], ngImport: i0__namespace, template: "<fieldset class=\"cds--fieldset\">\n  <div\n    *ngFor=\"let option of options; let i = index\"\n    class=\"cds--form-item cds--radio-wrapper\"\n  >\n    <label class=\"form-control no-border\">\n      <input\n        type=\"radio\"\n        [id]=\"id + '_' + i\"\n        [name]=\"id\"\n        [checked]=\"option.checked\"\n        [value]=\"option.value\"\n        (click)=\"handleClick(option)\"\n        (change)=\"handleChange(option)\"\n      />\n      {{ option.label }}\n    </label>\n  </div>\n</fieldset>\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: [{
@@ -9280,11 +9288,11 @@
                     }]
             }], propDecorators: { id: [{
                     type: i0.Input
-                }], selected: [{
-                    type: i0.Input
                 }], options: [{
                     type: i0.Input
-                }], allowRadioUnselect: [{
+                }], selected: [{
+                    type: i0.Input
+                }], allowUnselect: [{
                     type: i0.Input
                 }] } });
 
@@ -10152,7 +10160,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: "ofe-form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap", controlId: "controlId" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ofe-tab\n      [tabTitle]=\"question.label\"\n      *ngFor=\"let question of node.question.questions; let i = index\"\n    >\n      <ofe-form-renderer\n        [node]=\"node.children[question.key]\"\n        [parentComponent]=\"this\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      >\n      </ofe-form-renderer>\n    </ofe-tab>\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  </ofe-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n  <!--Page Components-->\n  <ofe-custom-component-wrapper\n    [dark]=\"theme === 'light'\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </ofe-custom-component-wrapper>\n  <ofe-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  ></ofe-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 ofeCollapse=\"isCollapsed\">\n      <!--Section Components-->\n      <ofe-custom-component-wrapper\n        [dark]=\"theme === 'light'\"\n        [componentConfigs]=\"node.question.componentConfigs\"\n      >\n      </ofe-custom-component-wrapper>\n      <div\n        class=\"cds--accordion__content accordion-content-override\"\n        [ngClass]=\"{\n          'accordion-content-dark': theme === 'light'\n        }\"\n      >\n        <ofe-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        ></ofe-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  <ofe-custom-component-wrapper\n    [dark]=\"!(theme === 'light')\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </ofe-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        <ofe-custom-control-wrapper\n          [formControlName]=\"node.question.key\"\n          [id]=\"node.question.key + 'id'\"\n          [question]=\"node.question\"\n        >\n        </ofe-custom-control-wrapper>\n      </div>\n\n      <ng-template #nativeControls>\n        <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n          <ofe-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          </ofe-select>\n\n          <div *ngSwitchCase=\"'file'\">\n            <ofe-file-upload\n              [dataSource]=\"dataSource\"\n              [formControlName]=\"node.question.key\"\n              [id]=\"node.question.key + 'id'\"\n              (fileChanged)=\"upload($event)\"\n            >\n            </ofe-file-upload>\n          </div>\n\n          <textarea\n            [theme]=\"theme\"\n            ofeTextAreaInput\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          <ofe-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          ></ofe-remote-select>\n\n          <ofe-ngx-date-time-picker\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          </ofe-ngx-date-time-picker>\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          <ofe-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          </ofe-number-input>\n\n          <input\n            [theme]=\"theme\"\n            class=\"cds--text-input\"\n            ofeTextInput\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            <ofe-radio-button\n              [id]=\"node.question.key + 'id'\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [selected]=\"node.control.value\"\n              [allowRadioUnselect]=\"node.question.allowRadioUnselect\"\n            ></ofe-radio-button>\n          </div>\n\n          <div *ngSwitchCase=\"'checkbox'\">\n            <ofe-checkbox\n              [id]=\"node.question.key + 'id' + controlId\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [selected]=\"node.control.value\"\n            ></ofe-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                  ofeNode=\"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          <ofe-appointments-overview [node]=\"node\"></ofe-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            <ofe-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            ></ofe-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            <ofe-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              [controlId]=\"i\"\n            ></ofe-form-renderer>\n            <button\n              type=\"button\"\n              style=\"width: 100px\"\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 cds--btn--sm\"\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      <ofe-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      ></ofe-form-renderer>\n    </div>\n    <div\n      *ngSwitchCase=\"'field-set'\"\n      style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n    >\n      <ofe-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      ></ofe-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: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["tabSelect"] }, { type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", 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: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "selected", "options", "allowRadioUnselect"] }, { type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "ofe-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: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[ofeCollapse]", 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: 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: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: ["theme", "invalid", "skeleton"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { type: HistoricalValueDirective, selector: "[ofeNode]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }], pipes: { "date": i1__namespace.DatePipe, "timeAgo": TimeAgoPipe } });
+    FormRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap", controlId: "controlId" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ofe-tab\n      [tabTitle]=\"question.label\"\n      *ngFor=\"let question of node.question.questions; let i = index\"\n    >\n      <ofe-form-renderer\n        [node]=\"node.children[question.key]\"\n        [parentComponent]=\"this\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      >\n      </ofe-form-renderer>\n    </ofe-tab>\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  </ofe-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n  <!--Page Components-->\n  <ofe-custom-component-wrapper\n    [dark]=\"theme === 'light'\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </ofe-custom-component-wrapper>\n  <ofe-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  ></ofe-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 ofeCollapse=\"isCollapsed\">\n      <!--Section Components-->\n      <ofe-custom-component-wrapper\n        [dark]=\"theme === 'light'\"\n        [componentConfigs]=\"node.question.componentConfigs\"\n      >\n      </ofe-custom-component-wrapper>\n      <div\n        class=\"cds--accordion__content accordion-content-override\"\n        [ngClass]=\"{\n          'accordion-content-dark': theme === 'light'\n        }\"\n      >\n        <ofe-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        ></ofe-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  <ofe-custom-component-wrapper\n    [dark]=\"!(theme === 'light')\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </ofe-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        <ofe-custom-control-wrapper\n          [formControlName]=\"node.question.key\"\n          [id]=\"node.question.key + 'id'\"\n          [question]=\"node.question\"\n        >\n        </ofe-custom-control-wrapper>\n      </div>\n\n      <ng-template #nativeControls>\n        <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n          <ofe-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          </ofe-select>\n\n          <div *ngSwitchCase=\"'file'\">\n            <ofe-file-upload\n              [dataSource]=\"dataSource\"\n              [formControlName]=\"node.question.key\"\n              [id]=\"node.question.key + 'id'\"\n              (fileChanged)=\"upload($event)\"\n            >\n            </ofe-file-upload>\n          </div>\n\n          <textarea\n            [theme]=\"theme\"\n            ofeTextAreaInput\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          <ofe-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          ></ofe-remote-select>\n\n          <ofe-ngx-date-time-picker\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          </ofe-ngx-date-time-picker>\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          <ofe-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          </ofe-number-input>\n\n          <input\n            [theme]=\"theme\"\n            class=\"cds--text-input\"\n            ofeTextInput\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            <ofe-radio-button\n              [id]=\"node.question.key + 'id'\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [allowUnselect]=\"node.question.allowUnselect\"\n              [selected]=\"node.control.value\"\n            ></ofe-radio-button>\n          </div>\n\n          <div *ngSwitchCase=\"'checkbox'\">\n            <ofe-checkbox\n              [id]=\"node.question.key + 'id' + controlId\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [selected]=\"node.control.value\"\n            ></ofe-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                  ofeNode=\"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          <ofe-appointments-overview [node]=\"node\"></ofe-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            <ofe-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            ></ofe-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            <ofe-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              [controlId]=\"i\"\n            ></ofe-form-renderer>\n            <button\n              type=\"button\"\n              style=\"width: 100px\"\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 cds--btn--sm\"\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      <ofe-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      ></ofe-form-renderer>\n    </div>\n    <div\n      *ngSwitchCase=\"'field-set'\"\n      style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n    >\n      <ofe-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      ></ofe-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: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["tabSelect"] }, { type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", 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: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect"] }, { type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "ofe-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: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[ofeCollapse]", 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: 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: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: ["theme", "invalid", "skeleton"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { type: HistoricalValueDirective, selector: "[ofeNode]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }], 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: [{
@@ -12144,7 +12152,7 @@
         function RadioButtonQuestion(options) {
             var _this = _super.call(this, options) || this;
             _this.renderingType = 'radio';
-            _this.allowRadioUnselect = options.allowRadioUnselect === false;
+            _this.allowUnselect = options.allowUnselect === true;
             _this.options = options.options || [];
             _this.controlType = exports.AfeControlType.AfeFormControl;
             return _this;
@@ -12924,11 +12932,14 @@
                 type: '',
                 key: ''
             });
+            question.questionIndex = this.quetionIndex;
             question.label = schemaQuestion.label;
             question.key = schemaQuestion.id;
+            question.prefix = schemaQuestion.prefix;
             question.extras = schemaQuestion;
-            question.allowRadioUnselect =
-                schemaQuestion.questionOptions.allowRadioUnselect;
+            question.allowUnselect =
+                schemaQuestion.questionOptions.allowUnselect;
+            question.orientation = schemaQuestion.questionOptions.orientation;
             question.options = schemaQuestion.questionOptions.answers.map(function (obj) {
                 return {
                     label: obj.label,
@@ -14253,6 +14264,13 @@
             return 'unknown';
         };
         // PAYLOAD GENERATION FUNCTIONS
+        ObsAdapterHelper.prototype.addFieldNameSpaceandPath = function (node, obs) {
+            var _a;
+            obs.formFieldNamespace = this.formFieldNamespace;
+            obs.formFieldPath = "" + ((_a = node === null || node === void 0 ? void 0 : node.question) === null || _a === void 0 ? void 0 : _a.questionIndex) + (node === null || node === void 0 ? void 0 : node.nodeIndex) + this.obsIndex;
+            this.obsIndex++;
+            return obs;
+        };
         ObsAdapterHelper.prototype.getSimpleObsPayload = function (node) {
             // check for empty values first
             if (this.isEmpty(node.control.value)) {
@@ -14286,13 +14304,6 @@
             }
             return this.addFieldNameSpaceandPath(node, obs);
         };
-        ObsAdapterHelper.prototype.addFieldNameSpaceandPath = function (node, obs) {
-            var _a;
-            obs.formFieldNamespace = this.formFieldNamespace;
-            obs.formFieldPath = "" + ((_a = node === null || node === void 0 ? void 0 : node.question) === null || _a === void 0 ? void 0 : _a.questionIndex) + (node === null || node === void 0 ? void 0 : node.nodeIndex) + this.obsIndex;
-            this.obsIndex++;
-            return obs;
-        };
         ObsAdapterHelper.prototype.getComplexObsPayload = function (node) {
             var valueField; // essential memmber
             var dateField; // other member to be manipulated by user