@openmrs/ngx-formentry 3.0.1-pre.97 → 3.1.1-pre.177

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

@@ -58,9 +58,9 @@
         };
         return DebugModeService;
     }());
-    DebugModeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DebugModeService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    DebugModeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DebugModeService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DebugModeService, decorators: [{
+    DebugModeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DebugModeService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DebugModeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DebugModeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DebugModeService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -161,9 +161,9 @@
         };
         return TimeAgoPipe;
     }());
-    TimeAgoPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimeAgoPipe, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TimeAgoPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimeAgoPipe, name: "timeAgo", pure: false });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimeAgoPipe, decorators: [{
+    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.ɵ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,
                 args: [{
                         name: 'timeAgo',
@@ -184,9 +184,9 @@
     // Observable string sources
     FormErrorsService.control = null;
     FormErrorsService.tab = null;
-    FormErrorsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormErrorsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    FormErrorsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormErrorsService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormErrorsService, decorators: [{
+    FormErrorsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormErrorsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FormErrorsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormErrorsService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormErrorsService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -1134,9 +1134,9 @@
         };
         return ControlRelationsFactory;
     }());
-    ControlRelationsFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ControlRelationsFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ControlRelationsFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ControlRelationsFactory });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ControlRelationsFactory, decorators: [{
+    ControlRelationsFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ControlRelationsFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ControlRelationsFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ControlRelationsFactory });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ControlRelationsFactory, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -1323,9 +1323,9 @@
         };
         return ExpressionRunner;
     }());
-    ExpressionRunner.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ExpressionRunner, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ExpressionRunner.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ExpressionRunner });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ExpressionRunner, decorators: [{
+    ExpressionRunner.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExpressionRunner, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ExpressionRunner.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExpressionRunner });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ExpressionRunner, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -2007,6 +2007,10 @@
             return height && weight && refSectionObject ? formattedSDValue : null;
         };
         JsExpressionHelper.prototype.calcSouthEastAsiaNonLabCVDRisk = function (sex, smoker, age, sbp, bmi) {
+            var hasValidValues = (typeof sex === "string" && typeof smoker === "boolean" && typeof age === "number" && typeof sbp === "number" && typeof bmi === "number");
+            if (!hasValidValues) {
+                return null;
+            }
             // Bin functions
             var getAgeBin = function (age) { return Math.floor((Math.min(Math.max(40, age), 74) - 40) / 5); };
             var getSbpBin = function (sbp) { return Math.max(0, Math.floor((Math.min(sbp, 180) - 120) / 20) + 1); };
@@ -2086,16 +2090,23 @@
                 return array.indexOf(members) !== -1;
             }
         };
-        /*
-         TODO make it possible to bootstrap expressions without control relations to make alternateControl optional as at the moment it required
-         if no other expression on the control as a relationship to another control*/
-        JsExpressionHelper.prototype.extractObsValue = function (rawEncounter, uuid, alternateControl) {
+        /**
+         * Takes a target control, an encounter and concept uuid. If the target control has a value it returns it
+         * otherwise it tries to find it in the encounter. Finally it returns null of it can't find either of them.
+         * @param targetControl
+         * @param rawEncounter
+         * @param uuid
+         * @returns
+         */
+        JsExpressionHelper.prototype.getObsFromControlOrEncounter = function (targetControl, rawEncounter, uuid) {
+            var _a;
             var findObs = function (obs, uuid) {
                 var result;
-                obs === null || obs === void 0 ? void 0 : obs.some(function (o) { var _a; return result = ((_a = o === null || o === void 0 ? void 0 : o.concept) === null || _a === void 0 ? void 0 : _a.uuid) === uuid ? o : findObs(o.children || [], uuid); });
+                obs === null || obs === void 0 ? void 0 : obs.some(function (o) { var _a; return result = ((_a = o === null || o === void 0 ? void 0 : o.concept) === null || _a === void 0 ? void 0 : _a.uuid) === uuid ? o : findObs(o.groupMembers || [], uuid); });
                 return result;
             };
-            return findObs(rawEncounter.obs, uuid).value || alternateControl;
+            var obsValue = (_a = findObs(rawEncounter === null || rawEncounter === void 0 ? void 0 : rawEncounter.obs, uuid)) === null || _a === void 0 ? void 0 : _a.value;
+            return !!targetControl ? targetControl : typeof obsValue === 'object' ? obsValue.uuid : !!obsValue ? obsValue : null;
         };
         Object.defineProperty(JsExpressionHelper.prototype, "helperFunctions", {
             get: function () {
@@ -2110,7 +2121,7 @@
                     isEmpty: helper.isEmpty,
                     arrayContains: helper.arrayContains,
                     extractRepeatingGroupValues: helper.extractRepeatingGroupValues,
-                    extractObsValue: helper.extractObsValue
+                    getObsFromControlOrEncounter: helper.getObsFromControlOrEncounter
                 };
             },
             enumerable: false,
@@ -2118,9 +2129,9 @@
         });
         return JsExpressionHelper;
     }());
-    JsExpressionHelper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: JsExpressionHelper, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    JsExpressionHelper.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: JsExpressionHelper });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: JsExpressionHelper, decorators: [{
+    JsExpressionHelper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsExpressionHelper, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    JsExpressionHelper.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsExpressionHelper });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsExpressionHelper, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -2407,6 +2418,46 @@
     Messages.MAX_MSG = 'Max value should be {max}';
     Messages.MIN_MSG = 'Min value should be {min}';
 
+    var MaxLengthValidator = /** @class */ (function () {
+        function MaxLengthValidator() {
+        }
+        MaxLengthValidator.prototype.validate = function (maxLength) {
+            return function (control) {
+                if (control.hidden) {
+                    return null;
+                }
+                if (control.value && control.value.length !== 0) {
+                    var v = (control.value).toString().length;
+                    return v <= maxLength
+                        ? null
+                        : { maxlength: { requiredLength: maxLength, actualValue: v } };
+                }
+                return null;
+            };
+        };
+        return MaxLengthValidator;
+    }());
+
+    var MinLengthValidator = /** @class */ (function () {
+        function MinLengthValidator() {
+        }
+        MinLengthValidator.prototype.validate = function (minLength) {
+            return function (control) {
+                if (control.hidden) {
+                    return null;
+                }
+                if (control.value && control.value.length !== 0) {
+                    var v = (control.value).toString().length;
+                    return v >= minLength
+                        ? null
+                        : { minlength: { requiredLength: minLength, actualValue: v } };
+                }
+                return null;
+            };
+        };
+        return MinLengthValidator;
+    }());
+
     var ValidationFactory = /** @class */ (function () {
         function ValidationFactory() {
         }
@@ -2430,9 +2481,15 @@
                         case 'max':
                             list.push(_this.getMaxValueValidator(validator.max));
                             break;
+                        case 'maxlength':
+                            list.push(_this.maxLengthValidator(validator.maxlength));
+                            break;
                         case 'min':
                             list.push(_this.getMinValueValidator(validator.min));
                             break;
+                        case 'minlength':
+                            list.push(_this.minLengthValidator(validator.minlength));
+                            break;
                         case 'conditionalRequired':
                             list.push(_this.conditionalRequiredValidator.validate(validator));
                             break;
@@ -2501,20 +2558,12 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ValidationFactory.prototype, "minLengthValidator", {
-            get: function () {
-                return i21.Validators.minLength;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ValidationFactory.prototype, "maxLengthValidator", {
-            get: function () {
-                return i21.Validators.maxLength;
-            },
-            enumerable: false,
-            configurable: true
-        });
+        ValidationFactory.prototype.minLengthValidator = function (minLength) {
+            return new MinLengthValidator().validate(minLength);
+        };
+        ValidationFactory.prototype.maxLengthValidator = function (maxLength) {
+            return new MaxLengthValidator().validate(maxLength);
+        };
         ValidationFactory.prototype.getMinValueValidator = function (min) {
             return new MinValidator().validate(min);
         };
@@ -2546,7 +2595,7 @@
                             messages.push(Messages.MIN_LENGTH_MSG.replace('{minLength}', errors.minlength.requiredLength));
                             break;
                         case 'maxlength':
-                            messages.push(Messages.MIN_LENGTH_MSG.replace('{maxLength}', errors.maxlength.requiredLength));
+                            messages.push(Messages.MAX_LENGTH_MSG.replace('{maxLength}', errors.maxlength.requiredLength));
                             break;
                         case 'maxdate':
                             messages.push(Messages.MAX_DATE_MSG.replace('{maxDate}', errors.maxdate.requiredDate));
@@ -2576,9 +2625,9 @@
         };
         return ValidationFactory;
     }());
-    ValidationFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ValidationFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ValidationFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ValidationFactory });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ValidationFactory, decorators: [{
+    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.ɵ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 []; } });
 
@@ -2635,9 +2684,9 @@
         };
         return HidersDisablersFactory;
     }());
-    HidersDisablersFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HidersDisablersFactory, deps: [{ token: ExpressionRunner }, { token: JsExpressionHelper }, { token: DebugModeService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    HidersDisablersFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HidersDisablersFactory });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HidersDisablersFactory, decorators: [{
+    HidersDisablersFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HidersDisablersFactory, deps: [{ token: ExpressionRunner }, { token: JsExpressionHelper }, { token: DebugModeService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    HidersDisablersFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HidersDisablersFactory });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HidersDisablersFactory, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: ExpressionRunner }, { type: JsExpressionHelper }, { type: DebugModeService }]; } });
 
@@ -2661,9 +2710,9 @@
         };
         return AlertsFactory;
     }());
-    AlertsFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AlertsFactory, deps: [{ token: ExpressionRunner }, { token: JsExpressionHelper }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    AlertsFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AlertsFactory });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AlertsFactory, decorators: [{
+    AlertsFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AlertsFactory, deps: [{ token: ExpressionRunner }, { token: JsExpressionHelper }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    AlertsFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AlertsFactory });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AlertsFactory, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: ExpressionRunner }, { type: JsExpressionHelper }]; } });
 
@@ -2770,9 +2819,9 @@
         };
         return FormControlService;
     }());
-    FormControlService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormControlService, deps: [{ token: ValidationFactory }, { token: HidersDisablersFactory }, { token: AlertsFactory }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    FormControlService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormControlService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormControlService, decorators: [{
+    FormControlService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormControlService, deps: [{ token: ValidationFactory }, { token: HidersDisablersFactory }, { token: AlertsFactory }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FormControlService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormControlService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormControlService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: ValidationFactory }, { type: HidersDisablersFactory }, { type: AlertsFactory }]; } });
 
@@ -2804,9 +2853,9 @@
         };
         return DataSources;
     }());
-    DataSources.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DataSources, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    DataSources.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DataSources });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DataSources, decorators: [{
+    DataSources.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataSources, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DataSources.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataSources });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataSources, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -2819,9 +2868,9 @@
         }
         return TabComponent;
     }());
-    TabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabComponent, selector: "ofe-tab", inputs: { tabTitle: "tabTitle", tabSubTitle: "tabSubTitle", active: "active", disabled: "disabled", bypassDOM: "bypassDOM", customPaneClass: "customPaneClass" }, queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], ngImport: i0__namespace, template: "<div *ngIf=\"active\" class=\"pane\" [ngClass]=\"customPaneClass\">\n  <h4>{{ tabTitle }}</h4>\n  <div *ngIf=\"bypassDOM\">\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  </div>\n  <div *ngIf=\"!bypassDOM\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["h4{padding-left:1rem;margin-bottom:.5rem}h4:after{content:\"\";display:block;width:2rem;padding-top:.188rem;border-bottom:.375rem solid var(--brand-01)}.pane{background-color:#f4f4f4;margin:.5rem .125rem}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabComponent, decorators: [{
+    TabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabComponent, selector: "ofe-tab", inputs: { tabTitle: "tabTitle", tabSubTitle: "tabSubTitle", active: "active", disabled: "disabled", bypassDOM: "bypassDOM", customPaneClass: "customPaneClass" }, queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], ngImport: i0__namespace, template: "<div *ngIf=\"active\" class=\"pane\" [ngClass]=\"customPaneClass\">\n  <h4>{{ tabTitle }}</h4>\n  <div *ngIf=\"bypassDOM\">\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  </div>\n  <div *ngIf=\"!bypassDOM\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["h4{padding-left:1rem;margin-bottom:.5rem}h4:after{content:\"\";display:block;width:2rem;padding-top:.188rem;border-bottom:.375rem solid var(--brand-01)}.pane{background-color:#f4f4f4;margin:.5rem .125rem}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-tab',
@@ -2857,9 +2906,9 @@
         };
         return HoverClassDirective;
     }());
-    HoverClassDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HoverClassDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    HoverClassDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: { hoverClass: "hoverClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HoverClassDirective, decorators: [{
+    HoverClassDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HoverClassDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    HoverClassDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: { hoverClass: "hoverClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HoverClassDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[ofeHoverClass]'
@@ -2923,9 +2972,9 @@
         };
         return TabSetComponent;
     }());
-    TabSetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabSetComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TabSetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabSetComponent, selector: "ofe-tab-set", inputs: { disableStyle: "disableStyle", customNavClass: "customNavClass", customTabsClass: "customTabsClass", selectedIndex: "selectedIndex" }, outputs: { tabSelect: "tabSelect" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"tab-container\">\n  <div class=\"tab\">\n    <button\n      ofeHoverClass=\"hover\"\n      class=\"tablinks completed\"\n      *ngFor=\"let tab of tabs\"\n      (click)=\"selectTab(tab)\"\n      [class]=\"getStatusClasses(tab.active, tab.disabled)\"\n    >\n      <span>{{ tab.tabTitle }}</span>\n    </button>\n  </div>\n  <div id=\"tab\" class=\"tab-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".tab-container{overflow-x:hidden;display:flex}.tab{width:10rem;position:fixed}.tab button{font-family:inherit;display:block;background-color:inherit;width:100%;border:none;outline:none;text-align:left;transition:.3s;min-height:2rem;white-space:normal;word-wrap:break-word;margin:0 0 .063rem}.tab button :hover{cursor:pointer}@media screen and (max-width: 768px){.tab button{height:3rem;border-bottom:.0125rem solid var(--open-mrs-background-gray);width:10rem}}.tab button.active.hover{background-color:var(--gray-gray-10)}.tab button.enabled.hover{background-color:var(--gray-gray-10)}.tab button.completed{border-left:.5rem solid var(--inverse-support-02);background-color:var(--color-green-10);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.active{background-color:#ededed;border-left:.5rem solid #009d9a;font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--color-gray-100)}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--gray-gray-30)}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab-content{width:100%;margin-left:10rem}\n"], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: ["hoverClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabSetComponent, decorators: [{
+    TabSetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabSetComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TabSetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TabSetComponent, selector: "ofe-tab-set", inputs: { disableStyle: "disableStyle", customNavClass: "customNavClass", customTabsClass: "customTabsClass", selectedIndex: "selectedIndex" }, outputs: { tabSelect: "tabSelect" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"tab-container\">\n  <div class=\"tab\" *ngIf=\"tabs.length > 1\">\n    <button\n      ofeHoverClass=\"hover\"\n      class=\"tablinks completed\"\n      *ngFor=\"let tab of tabs\"\n      (click)=\"selectTab(tab)\"\n      [class]=\"getStatusClasses(tab.active, tab.disabled)\"\n    >\n      <span>{{ tab.tabTitle }}</span>\n    </button>\n  </div>\n  <div\n    id=\"tab\"\n    [ngClass]=\"{\n      'tab-content': tabs.length > 1,\n      'tab-content-no-margin': tabs.length === 1\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".tab-container{overflow-x:hidden;display:flex}.tab{width:10rem;position:fixed}.tab button{font-family:inherit;display:block;background-color:inherit;width:100%;border:none;outline:none;text-align:left;transition:.3s;min-height:2rem;white-space:normal;word-wrap:break-word;margin:0 0 .063rem}.tab button :hover{cursor:pointer}@media screen and (max-width: 768px){.tab button{height:3rem;border-bottom:.0125rem solid var(--open-mrs-background-gray);width:10rem}}.tab button.active.hover{background-color:var(--gray-gray-10)}.tab button.enabled.hover{background-color:var(--gray-gray-10)}.tab button.completed{border-left:.5rem solid var(--inverse-support-02);background-color:var(--color-green-10);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.active{background-color:#ededed;border-left:.5rem solid #009d9a;font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--color-gray-100)}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--gray-gray-30)}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab-content{width:100%;margin-left:10rem}.tab-content-no-margin{width:100%}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: ["hoverClass"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TabSetComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-tab-set',
@@ -2953,9 +3002,9 @@
         }
         return CustomComponentWrapperComponent;
     }());
-    CustomComponentWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentWrapperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CustomComponentWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentWrapperComponent, decorators: [{
+    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"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomComponentWrapperComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-custom-component-wrapper',
@@ -3011,15 +3060,15 @@
         };
         return CustomControlWrapperComponent;
     }());
-    CustomControlWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CustomControlWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: { question: "question" }, providers: [
+    CustomControlWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CustomControlWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: { question: "question" }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 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"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomControlWrapperComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-custom-control-wrapper',
@@ -3164,15 +3213,15 @@
      * Tracks the total number of selects instantiated. Used to generate unique IDs
      */
     SelectComponent.selectCount = 0;
-    SelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "ofe-select", inputs: { display: "display", label: "label", helperText: "helperText", invalidText: "invalidText", warn: "warn", warnText: "warnText", id: "id", size: "size", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", theme: "theme", ariaLabel: "ariaLabel", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
+    SelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SelectComponent, selector: "ofe-select", inputs: { display: "display", label: "label", helperText: "helperText", invalidText: "invalidText", warn: "warn", warnText: "warnText", id: "id", size: "size", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", theme: "theme", ariaLabel: "ariaLabel", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 useExisting: SelectComponent,
                 multi: true
             }
         ], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"cds--form-item\">\n  <ng-template [ngIf]=\"skeleton\">\n    <div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n    <div class=\"cds--select cds--skeleton\"></div>\n  </ng-template>\n  <div\n    *ngIf=\"!skeleton\"\n    class=\"cds--select\"\n    [ngClass]=\"{\n      'cds--select--inline': display === 'inline',\n      'cds--select--light': theme === 'light',\n      'cds--select--invalid': invalid,\n      'cds--select--warning': warn,\n      'cds--select--disabled': disabled\n    }\"\n  >\n    <label *ngIf=\"label\" [for]=\"id\" class=\"cds--label\">\n      <ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(label)\"\n        [ngTemplateOutlet]=\"label\"\n      ></ng-template>\n    </label>\n    <div *ngIf=\"helperText\" class=\"cds--form__helper-text\">\n      <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n        helperText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(helperText)\"\n        [ngTemplateOutlet]=\"helperText\"\n      ></ng-template>\n    </div>\n    <div\n      *ngIf=\"display === 'inline'; else noInline\"\n      class=\"cds--select-input--inline__wrapper\"\n    >\n      <ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n  <div\n    class=\"cds--select-input__wrapper extend\"\n    [attr.data-invalid]=\"invalid ? true : null\"\n  >\n    <select\n      #select\n      [attr.id]=\"id\"\n      [attr.aria-label]=\"ariaLabel\"\n      [disabled]=\"disabled\"\n      (change)=\"onChange($event)\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      class=\"cds--select-input\"\n      [ngClass]=\"{\n        'cds--select-input--xl': size === 'xl',\n        'cds--select-input--sm': size === 'sm'\n      }\"\n    >\n      <ng-content></ng-content>\n    </select>\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--select__arrow\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n    </svg>\n    <svg\n      *ngIf=\"invalid\"\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--text-input__invalid-icon\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n      ></path>\n      <path\n        d=\"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n        data-icon-path=\"inner-path\"\n        opacity=\"0\"\n      ></path>\n    </svg>\n  </div>\n  <div\n    *ngIf=\"invalid && invalidText && !warn\"\n    role=\"alert\"\n    class=\"cds--form-requirement\"\n    aria-live=\"polite\"\n  >\n    <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n      invalidText\n    }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(invalidText)\"\n      [ngTemplateOutlet]=\"invalidText\"\n    ></ng-template>\n  </div>\n  <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n    <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(warnText)\"\n      [ngTemplateOutlet]=\"warnText\"\n    ></ng-template>\n  </div>\n</ng-template>\n", styles: [".cds--select--inline .cds--form__helper-text{order:4}.cds--select--inline:not(.cds--select--invalid) .cds--form__helper-text{margin-top:0}.cds--select-input__wrapper{min-width:16rem}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-select',
@@ -3312,9 +3361,9 @@
         };
         return SecurePipe;
     }());
-    SecurePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SecurePipe, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    SecurePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SecurePipe, name: "secure", pure: false });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SecurePipe, decorators: [{
+    SecurePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SecurePipe, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SecurePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SecurePipe, name: "secure", pure: false });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SecurePipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'secure',
@@ -3421,15 +3470,15 @@
         };
         return FileUploadComponent;
     }());
-    FileUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileUploadComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "ofe-file-upload", inputs: { dataSource: "dataSource" }, providers: [
+    FileUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileUploadComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileUploadComponent, selector: "ofe-file-upload", inputs: { dataSource: "dataSource" }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return FileUploadComponent; }),
                 multi: true
             }
         ], ngImport: i0__namespace, template: "<lib-ngx-file-uploader\n  [srcUrl]=\"pdfUrl\"\n  [formEntry]=\"formEntryMode\"\n  [(ngModel)]=\"fileUuid\"\n  (_onClear)=\"clearValue()\"\n  (uploadData)=\"onFileChange($event)\"\n>\n</lib-ngx-file-uploader>\n<div *ngIf=\"fileUuid\">\n  <img\n    *ngIf=\"!pdfUploaded\"\n    class=\"img-responsive\"\n    [src]=\"fileUuid | secure: this.dataSource.fetchFile\"\n    alt=\"\"\n  />\n</div>\n", styles: ["\n      img {\n        margin-left: auto;\n        margin-right: auto;\n        display: block;\n      }\n    "], components: [{ type: i1__namespace$2.NgxFileUploaderComponent, selector: "lib-ngx-file-uploader", inputs: ["singleFile", "formEntry", "srcUrl", "source"], outputs: ["fileChanged", "uploadData", "_onClear"] }], directives: [{ type: 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"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "secure": SecurePipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileUploadComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FileUploadComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-file-upload',
@@ -3549,15 +3598,15 @@
         };
         return RemoteSelectComponent;
     }());
-    RemoteSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteSelectComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RemoteSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: { placeholder: "placeholder", componentID: "componentID", disabled: "disabled", theme: "theme", dataSource: "dataSource" }, outputs: { done: "done" }, providers: [
+    RemoteSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoteSelectComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RemoteSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: { placeholder: "placeholder", componentID: "componentID", disabled: "disabled", theme: "theme", dataSource: "dataSource" }, outputs: { done: "done" }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return RemoteSelectComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<div>\n  <ng-select\n    [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n    [disabled]=\"disabled\"\n    [items]=\"remoteOptions$ | async\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"false\"\n    [hideSelected]=\"true\"\n    [compareWith]=\"compareItems\"\n    [trackByFn]=\"trackByFn\"\n    [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: 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 } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteSelectComponent, decorators: [{
+        ], 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 } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoteSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-remote-select',
@@ -3643,9 +3692,9 @@
         }
         return OwlDateTimeIntl;
     }());
-    OwlDateTimeIntl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeIntl, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    OwlDateTimeIntl.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeIntl, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeIntl, decorators: [{
+    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.ɵ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' }]
             }] });
@@ -3892,9 +3941,9 @@
         };
         return OwlCalendarBodyComponent;
     }());
-    OwlCalendarBodyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlCalendarBodyComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlCalendarBodyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { cellSelected: "cellSelected" }, host: { properties: { "class.owl-dt-calendar-body": "this.owlDTCalendarBodyClass" } }, exportAs: ["owlDateTimeCalendarBody"], ngImport: i0__namespace, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <td\n    *ngFor=\"let item of row; let colIndex = index\"\n    class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\n    [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n    [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n    [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n    [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n    [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n    [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n    [attr.aria-label]=\"item.ariaLabel\"\n    [attr.aria-disabled]=\"!item.enabled || null\"\n    [style.width.%]=\"100 / numCols\"\n    [style.paddingTop.%]=\"(50 * cellRatio) / numCols\"\n    [style.paddingBottom.%]=\"(50 * cellRatio) / numCols\"\n    (click)=\"selectCell(item)\"\n  >\n    <span\n      class=\"owl-dt-calendar-cell-content\"\n      [ngClass]=\"{\n        'owl-dt-calendar-cell-out': item.out,\n        'owl-dt-calendar-cell-today': item.value === todayValue,\n        'owl-dt-calendar-cell-selected': isSelected(item.value)\n      }\"\n    >\n      {{ item.displayValue }}\n    </span>\n  </td>\n</tr>\n", styles: [""], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlCalendarBodyComponent, decorators: [{
+    OwlCalendarBodyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlCalendarBodyComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlCalendarBodyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { cellSelected: "cellSelected" }, host: { properties: { "class.owl-dt-calendar-body": "this.owlDTCalendarBodyClass" } }, exportAs: ["owlDateTimeCalendarBody"], ngImport: i0__namespace, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <td\n    *ngFor=\"let item of row; let colIndex = index\"\n    class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\n    [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n    [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n    [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n    [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n    [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n    [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n    [attr.aria-label]=\"item.ariaLabel\"\n    [attr.aria-disabled]=\"!item.enabled || null\"\n    [style.width.%]=\"100 / numCols\"\n    [style.paddingTop.%]=\"(50 * cellRatio) / numCols\"\n    [style.paddingBottom.%]=\"(50 * cellRatio) / numCols\"\n    (click)=\"selectCell(item)\"\n  >\n    <span\n      class=\"owl-dt-calendar-cell-content\"\n      [ngClass]=\"{\n        'owl-dt-calendar-cell-out': item.out,\n        'owl-dt-calendar-cell-today': item.value === todayValue,\n        'owl-dt-calendar-cell-selected': isSelected(item.value)\n      }\"\n    >\n      {{ item.displayValue }}\n    </span>\n  </td>\n</tr>\n", styles: [""], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlCalendarBodyComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         /* eslint-disable-next-line @angular-eslint/component-selector */
@@ -4369,9 +4418,9 @@
         };
         return OwlMonthViewComponent;
     }());
-    OwlMonthViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlMonthViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlMonthViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMonthViewComponent, selector: "ofe-owl-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlYearView"], ngImport: i0__namespace, template: "<table\n  class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n  [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\"\n>\n  <thead class=\"owl-dt-calendar-header\">\n    <tr class=\"owl-dt-weekdays\">\n      <th\n        *ngFor=\"let weekday of weekdays\"\n        [attr.aria-label]=\"weekday.long\"\n        class=\"owl-dt-weekday\"\n        scope=\"col\"\n      >\n        <span>{{ weekday.short }}</span>\n      </th>\n    </tr>\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"days\"\n    [todayValue]=\"todayDate\"\n    [selectedValues]=\"selectedDates\"\n    [selectMode]=\"selectMode\"\n    [activeCell]=\"activeCell\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlMonthViewComponent, decorators: [{
+    OwlMonthViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlMonthViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlMonthViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlMonthViewComponent, selector: "ofe-owl-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlYearView"], ngImport: i0__namespace, template: "<table\n  class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n  [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\"\n>\n  <thead class=\"owl-dt-calendar-header\">\n    <tr class=\"owl-dt-weekdays\">\n      <th\n        *ngFor=\"let weekday of weekdays\"\n        [attr.aria-label]=\"weekday.long\"\n        class=\"owl-dt-weekday\"\n        scope=\"col\"\n      >\n        <span>{{ weekday.short }}</span>\n      </th>\n    </tr>\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"days\"\n    [todayValue]=\"todayDate\"\n    [selectedValues]=\"selectedDates\"\n    [selectMode]=\"selectMode\"\n    [activeCell]=\"activeCell\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlMonthViewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-owl-date-time-month-view',
@@ -4787,9 +4836,9 @@
         };
         return OwlYearViewComponent;
     }());
-    OwlYearViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlYearViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlYearViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlYearViewComponent, selector: "ofe-owl-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { monthChange: "monthChange", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlMonthView"], ngImport: i0__namespace, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"3\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"months\"\n    [numCols]=\"3\"\n    [cellRatio]=\"3 / 7\"\n    [activeCell]=\"activeCell\"\n    [todayValue]=\"todayMonth\"\n    [selectedValues]=\"selectedMonths\"\n    [selectMode]=\"selectMode\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlYearViewComponent, decorators: [{
+    OwlYearViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlYearViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlYearViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlYearViewComponent, selector: "ofe-owl-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { monthChange: "monthChange", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlMonthView"], ngImport: i0__namespace, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"3\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"months\"\n    [numCols]=\"3\"\n    [cellRatio]=\"3 / 7\"\n    [activeCell]=\"activeCell\"\n    [todayValue]=\"todayMonth\"\n    [selectedValues]=\"selectedMonths\"\n    [selectMode]=\"selectMode\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlYearViewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-owl-date-time-year-view',
@@ -5236,9 +5285,9 @@
         };
         return OwlMultiYearViewComponent;
     }());
-    OwlMultiYearViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlMultiYearViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlMultiYearViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMultiYearViewComponent, selector: "ofe-owl-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { monthChange: "monthChange", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView", "class.owl-dt-calendar-multi-year-view": "this.owlDTCalendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], ngImport: i0__namespace, template: "<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!previousEnabled()\"\n  [attr.aria-label]=\"prevButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"prevYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th colspan=\"3\">{{ tableHeader }}</th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"years\"\n    [numCols]=\"3\"\n    [cellRatio]=\"3 / 7\"\n    [activeCell]=\"activeCell\"\n    [todayValue]=\"todayYear\"\n    [selectedValues]=\"selectedYears\"\n    [selectMode]=\"selectMode\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!nextEnabled()\"\n  [attr.aria-label]=\"nextButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"nextYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n    <svg\n      version=\"1.1\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                C197.237,120.447,195.534,115.448,191.75,111.689z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlMultiYearViewComponent, decorators: [{
+    OwlMultiYearViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlMultiYearViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlMultiYearViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlMultiYearViewComponent, selector: "ofe-owl-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { monthChange: "monthChange", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView", "class.owl-dt-calendar-multi-year-view": "this.owlDTCalendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], ngImport: i0__namespace, template: "<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!previousEnabled()\"\n  [attr.aria-label]=\"prevButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"prevYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th colspan=\"3\">{{ tableHeader }}</th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"years\"\n    [numCols]=\"3\"\n    [cellRatio]=\"3 / 7\"\n    [activeCell]=\"activeCell\"\n    [todayValue]=\"todayYear\"\n    [selectedValues]=\"selectedYears\"\n    [selectMode]=\"selectMode\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!nextEnabled()\"\n  [attr.aria-label]=\"nextButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"nextYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n    <svg\n      version=\"1.1\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                C197.237,120.447,195.534,115.448,191.75,111.689z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlMultiYearViewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-owl-date-time-multi-year-view',
@@ -5628,9 +5677,9 @@
         };
         return OwlCalendarComponent;
     }());
-    OwlCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlCalendarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarComponent, selector: "ofe-owl-date-time-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", pickerMoment: "pickerMoment", selected: "selected", selecteds: "selecteds", dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", startView: "startView", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "this.owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0__namespace, template: "<div class=\"owl-dt-calendar-control\">\n  <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!prevButtonEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    (click)=\"previousClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n        width=\"100%\"\n        height=\"100%\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n  <div class=\"owl-dt-calendar-control-content\">\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"periodButtonLabel\"\n      (click)=\"toggleViews()\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ periodButtonText }}\n\n        <span\n          class=\"owl-dt-control-button-arrow\"\n          [style.transform]=\"'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\"\n        >\n          <!-- <editor-fold desc=\"SVG Arrow\"> -->\n          <svg\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            width=\"50%\"\n            height=\"50%\"\n            viewBox=\"0 0 292.362 292.362\"\n            style=\"enable-background: new 0 0 292.362 292.362\"\n            xml:space=\"preserve\"\n          >\n            <g>\n              <path\n                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\n              />\n            </g>\n          </svg>\n          <!-- </editor-fold> -->\n        </span>\n      </span>\n    </button>\n  </div>\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!nextButtonEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    (click)=\"nextClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n      <svg\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n</div>\n<div\n  class=\"owl-dt-calendar-main\"\n  cdkMonitorSubtreeFocus\n  [ngSwitch]=\"currentView\"\n  tabindex=\"-1\"\n>\n  <ofe-owl-date-time-month-view\n    *ngSwitchCase=\"'month'\"\n    [pickerMoment]=\"pickerMoment\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    [hideOtherMonths]=\"hideOtherMonths\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (selectedChange)=\"dateSelected($event)\"\n    (userSelection)=\"userSelected()\"\n  ></ofe-owl-date-time-month-view>\n\n  <ofe-owl-date-time-year-view\n    *ngSwitchCase=\"'year'\"\n    [pickerMoment]=\"pickerMoment\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    (keyboardEnter)=\"focusActiveCell()\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (monthSelected)=\"selectMonthInYearView($event)\"\n    (monthChange)=\"goToDateInView($event, 'month')\"\n  ></ofe-owl-date-time-year-view>\n\n  <ofe-owl-date-time-multi-year-view\n    *ngSwitchCase=\"'multi-years'\"\n    [pickerMoment]=\"pickerMoment\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    (keyboardEnter)=\"focusActiveCell()\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (yearSelected)=\"selectYearInMultiYearView($event)\"\n    (monthChange)=\"goToDateInView($event, 'year')\"\n  ></ofe-owl-date-time-multi-year-view>\n</div>\n", styles: [""], components: [{ type: OwlMonthViewComponent, selector: "ofe-owl-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"], exportAs: ["owlYearView"] }, { type: OwlYearViewComponent, selector: "ofe-owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["monthChange", "monthSelected", "pickerMomentChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { type: OwlMultiYearViewComponent, selector: "ofe-owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["monthChange", "yearSelected", "pickerMomentChange", "keyboardEnter"] }], directives: [{ type: i1__namespace$3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlCalendarComponent, decorators: [{
+    OwlCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlCalendarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlCalendarComponent, selector: "ofe-owl-date-time-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", pickerMoment: "pickerMoment", selected: "selected", selecteds: "selecteds", dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", startView: "startView", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "this.owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0__namespace, template: "<div class=\"owl-dt-calendar-control\">\n  <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!prevButtonEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    (click)=\"previousClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n        width=\"100%\"\n        height=\"100%\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n  <div class=\"owl-dt-calendar-control-content\">\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"periodButtonLabel\"\n      (click)=\"toggleViews()\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ periodButtonText }}\n\n        <span\n          class=\"owl-dt-control-button-arrow\"\n          [style.transform]=\"'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\"\n        >\n          <!-- <editor-fold desc=\"SVG Arrow\"> -->\n          <svg\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            width=\"50%\"\n            height=\"50%\"\n            viewBox=\"0 0 292.362 292.362\"\n            style=\"enable-background: new 0 0 292.362 292.362\"\n            xml:space=\"preserve\"\n          >\n            <g>\n              <path\n                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\n              />\n            </g>\n          </svg>\n          <!-- </editor-fold> -->\n        </span>\n      </span>\n    </button>\n  </div>\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!nextButtonEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    (click)=\"nextClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n      <svg\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n</div>\n<div\n  class=\"owl-dt-calendar-main\"\n  cdkMonitorSubtreeFocus\n  [ngSwitch]=\"currentView\"\n  tabindex=\"-1\"\n>\n  <ofe-owl-date-time-month-view\n    *ngSwitchCase=\"'month'\"\n    [pickerMoment]=\"pickerMoment\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    [hideOtherMonths]=\"hideOtherMonths\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (selectedChange)=\"dateSelected($event)\"\n    (userSelection)=\"userSelected()\"\n  ></ofe-owl-date-time-month-view>\n\n  <ofe-owl-date-time-year-view\n    *ngSwitchCase=\"'year'\"\n    [pickerMoment]=\"pickerMoment\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    (keyboardEnter)=\"focusActiveCell()\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (monthSelected)=\"selectMonthInYearView($event)\"\n    (monthChange)=\"goToDateInView($event, 'month')\"\n  ></ofe-owl-date-time-year-view>\n\n  <ofe-owl-date-time-multi-year-view\n    *ngSwitchCase=\"'multi-years'\"\n    [pickerMoment]=\"pickerMoment\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    (keyboardEnter)=\"focusActiveCell()\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (yearSelected)=\"selectYearInMultiYearView($event)\"\n    (monthChange)=\"goToDateInView($event, 'year')\"\n  ></ofe-owl-date-time-multi-year-view>\n</div>\n", styles: [""], components: [{ type: OwlMonthViewComponent, selector: "ofe-owl-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"], exportAs: ["owlYearView"] }, { type: OwlYearViewComponent, selector: "ofe-owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["monthChange", "monthSelected", "pickerMomentChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { type: OwlMultiYearViewComponent, selector: "ofe-owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["monthChange", "yearSelected", "pickerMomentChange", "keyboardEnter"] }], directives: [{ type: i1__namespace$3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlCalendarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-owl-date-time-calendar',
@@ -5723,9 +5772,9 @@
         };
         return NumberFixedLenPipe;
     }());
-    NumberFixedLenPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberFixedLenPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    NumberFixedLenPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberFixedLenPipe, name: "numberFixedLen" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberFixedLenPipe, decorators: [{
+    NumberFixedLenPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberFixedLenPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    NumberFixedLenPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberFixedLenPipe, name: "numberFixedLen" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberFixedLenPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'numberFixedLen'
@@ -5789,9 +5838,9 @@
         };
         return OwlTimerBoxComponent;
     }());
-    OwlTimerBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlTimerBoxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlTimerBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerBoxComponent, selector: "ofe-owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "this.owlDTTimerBoxClass" } }, exportAs: ["owlDateTimeTimerBox"], ngImport: i0__namespace, template: "<div *ngIf=\"showDivider\" class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"upBtnDisabled\"\n  [attr.aria-label]=\"upBtnAriaLabel\"\n  (click)=\"upBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n  <input\n    class=\"owl-dt-timer-input\"\n    maxlength=\"2\"\n    [value]=\"displayValue | numberFixedLen: 2\"\n    (input)=\"handleInputChange(valueInput.value)\"\n    #valueInput\n  />\n  <span class=\"owl-hidden-accessible\">{{ inputLabel }}</span>\n</label>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"downBtnDisabled\"\n  [attr.aria-label]=\"downBtnAriaLabel\"\n  (click)=\"downBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlTimerBoxComponent, decorators: [{
+    OwlTimerBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlTimerBoxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlTimerBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlTimerBoxComponent, selector: "ofe-owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "this.owlDTTimerBoxClass" } }, exportAs: ["owlDateTimeTimerBox"], ngImport: i0__namespace, template: "<div *ngIf=\"showDivider\" class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"upBtnDisabled\"\n  [attr.aria-label]=\"upBtnAriaLabel\"\n  (click)=\"upBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n  <input\n    class=\"owl-dt-timer-input\"\n    maxlength=\"2\"\n    [value]=\"displayValue | numberFixedLen: 2\"\n    (input)=\"handleInputChange(valueInput.value)\"\n    #valueInput\n  />\n  <span class=\"owl-hidden-accessible\">{{ inputLabel }}</span>\n</label>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"downBtnDisabled\"\n  [attr.aria-label]=\"downBtnAriaLabel\"\n  (click)=\"downBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlTimerBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         exportAs: 'owlDateTimeTimerBox',
@@ -6147,9 +6196,9 @@
         };
         return OwlTimerComponent;
     }());
-    OwlTimerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlTimerComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlTimerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerComponent, selector: "ofe-owl-date-time-timer", inputs: { pickerMoment: "pickerMoment", minDateTime: "minDateTime", maxDateTime: "maxDateTime", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "attr.tabindex": "this.owlDTTimeTabIndex", "class.owl-dt-timer": "this.owlDTTimerClass" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0__namespace, template: "<ofe-owl-date-time-timer-box\n  [upBtnAriaLabel]=\"upHourButtonLabel\"\n  [downBtnAriaLabel]=\"downHourButtonLabel\"\n  [upBtnDisabled]=\"!upHourEnabled()\"\n  [downBtnDisabled]=\"!downHourEnabled()\"\n  [boxValue]=\"hourBoxValue\"\n  [value]=\"hourValue\"\n  [min]=\"0\"\n  [max]=\"23\"\n  [step]=\"stepHour\"\n  [inputLabel]=\"'Hour'\"\n  (inputChange)=\"setHourValueViaInput($event)\"\n  (valueChange)=\"setHourValue($event)\"\n></ofe-owl-date-time-timer-box>\n<ofe-owl-date-time-timer-box\n  [showDivider]=\"true\"\n  [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n  [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n  [upBtnDisabled]=\"!upMinuteEnabled()\"\n  [downBtnDisabled]=\"!downMinuteEnabled()\"\n  [value]=\"minuteValue\"\n  [min]=\"0\"\n  [max]=\"59\"\n  [step]=\"stepMinute\"\n  [inputLabel]=\"'Minute'\"\n  (inputChange)=\"setMinuteValue($event)\"\n  (valueChange)=\"setMinuteValue($event)\"\n></ofe-owl-date-time-timer-box>\n<ofe-owl-date-time-timer-box\n  *ngIf=\"showSecondsTimer\"\n  [showDivider]=\"true\"\n  [upBtnAriaLabel]=\"upSecondButtonLabel\"\n  [downBtnAriaLabel]=\"downSecondButtonLabel\"\n  [upBtnDisabled]=\"!upSecondEnabled()\"\n  [downBtnDisabled]=\"!downSecondEnabled()\"\n  [value]=\"secondValue\"\n  [min]=\"0\"\n  [max]=\"59\"\n  [step]=\"stepSecond\"\n  [inputLabel]=\"'Second'\"\n  (inputChange)=\"setSecondValue($event)\"\n  (valueChange)=\"setSecondValue($event)\"\n></ofe-owl-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\" class=\"owl-dt-timer-hour12\">\n  <button\n    class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"setMeridiem($event)\"\n  >\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n      {{ hour12ButtonLabel }}\n    </span>\n  </button>\n</div>\n", styles: [""], components: [{ type: OwlTimerBoxComponent, selector: "ofe-owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlTimerComponent, decorators: [{
+    OwlTimerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlTimerComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlTimerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlTimerComponent, selector: "ofe-owl-date-time-timer", inputs: { pickerMoment: "pickerMoment", minDateTime: "minDateTime", maxDateTime: "maxDateTime", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "attr.tabindex": "this.owlDTTimeTabIndex", "class.owl-dt-timer": "this.owlDTTimerClass" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0__namespace, template: "<ofe-owl-date-time-timer-box\n  [upBtnAriaLabel]=\"upHourButtonLabel\"\n  [downBtnAriaLabel]=\"downHourButtonLabel\"\n  [upBtnDisabled]=\"!upHourEnabled()\"\n  [downBtnDisabled]=\"!downHourEnabled()\"\n  [boxValue]=\"hourBoxValue\"\n  [value]=\"hourValue\"\n  [min]=\"0\"\n  [max]=\"23\"\n  [step]=\"stepHour\"\n  [inputLabel]=\"'Hour'\"\n  (inputChange)=\"setHourValueViaInput($event)\"\n  (valueChange)=\"setHourValue($event)\"\n></ofe-owl-date-time-timer-box>\n<ofe-owl-date-time-timer-box\n  [showDivider]=\"true\"\n  [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n  [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n  [upBtnDisabled]=\"!upMinuteEnabled()\"\n  [downBtnDisabled]=\"!downMinuteEnabled()\"\n  [value]=\"minuteValue\"\n  [min]=\"0\"\n  [max]=\"59\"\n  [step]=\"stepMinute\"\n  [inputLabel]=\"'Minute'\"\n  (inputChange)=\"setMinuteValue($event)\"\n  (valueChange)=\"setMinuteValue($event)\"\n></ofe-owl-date-time-timer-box>\n<ofe-owl-date-time-timer-box\n  *ngIf=\"showSecondsTimer\"\n  [showDivider]=\"true\"\n  [upBtnAriaLabel]=\"upSecondButtonLabel\"\n  [downBtnAriaLabel]=\"downSecondButtonLabel\"\n  [upBtnDisabled]=\"!upSecondEnabled()\"\n  [downBtnDisabled]=\"!downSecondEnabled()\"\n  [value]=\"secondValue\"\n  [min]=\"0\"\n  [max]=\"59\"\n  [step]=\"stepSecond\"\n  [inputLabel]=\"'Second'\"\n  (inputChange)=\"setSecondValue($event)\"\n  (valueChange)=\"setSecondValue($event)\"\n></ofe-owl-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\" class=\"owl-dt-timer-hour12\">\n  <button\n    class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"setMeridiem($event)\"\n  >\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n      {{ hour12ButtonLabel }}\n    </span>\n  </button>\n</div>\n", styles: [""], components: [{ type: OwlTimerBoxComponent, selector: "ofe-owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlTimerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         exportAs: 'owlDateTimeTimer',
@@ -6601,12 +6650,12 @@
         };
         return OwlDateTimeContainerComponent;
     }());
-    OwlDateTimeContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlDateTimeContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeContainerComponent, selector: "ofe-owl-date-time-container", host: { listeners: { "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.owl-dt-container": "this.owlDTContainerClass", "class.owl-dt-popup-container": "this.owlDTPopupContainerClass", "class.owl-dt-dialog-container": "this.owlDTDialogContainerClass", "class.owl-dt-inline-container": "this.owlDTInlineContainerClass", "class.owl-dt-container-disabled": "this.owlDTContainerDisabledClass", "attr.id": "this.owlDTContainerId", "@transformPicker": "this.owlDTContainerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0__namespace, template: "<div\n  [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n  [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n  class=\"owl-dt-container-inner\"\n>\n  <ofe-owl-date-time-calendar\n    *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n    class=\"owl-dt-container-row\"\n    [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n    [(pickerMoment)]=\"pickerMoment\"\n    [selected]=\"picker.selected\"\n    [selecteds]=\"picker.selecteds\"\n    [selectMode]=\"picker.selectMode\"\n    [minDate]=\"picker.minDateTime\"\n    [maxDate]=\"picker.maxDateTime\"\n    [dateFilter]=\"picker.dateTimeFilter\"\n    [startView]=\"picker.startView\"\n    [hideOtherMonths]=\"picker.hideOtherMonths\"\n    (yearSelected)=\"picker.selectYear($event)\"\n    (monthSelected)=\"picker.selectMonth($event)\"\n    (selectedChange)=\"dateSelected($event)\"\n  ></ofe-owl-date-time-calendar>\n  <ofe-owl-date-time-timer\n    *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n    class=\"owl-dt-container-row\"\n    [pickerMoment]=\"pickerMoment\"\n    [minDateTime]=\"picker.minDateTime\"\n    [maxDateTime]=\"picker.maxDateTime\"\n    [showSecondsTimer]=\"picker.showSecondsTimer\"\n    [hour12Timer]=\"picker.hour12Timer\"\n    [stepHour]=\"picker.stepHour\"\n    [stepMinute]=\"picker.stepMinute\"\n    [stepSecond]=\"picker.stepSecond\"\n    (selectedChange)=\"timeSelected($event)\"\n  ></ofe-owl-date-time-timer>\n  <div\n    *ngIf=\"picker.isInRangeMode\"\n    role=\"radiogroup\"\n    class=\"owl-dt-container-info owl-dt-container-row\"\n  >\n    <div\n      role=\"radio\"\n      [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n      [attr.aria-checked]=\"activeSelectedIndex === 0\"\n      class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n      [ngClass]=\"{ 'owl-dt-container-info-active': activeSelectedIndex === 0 }\"\n      (click)=\"handleClickOnInfoGroup($event, 0)\"\n      (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n      #from\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-container-range-content\"\n        tabindex=\"-1\"\n      >\n        <span class=\"owl-dt-container-info-label\">{{ fromLabel }}:</span>\n        <span class=\"owl-dt-container-info-value\">{{\n          fromFormattedValue\n        }}</span>\n      </span>\n    </div>\n    <div\n      role=\"radio\"\n      [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n      [attr.aria-checked]=\"activeSelectedIndex === 1\"\n      class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n      [ngClass]=\"{ 'owl-dt-container-info-active': activeSelectedIndex === 1 }\"\n      (click)=\"handleClickOnInfoGroup($event, 1)\"\n      (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n      #to\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-container-range-content\"\n        tabindex=\"-1\"\n      >\n        <span class=\"owl-dt-container-info-label\">{{ toLabel }}:</span>\n        <span class=\"owl-dt-container-info-value\">{{ toFormattedValue }}</span>\n      </span>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showControlButtons\"\n    class=\"owl-dt-container-buttons owl-dt-container-row\"\n  >\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      (click)=\"onCancelClicked($event)\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ cancelLabel }}\n      </span>\n    </button>\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      (click)=\"onSetClicked($event)\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ setLabel }}\n      </span>\n    </button>\n  </div>\n</div>\n", styles: [""], components: [{ type: OwlCalendarComponent, selector: "ofe-owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerMoment", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }, { type: OwlTimerComponent, selector: "ofe-owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }], directives: [{ type: i1__namespace$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    OwlDateTimeContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlDateTimeContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlDateTimeContainerComponent, selector: "ofe-owl-date-time-container", host: { listeners: { "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.owl-dt-container": "this.owlDTContainerClass", "class.owl-dt-popup-container": "this.owlDTPopupContainerClass", "class.owl-dt-dialog-container": "this.owlDTDialogContainerClass", "class.owl-dt-inline-container": "this.owlDTInlineContainerClass", "class.owl-dt-container-disabled": "this.owlDTContainerDisabledClass", "attr.id": "this.owlDTContainerId", "@transformPicker": "this.owlDTContainerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0__namespace, template: "<div\n  [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n  [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n  class=\"owl-dt-container-inner\"\n>\n  <ofe-owl-date-time-calendar\n    *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n    class=\"owl-dt-container-row\"\n    [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n    [(pickerMoment)]=\"pickerMoment\"\n    [selected]=\"picker.selected\"\n    [selecteds]=\"picker.selecteds\"\n    [selectMode]=\"picker.selectMode\"\n    [minDate]=\"picker.minDateTime\"\n    [maxDate]=\"picker.maxDateTime\"\n    [dateFilter]=\"picker.dateTimeFilter\"\n    [startView]=\"picker.startView\"\n    [hideOtherMonths]=\"picker.hideOtherMonths\"\n    (yearSelected)=\"picker.selectYear($event)\"\n    (monthSelected)=\"picker.selectMonth($event)\"\n    (selectedChange)=\"dateSelected($event)\"\n  ></ofe-owl-date-time-calendar>\n  <ofe-owl-date-time-timer\n    *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n    class=\"owl-dt-container-row\"\n    [pickerMoment]=\"pickerMoment\"\n    [minDateTime]=\"picker.minDateTime\"\n    [maxDateTime]=\"picker.maxDateTime\"\n    [showSecondsTimer]=\"picker.showSecondsTimer\"\n    [hour12Timer]=\"picker.hour12Timer\"\n    [stepHour]=\"picker.stepHour\"\n    [stepMinute]=\"picker.stepMinute\"\n    [stepSecond]=\"picker.stepSecond\"\n    (selectedChange)=\"timeSelected($event)\"\n  ></ofe-owl-date-time-timer>\n  <div\n    *ngIf=\"picker.isInRangeMode\"\n    role=\"radiogroup\"\n    class=\"owl-dt-container-info owl-dt-container-row\"\n  >\n    <div\n      role=\"radio\"\n      [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n      [attr.aria-checked]=\"activeSelectedIndex === 0\"\n      class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n      [ngClass]=\"{ 'owl-dt-container-info-active': activeSelectedIndex === 0 }\"\n      (click)=\"handleClickOnInfoGroup($event, 0)\"\n      (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n      #from\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-container-range-content\"\n        tabindex=\"-1\"\n      >\n        <span class=\"owl-dt-container-info-label\">{{ fromLabel }}:</span>\n        <span class=\"owl-dt-container-info-value\">{{\n          fromFormattedValue\n        }}</span>\n      </span>\n    </div>\n    <div\n      role=\"radio\"\n      [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n      [attr.aria-checked]=\"activeSelectedIndex === 1\"\n      class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n      [ngClass]=\"{ 'owl-dt-container-info-active': activeSelectedIndex === 1 }\"\n      (click)=\"handleClickOnInfoGroup($event, 1)\"\n      (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n      #to\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-container-range-content\"\n        tabindex=\"-1\"\n      >\n        <span class=\"owl-dt-container-info-label\">{{ toLabel }}:</span>\n        <span class=\"owl-dt-container-info-value\">{{ toFormattedValue }}</span>\n      </span>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showControlButtons\"\n    class=\"owl-dt-container-buttons owl-dt-container-row\"\n  >\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      (click)=\"onCancelClicked($event)\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ cancelLabel }}\n      </span>\n    </button>\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      (click)=\"onSetClicked($event)\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ setLabel }}\n      </span>\n    </button>\n  </div>\n</div>\n", styles: [""], components: [{ type: OwlCalendarComponent, selector: "ofe-owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerMoment", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }, { type: OwlTimerComponent, selector: "ofe-owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }], directives: [{ type: i1__namespace$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             owlDateTimePickerAnimations.transformPicker,
             owlDateTimePickerAnimations.fadeInPicker
         ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeContainerComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeContainerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         exportAs: 'owlDateTimeContainer',
@@ -6828,9 +6877,9 @@
         };
         return OwlDateTime;
     }());
-    OwlDateTime.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTime, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    OwlDateTime.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTime });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTime, decorators: [{
+    OwlDateTime.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTime, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    OwlDateTime.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTime });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTime, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: DateTimeAdapter, decorators: [{
@@ -7219,8 +7268,8 @@
         };
         return OwlDialogContainerComponent;
     }(i2$1.BasePortalOutlet));
-    OwlDialogContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace$3.FocusTrapFactory }, { token: i1.DOCUMENT, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlDialogContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDialogContainerComponent, selector: "ofe-owl-dialog-container", host: { listeners: { "@slideModal.start": "onAnimationStart($event)", "@slideModal.done": "onAnimationDone($event)" }, properties: { "attr.tabindex": "this.owlDialogContainerTabIndex", "class.owl-dialog-container": "this.owlDialogContainerClass", "attr.id": "this.owlDialogContainerId", "attr.role": "this.owlDialogContainerRole", "attr.aria-labelledby": "this.owlDialogContainerAriaLabelledby", "attr.aria-describedby": "this.owlDialogContainerAriaDescribedby", "@slideModal": "this.owlDialogContainerAnimation" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: i2$1.CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2__namespace$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+    OwlDialogContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace$3.FocusTrapFactory }, { token: i1.DOCUMENT, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlDialogContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlDialogContainerComponent, selector: "ofe-owl-dialog-container", host: { listeners: { "@slideModal.start": "onAnimationStart($event)", "@slideModal.done": "onAnimationDone($event)" }, properties: { "attr.tabindex": "this.owlDialogContainerTabIndex", "class.owl-dialog-container": "this.owlDialogContainerClass", "attr.id": "this.owlDialogContainerId", "attr.role": "this.owlDialogContainerRole", "attr.aria-labelledby": "this.owlDialogContainerAriaLabelledby", "attr.aria-describedby": "this.owlDialogContainerAriaDescribedby", "@slideModal": "this.owlDialogContainerAnimation" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: i2$1.CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2__namespace$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
             i1$4.trigger('slideModal', [
                 i1$4.transition('void => enter', [
                     i1$4.style(zoomFadeInFrom),
@@ -7244,7 +7293,7 @@
                 i1$4.transition('enter => exit', [i1$4.animateChild(), i1$4.animate(200, i1$4.style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
             ])
         ] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogContainerComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogContainerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-owl-dialog-container',
@@ -7563,9 +7612,9 @@
         };
         return OwlDialogService;
     }());
-    OwlDialogService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogService, deps: [{ token: i1__namespace$4.Overlay }, { token: i0__namespace.Injector }, { token: i1__namespace.Location, optional: true }, { token: OWL_DIALOG_SCROLL_STRATEGY }, { token: OWL_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: OwlDialogService, optional: true, skipSelf: true }, { token: i1__namespace$4.OverlayContainer }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    OwlDialogService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogService, decorators: [{
+    OwlDialogService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogService, deps: [{ token: i1__namespace$4.Overlay }, { token: i0__namespace.Injector }, { token: i1__namespace.Location, optional: true }, { token: OWL_DIALOG_SCROLL_STRATEGY }, { token: OWL_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: OwlDialogService, optional: true, skipSelf: true }, { token: i1__namespace$4.OverlayContainer }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    OwlDialogService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: i1__namespace$4.Overlay }, { type: i0__namespace.Injector }, { type: i1__namespace.Location, decorators: [{
@@ -8116,9 +8165,9 @@
         };
         return OwlDateTimeComponent;
     }(OwlDateTime));
-    OwlDateTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeComponent, deps: [{ token: i1__namespace$4.Overlay }, { token: i0__namespace.ViewContainerRef }, { token: OwlDialogService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: i1.DOCUMENT, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlDateTimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeComponent, selector: "ofe-owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0__namespace, template: "", styles: [""], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeComponent, decorators: [{
+    OwlDateTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeComponent, deps: [{ token: i1__namespace$4.Overlay }, { token: i0__namespace.ViewContainerRef }, { token: OwlDialogService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: i1.DOCUMENT, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlDateTimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlDateTimeComponent, selector: "ofe-owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0__namespace, template: "", styles: [""], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-owl-date-time',
@@ -8779,9 +8828,9 @@
         };
         return OwlDateTimeInputDirective;
     }());
-    OwlDateTimeInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeInputDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    OwlDateTimeInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: { owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", selectMode: "selectMode", value: "value", values: "values", _disabled: "_disabled", rangeSeparator: "rangeSeparator" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "blur": "handleBlurOnHost($event)", "change": "handleChangeOnHost($event)", "input": "handleInputOnHost($event)", "keydown": "handleKeydownOnHost($event)" }, properties: { "attr.aria-haspopup": "this.owlDateTimeInputAriaHaspopup", "attr.max": "this.maxIso8601", "attr.min": "this.minIso8601", "attr.aria-owns": "this.owlDateTimeInputAriaOwns", "disabled": "this.owlDateTimeInputDisabled" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR$1, OWL_DATETIME_VALIDATORS], exportAs: ["owlDateTimeInput"], ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeInputDirective, decorators: [{
+    OwlDateTimeInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeInputDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OwlDateTimeInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: { owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", selectMode: "selectMode", value: "value", values: "values", _disabled: "_disabled", rangeSeparator: "rangeSeparator" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "blur": "handleBlurOnHost($event)", "change": "handleChangeOnHost($event)", "input": "handleInputOnHost($event)", "keydown": "handleKeydownOnHost($event)" }, properties: { "attr.aria-haspopup": "this.owlDateTimeInputAriaHaspopup", "attr.max": "this.maxIso8601", "attr.min": "this.minIso8601", "attr.aria-owns": "this.owlDateTimeInputAriaOwns", "disabled": "this.owlDateTimeInputDisabled" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR$1, OWL_DATETIME_VALIDATORS], exportAs: ["owlDateTimeInput"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: 'input[owlDateTime]',
@@ -8904,9 +8953,9 @@
         };
         return OwlDateTimeTriggerDirective;
     }());
-    OwlDateTimeTriggerDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeTriggerDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    OwlDateTimeTriggerDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeTriggerDirective, selector: "[ofeOwlDateTimeTrigger]", inputs: { dtPicker: ["ofeOwlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "this.owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeTriggerDirective, decorators: [{
+    OwlDateTimeTriggerDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeTriggerDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OwlDateTimeTriggerDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: OwlDateTimeTriggerDirective, selector: "[ofeOwlDateTimeTrigger]", inputs: { dtPicker: ["ofeOwlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "this.owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeTriggerDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[ofeOwlDateTimeTrigger]'
@@ -8962,15 +9011,15 @@
         };
         return NgxDatetimeComponent;
     }());
-    NgxDatetimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDatetimeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxDatetimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: { id: "id", theme: "theme", datePickerFormat: "datePickerFormat", showWeeks: "showWeeks", weeks: "weeks" }, providers: [
+    NgxDatetimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxDatetimeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NgxDatetimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: { id: "id", theme: "theme", datePickerFormat: "datePickerFormat", showWeeks: "showWeeks", weeks: "weeks" }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return NgxDatetimeComponent; }),
                 multi: true
             }
         ], ngImport: i0__namespace, template: "<div class=\"date-time-picker-container\">\n  <div\n    data-date-picker\n    data-date-picker-type=\"single\"\n    class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n    [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\"\n  >\n    <div class=\"cds--date-picker-container fill\">\n      <div class=\"cds--date-picker-input__wrapper\">\n        <input\n          [disabled]=\"isDisabled\"\n          (dateTimeChange)=\"onInput($event)\"\n          type=\"text\"\n          class=\"cds--date-picker__input fill\"\n          [id]=\"id\"\n          [value]=\"value\"\n          [owlDateTime]=\"dt1\"\n          [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"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDatetimeComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxDatetimeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-ngx-date-time-picker',
@@ -8996,6 +9045,27 @@
                     type: i0.Input
                 }] } });
 
+    var NumberInputDirective = /** @class */ (function () {
+        function NumberInputDirective(element) {
+            this.element = element;
+        }
+        NumberInputDirective.prototype.onScroll = function (event) {
+            return false;
+        };
+        return NumberInputDirective;
+    }());
+    NumberInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberInputDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    NumberInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: NumberInputDirective, selector: "[ofeNumberScroll]", host: { listeners: { "wheel": "onScroll($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberInputDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[ofeNumberScroll]'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { onScroll: [{
+                    type: i0.HostListener,
+                    args: ['wheel', ['$event']]
+                }] } });
+
     /**
      * Used to emit changes performed on number input components.
      */
@@ -9041,6 +9111,14 @@
              * Sets the max attribute on the `input` element.
              */
             this.max = null;
+            /**
+             * Sets the max length attribute on the `input` element.
+             */
+            this.maxlength = null;
+            /**
+             * Sets the min length attribute on the `input` element.
+             */
+            this.minlength = null;
             /**
              * Sets the amount the number controls increment and decrement by.
              */
@@ -9126,9 +9204,12 @@
             if (this.max === null || val + this.step <= this.max) {
                 this.value = parseFloat((val + this.step).toPrecision(this.precision));
             }
-            else {
+            if (this.max && this.max > 0 && this.value > this.max) {
                 this.value = this.max;
             }
+            if (this.max === undefined || this.max === '') {
+                this.value = val + this.step;
+            }
             this.emitChangeEvent();
         };
         /**
@@ -9139,9 +9220,12 @@
             if (this.min === null || val - this.step >= this.min) {
                 this.value = parseFloat((val - this.step).toPrecision(this.precision));
             }
-            else {
+            if (this.min && this.min > 0 && this.value < this.min) {
                 this.value = this.min;
             }
+            if (this.min === undefined || this.min === '') {
+                this.value = val - this.step;
+            }
             this.emitChangeEvent();
         };
         /**
@@ -9167,15 +9251,15 @@
      * Variable used for creating unique ids for number input components.
      */
     NumberInputComponent.numberCount = 0;
-    NumberInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NumberInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumberInputComponent, selector: "ofe-number-input", inputs: { theme: "theme", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", id: "id", size: "size", required: "required", value: "value", min: "min", max: "max", label: "label", helperText: "helperText", invalidText: "invalidText", step: "step", precision: "precision", warn: "warn", warnText: "warnText", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel" }, outputs: { numberChange: "numberChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
+    NumberInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NumberInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NumberInputComponent, selector: "ofe-number-input", inputs: { theme: "theme", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", id: "id", size: "size", required: "required", value: "value", min: "min", max: "max", maxlength: "maxlength", minlength: "minlength", label: "label", helperText: "helperText", invalidText: "invalidText", step: "step", precision: "precision", warn: "warn", warnText: "warnText", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel" }, outputs: { numberChange: "numberChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return NumberInputComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<div\n  data-numberinput\n  [attr.data-invalid]=\"invalid ? true : null\"\n  class=\"cds--number\"\n  [ngClass]=\"{\n    'cds--number--light': theme === 'light',\n    'cds--number--nolabel': !label,\n    'cds--number--helpertext': helperText,\n    'cds--skeleton': skeleton,\n    'cds--number--sm': size === 'sm',\n    'cds--number--xl': size === 'xl'\n  }\"\n>\n  <div\n    class=\"cds--number__input-wrapper\"\n    [ngClass]=\"{\n      'cds--number__input-wrapper--warning': warn\n    }\"\n  >\n    <input\n      type=\"number\"\n      [id]=\"id\"\n      [value]=\"value\"\n      [attr.min]=\"min\"\n      [attr.max]=\"max\"\n      [attr.step]=\"step\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      (input)=\"onNumberInputChange($event)\"\n    />\n    <div class=\"cds--number__controls\">\n      <button\n        type=\"button\"\n        class=\"cds--number__control-btn down-icon\"\n        (click)=\"onDecrement()\"\n        title=\"Decrement number\"\n        [attr.aria-label]=\"decrementLabel\"\n        tabindex=\"-1\"\n      >\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 32 32\"\n          aria-hidden=\"true\"\n          class=\"down-icon\"\n        >\n          <path d=\"M8 15H24V17H8z\"></path>\n        </svg>\n      </button>\n      <div class=\"cds--number__rule-divider\"></div>\n      <button\n        type=\"button\"\n        class=\"cds--number__control-btn up-icon\"\n        (click)=\"onIncrement()\"\n        title=\"Increment number\"\n        [attr.aria-label]=\"incrementLabel\"\n        tabindex=\"-1\"\n      >\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 32 32\"\n          aria-hidden=\"true\"\n          class=\"up-icon\"\n        >\n          <path\n            d=\"M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z\"\n          ></path>\n        </svg>\n      </button>\n      <div class=\"cds--number__rule-divider\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"helperText && !invalid && !warn\" class=\"cds--form__helper-text\">\n    <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n      helperText\n    }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(helperText)\"\n      [ngTemplateOutlet]=\"helperText\"\n    ></ng-template>\n  </div>\n  <div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n    <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n      invalidText\n    }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(invalidText)\"\n      [ngTemplateOutlet]=\"invalidText\"\n    ></ng-template>\n  </div>\n  <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n    <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(warnText)\"\n      [ngTemplateOutlet]=\"warnText\"\n    ></ng-template>\n  </div>\n</div>\n", directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputComponent, decorators: [{
+        ], ngImport: i0__namespace, template: "<div\n  data-numberinput\n  [attr.data-invalid]=\"invalid ? true : null\"\n  class=\"cds--number\"\n  [ngClass]=\"{\n    'cds--number--light': theme === 'light',\n    'cds--number--nolabel': !label,\n    'cds--number--helpertext': helperText,\n    'cds--skeleton': skeleton,\n    'cds--number--sm': size === 'sm',\n    'cds--number--xl': size === 'xl'\n  }\"\n>\n  <div\n    class=\"cds--number__input-wrapper\"\n    [ngClass]=\"{\n      'cds--number__input-wrapper--warning': warn\n    }\"\n  >\n    <input\n      type=\"number\"\n      [id]=\"id\"\n      ofeNumberScroll\n      [value]=\"value\"\n      [attr.min]=\"min\"\n      [attr.max]=\"max\"\n      [attr.maxlength]=\"maxlength\"\n      [attr.minlength]=\"minlength\"\n      [attr.step]=\"step\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      (input)=\"onNumberInputChange($event)\"\n    />\n    <div class=\"cds--number__controls\">\n      <button\n        type=\"button\"\n        class=\"cds--number__control-btn down-icon\"\n        (click)=\"onDecrement()\"\n        title=\"Decrement number\"\n        [attr.aria-label]=\"decrementLabel\"\n        tabindex=\"-1\"\n      >\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 32 32\"\n          aria-hidden=\"true\"\n          class=\"down-icon\"\n        >\n          <path d=\"M8 15H24V17H8z\"></path>\n        </svg>\n      </button>\n      <div class=\"cds--number__rule-divider\"></div>\n      <button\n        type=\"button\"\n        class=\"cds--number__control-btn up-icon\"\n        (click)=\"onIncrement()\"\n        title=\"Increment number\"\n        [attr.aria-label]=\"incrementLabel\"\n        tabindex=\"-1\"\n      >\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 32 32\"\n          aria-hidden=\"true\"\n          class=\"up-icon\"\n        >\n          <path\n            d=\"M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z\"\n          ></path>\n        </svg>\n      </button>\n      <div class=\"cds--number__rule-divider\"></div>\n    </div>\n  </div>\n  <div *ngIf=\"helperText && !invalid && !warn\" class=\"cds--form__helper-text\">\n    <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n      helperText\n    }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(helperText)\"\n      [ngTemplateOutlet]=\"helperText\"\n    ></ng-template>\n  </div>\n  <div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n    <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n      invalidText\n    }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(invalidText)\"\n      [ngTemplateOutlet]=\"invalidText\"\n    ></ng-template>\n  </div>\n  <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n    <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(warnText)\"\n      [ngTemplateOutlet]=\"warnText\"\n    ></ng-template>\n  </div>\n</div>\n", directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: NumberInputDirective, selector: "[ofeNumberScroll]" }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-number-input',
@@ -9208,6 +9292,10 @@
                     type: i0.Input
                 }], max: [{
                     type: i0.Input
+                }], maxlength: [{
+                    type: i0.Input
+                }], minlength: [{
+                    type: i0.Input
                 }], label: [{
                     type: i0.Input
                 }], helperText: [{
@@ -9240,18 +9328,15 @@
             this.onTouched = function () { };
         }
         RadioButtonControlComponent.prototype.ngOnInit = function () {
-            var _this = this;
             this.options = this.options.map(function (opt) { return (Object.assign(Object.assign({}, opt), { checked: false })); });
-            if (Boolean(this.selected)) {
-                var maybeOpt = this.options.find(function (opt) { return opt.value === _this.selected; });
-                if (maybeOpt) {
-                    Object.assign(maybeOpt, { checked: true });
-                    this.value = this.selected;
-                }
-            }
+            this.updateSelectedOption();
         };
         RadioButtonControlComponent.prototype.writeValue = function (value) {
             this.value = value;
+            var newValueOpt = this.options.find(function (opt) { return opt.value === value; });
+            if (newValueOpt) {
+                Object.assign(newValueOpt, { checked: true });
+            }
         };
         RadioButtonControlComponent.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
@@ -9271,7 +9356,6 @@
             configurable: true
         });
         RadioButtonControlComponent.prototype.handleClick = function (option) {
-            console.log("handleClick", option);
             if (this.allowUnselect && option.checked) {
                 option.checked = false;
                 // doesn't fire by itself, so we create a synthetic change event
@@ -9282,7 +9366,6 @@
             }
         };
         RadioButtonControlComponent.prototype.handleChange = function (option) {
-            console.log("handleChange", option);
             if (!option.checked) {
                 this.value = undefined;
             }
@@ -9291,21 +9374,37 @@
             }
             this.onChange(this.value);
         };
+        RadioButtonControlComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.selected) {
+                this.updateSelectedOption();
+            }
+        };
+        RadioButtonControlComponent.prototype.updateSelectedOption = function () {
+            var _this = this;
+            if (this.selected) {
+                var maybeOpt_1 = this.options.find(function (opt) { return opt.value === _this.selected; });
+                if (maybeOpt_1) {
+                    this.options.forEach(function (opt) { return opt.checked = opt === maybeOpt_1; });
+                    this.value = this.selected;
+                }
+            }
+        };
         return RadioButtonControlComponent;
     }());
-    RadioButtonControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RadioButtonControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: { id: "id", options: "options", selected: "selected", allowUnselect: "allowUnselect" }, providers: [
+    RadioButtonControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadioButtonControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RadioButtonControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: { id: "id", options: "options", selected: "selected", allowUnselect: "allowUnselect", orientation: "orientation" }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return RadioButtonControlComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<fieldset class=\"cds--fieldset\">\n  <div\n    *ngFor=\"let option of options; let i = index\"\n    class=\"cds--form-item cds--radio-wrapper\"\n  >\n    <label class=\"form-control no-border\">\n      <input\n        type=\"radio\"\n        [id]=\"id + '_' + i\"\n        [name]=\"id\"\n        [checked]=\"option.checked\"\n        [value]=\"option.value\"\n        (click)=\"handleClick(option)\"\n        (change)=\"handleChange(option)\"\n      />\n      {{ option.label }}\n    </label>\n  </div>\n</fieldset>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonControlComponent, decorators: [{
+        ], usesOnChanges: true, ngImport: i0__namespace, template: "<fieldset class=\"cds--fieldset\">\n  <div\n    *ngFor=\"let option of options; let i = index\"\n    class=\"cds--form-item cds--radio-wrapper\"\n    [ngClass]=\"{'inline': orientation === 'horizontal'}\"\n  >\n    <label class=\"form-control no-border\">\n      <input\n        type=\"radio\"\n        [id]=\"id + '_' + i\"\n        [name]=\"id\"\n        [checked]=\"option.checked\"\n        [value]=\"option.value\"\n        (click)=\"handleClick(option)\"\n        (change)=\"handleChange(option)\"\n      />\n      {{ option.label }}\n    </label>\n  </div>\n</fieldset>\n", styles: [".inline{display:inline-block;padding-right:.5rem}\n"], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadioButtonControlComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-radio-button',
                         templateUrl: './radio.component.html',
+                        styleUrls: ['./radio.component.css'],
                         providers: [
                             {
                                 provide: i21.NG_VALUE_ACCESSOR,
@@ -9322,6 +9421,8 @@
                     type: i0.Input
                 }], allowUnselect: [{
                     type: i0.Input
+                }], orientation: [{
+                    type: i0.Input
                 }] } });
 
     var CheckboxControlComponent = /** @class */ (function () {
@@ -9381,21 +9482,20 @@
                     return o !== option.value;
                 });
             }
-            // this._value = [...this.selected];
-            this.selected = __spreadArray([], __read(this._value));
-            this.onChange(this.value);
+            this._value = __spreadArray([], __read(this.selected));
+            this.onChange(this._value);
         };
         return CheckboxControlComponent;
     }());
-    CheckboxControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CheckboxControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: { id: "id", options: "options", selected: "selected" }, providers: [
+    CheckboxControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CheckboxControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: { id: "id", options: "options", selected: "selected" }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return CheckboxControlComponent; }),
                 multi: true
             }
         ], ngImport: i0__namespace, template: "<fieldset class=\"cds--fieldset\">\n  <div\n    class=\"cds--form-item cds--checkbox-wrapper\"\n    *ngFor=\"let option of options; let i = index\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"cds--checkbox\"\n      [id]=\"i + id\"\n      [checked]=\"option.checked\"\n      (change)=\"selectOpt(option, $event)\"\n      [value]=\"option.value\"\n    />\n    <label [for]=\"i + id\" class=\"cds--checkbox-label\">\n      <span class=\"cds--checkbox-label-text\">{{ option.label }}</span>\n    </label>\n  </div>\n</fieldset>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxControlComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxControlComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-checkbox',
@@ -9522,9 +9622,9 @@
         };
         return AppointmentsOverviewComponent;
     }());
-    AppointmentsOverviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppointmentsOverviewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AppointmentsOverviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"showAppointments\" class=\"container\">\n  <div *ngIf=\"loadingAppointments\">\n    <span *ngIf=\"!appointmentsLoaded && errorLoadingAppointments\"\n      >Error checking appointments</span\n    >\n    <div\n      *ngIf=\"loadingAppointments\"\n      class=\"cds--inline-loading\"\n      aria-live=\"assertive\"\n    >\n      <div class=\"cds--inline-loading__animation\">\n        <div\n          aria-atomic=\"true\"\n          aria-labelledby=\"loading-id-2\"\n          aria-live=\"assertive\"\n          class=\"cds--loading cds--loading--small\"\n        >\n          <label id=\"loading-id-2\" class=\"cds--visually-hidden\"\n            >Active loading indicator</label\n          ><svg class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n            <title>Active loading indicator</title>\n            <circle\n              class=\"cds--loading__background\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n            <circle\n              class=\"cds--loading__stroke\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n          </svg>\n        </div>\n      </div>\n      <div class=\"cds--inline-loading__text\">Loading...</div>\n    </div>\n  </div>\n\n  <div\n    class=\"cds--data-table-content\"\n    *ngIf=\"appointmentsLoaded && !errorLoadingAppointments\"\n  >\n    <table class=\"cds--data-table cds--data-table--no-border\">\n      <thead>\n        <tr>\n          <th\n            *ngFor=\"let appointment of appointments\"\n            scope=\"col\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.date }}\n          </th>\n        </tr>\n      </thead>\n      <tbody aria-live=\"polite\">\n        <tr>\n          <td\n            *ngFor=\"let appointment of appointments\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.count }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".container{margin-top:.625rem}.active{background-color:#e0e0e0;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"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppointmentsOverviewComponent, decorators: [{
+    AppointmentsOverviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AppointmentsOverviewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppointmentsOverviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"showAppointments\" class=\"container\">\n  <div *ngIf=\"loadingAppointments\">\n    <span *ngIf=\"!appointmentsLoaded && errorLoadingAppointments\"\n      >Error checking appointments</span\n    >\n    <div\n      *ngIf=\"loadingAppointments\"\n      class=\"cds--inline-loading\"\n      aria-live=\"assertive\"\n    >\n      <div class=\"cds--inline-loading__animation\">\n        <div\n          aria-atomic=\"true\"\n          aria-labelledby=\"loading-id-2\"\n          aria-live=\"assertive\"\n          class=\"cds--loading cds--loading--small\"\n        >\n          <label id=\"loading-id-2\" class=\"cds--visually-hidden\"\n            >Active loading indicator</label\n          ><svg class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n            <title>Active loading indicator</title>\n            <circle\n              class=\"cds--loading__background\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n            <circle\n              class=\"cds--loading__stroke\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n          </svg>\n        </div>\n      </div>\n      <div class=\"cds--inline-loading__text\">Loading...</div>\n    </div>\n  </div>\n\n  <div\n    class=\"cds--data-table-content\"\n    *ngIf=\"appointmentsLoaded && !errorLoadingAppointments\"\n  >\n    <table class=\"cds--data-table cds--data-table--no-border\">\n      <thead>\n        <tr>\n          <th\n            *ngFor=\"let appointment of appointments\"\n            scope=\"col\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.date }}\n          </th>\n        </tr>\n      </thead>\n      <tbody aria-live=\"polite\">\n        <tr>\n          <td\n            *ngFor=\"let appointment of appointments\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.count }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".container{margin-top:.625rem}.active{background-color:#e0e0e0;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"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AppointmentsOverviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-appointments-overview',
@@ -9568,9 +9668,9 @@
         };
         return HistoricalFieldHelperService;
     }());
-    HistoricalFieldHelperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    HistoricalFieldHelperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService, decorators: [{
+    HistoricalFieldHelperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalFieldHelperService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    HistoricalFieldHelperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalFieldHelperService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalFieldHelperService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -9600,7 +9700,8 @@
                         var display = { text: '', _date: '' };
                         if (this._node.question.renderingType === 'select' ||
                             this._node.question.renderingType === 'multi-select' ||
-                            this._node.question.renderingType === 'single-select') {
+                            this._node.question.renderingType === 'single-select' ||
+                            this._node.question.renderingType === 'radio') {
                             display.text = this.historicalFieldHelper.getDisplayTextFromOptions(this._node.question, 'value', 'label');
                             display._date = this._node.question.historicalDataValue.valueDate;
                             this._node.question['historicalDisplay'] = display;
@@ -9621,9 +9722,9 @@
         };
         return HistoricalValueDirective;
     }());
-    HistoricalValueDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalValueDirective, deps: [{ token: HistoricalFieldHelperService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    HistoricalValueDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HistoricalValueDirective, selector: "[node]", inputs: { _node: "_node", node: "node" }, outputs: { _nodeChange: "_nodeChange" }, host: { listeners: { "click": "setValue($event)" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalValueDirective, decorators: [{
+    HistoricalValueDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalValueDirective, deps: [{ token: HistoricalFieldHelperService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    HistoricalValueDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: HistoricalValueDirective, selector: "[node]", inputs: { _node: "_node", node: "node" }, outputs: { _nodeChange: "_nodeChange" }, host: { listeners: { "click": "setValue($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalValueDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -9787,9 +9888,9 @@
         };
         return CollapseDirective;
     }());
-    CollapseDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CollapseDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i1__namespace$5.AnimationBuilder }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    CollapseDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CollapseDirective, selector: "[ofeCollapse]", inputs: { display: "display", isAnimated: "isAnimated", collapse: "collapse" }, outputs: { collapsed: "collapsed", collapses: "collapses", expanded: "expanded", expands: "expands" }, host: { properties: { "class.in": "this.isExpanded", "class.show": "this.isExpanded", "attr.aria-expanded": "this.isExpanded", "attr.aria-hidden": "this.isCollapsed", "class.collapse": "this.isCollapse", "class.collapsing": "this.isCollapsing" } }, exportAs: ["bs-collapse"], ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CollapseDirective, decorators: [{
+    CollapseDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CollapseDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i1__namespace$5.AnimationBuilder }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    CollapseDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: CollapseDirective, selector: "[ofeCollapse]", inputs: { display: "display", isAnimated: "isAnimated", collapse: "collapse" }, outputs: { collapsed: "collapsed", collapses: "collapses", expanded: "expanded", expands: "expands" }, host: { properties: { "class.in": "this.isExpanded", "class.show": "this.isExpanded", "attr.aria-expanded": "this.isExpanded", "attr.aria-hidden": "this.isCollapsed", "class.collapse": "this.isCollapse", "class.collapsing": "this.isCollapsing" } }, exportAs: ["bs-collapse"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CollapseDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[ofeCollapse]',
@@ -9859,9 +9960,9 @@
         });
         return TextAreaDirective;
     }());
-    TextAreaDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextAreaDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TextAreaDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: { theme: "theme", invalid: "invalid", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--skeleton": "this.skeleton", "class.cds--text-area--light": "this.isLightTheme" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextAreaDirective, decorators: [{
+    TextAreaDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextAreaDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TextAreaDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: { theme: "theme", invalid: "invalid", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--skeleton": "this.skeleton", "class.cds--text-area--light": "this.isLightTheme" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextAreaDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[ofeTextAreaInput]'
@@ -9935,9 +10036,9 @@
         });
         return TextInputDirective;
     }());
-    TextInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextInputDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TextInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextInputDirective, selector: "[ofeTextInput]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--xl": "this.isSizeXl", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input__field-wrapper--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextInputDirective, decorators: [{
+    TextInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextInputDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TextInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TextInputDirective, selector: "[ofeTextInput]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--xl": "this.isSizeXl", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input__field-wrapper--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[ofeTextInput]'
@@ -10192,9 +10293,9 @@
         };
         return FormRendererComponent;
     }());
-    FormRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: i4__namespace.TranslateService }, { token: i1.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FormRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap", controlId: "controlId" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ofe-tab\n      [tabTitle]=\"question.label | 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 *ngFor=\"let option of node.question.options\" [value]=\"option.value\">\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            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            [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            ></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=\"'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:1.5rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box}.question-area{width:100%;max-width:18rem}.in-line{display:inline-block;padding-right:.5rem}\n"], components: [{ type: TabSetComponent, selector: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["tabSelect"] }, { type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: 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", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect"] }, { type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: ["node"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: 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: 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.16", ngImport: i0__namespace, type: FormRendererComponent, decorators: [{
+    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 *ngFor=\"let option of node.question.options\" [value]=\"option.value\">\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            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:18rem}.in-line{display:inline-block;padding-right:.5rem}\n"], components: [{ type: TabSetComponent, selector: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["tabSelect"] }, { type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: 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: [{
                         selector: 'ofe-form-renderer',
@@ -10260,9 +10361,9 @@
         };
         return ErrorRendererComponent;
     }());
-    ErrorRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ErrorRendererComponent, decorators: [{
+    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"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ErrorRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-error-renderer',
@@ -10278,15 +10379,15 @@
         }
         return NumberInputModule;
     }());
-    NumberInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NumberInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, declarations: [NumberInputComponent], imports: [i1.CommonModule, i21.FormsModule], exports: [NumberInputComponent] });
-    NumberInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, decorators: [{
+    NumberInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    NumberInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberInputModule, declarations: [NumberInputComponent, NumberInputDirective], imports: [i1.CommonModule, i21.FormsModule], exports: [NumberInputComponent] });
+    NumberInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberInputModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NumberInputModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [i1.CommonModule, i21.FormsModule],
                         exports: [NumberInputComponent],
-                        declarations: [NumberInputComponent],
+                        declarations: [NumberInputComponent, NumberInputDirective],
                         providers: []
                     }]
             }] });
@@ -10296,10 +10397,10 @@
         }
         return SharedModule;
     }());
-    SharedModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SharedModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SharedModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SharedModule, declarations: [SecurePipe], imports: [i1.CommonModule], exports: [SecurePipe, i4.TranslateModule] });
-    SharedModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SharedModule, providers: [DataSources], imports: [[i1.CommonModule], i4.TranslateModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SharedModule, decorators: [{
+    SharedModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SharedModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SharedModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SharedModule, declarations: [SecurePipe], imports: [i1.CommonModule], exports: [SecurePipe, i4.TranslateModule] });
+    SharedModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SharedModule, providers: [DataSources], imports: [[i1.CommonModule], i4.TranslateModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SharedModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [SecurePipe],
@@ -10314,20 +10415,20 @@
         }
         return RemoteFileUploadModule;
     }());
-    RemoteFileUploadModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    RemoteFileUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, declarations: [FileUploadComponent], imports: [i1.CommonModule,
+    RemoteFileUploadModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoteFileUploadModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    RemoteFileUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoteFileUploadModule, declarations: [FileUploadComponent], imports: [i1.CommonModule,
             i21.FormsModule,
             SharedModule,
             ngxWebcam.WebcamModule,
             i1$2.NgxFileUploaderModule], exports: [FileUploadComponent] });
-    RemoteFileUploadModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, providers: [], imports: [[
+    RemoteFileUploadModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoteFileUploadModule, providers: [], imports: [[
                 i1.CommonModule,
                 i21.FormsModule,
                 SharedModule,
                 ngxWebcam.WebcamModule,
                 i1$2.NgxFileUploaderModule
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RemoteFileUploadModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
@@ -10358,9 +10459,9 @@
         };
         return ModalComponent;
     }());
-    ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ModalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModalComponent, selector: "ofe-picker-modal", outputs: { overlayClick: "overlayClick" }, ngImport: i0__namespace, template: "<section class=\"x-modal\">\n  <section class=\"modal-overlay\" (click)=\"closeModal()\"></section>\n  <section class=\"modal-main\" id=\"section-modal-main\">\n    <ng-content></ng-content>\n  </section>\n</section>\n", styles: [":host{z-index:9999999999}*,*:before,*:after{box-sizing:border-box}.modal-main{position:absolute;left:19.6%;right:auto;top:auto;z-index:111;background-color:#fff;border:1px solid #d7dad7;border-radius:6px;transform:translate(-50%);box-shadow:0 5px 15px #0000004d}\n"], animations: [], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ModalComponent, decorators: [{
+    ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModalComponent, selector: "ofe-picker-modal", outputs: { overlayClick: "overlayClick" }, ngImport: i0__namespace, template: "<section class=\"x-modal\">\n  <section class=\"modal-overlay\" (click)=\"closeModal()\"></section>\n  <section class=\"modal-main\" id=\"section-modal-main\">\n    <ng-content></ng-content>\n  </section>\n</section>\n", styles: [":host{z-index:9999999999}*,*:before,*:after{box-sizing:border-box}.modal-main{position:absolute;left:19.6%;right:auto;top:auto;z-index:111;background-color:#fff;border:1px solid #d7dad7;border-radius:6px;transform:translate(-50%);box-shadow:0 5px 15px #0000004d}\n"], animations: [], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ModalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-picker-modal',
@@ -10384,9 +10485,9 @@
         };
         return MomentPipe;
     }());
-    MomentPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MomentPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    MomentPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MomentPipe, name: "moment" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MomentPipe, decorators: [{
+    MomentPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MomentPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    MomentPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MomentPipe, name: "moment" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MomentPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: 'moment' }]
             }] });
@@ -10555,9 +10656,9 @@
         };
         return DatePickerComponent;
     }());
-    DatePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DatePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DatePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "ofe-date-picker", inputs: { initDate: "initDate", locale: "locale", viewFormat: "viewFormat", returnObject: "returnObject" }, outputs: { datePickerCancel: "datePickerCancel", dateSelect: "dateSelect" }, ngImport: i0__namespace, template: "<ofe-picker-modal (overlayClick)=\"cancelDatePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-prev\" (click)=\"prev()\"></span>\n        </div>\n        <div class=\"picker-header-content\">\n          <div class=\"content\">\n            <span (click)=\"showMonthSelection()\" class=\"month\">{{\n              calendarDate | moment: 'MMMM'\n            }}</span>\n            <span class=\"seperator\">|</span>\n            <span (click)=\"showYearSelection()\" class=\"year\">{{\n              calendarDate | moment: 'YYYY'\n            }}</span>\n          </div>\n        </div>\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-next\" (click)=\"next()\"></span>\n        </div>\n      </div>\n      <div class=\"picker-calendar\">\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span class=\"picker-weekday\" *ngFor=\"let day of dayNames\">{{\n            day\n          }}</span>\n        </div>\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span\n            class=\"picker-day\"\n            (click)=\"selectDay(day)\"\n            [ngClass]=\"{\n              'out-focus': day.month() !== calendarDate.month(),\n              today: day.isSame(today),\n              selected: day.isSame(selectedDate)\n            }\"\n            *ngFor=\"let day of calendarDays\"\n          >\n            {{ day | moment: 'D' }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayMonths\">\n          <span\n            class=\"picker-month\"\n            *ngFor=\"let month of monthsShort\"\n            (click)=\"selectMonth(month)\"\n            [ngClass]=\"{\n              selected: month === currentMonth\n            }\"\n          >\n            {{ month }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayYears\">\n          <span\n            class=\"picker-year\"\n            *ngFor=\"let year of displayYearRange\"\n            (click)=\"selectYear(year)\"\n            [ngClass]=\"{\n              selected: year === currentYear\n            }\"\n          >\n            {{ year }}\n          </span>\n        </div>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-today\" (click)=\"selectToday()\">\n          <span class=\"text\">Today</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearPickDate()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelDatePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ofe-picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:666px}.picker-box{font-family:\"Open Sans\";min-width:400px!important;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;display:flex;height:2.5rem;width:100%}.picker-header-nav{position:relative;cursor:pointer;width:calc(100% / 8)}.picker-header-nav>*{position:absolute;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%)}.picker-header-nav .nav-prev:before,.picker-header-nav .nav-next:before{content:\" \";border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-right:.75em solid #000;width:0;height:0;display:block;margin:0 auto}.picker-header-nav .nav-next:before{border-right:0;border-left:.75em solid #000}.picker-header-content{width:calc(100% * 6 / 8);text-align:center}.picker-header-content .month{font-size:1.778rem;line-height:2.5rem;margin-right:.5rem;font-weight:700}.picker-header-content .year{font-style:italic;color:#999}.picker-calendar{width:100%}.picker-calendar .picker-calendar-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.625rem}.picker-calendar .picker-weekday{font-weight:700;text-align:left;color:#999;width:calc(100% / 7)}.picker-calendar .picker-day,.picker-calendar .picker-month,.picker-calendar .picker-year{font-size:1.333rem;line-height:2.5rem;position:relative;height:2.5rem;text-align:center;cursor:pointer;width:calc(100% / 7)}.picker-calendar .picker-day:hover,.picker-calendar .picker-month:hover,.picker-calendar .picker-year:hover{background:#b1dcfb}.picker-calendar .out-focus{color:#ddd}.picker-calendar .out-focus:hover{color:#000}.picker-calendar .selected{background:#0089ec;color:#fff}.picker-calendar .selected:hover{background:#0089ec}.picker-calendar .today:before{content:\" \";position:absolute;top:2px;right:2px;width:0;height:0;border-top:.5em solid #0059bc;border-left:.5em solid transparent}.picker-footer{cursor:pointer}.picker-footer .picker-action{text-align:center;width:calc(100% / 3)}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-today:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-today:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "ofe-picker-modal", outputs: ["overlayClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "moment": MomentPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DatePickerComponent, decorators: [{
+    DatePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DatePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DatePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DatePickerComponent, selector: "ofe-date-picker", inputs: { initDate: "initDate", locale: "locale", viewFormat: "viewFormat", returnObject: "returnObject" }, outputs: { datePickerCancel: "datePickerCancel", dateSelect: "dateSelect" }, ngImport: i0__namespace, template: "<ofe-picker-modal (overlayClick)=\"cancelDatePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-prev\" (click)=\"prev()\"></span>\n        </div>\n        <div class=\"picker-header-content\">\n          <div class=\"content\">\n            <span (click)=\"showMonthSelection()\" class=\"month\">{{\n              calendarDate | moment: 'MMMM'\n            }}</span>\n            <span class=\"seperator\">|</span>\n            <span (click)=\"showYearSelection()\" class=\"year\">{{\n              calendarDate | moment: 'YYYY'\n            }}</span>\n          </div>\n        </div>\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-next\" (click)=\"next()\"></span>\n        </div>\n      </div>\n      <div class=\"picker-calendar\">\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span class=\"picker-weekday\" *ngFor=\"let day of dayNames\">{{\n            day\n          }}</span>\n        </div>\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span\n            class=\"picker-day\"\n            (click)=\"selectDay(day)\"\n            [ngClass]=\"{\n              'out-focus': day.month() !== calendarDate.month(),\n              today: day.isSame(today),\n              selected: day.isSame(selectedDate)\n            }\"\n            *ngFor=\"let day of calendarDays\"\n          >\n            {{ day | moment: 'D' }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayMonths\">\n          <span\n            class=\"picker-month\"\n            *ngFor=\"let month of monthsShort\"\n            (click)=\"selectMonth(month)\"\n            [ngClass]=\"{\n              selected: month === currentMonth\n            }\"\n          >\n            {{ month }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayYears\">\n          <span\n            class=\"picker-year\"\n            *ngFor=\"let year of displayYearRange\"\n            (click)=\"selectYear(year)\"\n            [ngClass]=\"{\n              selected: year === currentYear\n            }\"\n          >\n            {{ year }}\n          </span>\n        </div>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-today\" (click)=\"selectToday()\">\n          <span class=\"text\">Today</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearPickDate()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelDatePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ofe-picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:666px}.picker-box{font-family:\"Open Sans\";min-width:400px!important;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;display:flex;height:2.5rem;width:100%}.picker-header-nav{position:relative;cursor:pointer;width:calc(100% / 8)}.picker-header-nav>*{position:absolute;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%)}.picker-header-nav .nav-prev:before,.picker-header-nav .nav-next:before{content:\" \";border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-right:.75em solid #000;width:0;height:0;display:block;margin:0 auto}.picker-header-nav .nav-next:before{border-right:0;border-left:.75em solid #000}.picker-header-content{width:calc(100% * 6 / 8);text-align:center}.picker-header-content .month{font-size:1.778rem;line-height:2.5rem;margin-right:.5rem;font-weight:700}.picker-header-content .year{font-style:italic;color:#999}.picker-calendar{width:100%}.picker-calendar .picker-calendar-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.625rem}.picker-calendar .picker-weekday{font-weight:700;text-align:left;color:#999;width:calc(100% / 7)}.picker-calendar .picker-day,.picker-calendar .picker-month,.picker-calendar .picker-year{font-size:1.333rem;line-height:2.5rem;position:relative;height:2.5rem;text-align:center;cursor:pointer;width:calc(100% / 7)}.picker-calendar .picker-day:hover,.picker-calendar .picker-month:hover,.picker-calendar .picker-year:hover{background:#b1dcfb}.picker-calendar .out-focus{color:#ddd}.picker-calendar .out-focus:hover{color:#000}.picker-calendar .selected{background:#0089ec;color:#fff}.picker-calendar .selected:hover{background:#0089ec}.picker-calendar .today:before{content:\" \";position:absolute;top:2px;right:2px;width:0;height:0;border-top:.5em solid #0059bc;border-left:.5em solid transparent}.picker-footer{cursor:pointer}.picker-footer .picker-action{text-align:center;width:calc(100% / 3)}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-today:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-today:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "ofe-picker-modal", outputs: ["overlayClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "moment": MomentPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DatePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-date-picker',
@@ -10673,9 +10774,9 @@
         };
         return TimePickerComponent;
     }());
-    TimePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "ofe-time-picker", inputs: { initTime: "initTime", showSecond: "showSecond", viewFormat: "viewFormat", use12Hour: "use12Hour", returnObject: "returnObject" }, outputs: { timeSelect: "timeSelect", timePickerCancel: "timePickerCancel" }, ngImport: i0__namespace, template: "<ofe-picker-modal (overlayClick)=\"cancelTimePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">Time Picker</div>\n      <div class=\"picker-table\">\n        <ul class=\"picker-table-time\">\n          <li class=\"picker-table-number hour\">\n            <span class=\"arrow up\" (click)=\"increaseHour()\"></span>\n            {{ time | moment: hourFormat }}\n            <span class=\"arrow down\" (click)=\"decreaseHour()\"></span>\n          </li>\n          <li class=\"picker-table-separator\">:</li>\n          <li class=\"picker-table-number minute\">\n            <span class=\"arrow up\" (click)=\"increaseMinute()\"></span>\n            {{ time | moment: 'mm' }}\n            <span class=\"arrow down\" (click)=\"decreaseMinute()\"></span>\n          </li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-separator\">:</li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-number second\">\n            <span class=\"arrow up\" (click)=\"increaseSecond()\"></span>\n            {{ time | moment: 'ss' }}\n            <span class=\"arrow down\" (click)=\"decreaseSecond()\"></span>\n          </li>\n          <li *ngIf=\"use12Hour\" class=\"picker-table-meridiem meridiem\">\n            {{ time | moment: 'A' }}\n          </li>\n        </ul>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-now\" (click)=\"selectNow()\">\n          <span class=\"text\">Now</span>\n        </div>\n        <div class=\"picker-action action-confirm\" (click)=\"selectTime()\">\n          <span class=\"text\">Confirm</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearTime()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelTimePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ofe-picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:40rem;font-family:\"Open Sans\"}.picker-box{width:100%;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;height:2.5rem;width:100%}.picker-header{text-align:center}.picker-table{width:100%;margin:2.5rem 0}.picker-table-time{font-size:2.37rem;line-height:2.5rem;list-style:none;margin:0;padding:0;display:flex;justify-content:center;width:100%;-webkit-user-select:none;user-select:none}.picker-table-number,.picker-table-meridiem,.picker-table-separator{text-align:center}.picker-table-number,.picker-table-meridiem{position:relative;width:20%}.arrow{position:absolute;left:50%;border:solid #777;border-width:0 .2rem .2rem 0;display:inline-block;padding:.25rem;cursor:pointer}.arrow.up{top:-1rem;transform:translate(-50%) rotate(-135deg)}.arrow.down{bottom:-1rem;transform:translate(-50%) rotate(45deg)}.arrow:hover{border-color:#1975d2}.picker-table-separator{width:calc(20% / 3)}.picker-footer{display:flex;justify-content:center;width:100%;cursor:pointer}.picker-footer .picker-action{width:25%;text-align:center}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-now:before,.picker-footer .action-confirm:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-now:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-confirm:before{width:1rem;height:1rem;border-radius:100%;background-color:#00b5ad}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "ofe-picker-modal", outputs: ["overlayClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "moment": MomentPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimePickerComponent, decorators: [{
+    TimePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TimePickerComponent, selector: "ofe-time-picker", inputs: { initTime: "initTime", showSecond: "showSecond", viewFormat: "viewFormat", use12Hour: "use12Hour", returnObject: "returnObject" }, outputs: { timeSelect: "timeSelect", timePickerCancel: "timePickerCancel" }, ngImport: i0__namespace, template: "<ofe-picker-modal (overlayClick)=\"cancelTimePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">Time Picker</div>\n      <div class=\"picker-table\">\n        <ul class=\"picker-table-time\">\n          <li class=\"picker-table-number hour\">\n            <span class=\"arrow up\" (click)=\"increaseHour()\"></span>\n            {{ time | moment: hourFormat }}\n            <span class=\"arrow down\" (click)=\"decreaseHour()\"></span>\n          </li>\n          <li class=\"picker-table-separator\">:</li>\n          <li class=\"picker-table-number minute\">\n            <span class=\"arrow up\" (click)=\"increaseMinute()\"></span>\n            {{ time | moment: 'mm' }}\n            <span class=\"arrow down\" (click)=\"decreaseMinute()\"></span>\n          </li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-separator\">:</li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-number second\">\n            <span class=\"arrow up\" (click)=\"increaseSecond()\"></span>\n            {{ time | moment: 'ss' }}\n            <span class=\"arrow down\" (click)=\"decreaseSecond()\"></span>\n          </li>\n          <li *ngIf=\"use12Hour\" class=\"picker-table-meridiem meridiem\">\n            {{ time | moment: 'A' }}\n          </li>\n        </ul>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-now\" (click)=\"selectNow()\">\n          <span class=\"text\">Now</span>\n        </div>\n        <div class=\"picker-action action-confirm\" (click)=\"selectTime()\">\n          <span class=\"text\">Confirm</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearTime()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelTimePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ofe-picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:40rem;font-family:\"Open Sans\"}.picker-box{width:100%;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;height:2.5rem;width:100%}.picker-header{text-align:center}.picker-table{width:100%;margin:2.5rem 0}.picker-table-time{font-size:2.37rem;line-height:2.5rem;list-style:none;margin:0;padding:0;display:flex;justify-content:center;width:100%;-webkit-user-select:none;user-select:none}.picker-table-number,.picker-table-meridiem,.picker-table-separator{text-align:center}.picker-table-number,.picker-table-meridiem{position:relative;width:20%}.arrow{position:absolute;left:50%;border:solid #777;border-width:0 .2rem .2rem 0;display:inline-block;padding:.25rem;cursor:pointer}.arrow.up{top:-1rem;transform:translate(-50%) rotate(-135deg)}.arrow.down{bottom:-1rem;transform:translate(-50%) rotate(45deg)}.arrow:hover{border-color:#1975d2}.picker-table-separator{width:calc(20% / 3)}.picker-footer{display:flex;justify-content:center;width:100%;cursor:pointer}.picker-footer .picker-action{width:25%;text-align:center}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-now:before,.picker-footer .action-confirm:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-now:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-confirm:before{width:1rem;height:1rem;border-radius:100%;background-color:#00b5ad}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "ofe-picker-modal", outputs: ["overlayClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "moment": MomentPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TimePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-time-picker',
@@ -10779,15 +10880,15 @@
         };
         return DateTimePickerComponent;
     }());
-    DateTimePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DateTimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "ofe-date-time-picker", inputs: { modelValue: "modelValue", showDate: "showDate", showTime: "showTime", showWeeks: "showWeeks", weeks: "weeks" }, outputs: { dateChange: "dateChange" }, providers: [
+    DateTimePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DateTimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DateTimePickerComponent, selector: "ofe-date-time-picker", inputs: { modelValue: "modelValue", showDate: "showDate", showTime: "showTime", showWeeks: "showWeeks", weeks: "weeks" }, outputs: { dateChange: "dateChange" }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 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 } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-date-time-picker',
@@ -10823,8 +10924,8 @@
         }
         return DateTimePickerModule;
     }());
-    DateTimePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    DateTimePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, declarations: [DatePickerComponent,
+    DateTimePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    DateTimePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerModule, declarations: [DatePickerComponent,
             TimePickerComponent,
             ModalComponent,
             MomentPipe,
@@ -10833,8 +10934,8 @@
             ModalComponent,
             MomentPipe,
             DateTimePickerComponent] });
-    DateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, decorators: [{
+    DateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DateTimePickerModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule]] });
+    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],
@@ -11135,9 +11236,9 @@
         };
         return OwlDateTimeInlineComponent;
     }(OwlDateTime));
-    OwlDateTimeInlineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeInlineComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlDateTimeInlineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInlineComponent, selector: "ofe-owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-inline": "this.owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ofe-owl-date-time-container></ofe-owl-date-time-container>\n", styles: [""], components: [{ type: OwlDateTimeContainerComponent, selector: "ofe-owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeInlineComponent, decorators: [{
+    OwlDateTimeInlineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeInlineComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    OwlDateTimeInlineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: OwlDateTimeInlineComponent, selector: "ofe-owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-inline": "this.owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ofe-owl-date-time-container></ofe-owl-date-time-container>\n", styles: [""], components: [{ type: OwlDateTimeContainerComponent, selector: "ofe-owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeInlineComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-owl-date-time-inline',
@@ -11193,10 +11294,10 @@
         }
         return OwlDialogModule;
     }());
-    OwlDialogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OwlDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogModule, declarations: [OwlDialogContainerComponent], imports: [i1.CommonModule, i1$3.A11yModule, i1$5.OverlayModule, i2$1.PortalModule] });
-    OwlDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogModule, providers: [OWL_DIALOG_SCROLL_STRATEGY_PROVIDER, OwlDialogService], imports: [[i1.CommonModule, i1$3.A11yModule, i1$5.OverlayModule, i2$1.PortalModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogModule, decorators: [{
+    OwlDialogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OwlDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogModule, declarations: [OwlDialogContainerComponent], imports: [i1.CommonModule, i1$3.A11yModule, i1$5.OverlayModule, i2$1.PortalModule] });
+    OwlDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogModule, providers: [OWL_DIALOG_SCROLL_STRATEGY_PROVIDER, OwlDialogService], imports: [[i1.CommonModule, i1$3.A11yModule, i1$5.OverlayModule, i2$1.PortalModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDialogModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [i1.CommonModule, i1$3.A11yModule, i1$5.OverlayModule, i2$1.PortalModule],
@@ -11215,8 +11316,8 @@
         }
         return OwlDateTimeModule;
     }());
-    OwlDateTimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OwlDateTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeModule, declarations: [OwlDateTimeTriggerDirective,
+    OwlDateTimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OwlDateTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlDateTimeModule, declarations: [OwlDateTimeTriggerDirective,
             OwlDateTimeInputDirective,
             OwlDateTimeComponent,
             OwlDateTimeContainerComponent,
@@ -11237,8 +11338,8 @@
             OwlMultiYearViewComponent,
             OwlYearViewComponent,
             OwlMonthViewComponent] });
-    OwlDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeModule, providers: [OwlDateTimeIntl, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER], imports: [[i1.CommonModule, i1$5.OverlayModule, OwlDialogModule, i1$3.A11yModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeModule, decorators: [{
+    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]] });
+    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],
@@ -11613,9 +11714,9 @@
         };
         return NativeDateTimeAdapter;
     }(DateTimeAdapter));
-    NativeDateTimeAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NativeDateTimeAdapter, deps: [{ token: OWL_DATE_TIME_LOCALE, optional: true }, { token: i1__namespace$6.Platform }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    NativeDateTimeAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NativeDateTimeAdapter });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NativeDateTimeAdapter, decorators: [{
+    NativeDateTimeAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NativeDateTimeAdapter, deps: [{ token: OWL_DATE_TIME_LOCALE, optional: true }, { token: i1__namespace$6.Platform }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    NativeDateTimeAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NativeDateTimeAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NativeDateTimeAdapter, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: undefined, decorators: [{
@@ -11650,10 +11751,10 @@
         }
         return NativeDateTimeModule;
     }());
-    NativeDateTimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NativeDateTimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NativeDateTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NativeDateTimeModule, imports: [i1$6.PlatformModule] });
-    NativeDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NativeDateTimeModule, providers: [{ provide: DateTimeAdapter, useClass: NativeDateTimeAdapter }], imports: [[i1$6.PlatformModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NativeDateTimeModule, decorators: [{
+    NativeDateTimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NativeDateTimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    NativeDateTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NativeDateTimeModule, imports: [i1$6.PlatformModule] });
+    NativeDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NativeDateTimeModule, providers: [{ provide: DateTimeAdapter, useClass: NativeDateTimeAdapter }], imports: [[i1$6.PlatformModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NativeDateTimeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [i1$6.PlatformModule],
@@ -11665,12 +11766,12 @@
         }
         return OwlNativeDateTimeModule;
     }());
-    OwlNativeDateTimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlNativeDateTimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    OwlNativeDateTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlNativeDateTimeModule, imports: [NativeDateTimeModule] });
-    OwlNativeDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlNativeDateTimeModule, providers: [
+    OwlNativeDateTimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlNativeDateTimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    OwlNativeDateTimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlNativeDateTimeModule, imports: [NativeDateTimeModule] });
+    OwlNativeDateTimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlNativeDateTimeModule, providers: [
             { provide: OWL_DATE_TIME_FORMATS, useValue: OWL_NATIVE_DATE_TIME_FORMATS }
         ], imports: [[NativeDateTimeModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlNativeDateTimeModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OwlNativeDateTimeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [NativeDateTimeModule],
@@ -11688,18 +11789,18 @@
         }
         return NgxDateTimePickerModule;
     }());
-    NgxDateTimePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NgxDateTimePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, declarations: [NgxDatetimeComponent], imports: [i1.CommonModule,
+    NgxDateTimePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxDateTimePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    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] });
-    NgxDateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, providers: [], imports: [[
+    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
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxDateTimePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
@@ -11781,15 +11882,15 @@
         };
         return AfeNgSelectComponent;
     }());
-    AfeNgSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AfeNgSelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AfeNgSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AfeNgSelectComponent, selector: "ofe-ng-select", inputs: { dataSource: "dataSource", multiple: "multiple", extras: "extras" }, providers: [
+    AfeNgSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AfeNgSelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AfeNgSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AfeNgSelectComponent, selector: "ofe-ng-select", inputs: { dataSource: "dataSource", multiple: "multiple", extras: "extras" }, providers: [
             {
                 provide: i21.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return AfeNgSelectComponent; }),
                 multi: true
             }
         ], ngImport: i0__namespace, template: "<ng-select\n    (searchInputText)=\"getChangingText($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [options]=\"question_options\"\n    [multiple]=\"multiple\"\n  >\n  </ng-select> ", isInline: true, 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"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AfeNgSelectComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AfeNgSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-ng-select',
@@ -12054,9 +12155,9 @@
         };
         return FormSchemaCompiler;
     }());
-    FormSchemaCompiler.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormSchemaCompiler, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    FormSchemaCompiler.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormSchemaCompiler });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormSchemaCompiler, decorators: [{
+    FormSchemaCompiler.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormSchemaCompiler, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FormSchemaCompiler.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormSchemaCompiler });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormSchemaCompiler, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -12200,6 +12301,7 @@
             this.questionFactory = questionFactory;
             this.valueProcessingInfo = {};
             this.existingOrders = {};
+            this.existingDiagnoses = [];
             this._showErrors = false;
             this._dataSourcesContainer = new DataSources();
         }
@@ -12445,7 +12547,7 @@
         function MaxValidationModel(validations) {
             var _this = _super.call(this, validations) || this;
             var max = validations.max;
-            _this.max = +max;
+            _this.max = Number(max);
             return _this;
         }
         return MaxValidationModel;
@@ -12456,7 +12558,7 @@
         function MinValidationModel(validations) {
             var _this = _super.call(this, validations) || this;
             var min = validations.min;
-            _this.min = +min;
+            _this.min = Number(min);
             return _this;
         }
         return MinValidationModel;
@@ -12733,9 +12835,9 @@
         };
         return HistoricalEncounterDataService;
     }());
-    HistoricalEncounterDataService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalEncounterDataService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    HistoricalEncounterDataService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalEncounterDataService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalEncounterDataService, decorators: [{
+    HistoricalEncounterDataService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalEncounterDataService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    HistoricalEncounterDataService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalEncounterDataService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalEncounterDataService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -12771,12 +12873,47 @@
         };
         return HistoricalHelperService;
     }());
-    HistoricalHelperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalHelperService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    HistoricalHelperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalHelperService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalHelperService, decorators: [{
+    HistoricalHelperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalHelperService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    HistoricalHelperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalHelperService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: HistoricalHelperService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
+    var DiagnosisQuestion = /** @class */ (function (_super) {
+        __extends(DiagnosisQuestion, _super);
+        function DiagnosisQuestion(options) {
+            var _this = _super.call(this, options) || this;
+            _this.renderingType = 'select';
+            _this.options = options.options;
+            _this.controlType = exports.AfeControlType.AfeFormControl;
+            _this.dataSource = options.dataSource || '';
+            return _this;
+        }
+        return DiagnosisQuestion;
+    }(QuestionBase));
+
+    var MaxLengthValidationModel = /** @class */ (function (_super) {
+        __extends(MaxLengthValidationModel, _super);
+        function MaxLengthValidationModel(validations) {
+            var _this = _super.call(this, validations) || this;
+            var maxlength = validations.maxlength;
+            _this.maxlength = +maxlength;
+            return _this;
+        }
+        return MaxLengthValidationModel;
+    }(ValidationModel));
+
+    var MinLengthValidationModel = /** @class */ (function (_super) {
+        __extends(MinLengthValidationModel, _super);
+        function MinLengthValidationModel(validations) {
+            var _this = _super.call(this, validations) || this;
+            var minlength = validations.minlength;
+            _this.minlength = +minlength;
+            return _this;
+        }
+        return MinLengthValidationModel;
+    }(ValidationModel));
+
     var QuestionFactory = /** @class */ (function () {
         function QuestionFactory() {
             this.dataSources = {};
@@ -13197,6 +13334,10 @@
                 orders.push(testOrder);
                 question.questions = orders;
             }
+            else if (schemaQuestion.type === 'diagnosis') {
+                var diagnosisQuestion = this.toDiagnosisQuestion(schemaQuestion);
+                question.questions = [diagnosisQuestion];
+            }
             var mappings = {
                 label: 'label',
                 required: 'required',
@@ -13401,6 +13542,33 @@
             this.copyProperties(mappings, schemaQuestion, question);
             return question;
         };
+        QuestionFactory.prototype.toDiagnosisQuestion = function (schemaQuestion) {
+            var question = new DiagnosisQuestion({
+                type: '',
+                key: schemaQuestion.id,
+                label: schemaQuestion.label,
+                rendering: '',
+                rank: schemaQuestion.questionOptions.rank
+            });
+            question.questionIndex = this.quetionIndex;
+            question.prefix = schemaQuestion.prefix;
+            question.renderingType = 'remote-select';
+            question.validators = this.addValidators(schemaQuestion);
+            question.extras = schemaQuestion;
+            question.dataSource = schemaQuestion.questionOptions.dataSource || 'diagnoses';
+            var mappings = {
+                label: 'label',
+                required: 'required',
+                id: 'key'
+            };
+            question.componentConfigs = schemaQuestion.componentConfigs || [];
+            this.copyProperties(mappings, schemaQuestion, question);
+            this.addDisableOrHideProperty(schemaQuestion, question);
+            this.addAlertProperty(schemaQuestion, question);
+            this.addHistoricalExpressions(schemaQuestion, question);
+            this.addCalculatorProperty(schemaQuestion, question);
+            return question;
+        };
         QuestionFactory.prototype.getSchemaQuestions = function (schema) {
             var listQuestions = new Array();
             this.getQuestions(schema, listQuestions);
@@ -13491,8 +13659,6 @@
                     return this.toTextQuestion(schema);
                 case 'textarea':
                     return this.toTextAreaQuestion(schema);
-                case 'textarea':
-                    return this.toTextAreaQuestion(schema);
                 case 'select-concept-answers':
                     return this.toConceptAnswerSelect(schema);
                 case 'encounterLocation':
@@ -13588,6 +13754,18 @@
                             min: questionOptions.min
                         }));
                     }
+                    if (questionOptions.maxLength) {
+                        validators.push(new MaxLengthValidationModel({
+                            type: 'maxlength',
+                            maxlength: questionOptions.maxLength
+                        }));
+                    }
+                    if (questionOptions.minLength) {
+                        validators.push(new MinLengthValidationModel({
+                            type: 'minlength',
+                            minlength: questionOptions.minLength
+                        }));
+                    }
                     break;
                 default:
                     break;
@@ -13691,9 +13869,9 @@
         };
         return QuestionFactory;
     }());
-    QuestionFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QuestionFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    QuestionFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QuestionFactory });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QuestionFactory, decorators: [{
+    QuestionFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    QuestionFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionFactory });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QuestionFactory, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -13821,9 +13999,9 @@
         };
         return FormFactory;
     }());
-    FormFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormFactory, deps: [{ token: FormControlService }, { token: QuestionFactory }, { token: ControlRelationsFactory }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    FormFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormFactory });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormFactory, decorators: [{
+    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.ɵ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 }]; } });
 
@@ -14042,9 +14220,143 @@
         };
         return OrderValueAdapter;
     }());
-    OrderValueAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OrderValueAdapter, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    OrderValueAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OrderValueAdapter });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OrderValueAdapter, decorators: [{
+    OrderValueAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OrderValueAdapter, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    OrderValueAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OrderValueAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OrderValueAdapter, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var DiagnosisValueAdapter = /** @class */ (function () {
+        function DiagnosisValueAdapter() {
+            this.formDiagnosisNodes = [];
+        }
+        DiagnosisValueAdapter.prototype.generateFormPayload = function (form) {
+            this.formDiagnosisNodes = [];
+            this._findDiagnosisQuestionNodes(form.rootNode);
+            return this._createDiagnosesPayload(this.formDiagnosisNodes, form.existingDiagnoses);
+        };
+        DiagnosisValueAdapter.prototype.populateForm = function (form, diagnoses) {
+            form.existingDiagnoses = diagnoses === null || diagnoses === void 0 ? void 0 : diagnoses.filter(function (d) {
+                return !d.voided;
+            });
+            this.formDiagnosisNodes = [];
+            this._findDiagnosisQuestionNodes(form.rootNode);
+            this._setDiagnosesValues(this.formDiagnosisNodes, form.existingDiagnoses, 1);
+            this._setDiagnosesValues(this.formDiagnosisNodes, form.existingDiagnoses, 2);
+        };
+        DiagnosisValueAdapter.prototype._createDiagnosesPayload = function (diagnosisNodes, existingDiagnoses) {
+            var _this = this;
+            var payload = [];
+            var deletedDiagnoses = [];
+            diagnosisNodes === null || diagnosisNodes === void 0 ? void 0 : diagnosisNodes.forEach(function (node) {
+                node.control.value.filter(function (v) { return v[node.question.key]; }).forEach(function (value) {
+                    // Create Payload
+                    var payloadDiagnosis = _this._createPayloadDiagnosis(value[node.question.key], node.question.extras);
+                    // Validate if is new value
+                    payload.push(payloadDiagnosis);
+                });
+            });
+            this._updatedOldDiagnoses(payload, existingDiagnoses);
+            deletedDiagnoses = this._getDeletedDiagnoses(payload, existingDiagnoses);
+            return payload.concat(deletedDiagnoses);
+        };
+        DiagnosisValueAdapter.prototype._createPayloadDiagnosis = function (codedUuid, questionExtras) {
+            var diagnosis = {
+                diagnosis: {
+                    coded: codedUuid,
+                },
+                certainty: 'CONFIRMED',
+                rank: questionExtras.questionOptions.rank,
+                voided: false
+            };
+            return diagnosis;
+        };
+        DiagnosisValueAdapter.prototype._getDeletedDiagnoses = function (payloadDiagnoses, existingDiagnoses) {
+            var _this = this;
+            return existingDiagnoses === null || existingDiagnoses === void 0 ? void 0 : existingDiagnoses.filter(function (e) {
+                return !payloadDiagnoses.find(function (p) {
+                    var isSame = !e.voided && p.diagnosis.coded === e.diagnosis.coded.uuid;
+                    return isSame;
+                });
+            }).map(function (d) {
+                var diagnosisPayload = _this._convert(d);
+                diagnosisPayload.voided = true;
+                return diagnosisPayload;
+            });
+        };
+        DiagnosisValueAdapter.prototype._updatedOldDiagnoses = function (payloadDiagnoses, existingDiagnoses) {
+            payloadDiagnoses.forEach(function (p) {
+                existingDiagnoses === null || existingDiagnoses === void 0 ? void 0 : existingDiagnoses.forEach(function (e) {
+                    var isSame = !e.voided && p.diagnosis.coded === e.diagnosis.coded.uuid;
+                    p.uuid = isSame ? e.uuid : null;
+                });
+            });
+        };
+        DiagnosisValueAdapter.prototype._setDiagnosesValues = function (formDiagnosisNodes, existingDiagnoses, rank) {
+            formDiagnosisNodes === null || formDiagnosisNodes === void 0 ? void 0 : formDiagnosisNodes.filter(function (node) { return node.question.extras.questionOptions.rank == rank; }).forEach(function (node) {
+                node['initialValue'] = existingDiagnoses;
+                existingDiagnoses.filter(function (d) { return d.rank == rank; }).forEach(function (diagnosis, index) {
+                    node.createChildNode();
+                    var value = {};
+                    value[node.question.key] = diagnosis.diagnosis.coded.uuid;
+                    var childNode = node.children[index];
+                    childNode.control.setValue(value);
+                    childNode['initialValue'] = value;
+                });
+            });
+        };
+        DiagnosisValueAdapter.prototype._findDiagnosisQuestionNodes = function (formNode) {
+            if (formNode.children) {
+                if (formNode.children instanceof Object) {
+                    for (var key in formNode.children) {
+                        if (formNode.children.hasOwnProperty(key)) {
+                            switch (formNode.children[key].question.renderingType) {
+                                case 'page':
+                                    this._findDiagnosisQuestionNodes(formNode.children[key]);
+                                    break;
+                                case 'section':
+                                    this._findDiagnosisQuestionNodes(formNode.children[key]);
+                                    break;
+                                case 'group':
+                                    this._findDiagnosisQuestionNodes(formNode.children[key]);
+                                    break;
+                                case 'repeating':
+                                    if (formNode.children) {
+                                        for (var node in formNode.children) {
+                                            var question = formNode.children[node].question;
+                                            if (question.extras && question.extras.type === 'diagnosis') {
+                                                this.formDiagnosisNodes.push(formNode.children[node]);
+                                            }
+                                        }
+                                    }
+                                    break;
+                                default:
+                                    break;
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        DiagnosisValueAdapter.prototype._convert = function (diagnosis) {
+            return {
+                uuid: diagnosis.uuid,
+                encounter: diagnosis.encounter,
+                patient: diagnosis.patient,
+                diagnosis: {
+                    coded: diagnosis.diagnosis.coded.uuid,
+                    nonCoded: diagnosis.diagnosis.nonCoded,
+                },
+                certainty: diagnosis.certainty,
+                rank: diagnosis.rank,
+                voided: diagnosis.voided,
+            };
+        };
+        return DiagnosisValueAdapter;
+    }());
+    DiagnosisValueAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagnosisValueAdapter, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DiagnosisValueAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagnosisValueAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DiagnosisValueAdapter, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -14567,9 +14879,9 @@
         };
         return ObsAdapterHelper;
     }());
-    ObsAdapterHelper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ObsAdapterHelper, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ObsAdapterHelper.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ObsAdapterHelper });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ObsAdapterHelper, decorators: [{
+    ObsAdapterHelper.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ObsAdapterHelper, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ObsAdapterHelper.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ObsAdapterHelper });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ObsAdapterHelper, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -15293,15 +15605,16 @@
         };
         return ObsValueAdapter;
     }());
-    ObsValueAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ObsValueAdapter, deps: [{ token: ObsAdapterHelper }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ObsValueAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ObsValueAdapter });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ObsValueAdapter, decorators: [{
+    ObsValueAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ObsValueAdapter, deps: [{ token: ObsAdapterHelper }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ObsValueAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ObsValueAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ObsValueAdapter, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: ObsAdapterHelper }]; } });
 
     var EncounterAdapter = /** @class */ (function () {
-        function EncounterAdapter(ordersAdapter, obsAdapter) {
+        function EncounterAdapter(ordersAdapter, diagnosesAdapter, obsAdapter) {
             this.ordersAdapter = ordersAdapter;
+            this.diagnosesAdapter = diagnosesAdapter;
             this.obsAdapter = obsAdapter;
         }
         EncounterAdapter.prototype.populateForm = function (form, payload) {
@@ -15309,6 +15622,9 @@
             if (Array.isArray(payload.orders)) {
                 this.ordersAdapter.populateForm(form, payload);
             }
+            if (Array.isArray(payload.diagnoses)) {
+                this.diagnosesAdapter.populateForm(form, payload.diagnoses);
+            }
             if (Array.isArray(payload.obs)) {
                 this.obsAdapter.populateForm(form, payload.obs);
             }
@@ -15356,6 +15672,7 @@
             this.setNonFilledPayloadMembers(form, payload);
             payload['obs'] = this.obsAdapter.generateFormPayload(form) || [];
             payload['orders'] = this.ordersAdapter.generateFormPayload(form) || [];
+            payload['diagnoses'] = this.diagnosesAdapter.generateFormPayload(form) || [];
             return payload;
         };
         EncounterAdapter.prototype.generateNodePayload = function (rootNode) {
@@ -15458,11 +15775,11 @@
         };
         return EncounterAdapter;
     }());
-    EncounterAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EncounterAdapter, deps: [{ token: OrderValueAdapter }, { token: ObsValueAdapter }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    EncounterAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EncounterAdapter });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EncounterAdapter, decorators: [{
+    EncounterAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EncounterAdapter, deps: [{ token: OrderValueAdapter }, { token: DiagnosisValueAdapter }, { token: ObsValueAdapter }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    EncounterAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EncounterAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EncounterAdapter, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: OrderValueAdapter }, { type: ObsValueAdapter }]; } });
+            }], ctorParameters: function () { return [{ type: OrderValueAdapter }, { type: DiagnosisValueAdapter }, { type: ObsValueAdapter }]; } });
 
     var PersonAttribuAdapter = /** @class */ (function () {
         function PersonAttribuAdapter() {
@@ -15546,9 +15863,9 @@
         };
         return PersonAttribuAdapter;
     }());
-    PersonAttribuAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PersonAttribuAdapter, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    PersonAttribuAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PersonAttribuAdapter });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PersonAttribuAdapter, decorators: [{
+    PersonAttribuAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PersonAttribuAdapter, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    PersonAttribuAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PersonAttribuAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PersonAttribuAdapter, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -15557,10 +15874,10 @@
         }
         return NgxRemoteSelectModule;
     }());
-    NgxRemoteSelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NgxRemoteSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [i1.CommonModule, i13.NgSelectModule, i21.FormsModule], exports: [RemoteSelectComponent] });
-    NgxRemoteSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, providers: [], imports: [[i1.CommonModule, i13.NgSelectModule, i21.FormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, decorators: [{
+    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]] });
+    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],
@@ -15575,10 +15892,10 @@
         }
         return CheckboxModule;
     }());
-    CheckboxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, declarations: [CheckboxControlComponent], imports: [i1.CommonModule, i21.FormsModule], exports: [CheckboxControlComponent] });
-    CheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, imports: [[i1.CommonModule, i21.FormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, decorators: [{
+    CheckboxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    CheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxModule, declarations: [CheckboxControlComponent], imports: [i1.CommonModule, i21.FormsModule], exports: [CheckboxControlComponent] });
+    CheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxModule, imports: [[i1.CommonModule, i21.FormsModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CheckboxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [CheckboxControlComponent],
@@ -15592,10 +15909,10 @@
         }
         return RadioModule;
     }());
-    RadioModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    RadioModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, declarations: [RadioButtonControlComponent], imports: [i1.CommonModule, i21.FormsModule], exports: [RadioButtonControlComponent] });
-    RadioModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, imports: [[i1.CommonModule, i21.FormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, decorators: [{
+    RadioModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadioModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    RadioModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadioModule, declarations: [RadioButtonControlComponent], imports: [i1.CommonModule, i21.FormsModule], exports: [RadioButtonControlComponent] });
+    RadioModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadioModule, imports: [[i1.CommonModule, i21.FormsModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RadioModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [RadioButtonControlComponent],
@@ -15627,10 +15944,10 @@
         };
         return NgxTabSetModule;
     }());
-    NgxTabSetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxTabSetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NgxTabSetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxTabSetModule, declarations: [TabComponent, TabSetComponent, HoverClassDirective], imports: [i1.CommonModule], exports: [TabComponent, TabSetComponent] });
-    NgxTabSetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxTabSetModule, imports: [[i1.CommonModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxTabSetModule, decorators: [{
+    NgxTabSetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxTabSetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    NgxTabSetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxTabSetModule, declarations: [TabComponent, TabSetComponent, HoverClassDirective], imports: [i1.CommonModule], exports: [TabComponent, TabSetComponent] });
+    NgxTabSetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxTabSetModule, imports: [[i1.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NgxTabSetModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [TabComponent, TabSetComponent, HoverClassDirective],
@@ -15645,9 +15962,9 @@
         }
         return OptionDirective;
     }());
-    OptionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptionDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    OptionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptionDirective, selector: "[ofeOption]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptionDirective, decorators: [{
+    OptionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OptionDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OptionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: OptionDirective, selector: "[ofeOption]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OptionDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[ofeOption]'
@@ -15663,9 +15980,9 @@
         }
         return OptGroupDirective;
     }());
-    OptGroupDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptGroupDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    OptGroupDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptGroupDirective, selector: "[ofeOptgroup]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptGroupDirective, decorators: [{
+    OptGroupDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OptGroupDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OptGroupDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: OptGroupDirective, selector: "[ofeOptgroup]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OptGroupDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[ofeOptgroup]'
@@ -15681,10 +15998,10 @@
         }
         return SelectModule;
     }());
-    SelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, declarations: [SelectComponent, OptionDirective, OptGroupDirective], imports: [i1.CommonModule, i21.FormsModule], exports: [SelectComponent, OptionDirective, OptGroupDirective] });
-    SelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, imports: [[i1.CommonModule, i21.FormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, decorators: [{
+    SelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectModule, declarations: [SelectComponent, OptionDirective, OptGroupDirective], imports: [i1.CommonModule, i21.FormsModule], exports: [SelectComponent, OptionDirective, OptGroupDirective] });
+    SelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectModule, imports: [[i1.CommonModule, i21.FormsModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SelectModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [SelectComponent, OptionDirective, OptGroupDirective],
@@ -15776,9 +16093,9 @@
      * Used to build the id of the input item associated with the `Label`.
      */
     LabelComponent.labelCounter = 0;
-    LabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LabelComponent, selector: "ofe-label", inputs: { labelInputID: "labelInputID", labelState: "labelState", skeleton: "skeleton", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextAreaDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0__namespace, template: "\n    <label\n      [for]=\"labelInputID\"\n      [attr.aria-label]=\"ariaLabel\"\n      class=\"cds--label\"\n      [ngClass]=\"{\n        'cds--skeleton': skeleton\n      }\"\n    >\n      <ng-content></ng-content>\n    </label>\n    <div\n      [class]=\"wrapperClass\"\n      [ngClass]=\"{\n        'cds--text-input__field-wrapper--warning': warn\n      }\"\n      [attr.data-invalid]=\"invalid ? true : null\"\n      #wrapper\n    >\n      <svg\n        *ngIf=\"invalid\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        style=\"will-change: transform;\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"cds--text-input__invalid-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n        ></path>\n        <path\n          d=\"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n          data-icon-path=\"inner-path\"\n          opacity=\"0\"\n        ></path>\n      </svg>\n      <ng-content select=\"input,textarea,div\"></ng-content>\n    </div>\n    <div\n      *ngIf=\"!skeleton && helperText && !invalid && !warn\"\n      class=\"cds--form__helper-text\"\n    >\n      <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n        helperText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(helperText)\"\n        [ngTemplateOutlet]=\"helperText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n        invalidText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(invalidText)\"\n        [ngTemplateOutlet]=\"invalidText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(warnText)\"\n        [ngTemplateOutlet]=\"warnText\"\n      ></ng-template>\n    </div>\n  ", isInline: true, directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LabelComponent, decorators: [{
+    LabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LabelComponent, selector: "ofe-label", inputs: { labelInputID: "labelInputID", labelState: "labelState", skeleton: "skeleton", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextAreaDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0__namespace, template: "\n    <label\n      [for]=\"labelInputID\"\n      [attr.aria-label]=\"ariaLabel\"\n      class=\"cds--label\"\n      [ngClass]=\"{\n        'cds--skeleton': skeleton\n      }\"\n    >\n      <ng-content></ng-content>\n    </label>\n    <div\n      [class]=\"wrapperClass\"\n      [ngClass]=\"{\n        'cds--text-input__field-wrapper--warning': warn\n      }\"\n      [attr.data-invalid]=\"invalid ? true : null\"\n      #wrapper\n    >\n      <svg\n        *ngIf=\"invalid\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        style=\"will-change: transform;\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"cds--text-input__invalid-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n        ></path>\n        <path\n          d=\"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n          data-icon-path=\"inner-path\"\n          opacity=\"0\"\n        ></path>\n      </svg>\n      <ng-content select=\"input,textarea,div\"></ng-content>\n    </div>\n    <div\n      *ngIf=\"!skeleton && helperText && !invalid && !warn\"\n      class=\"cds--form__helper-text\"\n    >\n      <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n        helperText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(helperText)\"\n        [ngTemplateOutlet]=\"helperText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n        invalidText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(invalidText)\"\n        [ngTemplateOutlet]=\"invalidText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(warnText)\"\n        [ngTemplateOutlet]=\"warnText\"\n      ></ng-template>\n    </div>\n  ", isInline: true, directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LabelComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'ofe-label',
@@ -15819,10 +16136,10 @@
         }
         return InputModule;
     }());
-    InputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    InputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, declarations: [LabelComponent, TextInputDirective, TextAreaDirective], imports: [i1.CommonModule, i21.FormsModule], exports: [LabelComponent, TextInputDirective, TextAreaDirective] });
-    InputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, imports: [[i1.CommonModule, i21.FormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, decorators: [{
+    InputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: InputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    InputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: InputModule, declarations: [LabelComponent, TextInputDirective, TextAreaDirective], imports: [i1.CommonModule, i21.FormsModule], exports: [LabelComponent, TextInputDirective, TextAreaDirective] });
+    InputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: InputModule, imports: [[i1.CommonModule, i21.FormsModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: InputModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [LabelComponent, TextInputDirective, TextAreaDirective],
@@ -15836,10 +16153,10 @@
         }
         return CustomControlWrapperModule;
     }());
-    CustomControlWrapperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CustomControlWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [i1.CommonModule, i21.FormsModule, i2.LazyElementsModule], exports: [CustomControlWrapperComponent] });
-    CustomControlWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, providers: [], imports: [[i1.CommonModule, i21.FormsModule, i2.LazyElementsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, decorators: [{
+    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]] });
+    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],
@@ -15855,10 +16172,10 @@
         }
         return CustomComponentWrapperModule;
     }());
-    CustomComponentWrapperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentWrapperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CustomComponentWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0__namespace, type: CustomComponentWrapperModule, providers: [], imports: [[i1.CommonModule, i2.LazyElementsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentWrapperModule, decorators: [{
+    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]] });
+    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],
@@ -15874,8 +16191,8 @@
         }
         return FormEntryModule;
     }());
-    FormEntryModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormEntryModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FormEntryModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormEntryModule, declarations: [FormRendererComponent,
+    FormEntryModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormEntryModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FormEntryModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormEntryModule, declarations: [FormRendererComponent,
             AfeNgSelectComponent,
             AppointmentsOverviewComponent,
             HistoricalValueDirective,
@@ -15896,13 +16213,13 @@
             NgxDateTimePickerModule,
             SharedModule,
             CustomControlWrapperModule,
-            CustomComponentWrapperModule, NgxTabSetModule, i4__namespace.TranslateModule], exports: [FormRendererComponent,
+            CustomComponentWrapperModule, NgxTabSetModule, i4.TranslateModule], exports: [FormRendererComponent,
             AfeNgSelectComponent,
             ErrorRendererComponent,
             DateTimePickerModule,
             NgxDateTimePickerModule,
             i4.TranslateModule] });
-    FormEntryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormEntryModule, providers: [
+    FormEntryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormEntryModule, providers: [
             i21.FormBuilder,
             FormControlService,
             FormErrorsService,
@@ -15922,6 +16239,7 @@
             EncounterAdapter,
             PersonAttribuAdapter,
             OrderValueAdapter,
+            DiagnosisValueAdapter,
             DebugModeService
         ], imports: [[
                 i1.CommonModule,
@@ -15941,11 +16259,11 @@
                 CustomControlWrapperModule,
                 CustomComponentWrapperModule,
                 NgxTabSetModule.forRoot(),
-                i4.TranslateModule.forRoot()
+                i4.TranslateModule
             ], DateTimePickerModule,
             NgxDateTimePickerModule,
             i4.TranslateModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormEntryModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormEntryModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
@@ -15967,7 +16285,7 @@
                             CustomControlWrapperModule,
                             CustomComponentWrapperModule,
                             NgxTabSetModule.forRoot(),
-                            i4.TranslateModule.forRoot()
+                            i4.TranslateModule
                         ],
                         declarations: [
                             FormRendererComponent,
@@ -15998,6 +16316,7 @@
                             EncounterAdapter,
                             PersonAttribuAdapter,
                             OrderValueAdapter,
+                            DiagnosisValueAdapter,
                             DebugModeService
                         ],
                         exports: [