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

package/fesm2015/openmrs-ngx-formentry.js

@@ -3,7 +3,7 @@ import { Injectable, Pipe, TemplateRef, Component, Input, ContentChild, Directiv
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i21 from '@angular/forms';
-import { AbstractControl, FormControl, FormGroup, FormArray, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { AbstractControl, FormControl, FormGroup, FormArray, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { Subject, BehaviorSubject, concat, of, Subscription, defer, merge } from 'rxjs';
 import moment from 'moment';
 import * as _ from 'lodash';
@@ -16,20 +16,20 @@ import * as i1$2 from 'ngx-file-uploader-openmrs';
 import { NgxFileUploaderModule } from 'ngx-file-uploader-openmrs';
 import * as i1$1 from '@angular/platform-browser';
 import { distinctUntilChanged, tap, switchMap, catchError, take, debounceTime, filter, startWith } from 'rxjs/operators';
-import * as i1$3 from '@ng-select/ng-select';
+import * as i13 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i2$1 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
-import * as i1$5 from '@angular/cdk/overlay';
+import * as i1$4 from '@angular/cdk/overlay';
 import { NoopScrollStrategy, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, SPACE, ESCAPE } from '@angular/cdk/keycodes';
 import { coerceNumberProperty, coerceBooleanProperty, coerceArray } from '@angular/cdk/coercion';
-import * as i1$4 from '@angular/cdk/a11y';
+import * as i1$3 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i1$6 from '@angular/animations';
+import * as i1$5 from '@angular/animations';
 import { trigger, state, style, transition, group, query, animateChild, animate, keyframes } from '@angular/animations';
 import { WebcamModule } from 'ngx-webcam';
-import * as i1$7 from '@angular/cdk/platform';
+import * as i1$6 from '@angular/cdk/platform';
 import { PlatformModule } from '@angular/cdk/platform';
 
 /*
@@ -48,9 +48,9 @@ class DebugModeService {
         return false;
     }
 }
-DebugModeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DebugModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DebugModeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DebugModeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DebugModeService, decorators: [{
+DebugModeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DebugModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DebugModeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DebugModeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DebugModeService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -149,9 +149,9 @@ class TimeAgoPipe {
         }
     }
 }
-TimeAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeAgoPipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Pipe });
-TimeAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeAgoPipe, name: "timeAgo", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimeAgoPipe, decorators: [{
+TimeAgoPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Pipe });
+TimeAgoPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, name: "timeAgo", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimeAgoPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'timeAgo',
@@ -171,9 +171,9 @@ class FormErrorsService {
 // Observable string sources
 FormErrorsService.control = null;
 FormErrorsService.tab = null;
-FormErrorsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormErrorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FormErrorsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormErrorsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormErrorsService, decorators: [{
+FormErrorsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormErrorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FormErrorsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormErrorsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormErrorsService, decorators: [{
             type: Injectable
         }] });
 
@@ -708,9 +708,9 @@ class ControlRelationsFactory {
         // }
     }
 }
-ControlRelationsFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ControlRelationsFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ControlRelationsFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ControlRelationsFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ControlRelationsFactory, decorators: [{
+ControlRelationsFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ControlRelationsFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ControlRelationsFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ControlRelationsFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ControlRelationsFactory, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -873,9 +873,9 @@ class ExpressionRunner {
         }
     }
 }
-ExpressionRunner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpressionRunner, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ExpressionRunner.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpressionRunner });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExpressionRunner, decorators: [{
+ExpressionRunner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExpressionRunner, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExpressionRunner.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExpressionRunner });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ExpressionRunner, decorators: [{
             type: Injectable
         }] });
 
@@ -1742,6 +1742,10 @@ class JsExpressionHelper {
         return height && weight && refSectionObject ? formattedSDValue : null;
     }
     calcSouthEastAsiaNonLabCVDRisk(sex, smoker, age, sbp, bmi) {
+        const hasValidValues = (typeof sex === "string" && typeof smoker === "boolean" && typeof age === "number" && typeof sbp === "number" && typeof bmi === "number");
+        if (!hasValidValues) {
+            return null;
+        }
         // Bin functions
         const getAgeBin = (age) => Math.floor((Math.min(Math.max(40, age), 74) - 40) / 5);
         const getSbpBin = (sbp) => Math.max(0, Math.floor((Math.min(sbp, 180) - 120) / 20) + 1);
@@ -1821,16 +1825,23 @@ class JsExpressionHelper {
             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*/
-    extractObsValue(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
+     */
+    getObsFromControlOrEncounter(targetControl, rawEncounter, uuid) {
+        var _a;
         const findObs = (obs, uuid) => {
             let result;
-            obs === null || obs === void 0 ? void 0 : obs.some(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(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;
+        const 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;
     }
     get helperFunctions() {
         const helper = this;
@@ -1844,13 +1855,13 @@ class JsExpressionHelper {
             isEmpty: helper.isEmpty,
             arrayContains: helper.arrayContains,
             extractRepeatingGroupValues: helper.extractRepeatingGroupValues,
-            extractObsValue: helper.extractObsValue
+            getObsFromControlOrEncounter: helper.getObsFromControlOrEncounter
         };
     }
 }
-JsExpressionHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: JsExpressionHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-JsExpressionHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: JsExpressionHelper });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: JsExpressionHelper, decorators: [{
+JsExpressionHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsExpressionHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+JsExpressionHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsExpressionHelper });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsExpressionHelper, decorators: [{
             type: Injectable
         }] });
 
@@ -1894,6 +1905,40 @@ Messages.MIN_DATE_MSG = 'Min Date should be {minDate}';
 Messages.MAX_MSG = 'Max value should be {max}';
 Messages.MIN_MSG = 'Min value should be {min}';
 
+class MaxLengthValidator {
+    validate(maxLength) {
+        return (control) => {
+            if (control.hidden) {
+                return null;
+            }
+            if (control.value && control.value.length !== 0) {
+                const v = (control.value).toString().length;
+                return v <= maxLength
+                    ? null
+                    : { maxlength: { requiredLength: maxLength, actualValue: v } };
+            }
+            return null;
+        };
+    }
+}
+
+class MinLengthValidator {
+    validate(minLength) {
+        return (control) => {
+            if (control.hidden) {
+                return null;
+            }
+            if (control.value && control.value.length !== 0) {
+                const v = (control.value).toString().length;
+                return v >= minLength
+                    ? null
+                    : { minlength: { requiredLength: minLength, actualValue: v } };
+            }
+            return null;
+        };
+    }
+}
+
 class ValidationFactory {
     constructor() { }
     getValidators(question, form) {
@@ -1915,9 +1960,15 @@ class ValidationFactory {
                     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;
@@ -1958,11 +2009,11 @@ class ValidationFactory {
     get minDateValidator() {
         return new MinDateValidator().validate;
     }
-    get minLengthValidator() {
-        return Validators.minLength;
+    minLengthValidator(minLength) {
+        return new MinLengthValidator().validate(minLength);
     }
-    get maxLengthValidator() {
-        return Validators.maxLength;
+    maxLengthValidator(maxLength) {
+        return new MaxLengthValidator().validate(maxLength);
     }
     getMinValueValidator(min) {
         return new MinValidator().validate(min);
@@ -1991,7 +2042,7 @@ class ValidationFactory {
                         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));
@@ -2020,9 +2071,9 @@ class ValidationFactory {
         return messages;
     }
 }
-ValidationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ValidationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ValidationFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ValidationFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ValidationFactory, decorators: [{
+ValidationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ValidationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ValidationFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ValidationFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ValidationFactory, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -2078,9 +2129,9 @@ class HidersDisablersFactory {
         return '';
     }
 }
-HidersDisablersFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HidersDisablersFactory, deps: [{ token: ExpressionRunner }, { token: JsExpressionHelper }, { token: DebugModeService }], target: i0.ɵɵFactoryTarget.Injectable });
-HidersDisablersFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HidersDisablersFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HidersDisablersFactory, decorators: [{
+HidersDisablersFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HidersDisablersFactory, deps: [{ token: ExpressionRunner }, { token: JsExpressionHelper }, { token: DebugModeService }], target: i0.ɵɵFactoryTarget.Injectable });
+HidersDisablersFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HidersDisablersFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HidersDisablersFactory, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ExpressionRunner }, { type: JsExpressionHelper }, { type: DebugModeService }]; } });
 
@@ -2103,9 +2154,9 @@ class AlertsFactory {
         return showAlert;
     }
 }
-AlertsFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AlertsFactory, deps: [{ token: ExpressionRunner }, { token: JsExpressionHelper }], target: i0.ɵɵFactoryTarget.Injectable });
-AlertsFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AlertsFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AlertsFactory, decorators: [{
+AlertsFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AlertsFactory, deps: [{ token: ExpressionRunner }, { token: JsExpressionHelper }], target: i0.ɵɵFactoryTarget.Injectable });
+AlertsFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AlertsFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AlertsFactory, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ExpressionRunner }, { type: JsExpressionHelper }]; } });
 
@@ -2210,9 +2261,9 @@ class FormControlService {
         }
     }
 }
-FormControlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormControlService, deps: [{ token: ValidationFactory }, { token: HidersDisablersFactory }, { token: AlertsFactory }], target: i0.ɵɵFactoryTarget.Injectable });
-FormControlService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormControlService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormControlService, decorators: [{
+FormControlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormControlService, deps: [{ token: ValidationFactory }, { token: HidersDisablersFactory }, { token: AlertsFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+FormControlService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormControlService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormControlService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ValidationFactory }, { type: HidersDisablersFactory }, { type: AlertsFactory }]; } });
 
@@ -2238,9 +2289,9 @@ class DataSources {
         delete this._dataSources[key];
     }
 }
-DataSources.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataSources, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DataSources.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataSources });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataSources, decorators: [{
+DataSources.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataSources, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DataSources.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataSources });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataSources, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -2252,9 +2303,9 @@ class TabComponent {
         this.customPaneClass = '';
     }
 }
-TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵ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: TemplateRef, descendants: true }], ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabComponent, decorators: [{
+TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabComponent.ɵcmp = i0.ɵɵ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: TemplateRef, descendants: true }], ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-tab',
@@ -2289,9 +2340,9 @@ class HoverClassDirective {
         this.elementRef.nativeElement.classList.remove(this.hoverClass);
     }
 }
-HoverClassDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-HoverClassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: { hoverClass: "hoverClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverClassDirective, decorators: [{
+HoverClassDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HoverClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+HoverClassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: { hoverClass: "hoverClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HoverClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ofeHoverClass]'
@@ -2353,9 +2404,9 @@ class TabSetComponent {
         }
     }
 }
-TabSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabSetComponent.ɵcmp = i0.ɵɵ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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: ["hoverClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabSetComponent, decorators: [{
+TabSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabSetComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: ["hoverClass"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TabSetComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-tab-set',
@@ -2382,9 +2433,9 @@ class CustomComponentWrapperComponent {
         this.dark = true;
     }
 }
-CustomComponentWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomComponentWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomComponentWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: { componentConfigs: "componentConfigs", dark: "dark" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomComponentWrapperComponent, decorators: [{
+CustomComponentWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomComponentWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CustomComponentWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: { componentConfigs: "componentConfigs", dark: "dark" }, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomComponentWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-custom-component-wrapper',
@@ -2447,15 +2498,15 @@ class CustomControlWrapperComponent {
         this.disabled = disabled;
     }
 }
-CustomControlWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomControlWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: { question: "question" }, providers: [
+CustomControlWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CustomControlWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: { question: "question" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             multi: true,
             useExisting: forwardRef(() => CustomControlWrapperComponent)
         }
     ], ngImport: i0, 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.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomControlWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomControlWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-custom-control-wrapper',
@@ -2595,15 +2646,15 @@ class SelectComponent {
  * Tracks the total number of selects instantiated. Used to generate unique IDs
  */
 SelectComponent.selectCount = 0;
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
             useExisting: SelectComponent,
             multi: true
         }
     ], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-select',
@@ -2741,9 +2792,9 @@ class SecurePipe {
         }
     }
 }
-SecurePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SecurePipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-SecurePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SecurePipe, name: "secure", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SecurePipe, decorators: [{
+SecurePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+SecurePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, name: "secure", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SecurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'secure',
@@ -2832,15 +2883,15 @@ class FileUploadComponent {
         }
     }
 }
-FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileUploadComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "ofe-file-upload", inputs: { dataSource: "dataSource" }, providers: [
+FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileUploadComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FileUploadComponent, selector: "ofe-file-upload", inputs: { dataSource: "dataSource" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => FileUploadComponent),
             multi: true
         }
     ], ngImport: i0, 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$2.NgxFileUploaderComponent, selector: "lib-ngx-file-uploader", inputs: ["singleFile", "formEntry", "srcUrl", "source"], outputs: ["fileChanged", "uploadData", "_onClear"] }], directives: [{ type: i21.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "secure": SecurePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-file-upload',
@@ -2958,15 +3009,15 @@ class RemoteSelectComponent {
         tap(() => (this.loading = false))))));
     }
 }
-RemoteSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoteSelectComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-RemoteSelectComponent.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoteSelectComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+RemoteSelectComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RemoteSelectComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div>\n  <ng-select\n    [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n    [disabled]=\"disabled\"\n    [items]=\"remoteOptions$ | async\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"false\"\n    [hideSelected]=\"true\"\n    [compareWith]=\"compareItems\"\n    [trackByFn]=\"trackByFn\"\n    [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i21.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoteSelectComponent, decorators: [{
+    ], ngImport: i0, 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.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i21.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoteSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-remote-select',
@@ -3157,9 +3208,9 @@ class OwlDateTimeIntl {
         this.hour12PMLabel = 'PM';
     }
 }
-OwlDateTimeIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OwlDateTimeIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
+OwlDateTimeIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OwlDateTimeIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3282,9 +3333,9 @@ class OwlCalendarBodyComponent {
         });
     }
 }
-OwlCalendarBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlCalendarBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-OwlCalendarBodyComponent.ɵcmp = i0.ɵɵ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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlCalendarBodyComponent, decorators: [{
+OwlCalendarBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlCalendarBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+OwlCalendarBodyComponent.ɵcmp = i0.ɵɵ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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlCalendarBodyComponent, decorators: [{
             type: Component,
             args: [{
                     /* eslint-disable-next-line @angular-eslint/component-selector */
@@ -3699,9 +3750,9 @@ class OwlMonthViewComponent {
         this.calendarBodyElm.focusActiveCell();
     }
 }
-OwlMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlMonthViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlMonthViewComponent.ɵcmp = i0.ɵɵ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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlMonthViewComponent, decorators: [{
+OwlMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlMonthViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlMonthViewComponent.ɵcmp = i0.ɵɵ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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlMonthViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-owl-date-time-month-view',
@@ -4065,9 +4116,9 @@ class OwlYearViewComponent {
         this.calendarBodyElm.focusActiveCell();
     }
 }
-OwlYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlYearViewComponent.ɵcmp = i0.ɵɵ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, 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.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlYearViewComponent, decorators: [{
+OwlYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlYearViewComponent.ɵcmp = i0.ɵɵ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, 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.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlYearViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-owl-date-time-year-view',
@@ -4437,9 +4488,9 @@ class OwlMultiYearViewComponent {
         this.calendarBodyElm.focusActiveCell();
     }
 }
-OwlMultiYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlMultiYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlMultiYearViewComponent.ɵcmp = i0.ɵɵ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, 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.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlMultiYearViewComponent, decorators: [{
+OwlMultiYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlMultiYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlMultiYearViewComponent.ɵcmp = i0.ɵɵ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, 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.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlMultiYearViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-owl-date-time-multi-year-view',
@@ -4763,9 +4814,9 @@ class OwlCalendarComponent {
             : null;
     }
 }
-OwlCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlCalendarComponent, deps: [{ token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlCalendarComponent.ɵcmp = i0.ɵɵ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, 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$4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlCalendarComponent, decorators: [{
+OwlCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlCalendarComponent, deps: [{ token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlCalendarComponent.ɵcmp = i0.ɵɵ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, 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$3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-owl-date-time-calendar',
@@ -4853,9 +4904,9 @@ class NumberFixedLenPipe {
         return numString;
     }
 }
-NumberFixedLenPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NumberFixedLenPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberFixedLenPipe, name: "numberFixedLen" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
+NumberFixedLenPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NumberFixedLenPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberFixedLenPipe, name: "numberFixedLen" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'numberFixedLen'
@@ -4909,9 +4960,9 @@ class OwlTimerBoxComponent {
         this.inputChange.emit(value);
     }
 }
-OwlTimerBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OwlTimerBoxComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
+OwlTimerBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OwlTimerBoxComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'owlDateTimeTimerBox',
@@ -5201,9 +5252,9 @@ class OwlTimerComponent {
             : null;
     }
 }
-OwlTimerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlTimerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlTimerComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlTimerComponent, decorators: [{
+OwlTimerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlTimerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlTimerComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlTimerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'owlDateTimeTimer',
@@ -5572,12 +5623,12 @@ class OwlDateTimeContainerComponent {
         }
     }
 }
-OwlDateTimeContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlDateTimeContainerComponent.ɵcmp = i0.ɵɵ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, 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$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+OwlDateTimeContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlDateTimeContainerComponent.ɵcmp = i0.ɵɵ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, 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$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
         owlDateTimePickerAnimations.transformPicker,
         owlDateTimePickerAnimations.fadeInPicker
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeContainerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'owlDateTimeContainer',
@@ -5755,9 +5806,9 @@ class OwlDateTime {
             : null;
     }
 }
-OwlDateTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTime, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-OwlDateTime.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTime });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTime, decorators: [{
+OwlDateTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTime, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+OwlDateTime.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTime });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTime, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DateTimeAdapter, decorators: [{
                     type: Optional
@@ -6102,8 +6153,8 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
         }
     }
 }
-OwlDialogContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$4.FocusTrapFactory }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlDialogContainerComponent.ɵcmp = i0.ɵɵ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: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+OwlDialogContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.FocusTrapFactory }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlDialogContainerComponent.ɵcmp = i0.ɵɵ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: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
         trigger('slideModal', [
             transition('void => enter', [
                 style(zoomFadeInFrom),
@@ -6127,7 +6178,7 @@ OwlDialogContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             transition('enter => exit', [animateChild(), animate(200, style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-owl-dialog-container',
@@ -6157,7 +6208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         ])
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$4.FocusTrapFactory }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$3.FocusTrapFactory }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -6414,11 +6465,11 @@ class OwlDialogService {
         }
     }
 }
-OwlDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogService, deps: [{ token: i1$5.Overlay }, { token: i0.Injector }, { token: i1.Location, optional: true }, { token: OWL_DIALOG_SCROLL_STRATEGY }, { token: OWL_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: OwlDialogService, optional: true, skipSelf: true }, { token: i1$5.OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable });
-OwlDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogService, decorators: [{
+OwlDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogService, deps: [{ token: i1$4.Overlay }, { token: i0.Injector }, { token: i1.Location, optional: true }, { token: OWL_DIALOG_SCROLL_STRATEGY }, { token: OWL_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: OwlDialogService, optional: true, skipSelf: true }, { token: i1$4.OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable });
+OwlDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.Injector }, { type: i1.Location, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.Injector }, { type: i1.Location, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
@@ -6432,7 +6483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i1$5.OverlayContainer }]; } });
+                }] }, { type: i1$4.OverlayContainer }]; } });
 /**
  * Applies default options to the dialog config.
  * @param config Config to be modified.
@@ -6902,9 +6953,9 @@ class OwlDateTimeComponent extends OwlDateTime {
         ]);
     }
 }
-OwlDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeComponent, deps: [{ token: i1$5.Overlay }, { token: i0.ViewContainerRef }, { token: OwlDialogService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlDateTimeComponent.ɵcmp = i0.ɵɵ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, template: "", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeComponent, decorators: [{
+OwlDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeComponent, deps: [{ token: i1$4.Overlay }, { token: i0.ViewContainerRef }, { token: OwlDialogService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlDateTimeComponent.ɵcmp = i0.ɵɵ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, template: "", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-owl-date-time',
@@ -6913,7 +6964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     styleUrls: ['./date-time-picker.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.ViewContainerRef }, { type: OwlDialogService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.ViewContainerRef }, { type: OwlDialogService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
@@ -7491,9 +7542,9 @@ class OwlDateTimeInputDirective {
         return first === second;
     }
 }
-OwlDateTimeInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-OwlDateTimeInputDirective.ɵdir = i0.ɵɵ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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeInputDirective, decorators: [{
+OwlDateTimeInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+OwlDateTimeInputDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[owlDateTime]',
@@ -7604,9 +7655,9 @@ class OwlDateTimeTriggerDirective {
         });
     }
 }
-OwlDateTimeTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-OwlDateTimeTriggerDirective.ɵdir = i0.ɵɵ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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeTriggerDirective, decorators: [{
+OwlDateTimeTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+OwlDateTimeTriggerDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ofeOwlDateTimeTrigger]'
@@ -7661,15 +7712,15 @@ class NgxDatetimeComponent {
         this.onInput({ value: moment(currentDate).add(numberOfWeeks, 'weeks') });
     }
 }
-NgxDatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxDatetimeComponent.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgxDatetimeComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => NgxDatetimeComponent),
             multi: true
         }
     ], ngImport: i0, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i21.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDatetimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxDatetimeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-ngx-date-time-picker',
@@ -7695,6 +7746,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+class NumberInputDirective {
+    constructor(element) {
+        this.element = element;
+    }
+    onScroll(event) {
+        return false;
+    }
+}
+NumberInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+NumberInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: NumberInputDirective, selector: "[ofeNumberScroll]", host: { listeners: { "wheel": "onScroll($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ofeNumberScroll]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onScroll: [{
+                type: HostListener,
+                args: ['wheel', ['$event']]
+            }] } });
+
 /**
  * Used to emit changes performed on number input components.
  */
@@ -7737,6 +7808,14 @@ class NumberInputComponent {
          * 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.
          */
@@ -7818,9 +7897,12 @@ class NumberInputComponent {
         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();
     }
     /**
@@ -7831,9 +7913,12 @@ class NumberInputComponent {
         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();
     }
     /**
@@ -7858,15 +7943,15 @@ class NumberInputComponent {
  * Variable used for creating unique ids for number input components.
  */
 NumberInputComponent.numberCount = 0;
-NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberInputComponent.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NumberInputComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => NumberInputComponent),
             multi: true
         }
-    ], ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberInputComponent, decorators: [{
+    ], ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: NumberInputDirective, selector: "[ofeNumberScroll]" }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-number-input',
@@ -7899,6 +7984,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], max: [{
                 type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
             }], label: [{
                 type: Input
             }], helperText: [{
@@ -7932,16 +8021,14 @@ class RadioButtonControlComponent {
     }
     ngOnInit() {
         this.options = this.options.map((opt) => (Object.assign(Object.assign({}, opt), { checked: false })));
-        if (Boolean(this.selected)) {
-            const maybeOpt = this.options.find((opt) => opt.value === this.selected);
-            if (maybeOpt) {
-                Object.assign(maybeOpt, { checked: true });
-                this.value = this.selected;
-            }
-        }
+        this.updateSelectedOption();
     }
     writeValue(value) {
         this.value = value;
+        const newValueOpt = this.options.find((opt) => opt.value === value);
+        if (newValueOpt) {
+            Object.assign(newValueOpt, { checked: true });
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -7957,7 +8044,6 @@ class RadioButtonControlComponent {
         this._value = value;
     }
     handleClick(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
@@ -7968,7 +8054,6 @@ class RadioButtonControlComponent {
         }
     }
     handleChange(option) {
-        console.log("handleChange", option);
         if (!option.checked) {
             this.value = undefined;
         }
@@ -7977,20 +8062,35 @@ class RadioButtonControlComponent {
         }
         this.onChange(this.value);
     }
+    ngOnChanges(changes) {
+        if (changes.selected) {
+            this.updateSelectedOption();
+        }
+    }
+    updateSelectedOption() {
+        if (this.selected) {
+            const maybeOpt = this.options.find(opt => opt.value === this.selected);
+            if (maybeOpt) {
+                this.options.forEach(opt => opt.checked = opt === maybeOpt);
+                this.value = this.selected;
+            }
+        }
+    }
 }
-RadioButtonControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonControlComponent.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadioButtonControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonControlComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RadioButtonControlComponent),
             multi: true
         }
-    ], ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonControlComponent, decorators: [{
+    ], usesOnChanges: true, ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadioButtonControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-radio-button',
                     templateUrl: './radio.component.html',
+                    styleUrls: ['./radio.component.css'],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -8007,6 +8107,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], allowUnselect: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }] } });
 
 class CheckboxControlComponent {
@@ -8061,20 +8163,19 @@ class CheckboxControlComponent {
                 return o !== option.value;
             });
         }
-        // this._value = [...this.selected];
-        this.selected = [...this._value];
-        this.onChange(this.value);
+        this._value = [...this.selected];
+        this.onChange(this._value);
     }
 }
-CheckboxControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxControlComponent.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: { id: "id", options: "options", selected: "selected" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => CheckboxControlComponent),
             multi: true
         }
     ], ngImport: i0, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxControlComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-checkbox',
@@ -8198,9 +8299,9 @@ class AppointmentsOverviewComponent {
         this.today = '';
     }
 }
-AppointmentsOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppointmentsOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppointmentsOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppointmentsOverviewComponent, decorators: [{
+AppointmentsOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AppointmentsOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AppointmentsOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AppointmentsOverviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-appointments-overview',
@@ -8241,9 +8342,9 @@ class HistoricalFieldHelperService {
         return displayText;
     }
 }
-HistoricalFieldHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-HistoricalFieldHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService, decorators: [{
+HistoricalFieldHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalFieldHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+HistoricalFieldHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalFieldHelperService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalFieldHelperService, decorators: [{
             type: Injectable
         }] });
 
@@ -8272,7 +8373,8 @@ class HistoricalValueDirective {
                 const 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;
@@ -8289,9 +8391,9 @@ class HistoricalValueDirective {
         return a === b;
     }
 }
-HistoricalValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalValueDirective, deps: [{ token: HistoricalFieldHelperService }], target: i0.ɵɵFactoryTarget.Directive });
-HistoricalValueDirective.ɵdir = i0.ɵɵ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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalValueDirective, decorators: [{
+HistoricalValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalValueDirective, deps: [{ token: HistoricalFieldHelperService }], target: i0.ɵɵFactoryTarget.Directive });
+HistoricalValueDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalValueDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -8443,15 +8545,15 @@ class CollapseDirective {
         return (callback) => { var _a; return (_a = this._player) === null || _a === void 0 ? void 0 : _a.onDone(callback); };
     }
 }
-CollapseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$6.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-CollapseDirective.ɵdir = i0.ɵɵ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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollapseDirective, decorators: [{
+CollapseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$5.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
+CollapseDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CollapseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ofeCollapse]',
                     exportAs: 'bs-collapse'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$6.AnimationBuilder }]; }, propDecorators: { collapsed: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.AnimationBuilder }]; }, propDecorators: { collapsed: [{
                 type: Output
             }], collapses: [{
                 type: Output
@@ -8510,9 +8612,9 @@ class TextAreaDirective {
         return this.theme === 'light';
     }
 }
-TextAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TextAreaDirective.ɵdir = i0.ɵɵ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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaDirective, decorators: [{
+TextAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TextAreaDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextAreaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ofeTextAreaInput]'
@@ -8573,9 +8675,9 @@ class TextInputDirective {
         return this.theme === 'light';
     }
 }
-TextInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TextInputDirective.ɵdir = i0.ɵɵ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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextInputDirective, decorators: [{
+TextInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TextInputDirective.ɵdir = i0.ɵɵ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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ofeTextInput]'
@@ -8821,9 +8923,9 @@ class FormRendererComponent {
         return questionGroup.questions.indexOf(node.question);
     }
 }
-FormRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: i4.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-FormRendererComponent.ɵcmp = i0.ɵɵ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, 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 o of node.question.options\" [value]=\"o.value\">\n              {{ o.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            [items]=\"node.question.options\"\n            bindLabel=\"label | translate\"\n            bindValue=\"value\"\n            [multiple]=\"true\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n          </ng-select>\n\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'single-select'\"\n            [items]=\"node.question.options\"\n            bindLabel=\"label | translate\"\n            bindValue=\"value\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n          </ng-select>\n\n          <ofe-number-input\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'number'\"\n            [id]=\"node.question.key + 'id'\"\n            [min]=\"node.question.extras.questionOptions.min\"\n            [max]=\"node.question.extras.questionOptions.max\"\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder | 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\">{{ node.question.label | translate }}</h4>\n      <div>\n        <label class=\"cds--label\" *ngIf=\"node.question.extras.questionOptions.min\" style=\"margin-right: 2px\">min:\n          {{ node.question.extras.questionOptions.min }}</label>\n        <label class=\"cds--label\" *ngIf=\"node.question.extras.questionOptions.max\">max:\n          {{ node.question.extras.questionOptions.max }}</label>\n      </div>\n      <hr 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]=\"{ disabled: node.children.length >= node.question.extras.questionOptions.max }\">\n        Add\n      </button>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"node.question.controlType === 2\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <!--GROUP-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div *ngSwitchCase=\"'group'\">\n      <ofe-form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></ofe-form-renderer>\n    </div>\n    <div\n      *ngSwitchCase=\"'field-set'\"\n      style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n    >\n      <ofe-form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></ofe-form-renderer>\n    </div>\n  </div>\n</div>\n", styles: [".slider{width:auto;margin:30px}.slick-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:bold}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transtion-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:1.5rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box}.question-area{width:100%;max-width:18rem}.in-line{display:inline-block;padding-right:.5rem}\n"], components: [{ type: TabSetComponent, selector: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["tabSelect"] }, { type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: NumberInputComponent, selector: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect"] }, { type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: ["node"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[ofeCollapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { type: i21.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i21.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i21.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i21.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21.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.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "translate": i4.TranslatePipe, "date": i1.DatePipe, "timeAgo": TimeAgoPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormRendererComponent, decorators: [{
+FormRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: i4.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+FormRendererComponent.ɵcmp = i0.ɵɵ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, 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.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.ɵ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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[ofeCollapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { type: i21.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i21.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i21.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i21.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i21.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i21.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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i21.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "translate": i4.TranslatePipe, "date": i1.DatePipe, "timeAgo": TimeAgoPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-form-renderer',
@@ -8854,6 +8956,7 @@ class Form {
         this.questionFactory = questionFactory;
         this.valueProcessingInfo = {};
         this.existingOrders = {};
+        this.existingDiagnoses = [];
         this._showErrors = false;
         this._dataSourcesContainer = new DataSources();
     }
@@ -9067,9 +9170,9 @@ class ErrorRendererComponent {
         return questionGroup.questions.indexOf(node.question);
     }
 }
-ErrorRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ErrorRendererComponent, deps: [{ token: ValidationFactory }, { token: FormErrorsService }], target: i0.ɵɵFactoryTarget.Component });
-ErrorRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ErrorRendererComponent, selector: "ofe-error-renderer", inputs: { form: "form" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ErrorRendererComponent, decorators: [{
+ErrorRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ErrorRendererComponent, deps: [{ token: ValidationFactory }, { token: FormErrorsService }], target: i0.ɵɵFactoryTarget.Component });
+ErrorRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ErrorRendererComponent, selector: "ofe-error-renderer", inputs: { form: "form" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ErrorRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-error-renderer',
@@ -9082,25 +9185,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class NumberInputModule {
 }
-NumberInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NumberInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberInputModule, declarations: [NumberInputComponent], imports: [CommonModule, FormsModule], exports: [NumberInputComponent] });
-NumberInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberInputModule, providers: [], imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberInputModule, decorators: [{
+NumberInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NumberInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberInputModule, declarations: [NumberInputComponent, NumberInputDirective], imports: [CommonModule, FormsModule], exports: [NumberInputComponent] });
+NumberInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberInputModule, providers: [], imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NumberInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule],
                     exports: [NumberInputComponent],
-                    declarations: [NumberInputComponent],
+                    declarations: [NumberInputComponent, NumberInputDirective],
                     providers: []
                 }]
         }] });
 
 class SharedModule {
 }
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, declarations: [SecurePipe], imports: [CommonModule], exports: [SecurePipe, TranslateModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, providers: [DataSources], imports: [[CommonModule], TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, decorators: [{
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SharedModule, declarations: [SecurePipe], imports: [CommonModule], exports: [SecurePipe, TranslateModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SharedModule, providers: [DataSources], imports: [[CommonModule], TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SecurePipe],
@@ -9112,20 +9215,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class RemoteFileUploadModule {
 }
-RemoteFileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoteFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RemoteFileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoteFileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule,
+RemoteFileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoteFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RemoteFileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoteFileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule,
         FormsModule,
         SharedModule,
         WebcamModule,
         NgxFileUploaderModule], exports: [FileUploadComponent] });
-RemoteFileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoteFileUploadModule, providers: [], imports: [[
+RemoteFileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoteFileUploadModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
             SharedModule,
             WebcamModule,
             NgxFileUploaderModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoteFileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoteFileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -9155,9 +9258,9 @@ class ModalComponent {
         this.overlayClick.emit(false);
     }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModalComponent, selector: "ofe-picker-modal", outputs: { overlayClick: "overlayClick" }, ngImport: i0, 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.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModalComponent, decorators: [{
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ModalComponent, selector: "ofe-picker-modal", outputs: { overlayClick: "overlayClick" }, ngImport: i0, 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.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-picker-modal',
@@ -9178,9 +9281,9 @@ class MomentPipe {
         return format ? moment.format(format) : moment.format('MMM DD, YYYY');
     }
 }
-MomentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MomentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-MomentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MomentPipe, name: "moment" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MomentPipe, decorators: [{
+MomentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MomentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MomentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MomentPipe, name: "moment" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MomentPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'moment' }]
         }] });
@@ -9347,9 +9450,9 @@ class DatePickerComponent {
         }
     }
 }
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "moment": MomentPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "moment": MomentPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-date-picker',
@@ -9464,9 +9567,9 @@ class TimePickerComponent {
         }
     }
 }
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "moment": MomentPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, decorators: [{
+TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimePickerComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "moment": MomentPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-time-picker',
@@ -9565,15 +9668,15 @@ class DateTimePickerComponent {
         }
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵ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: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DateTimePickerComponent),
             multi: true
         }
     ], ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-date-time-picker',
@@ -9606,8 +9709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DateTimePickerModule {
 }
-DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerModule, declarations: [DatePickerComponent,
+DateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateTimePickerModule, declarations: [DatePickerComponent,
         TimePickerComponent,
         ModalComponent,
         MomentPipe,
@@ -9616,8 +9719,8 @@ DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         ModalComponent,
         MomentPipe,
         DateTimePickerComponent] });
-DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerModule, providers: [], imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerModule, decorators: [{
+DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateTimePickerModule, providers: [], imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule],
@@ -9846,9 +9949,9 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
         this.monthSelected.emit(normalizedMonth);
     }
 }
-OwlDateTimeInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlDateTimeInlineComponent.ɵcmp = i0.ɵɵ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, 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.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
+OwlDateTimeInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlDateTimeInlineComponent.ɵcmp = i0.ɵɵ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, 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.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-owl-date-time-inline',
@@ -9899,10 +10002,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class OwlDialogModule {
 }
-OwlDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-OwlDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogModule, declarations: [OwlDialogContainerComponent], imports: [CommonModule, A11yModule, OverlayModule, PortalModule] });
-OwlDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogModule, providers: [OWL_DIALOG_SCROLL_STRATEGY_PROVIDER, OwlDialogService], imports: [[CommonModule, A11yModule, OverlayModule, PortalModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogModule, decorators: [{
+OwlDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OwlDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogModule, declarations: [OwlDialogContainerComponent], imports: [CommonModule, A11yModule, OverlayModule, PortalModule] });
+OwlDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogModule, providers: [OWL_DIALOG_SCROLL_STRATEGY_PROVIDER, OwlDialogService], imports: [[CommonModule, A11yModule, OverlayModule, PortalModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, A11yModule, OverlayModule, PortalModule],
@@ -9918,8 +10021,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class OwlDateTimeModule {
 }
-OwlDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-OwlDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeModule, declarations: [OwlDateTimeTriggerDirective,
+OwlDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OwlDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeModule, declarations: [OwlDateTimeTriggerDirective,
         OwlDateTimeInputDirective,
         OwlDateTimeComponent,
         OwlDateTimeContainerComponent,
@@ -9940,8 +10043,8 @@ OwlDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         OwlMultiYearViewComponent,
         OwlYearViewComponent,
         OwlMonthViewComponent] });
-OwlDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeModule, providers: [OwlDateTimeIntl, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER], imports: [[CommonModule, OverlayModule, OwlDialogModule, A11yModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeModule, decorators: [{
+OwlDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeModule, providers: [OwlDateTimeIntl, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER], imports: [[CommonModule, OverlayModule, OwlDialogModule, A11yModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule],
@@ -10307,16 +10410,16 @@ class NativeDateTimeAdapter extends DateTimeAdapter {
         return dtf.format(d);
     }
 }
-NativeDateTimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NativeDateTimeAdapter, deps: [{ token: OWL_DATE_TIME_LOCALE, optional: true }, { token: i1$7.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
-NativeDateTimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NativeDateTimeAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NativeDateTimeAdapter, decorators: [{
+NativeDateTimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NativeDateTimeAdapter, deps: [{ token: OWL_DATE_TIME_LOCALE, optional: true }, { token: i1$6.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
+NativeDateTimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NativeDateTimeAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NativeDateTimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [OWL_DATE_TIME_LOCALE]
-                }] }, { type: i1$7.Platform }]; } });
+                }] }, { type: i1$6.Platform }]; } });
 
 const OWL_NATIVE_DATE_TIME_FORMATS = {
     parseInput: null,
@@ -10339,10 +10442,10 @@ const OWL_NATIVE_DATE_TIME_FORMATS = {
  */
 class NativeDateTimeModule {
 }
-NativeDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NativeDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NativeDateTimeModule, imports: [PlatformModule] });
-NativeDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NativeDateTimeModule, providers: [{ provide: DateTimeAdapter, useClass: NativeDateTimeAdapter }], imports: [[PlatformModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NativeDateTimeModule, decorators: [{
+NativeDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NativeDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NativeDateTimeModule, imports: [PlatformModule] });
+NativeDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NativeDateTimeModule, providers: [{ provide: DateTimeAdapter, useClass: NativeDateTimeAdapter }], imports: [[PlatformModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NativeDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [PlatformModule],
@@ -10351,12 +10454,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 class OwlNativeDateTimeModule {
 }
-OwlNativeDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-OwlNativeDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlNativeDateTimeModule, imports: [NativeDateTimeModule] });
-OwlNativeDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlNativeDateTimeModule, providers: [
+OwlNativeDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OwlNativeDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlNativeDateTimeModule, imports: [NativeDateTimeModule] });
+OwlNativeDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlNativeDateTimeModule, providers: [
         { provide: OWL_DATE_TIME_FORMATS, useValue: OWL_NATIVE_DATE_TIME_FORMATS }
     ], imports: [[NativeDateTimeModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlNativeDateTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OwlNativeDateTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [NativeDateTimeModule],
@@ -10371,18 +10474,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class NgxDateTimePickerModule {
 }
-NgxDateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxDateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDateTimePickerModule, declarations: [NgxDatetimeComponent], imports: [CommonModule,
+NgxDateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxDateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxDateTimePickerModule, declarations: [NgxDatetimeComponent], imports: [CommonModule,
         FormsModule,
         OwlDateTimeModule,
         OwlNativeDateTimeModule], exports: [NgxDatetimeComponent] });
-NgxDateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDateTimePickerModule, providers: [], imports: [[
+NgxDateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxDateTimePickerModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDateTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxDateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -10458,8 +10561,8 @@ class AfeNgSelectComponent {
         this.subject.next(new Array());
     }
 }
-AfeNgSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AfeNgSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfeNgSelectComponent.ɵcmp = i0.ɵɵ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.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AfeNgSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AfeNgSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AfeNgSelectComponent, selector: "ofe-ng-select", inputs: { dataSource: "dataSource", multiple: "multiple", extras: "extras" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => AfeNgSelectComponent),
@@ -10471,8 +10574,8 @@ AfeNgSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
     [options]="question_options"
     [multiple]="multiple"
   >
-  </ng-select> `, isInline: true, components: [{ type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AfeNgSelectComponent, decorators: [{
+  </ng-select> `, isInline: true, components: [{ type: i13.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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AfeNgSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-ng-select',
@@ -10738,9 +10841,9 @@ class FormSchemaCompiler {
         return keyValReferencedForms;
     }
 }
-FormSchemaCompiler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormSchemaCompiler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FormSchemaCompiler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormSchemaCompiler });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormSchemaCompiler, decorators: [{
+FormSchemaCompiler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormSchemaCompiler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FormSchemaCompiler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormSchemaCompiler });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormSchemaCompiler, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -10882,7 +10985,7 @@ class MaxValidationModel extends ValidationModel {
     constructor(validations) {
         super(validations);
         const max = validations.max;
-        this.max = +max;
+        this.max = Number(max);
     }
 }
 
@@ -10890,7 +10993,7 @@ class MinValidationModel extends ValidationModel {
     constructor(validations) {
         super(validations);
         const min = validations.min;
-        this.min = +min;
+        this.min = Number(min);
     }
 }
 
@@ -11158,9 +11261,9 @@ class HistoricalEncounterDataService {
         return existing;
     }
 }
-HistoricalEncounterDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalEncounterDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-HistoricalEncounterDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalEncounterDataService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalEncounterDataService, decorators: [{
+HistoricalEncounterDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalEncounterDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+HistoricalEncounterDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalEncounterDataService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalEncounterDataService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -11194,12 +11297,38 @@ class HistoricalHelperService {
         return this.evaluate(expr, dataSources, additionalScope);
     }
 }
-HistoricalHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-HistoricalHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalHelperService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalHelperService, decorators: [{
+HistoricalHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+HistoricalHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalHelperService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HistoricalHelperService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
+class DiagnosisQuestion extends QuestionBase {
+    constructor(options) {
+        super(options);
+        this.renderingType = 'select';
+        this.options = options.options;
+        this.controlType = AfeControlType.AfeFormControl;
+        this.dataSource = options.dataSource || '';
+    }
+}
+
+class MaxLengthValidationModel extends ValidationModel {
+    constructor(validations) {
+        super(validations);
+        const maxlength = validations.maxlength;
+        this.maxlength = +maxlength;
+    }
+}
+
+class MinLengthValidationModel extends ValidationModel {
+    constructor(validations) {
+        super(validations);
+        const minlength = validations.minlength;
+        this.minlength = +minlength;
+    }
+}
+
 class QuestionFactory {
     constructor() {
         this.dataSources = {};
@@ -11220,14 +11349,11 @@ class QuestionFactory {
         question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.componentConfigs = schemaQuestion.componentConfigs || [];
-        question.options = schemaQuestion.questionOptions.answers.map(function (obj) {
-            return {
-                label: obj.label,
-                value: obj.concept
-            };
-        });
-        const options = question.options;
-        options.splice(0, 0, {
+        question.options = schemaQuestion.questionOptions.answers.map((obj) => ({
+            label: obj.label,
+            value: obj.concept
+        }));
+        question.options.splice(0, 0, {
             label: '',
             value: ''
         });
@@ -11395,8 +11521,7 @@ class QuestionFactory {
         question.key = schemaQuestion.id;
         question.prefix = schemaQuestion.prefix;
         question.extras = schemaQuestion;
-        question.allowUnselect =
-            schemaQuestion.questionOptions.allowUnselect;
+        question.allowUnselect = schemaQuestion.questionOptions.allowUnselect;
         question.orientation = schemaQuestion.questionOptions.orientation;
         question.options = schemaQuestion.questionOptions.answers.map((obj) => {
             return {
@@ -11430,12 +11555,10 @@ class QuestionFactory {
         question.label = schemaQuestion.label;
         question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
-        question.options = schemaQuestion.questionOptions.answers.map(function (obj) {
-            return {
-                label: obj.label,
-                value: obj.concept
-            };
-        });
+        question.options = schemaQuestion.questionOptions.answers.map((obj) => ({
+            label: obj.label,
+            value: obj.concept
+        }));
         question.validators = this.addValidators(schemaQuestion);
         question.dataSource = new DummyDataSource();
         question.extras = schemaQuestion;
@@ -11626,6 +11749,10 @@ class QuestionFactory {
             orders.push(testOrder);
             question.questions = orders;
         }
+        else if (schemaQuestion.type === 'diagnosis') {
+            const diagnosisQuestion = this.toDiagnosisQuestion(schemaQuestion);
+            question.questions = [diagnosisQuestion];
+        }
         const mappings = {
             label: 'label',
             required: 'required',
@@ -11828,6 +11955,33 @@ class QuestionFactory {
         this.copyProperties(mappings, schemaQuestion, question);
         return question;
     }
+    toDiagnosisQuestion(schemaQuestion) {
+        const 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';
+        const 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;
+    }
     getSchemaQuestions(schema) {
         const listQuestions = new Array();
         this.getQuestions(schema, listQuestions);
@@ -11918,8 +12072,6 @@ class QuestionFactory {
                 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':
@@ -12015,6 +12167,18 @@ class QuestionFactory {
                         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;
@@ -12117,9 +12281,9 @@ class QuestionFactory {
         return '_' + s;
     }
 }
-QuestionFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QuestionFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-QuestionFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QuestionFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QuestionFactory, decorators: [{
+QuestionFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+QuestionFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: QuestionFactory, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -12244,9 +12408,9 @@ class FormFactory {
         }
     }
 }
-FormFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFactory, deps: [{ token: FormControlService }, { token: QuestionFactory }, { token: ControlRelationsFactory }], target: i0.ɵɵFactoryTarget.Injectable });
-FormFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFactory });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFactory, decorators: [{
+FormFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormFactory, deps: [{ token: FormControlService }, { token: QuestionFactory }, { token: ControlRelationsFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+FormFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormFactory, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: FormControlService }, { type: QuestionFactory }, { type: ControlRelationsFactory }]; } });
 
@@ -12751,9 +12915,9 @@ class ObsAdapterHelper {
         }
     }
 }
-ObsAdapterHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ObsAdapterHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ObsAdapterHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ObsAdapterHelper });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ObsAdapterHelper, decorators: [{
+ObsAdapterHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ObsAdapterHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ObsAdapterHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ObsAdapterHelper });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ObsAdapterHelper, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -13286,9 +13450,9 @@ class ObsValueAdapter {
         return obsPayload;
     }
 }
-ObsValueAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ObsValueAdapter, deps: [{ token: ObsAdapterHelper }], target: i0.ɵɵFactoryTarget.Injectable });
-ObsValueAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ObsValueAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ObsValueAdapter, decorators: [{
+ObsValueAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ObsValueAdapter, deps: [{ token: ObsAdapterHelper }], target: i0.ɵɵFactoryTarget.Injectable });
+ObsValueAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ObsValueAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ObsValueAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ObsAdapterHelper }]; } });
 
@@ -13469,15 +13633,147 @@ class OrderValueAdapter {
         }
     }
 }
-OrderValueAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderValueAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OrderValueAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderValueAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OrderValueAdapter, decorators: [{
+OrderValueAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OrderValueAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OrderValueAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OrderValueAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OrderValueAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+class DiagnosisValueAdapter {
+    constructor() {
+        this.formDiagnosisNodes = [];
+    }
+    generateFormPayload(form) {
+        this.formDiagnosisNodes = [];
+        this._findDiagnosisQuestionNodes(form.rootNode);
+        return this._createDiagnosesPayload(this.formDiagnosisNodes, form.existingDiagnoses);
+    }
+    populateForm(form, diagnoses) {
+        form.existingDiagnoses = diagnoses === null || diagnoses === void 0 ? void 0 : diagnoses.filter(d => {
+            return !d.voided;
+        });
+        this.formDiagnosisNodes = [];
+        this._findDiagnosisQuestionNodes(form.rootNode);
+        this._setDiagnosesValues(this.formDiagnosisNodes, form.existingDiagnoses, 1);
+        this._setDiagnosesValues(this.formDiagnosisNodes, form.existingDiagnoses, 2);
+    }
+    _createDiagnosesPayload(diagnosisNodes, existingDiagnoses) {
+        const payload = [];
+        let deletedDiagnoses = [];
+        diagnosisNodes === null || diagnosisNodes === void 0 ? void 0 : diagnosisNodes.forEach(node => {
+            node.control.value.filter(v => v[node.question.key]).forEach(value => {
+                // Create Payload
+                const 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);
+    }
+    _createPayloadDiagnosis(codedUuid, questionExtras) {
+        const diagnosis = {
+            diagnosis: {
+                coded: codedUuid,
+            },
+            certainty: 'CONFIRMED',
+            rank: questionExtras.questionOptions.rank,
+            voided: false
+        };
+        return diagnosis;
+    }
+    _getDeletedDiagnoses(payloadDiagnoses, existingDiagnoses) {
+        return existingDiagnoses === null || existingDiagnoses === void 0 ? void 0 : existingDiagnoses.filter(e => {
+            return !payloadDiagnoses.find(p => {
+                let isSame = !e.voided && p.diagnosis.coded === e.diagnosis.coded.uuid;
+                return isSame;
+            });
+        }).map(d => {
+            let diagnosisPayload = this._convert(d);
+            diagnosisPayload.voided = true;
+            return diagnosisPayload;
+        });
+    }
+    _updatedOldDiagnoses(payloadDiagnoses, existingDiagnoses) {
+        payloadDiagnoses.forEach(p => {
+            existingDiagnoses === null || existingDiagnoses === void 0 ? void 0 : existingDiagnoses.forEach(e => {
+                let isSame = !e.voided && p.diagnosis.coded === e.diagnosis.coded.uuid;
+                p.uuid = isSame ? e.uuid : null;
+            });
+        });
+    }
+    _setDiagnosesValues(formDiagnosisNodes, existingDiagnoses, rank) {
+        formDiagnosisNodes === null || formDiagnosisNodes === void 0 ? void 0 : formDiagnosisNodes.filter(node => node.question.extras.questionOptions.rank == rank).forEach(node => {
+            node['initialValue'] = existingDiagnoses;
+            existingDiagnoses.filter(d => d.rank == rank).forEach((diagnosis, index) => {
+                node.createChildNode();
+                const value = {};
+                value[node.question.key] = diagnosis.diagnosis.coded.uuid;
+                const childNode = node.children[index];
+                childNode.control.setValue(value);
+                childNode['initialValue'] = value;
+            });
+        });
+    }
+    _findDiagnosisQuestionNodes(formNode) {
+        if (formNode.children) {
+            if (formNode.children instanceof Object) {
+                for (const 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 (const node in formNode.children) {
+                                        const question = formNode.children[node].question;
+                                        if (question.extras && question.extras.type === 'diagnosis') {
+                                            this.formDiagnosisNodes.push(formNode.children[node]);
+                                        }
+                                    }
+                                }
+                                break;
+                            default:
+                                break;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    _convert(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,
+        };
+    }
+}
+DiagnosisValueAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagnosisValueAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DiagnosisValueAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagnosisValueAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DiagnosisValueAdapter, decorators: [{
             type: Injectable
         }] });
 
 class EncounterAdapter {
-    constructor(ordersAdapter, obsAdapter) {
+    constructor(ordersAdapter, diagnosesAdapter, obsAdapter) {
         this.ordersAdapter = ordersAdapter;
+        this.diagnosesAdapter = diagnosesAdapter;
         this.obsAdapter = obsAdapter;
     }
     populateForm(form, payload) {
@@ -13485,6 +13781,9 @@ class EncounterAdapter {
         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);
         }
@@ -13532,6 +13831,7 @@ class EncounterAdapter {
         this.setNonFilledPayloadMembers(form, payload);
         payload['obs'] = this.obsAdapter.generateFormPayload(form) || [];
         payload['orders'] = this.ordersAdapter.generateFormPayload(form) || [];
+        payload['diagnoses'] = this.diagnosesAdapter.generateFormPayload(form) || [];
         return payload;
     }
     generateNodePayload(rootNode) {
@@ -13632,11 +13932,11 @@ class EncounterAdapter {
         return false;
     }
 }
-EncounterAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EncounterAdapter, deps: [{ token: OrderValueAdapter }, { token: ObsValueAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
-EncounterAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EncounterAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EncounterAdapter, decorators: [{
+EncounterAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EncounterAdapter, deps: [{ token: OrderValueAdapter }, { token: DiagnosisValueAdapter }, { token: ObsValueAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
+EncounterAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EncounterAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EncounterAdapter, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: OrderValueAdapter }, { type: ObsValueAdapter }]; } });
+        }], ctorParameters: function () { return [{ type: OrderValueAdapter }, { type: DiagnosisValueAdapter }, { type: ObsValueAdapter }]; } });
 
 class PersonAttribuAdapter {
     constructor() { }
@@ -13717,18 +14017,18 @@ class PersonAttribuAdapter {
         }
     }
 }
-PersonAttribuAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersonAttribuAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PersonAttribuAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersonAttribuAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersonAttribuAdapter, decorators: [{
+PersonAttribuAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PersonAttribuAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PersonAttribuAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PersonAttribuAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PersonAttribuAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
 class NgxRemoteSelectModule {
 }
-NgxRemoteSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxRemoteSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxRemoteSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [CommonModule, NgSelectModule, FormsModule], exports: [RemoteSelectComponent] });
-NgxRemoteSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxRemoteSelectModule, providers: [], imports: [[CommonModule, NgSelectModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxRemoteSelectModule, decorators: [{
+NgxRemoteSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxRemoteSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxRemoteSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [CommonModule, NgSelectModule, FormsModule], exports: [RemoteSelectComponent] });
+NgxRemoteSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxRemoteSelectModule, providers: [], imports: [[CommonModule, NgSelectModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxRemoteSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, NgSelectModule, FormsModule],
@@ -13740,10 +14040,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class CheckboxModule {
 }
-CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxModule, declarations: [CheckboxControlComponent], imports: [CommonModule, FormsModule], exports: [CheckboxControlComponent] });
-CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxModule, imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxModule, decorators: [{
+CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxModule, declarations: [CheckboxControlComponent], imports: [CommonModule, FormsModule], exports: [CheckboxControlComponent] });
+CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxModule, imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CheckboxControlComponent],
@@ -13754,10 +14054,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class RadioModule {
 }
-RadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioModule, declarations: [RadioButtonControlComponent], imports: [CommonModule, FormsModule], exports: [RadioButtonControlComponent] });
-RadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioModule, imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioModule, decorators: [{
+RadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadioModule, declarations: [RadioButtonControlComponent], imports: [CommonModule, FormsModule], exports: [RadioButtonControlComponent] });
+RadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadioModule, imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RadioButtonControlComponent],
@@ -13786,10 +14086,10 @@ class NgxTabSetModule {
         };
     }
 }
-NgxTabSetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxTabSetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxTabSetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxTabSetModule, declarations: [TabComponent, TabSetComponent, HoverClassDirective], imports: [CommonModule], exports: [TabComponent, TabSetComponent] });
-NgxTabSetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxTabSetModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxTabSetModule, decorators: [{
+NgxTabSetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxTabSetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxTabSetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxTabSetModule, declarations: [TabComponent, TabSetComponent, HoverClassDirective], imports: [CommonModule], exports: [TabComponent, TabSetComponent] });
+NgxTabSetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxTabSetModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NgxTabSetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TabComponent, TabSetComponent, HoverClassDirective],
@@ -13803,9 +14103,9 @@ class OptionDirective {
         this.inputClass = 'cds--select-option';
     }
 }
-OptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-OptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptionDirective, selector: "[ofeOption]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionDirective, decorators: [{
+OptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+OptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: OptionDirective, selector: "[ofeOption]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ofeOption]'
@@ -13820,9 +14120,9 @@ class OptGroupDirective {
         this.inputClass = 'cds--select-optgroup';
     }
 }
-OptGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-OptGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptGroupDirective, selector: "[ofeOptgroup]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptGroupDirective, decorators: [{
+OptGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OptGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+OptGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: OptGroupDirective, selector: "[ofeOptgroup]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OptGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ofeOptgroup]'
@@ -13835,10 +14135,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 // modules
 class SelectModule {
 }
-SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, declarations: [SelectComponent, OptionDirective, OptGroupDirective], imports: [CommonModule, FormsModule], exports: [SelectComponent, OptionDirective, OptGroupDirective] });
-SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, decorators: [{
+SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectModule, declarations: [SelectComponent, OptionDirective, OptGroupDirective], imports: [CommonModule, FormsModule], exports: [SelectComponent, OptionDirective, OptGroupDirective] });
+SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectModule, imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SelectComponent, OptionDirective, OptGroupDirective],
@@ -13929,8 +14229,8 @@ class LabelComponent {
  * Used to build the id of the input item associated with the `Label`.
  */
 LabelComponent.labelCounter = 0;
-LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LabelComponent.ɵcmp = i0.ɵɵ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, template: `
+LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelComponent.ɵcmp = i0.ɵɵ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, template: `
     <label
       [for]="labelInputID"
       [attr.aria-label]="ariaLabel"
@@ -14001,7 +14301,7 @@ LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
       ></ng-template>
     </div>
   `, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ofe-label',
@@ -14109,10 +14409,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 // modules
 class InputModule {
 }
-InputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, declarations: [LabelComponent, TextInputDirective, TextAreaDirective], imports: [CommonModule, FormsModule], exports: [LabelComponent, TextInputDirective, TextAreaDirective] });
-InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, imports: [[CommonModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, decorators: [{
+InputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputModule, declarations: [LabelComponent, TextInputDirective, TextAreaDirective], imports: [CommonModule, FormsModule], exports: [LabelComponent, TextInputDirective, TextAreaDirective] });
+InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputModule, imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [LabelComponent, TextInputDirective, TextAreaDirective],
@@ -14123,10 +14423,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class CustomControlWrapperModule {
 }
-CustomControlWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomControlWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CustomControlWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [CommonModule, FormsModule, LazyElementsModule], exports: [CustomControlWrapperComponent] });
-CustomControlWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomControlWrapperModule, providers: [], imports: [[CommonModule, FormsModule, LazyElementsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomControlWrapperModule, decorators: [{
+CustomControlWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomControlWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CustomControlWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [CommonModule, FormsModule, LazyElementsModule], exports: [CustomControlWrapperComponent] });
+CustomControlWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomControlWrapperModule, providers: [], imports: [[CommonModule, FormsModule, LazyElementsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomControlWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -14139,10 +14439,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class CustomComponentWrapperModule {
 }
-CustomComponentWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomComponentWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CustomComponentWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomComponentWrapperModule, declarations: [CustomComponentWrapperComponent], imports: [CommonModule, LazyElementsModule], exports: [CustomComponentWrapperComponent] });
-CustomComponentWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomComponentWrapperModule, providers: [], imports: [[CommonModule, LazyElementsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomComponentWrapperModule, decorators: [{
+CustomComponentWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomComponentWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CustomComponentWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomComponentWrapperModule, declarations: [CustomComponentWrapperComponent], imports: [CommonModule, LazyElementsModule], exports: [CustomComponentWrapperComponent] });
+CustomComponentWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomComponentWrapperModule, providers: [], imports: [[CommonModule, LazyElementsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomComponentWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -14155,8 +14455,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 class FormEntryModule {
 }
-FormEntryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormEntryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormEntryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormEntryModule, declarations: [FormRendererComponent,
+FormEntryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormEntryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormEntryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormEntryModule, declarations: [FormRendererComponent,
         AfeNgSelectComponent,
         AppointmentsOverviewComponent,
         HistoricalValueDirective,
@@ -14177,13 +14477,13 @@ FormEntryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         NgxDateTimePickerModule,
         SharedModule,
         CustomControlWrapperModule,
-        CustomComponentWrapperModule, NgxTabSetModule, i4.TranslateModule], exports: [FormRendererComponent,
+        CustomComponentWrapperModule, NgxTabSetModule, TranslateModule], exports: [FormRendererComponent,
         AfeNgSelectComponent,
         ErrorRendererComponent,
         DateTimePickerModule,
         NgxDateTimePickerModule,
         TranslateModule] });
-FormEntryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormEntryModule, providers: [
+FormEntryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormEntryModule, providers: [
         FormBuilder,
         FormControlService,
         FormErrorsService,
@@ -14203,6 +14503,7 @@ FormEntryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         EncounterAdapter,
         PersonAttribuAdapter,
         OrderValueAdapter,
+        DiagnosisValueAdapter,
         DebugModeService
     ], imports: [[
             CommonModule,
@@ -14222,11 +14523,11 @@ FormEntryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             CustomControlWrapperModule,
             CustomComponentWrapperModule,
             NgxTabSetModule.forRoot(),
-            TranslateModule.forRoot()
+            TranslateModule
         ], DateTimePickerModule,
         NgxDateTimePickerModule,
         TranslateModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormEntryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FormEntryModule, decorators: [{
             type: NgModule,
             args: [{
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -14248,7 +14549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         CustomControlWrapperModule,
                         CustomComponentWrapperModule,
                         NgxTabSetModule.forRoot(),
-                        TranslateModule.forRoot()
+                        TranslateModule
                     ],
                     declarations: [
                         FormRendererComponent,
@@ -14279,6 +14580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         EncounterAdapter,
                         PersonAttribuAdapter,
                         OrderValueAdapter,
+                        DiagnosisValueAdapter,
                         DebugModeService
                     ],
                     exports: [