@openmrs/ngx-formentry 3.2.1-pre.244 → 3.2.1-pre.245

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('moment'), require('lodash'), require('@ngx-translate/core'), 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', '@ngx-translate/core', '@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.i4, 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, i21, rxjs, moment, _, i4, i2, i1$2, i1$1, operators, i13, i2$1, i1$5, keycodes, coercion, i1$3, i1$4, ngxWebcam, i1$6) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@ngx-translate/core'), 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', '@ngx-translate/core', '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.i4, 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, i21, i4, rxjs, moment, _, i2, i1$2, i1$1, operators, i13, i2$1, i1$5, keycodes, coercion, i1$3, i1$4, ngxWebcam, i1$6) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,10 +27,10 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i21__namespace = /*#__PURE__*/_interopNamespace(i21);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
     var ___namespace = /*#__PURE__*/_interopNamespace(_);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
@@ -65,9 +65,10 @@
             }], ctorParameters: function () { return []; } });
 
     var TimeAgoPipe = /** @class */ (function () {
-        function TimeAgoPipe(changeDetectorRef, ngZone) {
+        function TimeAgoPipe(changeDetectorRef, ngZone, translate) {
             this.changeDetectorRef = changeDetectorRef;
             this.ngZone = ngZone;
+            this.translate = translate;
         }
         TimeAgoPipe.prototype.transform = function (value) {
             var _this = this;
@@ -95,38 +96,38 @@
                 return '';
             }
             else if (seconds <= 45) {
-                return 'a few seconds ago';
+                return this.translate.instant('aMinuteAgo');
             }
             else if (seconds <= 90) {
-                return 'a minute ago';
+                return this.translate.instant('minutesAgo');
             }
             else if (minutes <= 45) {
-                return minutes + ' minutes ago';
+                return minutes + ' ' + this.translate.instant('minutesAgo');
             }
             else if (minutes <= 90) {
-                return 'an hour ago';
+                return this.translate.instant('anHourAgo');
             }
             else if (hours <= 22) {
-                return hours + ' hours ago';
+                return hours + ' ' + this.translate.instant('hoursAgo');
             }
             else if (hours <= 36) {
-                return 'a day ago';
+                return this.translate.instant('aDayAgo');
             }
             else if (days <= 25) {
-                return days + ' days ago';
+                return days + ' ' + this.translate.instant('daysAgo');
             }
             else if (days <= 45) {
-                return 'a month ago';
+                return this.translate.instant('aMonthAgo');
             }
             else if (days <= 345) {
-                return months + ' months ago';
+                return months + ' ' + this.translate.instant('monthsAgo');
             }
             else if (days <= 545) {
-                return 'a year ago';
+                return this.translate.instant('aYearAgo');
             }
             else {
                 // (days > 545)
-                return years + ' years ago';
+                return years + ' ' + this.translate.instant('yearsAgo');
             }
         };
         TimeAgoPipe.prototype.ngOnDestroy = function () {
@@ -161,7 +162,7 @@
         };
         return TimeAgoPipe;
     }());
-    TimeAgoPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeAgoPipe, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TimeAgoPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeAgoPipe, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: i4__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
     TimeAgoPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeAgoPipe, name: "timeAgo", pure: false });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimeAgoPipe, decorators: [{
                 type: i0.Pipe,
@@ -169,7 +170,7 @@
                         name: 'timeAgo',
                         pure: false
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: i4__namespace.TranslateService }]; } });
 
     var FormErrorsService = /** @class */ (function () {
         function FormErrorsService() {
@@ -814,8 +815,9 @@
     }(NodeBase));
     var ArrayNode = /** @class */ (function (_super) {
         __extends(ArrayNode, _super);
-        function ArrayNode(question, control, parentControl, formFactory, form, parentPath) {
+        function ArrayNode(question, translate, control, parentControl, formFactory, form, parentPath) {
             var _this = _super.call(this, question, control, form, parentPath) || this;
+            _this.translate = translate;
             _this.formFactory = formFactory;
             _this.childNodeCreatedEvents = [];
             _this._children = [];
@@ -831,7 +833,9 @@
         });
         ArrayNode.prototype.createChildNode = function () {
             if (this.children.length >= this.question.extras.questionOptions.max) {
-                confirm("Cannot have more than " + this.question.extras.questionOptions.max + " entries");
+                confirm(this.translate
+                    .instant('maxEntries')
+                    .replace('{max}', this.question.extras.questionOptions.max));
                 return;
             }
             if (this.createChildFunc) {
@@ -843,7 +847,7 @@
         };
         ArrayNode.prototype.removeAt = function (index) {
             if (this.children.length <= this.question.extras.questionOptions.min) {
-                var clearPrompt = confirm("Are you sure you want to clear this entry?");
+                var clearPrompt = confirm(this.translate.instant('clearEntry'));
                 if (clearPrompt && this.removeChildFunc && this.createChildNode) {
                     this.removeChildFunc(index, this);
                     var g = this.createChildFunc(this.question, this, this.formFactory, index);
@@ -852,7 +856,7 @@
                 }
             }
             else {
-                var removePrompt = confirm('Are you sure you want to delete this item?');
+                var removePrompt = confirm(this.translate.instant('deleteEntry'));
                 if (removePrompt) {
                     if (this.removeChildFunc) {
                         this.removeChildFunc(index, this);
@@ -2456,21 +2460,6 @@
         return JsExpressionValidator;
     }());
 
-    var Messages = /** @class */ (function () {
-        function Messages() {
-        }
-        return Messages;
-    }());
-    Messages.REQUIRED_FIELD_MSG = 'This field is required!';
-    Messages.INVALID_DATE_MSG = 'Provided date is invalid!';
-    Messages.FUTURE_DATE_RESTRICTION_MSG = 'Future date is not allowed!';
-    Messages.MIN_LENGTH_MSG = 'Min Length should be {minLength}';
-    Messages.MAX_LENGTH_MSG = 'Max Length should be {maxLength}';
-    Messages.MAX_DATE_MSG = 'Max Date should be {maxDate}';
-    Messages.MIN_DATE_MSG = 'Min Date should be {minDate}';
-    Messages.MAX_MSG = 'Max value should be {max}';
-    Messages.MIN_MSG = 'Min value should be {min}';
-
     var MaxLengthValidator = /** @class */ (function () {
         function MaxLengthValidator() {
         }
@@ -2512,7 +2501,8 @@
     }());
 
     var ValidationFactory = /** @class */ (function () {
-        function ValidationFactory() {
+        function ValidationFactory(translate) {
+            this.translate = translate;
         }
         ValidationFactory.prototype.getValidators = function (question, form) {
             var _this = this;
@@ -2636,31 +2626,43 @@
                 if (errors.hasOwnProperty(property)) {
                     switch (property) {
                         case 'required':
-                            messages.push(Messages.REQUIRED_FIELD_MSG);
+                            messages.push(this.translate.instant('requiredField'));
                             break;
                         case 'date':
-                            messages.push(Messages.INVALID_DATE_MSG);
+                            messages.push(this.translate.instant('invalidDate'));
                             break;
                         case 'futureDateRestriction':
-                            messages.push(Messages.FUTURE_DATE_RESTRICTION_MSG);
+                            messages.push(this.translate.instant('futureDateRestriction'));
                             break;
                         case 'minlength':
-                            messages.push(Messages.MIN_LENGTH_MSG.replace('{minLength}', errors.minlength.requiredLength));
+                            messages.push(this.translate
+                                .instant('minLength')
+                                .replace('{minLength}', errors.minlength.requiredLength));
                             break;
                         case 'maxlength':
-                            messages.push(Messages.MAX_LENGTH_MSG.replace('{maxLength}', errors.maxlength.requiredLength));
+                            messages.push(this.translate
+                                .instant('maxLength')
+                                .replace('{maxLength}', errors.maxlength.requiredLength));
                             break;
                         case 'maxdate':
-                            messages.push(Messages.MAX_DATE_MSG.replace('{maxDate}', errors.maxdate.requiredDate));
+                            messages.push(this.translate
+                                .instant('maxDate')
+                                .replace('{maxDate}', errors.maxdate.requiredDate));
                             break;
                         case 'mindate':
-                            messages.push(Messages.MIN_DATE_MSG.replace('{minDate}', errors.mindate.requiredDate));
+                            messages.push(this.translate
+                                .instant('minDate')
+                                .replace('{minDate}', errors.mindate.requiredDate));
                             break;
                         case 'max':
-                            messages.push(Messages.MAX_MSG.replace('{max}', errors.max.requiredValue));
+                            messages.push(this.translate
+                                .instant('max')
+                                .replace('{max}', errors.max.requiredValue));
                             break;
                         case 'min':
-                            messages.push(Messages.MIN_MSG.replace('{min}', errors.min.requiredValue));
+                            messages.push(this.translate
+                                .instant('min')
+                                .replace('{min}', errors.min.requiredValue));
                             break;
                         case 'js_expression':
                             messages.push(errors['js_expression'].message);
@@ -2678,11 +2680,11 @@
         };
         return ValidationFactory;
     }());
-    ValidationFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ValidationFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ValidationFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ValidationFactory, deps: [{ token: i4__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     ValidationFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ValidationFactory });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ValidationFactory, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () { return [{ type: i4__namespace.TranslateService }]; } });
 
     var HidersDisablersFactory = /** @class */ (function () {
         function HidersDisablersFactory(expressionRunner, expressionHelper, _debugModeService) {
@@ -3057,7 +3059,7 @@
         return CustomComponentWrapperComponent;
     }());
     CustomComponentWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CustomComponentWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: { componentConfigs: "componentConfigs", dark: "dark" }, ngImport: i0__namespace, template: "<div>\n  <ng-template #error>Component Loading failed...</ng-template>\n  <ng-template #loading>Loading Component...</ng-template>\n  <div *ngFor=\"let componentConfig of componentConfigs\">\n    <ax-lazy-element\n      *axLazyElementDynamic=\"\n        componentConfig.tag;\n        url: componentConfig.url;\n        module: true;\n        errorTemplate: error;\n        loadingTemplate: loading\n      \"\n      [config]=\"componentConfig\"\n      [dark]=\"dark\"\n    >\n    </ax-lazy-element>\n  </div>\n</div>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
+    CustomComponentWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: { componentConfigs: "componentConfigs", dark: "dark" }, ngImport: i0__namespace, template: "<div>\n  <ng-template #error>{{ 'componentLoadingFailed' | translate }}</ng-template>\n  <ng-template #loading>{{ 'loadingComponent' | translate }}</ng-template>\n  <div *ngFor=\"let componentConfig of componentConfigs\">\n    <ax-lazy-element\n      *axLazyElementDynamic=\"\n        componentConfig.tag;\n        url: componentConfig.url;\n        module: true;\n        errorTemplate: error;\n        loadingTemplate: loading\n      \"\n      [config]=\"componentConfig\"\n      [dark]=\"dark\"\n    >\n    </ax-lazy-element>\n  </div>\n</div>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3121,7 +3123,7 @@
                 multi: true,
                 useExisting: i0.forwardRef(function () { return CustomControlWrapperComponent; })
             }
-        ], ngImport: i0__namespace, template: "<div>\n  <ng-template #error>Loading failed...</ng-template>\n  <ng-template #loading>Loading...</ng-template>\n  <ax-lazy-element\n    *axLazyElementDynamic=\"\n      customControlConfig.tag;\n      url: customControlConfig.url;\n      module: true;\n      errorTemplate: error;\n      loadingTemplate: loading\n    \"\n    [question]=\"question\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    (on-change)=\"onValueChange($event)\"\n    [config]=\"config\"\n  >\n  </ax-lazy-element>\n</div>\n", directives: [{ type: i2__namespace.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
+        ], ngImport: i0__namespace, template: "<div>\n  <ng-template #error>{{ 'componentLoadingFailed' | translate }}</ng-template>\n  <ng-template #loading>{{ 'loadingComponent' | translate }}</ng-template>\n  <ax-lazy-element\n    *axLazyElementDynamic=\"\n      customControlConfig.tag;\n      url: customControlConfig.url;\n      module: true;\n      errorTemplate: error;\n      loadingTemplate: loading\n    \"\n    [question]=\"question\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    (on-change)=\"onValueChange($event)\"\n    [config]=\"config\"\n  >\n  </ax-lazy-element>\n</div>\n", directives: [{ type: i2__namespace.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3659,7 +3661,7 @@
                 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    [appendTo]=\"'form'\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i13__namespace.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: i21__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21__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=\"{{ 'enterMoreCharacters' | translate }}\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    [appendTo]=\"'form'\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i13__namespace.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: i21__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1__namespace.AsyncPipe, "translate": i4__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoteSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3697,7 +3699,8 @@
      * date-time-picker-intl.service
      */
     var OwlDateTimeIntl = /** @class */ (function () {
-        function OwlDateTimeIntl() {
+        function OwlDateTimeIntl(translate) {
+            this.translate = translate;
             /**
              * Stream that emits whenever the labels here are changed. Use this to notify
              * components if the labels have changed after initialization.
@@ -3732,13 +3735,13 @@
             /** A label for the 'switch to year view' button (used by screen readers). */
             this.switchToMultiYearViewLabel = 'Choose month and year';
             /** A label for the cancel button */
-            this.cancelBtnLabel = 'Cancel';
+            this.cancelBtnLabel = this.translate.instant('cancel');
             /** A label for the set button */
-            this.setBtnLabel = 'Set';
+            this.setBtnLabel = this.translate.instant('set');
             /** A label for the range 'from' in picker info */
-            this.rangeFromLabel = 'From';
+            this.rangeFromLabel = this.translate.instant('from');
             /** A label for the range 'to' in picker info */
-            this.rangeToLabel = 'To';
+            this.rangeToLabel = this.translate.instant('to');
             /** A label for the hour12 button (AM) */
             this.hour12AMLabel = 'AM';
             /** A label for the hour12 button (PM) */
@@ -3746,12 +3749,12 @@
         }
         return OwlDateTimeIntl;
     }());
-    OwlDateTimeIntl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeIntl, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    OwlDateTimeIntl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeIntl, deps: [{ token: i4__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     OwlDateTimeIntl.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeIntl, providedIn: 'root' });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeIntl, decorators: [{
                 type: i0.Injectable,
                 args: [{ providedIn: 'root' }]
-            }] });
+            }], ctorParameters: function () { return [{ type: i4__namespace.TranslateService }]; } });
 
     /**
      * date-time-adapter.class
@@ -9072,7 +9075,7 @@
                 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          [ofeOwlDateTimeTrigger]=\"dt1\"\n          placeholder=\"mm/dd/yyyy\"\n          data-date-picker-input\n        />\n        <svg\n          [ofeOwlDateTimeTrigger]=\"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<ofe-owl-date-time\n  [pickerType]=\"datePickerFormat ? datePickerFormat : 'calendar'\"\n  [disabled]=\"isDisabled\"\n  #dt1\n></ofe-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: "ofe-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: "[ofeOwlDateTimeTrigger]", inputs: ["ofeOwlDateTimeTrigger", "disabled"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i21__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21__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          [ofeOwlDateTimeTrigger]=\"dt1\"\n          placeholder=\"mm/dd/yyyy\"\n          data-date-picker-input\n        />\n        <svg\n          [ofeOwlDateTimeTrigger]=\"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          {{ 'selectWeeks' | translate }}\n        </option>\n        <option\n          class=\"cds--select-option\"\n          [value]=\"week\"\n          *ngFor=\"let week of weeks\"\n        >\n          {{week}} {{ 'weeks' | translate }}\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<ofe-owl-date-time\n  [pickerType]=\"datePickerFormat ? datePickerFormat : 'calendar'\"\n  [disabled]=\"isDisabled\"\n  #dt1\n></ofe-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: "ofe-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: "[ofeOwlDateTimeTrigger]", inputs: ["ofeOwlDateTimeTrigger", "disabled"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i21__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxDatetimeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10350,7 +10353,7 @@
         return FormRendererComponent;
     }());
     FormRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: i4__namespace.TranslateService }, { token: i1.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FormRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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 | translate\"\n      *ngFor=\"let question of node.question.questions; let i = index\"\n    >\n      <ofe-form-renderer\n        [node]=\"node.children[question.key] | translate\"\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 | translate }}\n            </p>\n            <p class=\"cds--inline-notification__subtitle\">\n              {{ getControlError(errorNode | translate) }}\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 | translate }}\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 | translate\"\n      >\n        {{ node.question.required ? '*' : '' }}\n        {{ node.question.prefix ? node.question.prefix + ' ' : '' }}\n        {{ node.question.label | translate }}\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\n              *ngFor=\"let option of node.question.options\"\n              [value]=\"option.value\"\n            >\n              {{ option.label | translate }}\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 | translate\"\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 | translate\"\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            [multiple]=\"true\"\n            [appendTo]=\"'form'\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n            <ng-option\n              *ngFor=\"let option of node.question.options\"\n              [value]=\"option.value\"\n            >\n              {{ option.label | translate }}\n            </ng-option>\n          </ng-select>\n\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'single-select'\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n            <ng-option\n              *ngFor=\"let option of node.question.options\"\n              [value]=\"option.value\"\n            >\n              {{ option.label | translate }}\n            </ng-option>\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            [maxlength]=\"node.question.extras.questionOptions.maxLength\"\n            [minlength]=\"node.question.extras.questionOptions.minLength\"\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder | translate\"\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 | translate\"\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              [orientation]=\"node.question.orientation\"\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                  [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 | translate }}\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\">\n        {{ node.question.label | translate }}\n      </h4>\n      <div>\n        <label\n          class=\"cds--label\"\n          *ngIf=\"node.question.extras.questionOptions.min\"\n          style=\"margin-right: 2px\"\n          >min: {{ node.question.extras.questionOptions.min }}</label\n        >\n        <label\n          class=\"cds--label\"\n          *ngIf=\"node.question.extras.questionOptions.max\"\n          >max: {{ node.question.extras.questionOptions.max }}</label\n        >\n      </div>\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=\"'diagnosis'\">\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            <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        [ngClass]=\"{\n          disabled:\n            node.children.length >= node.question.extras.questionOptions.max\n        }\"\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:.125rem}[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:95%}.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: i13__namespace.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: i13__namespace.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }, { type: NumberInputComponent, selector: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "maxlength", "minlength", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect", "orientation"] }, { 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: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { 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: i21__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i21__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i21__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21__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: i21__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21__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: i21__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i21__namespace.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "translate": i4__namespace.TranslatePipe, "date": i1__namespace.DatePipe, "timeAgo": TimeAgoPipe } });
+    FormRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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 | translate\"\n      *ngFor=\"let question of node.question.questions; let i = index\"\n    >\n      <ofe-form-renderer\n        [node]=\"node.children[question.key] | translate\"\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 | translate }}\n            </p>\n            <p class=\"cds--inline-notification__subtitle\">\n              {{ getControlError(errorNode | translate) }}\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' | translate }}\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 | translate }}\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 | translate\"\n      >\n        {{ node.question.required ? '*' : '' }}\n        {{ node.question.prefix ? node.question.prefix + ' ' : '' }}\n        {{ node.question.label | translate }}\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\n              *ngFor=\"let option of node.question.options\"\n              [value]=\"option.value\"\n            >\n              {{ option.label | translate }}\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 | translate\"\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 | translate\"\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            [multiple]=\"true\"\n            [appendTo]=\"'form'\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n            <ng-option\n              *ngFor=\"let option of node.question.options\"\n              [value]=\"option.value\"\n            >\n              {{ option.label | translate }}\n            </ng-option>\n          </ng-select>\n\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'single-select'\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n            <ng-option\n              *ngFor=\"let option of node.question.options\"\n              [value]=\"option.value\"\n            >\n              {{ option.label | translate }}\n            </ng-option>\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            [maxlength]=\"node.question.extras.questionOptions.maxLength\"\n            [minlength]=\"node.question.extras.questionOptions.minLength\"\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder | translate\"\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 | translate\"\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              [orientation]=\"node.question.orientation\"\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\"\n                    >{{ 'previousValue' | translate }}:\n                  </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                  [name]=\"'historyValue'\"\n                  class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\"\n                >\n                  {{ 'useValue' | translate }}\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 | translate }}\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\">\n        {{ node.question.label | translate }}\n      </h4>\n      <div>\n        <label\n          class=\"cds--label\"\n          *ngIf=\"node.question.extras.questionOptions.min\"\n          style=\"margin-right: 2px\"\n          >min: {{ node.question.extras.questionOptions.min }}</label\n        >\n        <label\n          class=\"cds--label\"\n          *ngIf=\"node.question.extras.questionOptions.max\"\n          >max: {{ node.question.extras.questionOptions.max }}</label\n        >\n      </div>\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' | translate }}\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=\"'diagnosis'\">\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            <button\n              type=\"button \"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              {{ 'remove' | translate }}\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' | translate }}\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        [ngClass]=\"{\n          disabled:\n            node.children.length >= node.question.extras.questionOptions.max\n        }\"\n      >\n        {{ 'add' | translate }}\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:.125rem}[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:95%}.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: i13__namespace.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: i13__namespace.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }, { type: NumberInputComponent, selector: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "maxlength", "minlength", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect", "orientation"] }, { 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: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { 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: i21__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i21__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i21__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21__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: i21__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21__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: i21__namespace.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i21__namespace.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "translate": i4__namespace.TranslatePipe, "date": i1__namespace.DatePipe, "timeAgo": TimeAgoPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10418,7 +10421,7 @@
         return ErrorRendererComponent;
     }());
     ErrorRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorRendererComponent, deps: [{ token: ValidationFactory }, { token: FormErrorsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ErrorRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorRendererComponent, selector: "ofe-error-renderer", inputs: { form: "form" }, ngImport: i0__namespace, template: "<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", styles: ["ul{list-style:none}.list-group-item{padding:2px 15px;cursor:pointer}ul li:hover{background-color:#fff}h4{margin-top:7px;margin-bottom:7px}.pointer{cursor:pointer}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    ErrorRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorRendererComponent, selector: "ofe-error-renderer", inputs: { form: "form" }, ngImport: i0__namespace, template: "<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' | translate }}\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", styles: ["ul{list-style:none}.list-group-item{padding:2px 15px;cursor:pointer}ul li:hover{background-color:#fff}h4{margin-top:7px;margin-bottom:7px}.pointer{cursor:pointer}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i4__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10943,7 +10946,7 @@
                 useExisting: i0.forwardRef(function () { return DateTimePickerComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<div class=\"row\">\n  <div *ngIf=\"!showTime\" class=\"col-xs-12 col-md-12\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-8 col-md-8\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-4 col-md-4\">\n    <input\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'shortTime'\"\n      (focus)=\"toggleTimePicker(true)\"\n      readonly\n      placeholder=\"Select Time\"\n    />\n  </div>\n</div>\n<ofe-date-picker\n  *ngIf=\"showDatePicker\"\n  [initDate]=\"value\"\n  (dateSelect)=\"setDate($event)\"\n  (datePickerCancel)=\"toggleDatePicker($event)\"\n></ofe-date-picker>\n\n<ofe-time-picker\n  *ngIf=\"showTimePicker\"\n  [initTime]=\"value\"\n  [use12Hour]=\"true\"\n  (timeSelect)=\"setTime($event)\"\n  (timePickerCancel)=\"toggleTimePicker($event)\"\n></ofe-time-picker>\n", styles: ["input[readonly]{background-color:#fff}.up{bottom:100%!important;top:auto!important}.glyphicon{top:1px}\n"], components: [{ type: DatePickerComponent, selector: "ofe-date-picker", inputs: ["initDate", "locale", "viewFormat", "returnObject"], outputs: ["datePickerCancel", "dateSelect"] }, { type: TimePickerComponent, selector: "ofe-time-picker", inputs: ["initTime", "showSecond", "viewFormat", "use12Hour", "returnObject"], outputs: ["timeSelect", "timePickerCancel"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace.DatePipe } });
+        ], ngImport: i0__namespace, template: "<div class=\"row\">\n  <div *ngIf=\"!showTime\" class=\"col-xs-12 col-md-12\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'weeks' | translate }} <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} {{ 'weeks' | translate }}</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-8 col-md-8\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'weeks' | translate }} <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} {{ 'weeks' | translate }}</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-4 col-md-4\">\n    <input\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'shortTime'\"\n      (focus)=\"toggleTimePicker(true)\"\n      readonly\n      placeholder=\"Select Time\"\n    />\n  </div>\n</div>\n<ofe-date-picker\n  *ngIf=\"showDatePicker\"\n  [initDate]=\"value\"\n  (dateSelect)=\"setDate($event)\"\n  (datePickerCancel)=\"toggleDatePicker($event)\"\n></ofe-date-picker>\n\n<ofe-time-picker\n  *ngIf=\"showTimePicker\"\n  [initTime]=\"value\"\n  [use12Hour]=\"true\"\n  (timeSelect)=\"setTime($event)\"\n  (timePickerCancel)=\"toggleTimePicker($event)\"\n></ofe-time-picker>\n", styles: ["input[readonly]{background-color:#fff}.up{bottom:100%!important;top:auto!important}.glyphicon{top:1px}\n"], components: [{ type: DatePickerComponent, selector: "ofe-date-picker", inputs: ["initDate", "locale", "viewFormat", "returnObject"], outputs: ["datePickerCancel", "dateSelect"] }, { type: TimePickerComponent, selector: "ofe-time-picker", inputs: ["initTime", "showSecond", "viewFormat", "use12Hour", "returnObject"], outputs: ["timeSelect", "timePickerCancel"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace.DatePipe, "translate": i4__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10985,16 +10988,16 @@
             TimePickerComponent,
             ModalComponent,
             MomentPipe,
-            DateTimePickerComponent], imports: [i1.CommonModule, i21.FormsModule], exports: [DatePickerComponent,
+            DateTimePickerComponent], imports: [i1.CommonModule, i21.FormsModule, i4.TranslateModule], exports: [DatePickerComponent,
             TimePickerComponent,
             ModalComponent,
             MomentPipe,
             DateTimePickerComponent] });
-    DateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule]] });
+    DateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule, i4.TranslateModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i21.FormsModule],
+                        imports: [i1.CommonModule, i21.FormsModule, i4.TranslateModule],
                         declarations: [
                             DatePickerComponent,
                             TimePickerComponent,
@@ -11385,7 +11388,11 @@
             OwlCalendarComponent,
             OwlCalendarBodyComponent,
             NumberFixedLenPipe,
-            OwlDateTimeInlineComponent], imports: [i1.CommonModule, i1$5.OverlayModule, OwlDialogModule, i1$3.A11yModule], exports: [OwlCalendarComponent,
+            OwlDateTimeInlineComponent], imports: [i1.CommonModule,
+            i1$5.OverlayModule,
+            OwlDialogModule,
+            i1$3.A11yModule,
+            i4.TranslateModule], exports: [OwlCalendarComponent,
             OwlTimerComponent,
             OwlDateTimeTriggerDirective,
             OwlDateTimeInputDirective,
@@ -11394,11 +11401,23 @@
             OwlMultiYearViewComponent,
             OwlYearViewComponent,
             OwlMonthViewComponent] });
-    OwlDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeModule, providers: [OwlDateTimeIntl, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER], imports: [[i1.CommonModule, i1$5.OverlayModule, OwlDialogModule, i1$3.A11yModule]] });
+    OwlDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeModule, providers: [OwlDateTimeIntl, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER], imports: [[
+                i1.CommonModule,
+                i1$5.OverlayModule,
+                OwlDialogModule,
+                i1$3.A11yModule,
+                i4.TranslateModule
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i1$5.OverlayModule, OwlDialogModule, i1$3.A11yModule],
+                        imports: [
+                            i1.CommonModule,
+                            i1$5.OverlayModule,
+                            OwlDialogModule,
+                            i1$3.A11yModule,
+                            i4.TranslateModule
+                        ],
                         exports: [
                             OwlCalendarComponent,
                             OwlTimerComponent,
@@ -11849,12 +11868,14 @@
     NgxDateTimePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxDateTimePickerModule, declarations: [NgxDatetimeComponent], imports: [i1.CommonModule,
             i21.FormsModule,
             OwlDateTimeModule,
-            OwlNativeDateTimeModule], exports: [NgxDatetimeComponent] });
+            OwlNativeDateTimeModule,
+            i4.TranslateModule], exports: [NgxDatetimeComponent] });
     NgxDateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxDateTimePickerModule, providers: [], imports: [[
                 i1.CommonModule,
                 i21.FormsModule,
                 OwlDateTimeModule,
-                OwlNativeDateTimeModule
+                OwlNativeDateTimeModule,
+                i4.TranslateModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxDateTimePickerModule, decorators: [{
                 type: i0.NgModule,
@@ -11863,7 +11884,8 @@
                             i1.CommonModule,
                             i21.FormsModule,
                             OwlDateTimeModule,
-                            OwlNativeDateTimeModule
+                            OwlNativeDateTimeModule,
+                            i4.TranslateModule
                         ],
                         declarations: [NgxDatetimeComponent],
                         exports: [NgxDatetimeComponent],
@@ -13947,10 +13969,11 @@
             }], ctorParameters: function () { return []; } });
 
     var FormFactory = /** @class */ (function () {
-        function FormFactory(controlService, questionFactroy, controlRelationsFactory) {
+        function FormFactory(controlService, questionFactroy, controlRelationsFactory, translate) {
             this.controlService = controlService;
             this.questionFactroy = questionFactroy;
             this.controlRelationsFactory = controlRelationsFactory;
+            this.translate = translate;
             this.nodeIndex = 0;
             this.hd = {
                 getValue: function () {
@@ -14010,7 +14033,7 @@
         FormFactory.prototype.createArrayNode = function (question, parentNode, parentControl, form) {
             var _this = this;
             var controlModel = this.controlService.generateControlModel(question, parentControl, false, form);
-            var arrayNode = new ArrayNode(question, controlModel, parentControl, this, form, parentNode ? parentNode.path : undefined);
+            var arrayNode = new ArrayNode(question, this.translate, controlModel, parentControl, this, form, parentNode ? parentNode.path : undefined);
             arrayNode.createChildFunc = this.createArrayNodeChild;
             arrayNode.removeChildFunc = this.removeArrayNodeChild;
             arrayNode.addChildNodeCreatedListener(function (node) {
@@ -14070,11 +14093,11 @@
         };
         return FormFactory;
     }());
-    FormFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormFactory, deps: [{ token: FormControlService }, { token: QuestionFactory }, { token: ControlRelationsFactory }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FormFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormFactory, deps: [{ token: FormControlService }, { token: QuestionFactory }, { token: ControlRelationsFactory }, { token: i4__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     FormFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormFactory });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormFactory, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: FormControlService }, { type: QuestionFactory }, { type: ControlRelationsFactory }]; } });
+            }], ctorParameters: function () { return [{ type: FormControlService }, { type: QuestionFactory }, { type: ControlRelationsFactory }, { type: i4__namespace.TranslateService }]; } });
 
     var OrderValueAdapter = /** @class */ (function () {
         function OrderValueAdapter() {
@@ -15990,12 +16013,12 @@
         return NgxRemoteSelectModule;
     }());
     NgxRemoteSelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxRemoteSelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NgxRemoteSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [i1.CommonModule, i13.NgSelectModule, i21.FormsModule], exports: [RemoteSelectComponent] });
-    NgxRemoteSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxRemoteSelectModule, providers: [], imports: [[i1.CommonModule, i13.NgSelectModule, i21.FormsModule]] });
+    NgxRemoteSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [i1.CommonModule, i13.NgSelectModule, i21.FormsModule, i4.TranslateModule], exports: [RemoteSelectComponent] });
+    NgxRemoteSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxRemoteSelectModule, providers: [], imports: [[i1.CommonModule, i13.NgSelectModule, i21.FormsModule, i4.TranslateModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxRemoteSelectModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i13.NgSelectModule, i21.FormsModule],
+                        imports: [i1.CommonModule, i13.NgSelectModule, i21.FormsModule, i4.TranslateModule],
                         exports: [RemoteSelectComponent],
                         declarations: [RemoteSelectComponent],
                         providers: []
@@ -16269,13 +16292,13 @@
         return CustomControlWrapperModule;
     }());
     CustomControlWrapperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CustomControlWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [i1.CommonModule, i21.FormsModule, i2.LazyElementsModule], exports: [CustomControlWrapperComponent] });
-    CustomControlWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule, i2.LazyElementsModule]] });
+    CustomControlWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [i1.CommonModule, i21.FormsModule, i2.LazyElementsModule, i4.TranslateModule], exports: [CustomControlWrapperComponent] });
+    CustomControlWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule, i2.LazyElementsModule, i4.TranslateModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
-                        imports: [i1.CommonModule, i21.FormsModule, i2.LazyElementsModule],
+                        imports: [i1.CommonModule, i21.FormsModule, i2.LazyElementsModule, i4.TranslateModule],
                         exports: [CustomControlWrapperComponent],
                         declarations: [CustomControlWrapperComponent],
                         providers: []
@@ -16288,13 +16311,13 @@
         return CustomComponentWrapperModule;
     }());
     CustomComponentWrapperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CustomComponentWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperModule, declarations: [CustomComponentWrapperComponent], imports: [i1.CommonModule, i2.LazyElementsModule], exports: [CustomComponentWrapperComponent] });
-    CustomComponentWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperModule, providers: [], imports: [[i1.CommonModule, i2.LazyElementsModule]] });
+    CustomComponentWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperModule, declarations: [CustomComponentWrapperComponent], imports: [i1.CommonModule, i2.LazyElementsModule, i4.TranslateModule], exports: [CustomComponentWrapperComponent] });
+    CustomComponentWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperModule, providers: [], imports: [[i1.CommonModule, i2.LazyElementsModule, i4.TranslateModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
-                        imports: [i1.CommonModule, i2.LazyElementsModule],
+                        imports: [i1.CommonModule, i2.LazyElementsModule, i4.TranslateModule],
                         exports: [CustomComponentWrapperComponent],
                         declarations: [CustomComponentWrapperComponent],
                         providers: []