@openmrs/ngx-formentry 3.0.1-pre.19 → 3.0.1-pre.38

package/fesm2015/openmrs-ngx-formentry.js

@@ -1,11 +1,9 @@
-import * as i0 from '@angular/core';
-import { Injectable, Pipe, ChangeDetectorRef, NgZone, Component, Inject, Input, EventEmitter, Directive, Output, HostListener, ElementRef, Renderer2, HostBinding, TemplateRef, forwardRef, NgModule, WrappedValue, ChangeDetectionStrategy, InjectionToken, inject, LOCALE_ID, Optional, ViewChild, Injector, SkipSelf, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA, ContentChild, ContentChildren } from '@angular/core';
+import { Injectable, Pipe, ChangeDetectorRef, NgZone, Component, Inject, Input, EventEmitter, Directive, Output, HostListener, ElementRef, Renderer2, HostBinding, TemplateRef, forwardRef, NgModule, WrappedValue, ChangeDetectionStrategy, ɵɵdefineInjectable, InjectionToken, inject, LOCALE_ID, Optional, ViewChild, Injector, SkipSelf, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA, ContentChild, ContentChildren } from '@angular/core';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import { AbstractControl, FormControl, FormGroup, FormArray, Validators, NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { Subject, BehaviorSubject, Subscription, defer, merge, of, concat } from 'rxjs';
 import moment from 'moment';
-import * as _ from 'lodash';
-import ___default from 'lodash';
+import _, { first, forEach, last, findIndex, filter, isArray, each, isUndefined, isEmpty, includes, find, intersection, isEqual } from 'lodash';
 import { style, animate, AnimationBuilder, trigger, state, transition, group, query, animateChild, keyframes } from '@angular/animations';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -16,7 +14,7 @@ import { NoopScrollStrategy, Overlay, OverlayConfig, OverlayContainer, OverlayMo
 import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
 import { SPACE, LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW, ESCAPE, ENTER, PAGE_DOWN, PAGE_UP, END, HOME } from '@angular/cdk/keycodes';
 import { coerceBooleanProperty, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';
-import { take, filter, startWith, debounceTime, distinctUntilChanged, tap, switchMap, catchError } from 'rxjs/operators';
+import { take, filter as filter$1, startWith, debounceTime, distinctUntilChanged, tap, switchMap, catchError } from 'rxjs/operators';
 import { Platform, PlatformModule } from '@angular/cdk/platform';
 import { LazyElementsModule } from '@angular-extensions/elements';
 
@@ -1333,7 +1331,7 @@ class JsExpressionHelper {
         if (height && weight) {
             bmi = (weight / (((height / 100) * height) / 100)).toFixed(1);
         }
-        const refSectionObject = _.first(bmiForAgeRef);
+        const refSectionObject = first(bmiForAgeRef);
         let formattedSDValue;
         if (refSectionObject) {
             const refObjectValues = Object.keys(refSectionObject)
@@ -1346,14 +1344,14 @@ class JsExpressionHelper {
                 minReferencePoint.push(minimumValue);
             }
             else {
-                _.forEach(refObjectValues, (value) => {
+                forEach(refObjectValues, (value) => {
                     if (value <= bmi) {
                         minReferencePoint.push(value);
                     }
                 });
             }
-            const lastReferenceValue = _.last(minReferencePoint);
-            const lastValueIndex = _.findIndex(refObjectValues, (o) => {
+            const lastReferenceValue = last(minReferencePoint);
+            const lastValueIndex = findIndex(refObjectValues, (o) => {
                 return o === lastReferenceValue;
             });
             const SDValue = refObjectKeys[lastValueIndex];
@@ -1383,11 +1381,11 @@ class JsExpressionHelper {
             formattedSDValue = -4;
         }
         else {
-            refSection = _.filter(weightForHeightRef, (refObject) => {
+            refSection = filter(weightForHeightRef, (refObject) => {
                 return parseFloat(refObject['Length']).toFixed(1) === height;
             });
         }
-        const refSectionObject = _.first(refSection);
+        const refSectionObject = first(refSection);
         if (refSectionObject) {
             const refObjectValues = Object.keys(refSectionObject)
                 .map((key) => refSectionObject[key])
@@ -1399,14 +1397,14 @@ class JsExpressionHelper {
                 minReferencePoint.push(minimumValue);
             }
             else {
-                _.forEach(refObjectValues, (value) => {
+                forEach(refObjectValues, (value) => {
                     if (value <= weight) {
                         minReferencePoint.push(value);
                     }
                 });
             }
-            const lastReferenceValue = _.last(minReferencePoint);
-            const lastValueIndex = _.findIndex(refObjectValues, (o) => {
+            const lastReferenceValue = last(minReferencePoint);
+            const lastValueIndex = findIndex(refObjectValues, (o) => {
                 return o === lastReferenceValue;
             });
             const SDValue = refObjectKeys[lastValueIndex];
@@ -1425,7 +1423,7 @@ class JsExpressionHelper {
         return height && weight ? formattedSDValue : null;
     }
     calcHeightForAgeZscore(heightForAgeRef, height, weight) {
-        const refSectionObject = _.first(heightForAgeRef);
+        const refSectionObject = first(heightForAgeRef);
         let formattedSDValue;
         if (refSectionObject) {
             const refObjectValues = Object.keys(refSectionObject)
@@ -1438,14 +1436,14 @@ class JsExpressionHelper {
                 minReferencePoint.push(minimumValue);
             }
             else {
-                _.forEach(refObjectValues, (value) => {
+                forEach(refObjectValues, (value) => {
                     if (value <= height) {
                         minReferencePoint.push(value);
                     }
                 });
             }
-            const lastReferenceValue = _.last(minReferencePoint);
-            const lastValueIndex = _.findIndex(refObjectValues, (o) => {
+            const lastReferenceValue = last(minReferencePoint);
+            const lastValueIndex = findIndex(refObjectValues, (o) => {
                 return o === lastReferenceValue;
             });
             const SDValue = refObjectKeys[lastValueIndex];
@@ -1593,7 +1591,7 @@ class ValidationFactory {
     getValidators(question, form) {
         const list = [];
         if (question.validators) {
-            _.forEach(question.validators, (validator) => {
+            forEach(question.validators, (validator) => {
                 switch (validator.type) {
                     case 'date':
                         list.push(this.dateValidator);
@@ -1917,188 +1915,6 @@ FormControlService.ctorParameters = () => [
     { type: AlertsFactory }
 ];
 
-const DEFAULT_STYLES = `a {
-      color: white;
-      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 0.3s ease-in;
-      border-bottom: 4px solid transparent;
-    }
-
-    li:hover {
-      border-bottom: 4px solid white;
-      opacity: 0.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: black;
-    }
-
-    .owl-theme .owl-controls .owl-nav [class*="owl-"]:hover {
-      background: none;
-      color: black;
-    }
-
-    .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 0.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: 0px 12px !important;
-    }
-
-    .form-tooltip{
-      color:rgb(51, 122, 183);
-      display: inline-block;
-    }
-    .question-info{
-          opacity:0;
-          height:0px;
-          display: none;
-          transition-duration: opacity 1s ease-out;
-          transtion-delay: 0.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%;  /* At the top of the tooltip */
-          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%;
-  display: flex;
-  justify-content:flex-start;
-  flex-direction: column;
-}
-    `;
-
 class DataSources {
     constructor() {
         this._dataSources = {};
@@ -2128,10 +1944,6 @@ DataSources.decorators = [
 ];
 DataSources.ctorParameters = () => [];
 
-// import { concat, of, Observable, Subject, BehaviorSubject } from 'rxjs';
-// import * as _ from 'lodash';
-// import { debounceTime, distinctUntilChanged, tap, switchMap, catchError, map } from 'rxjs/operators';
-// import { QuestionBase } from '../question-models';
 class FormRendererComponent {
     constructor(validationFactory, dataSources, formErrorsService, document) {
         this.validationFactory = validationFactory;
@@ -2182,30 +1994,7 @@ class FormRendererComponent {
         if (this.node &&
             this.node.question.extras &&
             this.node.question.renderingType === 'remote-select') {
-            // let selectQuestion = this.node.form.searchNodeByQuestionId(this.node.question.key)[0];
             this.dataSource = this.dataSources.dataSources[this.node.question.dataSource];
-            /*
-            let defaltValues = of([]);
-            if (this.dataSource.resolveSelectedValue(selectQuestion.control.value)) {
-              defaltValues = this.dataSource.resolveSelectedValue(selectQuestion.control.value).pipe(
-                catchError(() => of([])), // empty list on error
-              );
-            }
-            this.items$ = concat(
-              defaltValues,
-              this.itemsInput$.pipe(
-                debounceTime(200),
-                distinctUntilChanged(),
-                tap(() => this.itemsLoading = true),
-                switchMap(term => this.dataSource.searchOptions(term).pipe(
-                  catchError(() => of([])), // empty list on error
-                  tap(() => {
-                    this.itemsLoading = false
-                  })
-                ))
-              )
-            );
-            */
             if (this.dataSource && this.node.question.dataSourceOptions) {
                 this.dataSource.dataSourceOptions = this.node.question.dataSourceOptions;
             }
@@ -2216,8 +2005,6 @@ class FormRendererComponent {
             this.node.question.extras &&
             this.node.question.renderingType === 'file') {
             this.dataSource = this.dataSources.dataSources[this.node.question.dataSource];
-            // console.log('Key', this.node.question);
-            // console.log('Data source', this.dataSource);
         }
     }
     loadLabels() {
@@ -2305,12 +2092,10 @@ class FormRendererComponent {
         }, 200);
     }
     onDateChanged(node) {
-        // console.log('Node', node);
         this.node = node;
     }
     upload(event) {
-        // console.log('Event', event);
-        // console.log('Data', this.dataSource);
+        // TO DO Add upload functionality
     }
     toggleInformation(infoId) {
         const e = document.getElementById(infoId);
@@ -2332,8 +2117,8 @@ class FormRendererComponent {
 FormRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'form-renderer',
-                template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ngx-tabset (onSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ngx-tab [tabTitle]=\"question.label\" *ngFor=\"let question of node.question.questions; let i = index\">\n      <form-renderer [node]=\"node.children[question.key]\" [parentComponent]=\"this\" [parentGroup]=\"node.control\" [labelMap]=\"labelMap\">\n      </form-renderer>\n    </ngx-tab>\n    <error-renderer [form]=\"node.form\"></error-renderer>\n  </ngx-tabset>\n\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n  <!--Page Components-->\n  <app-custom-component-wrapper [dark]=\"theme === 'light'\" [componentConfigs]=\"node.question.componentConfigs\">\n  </app-custom-component-wrapper>\n  <form-renderer *ngFor=\"let question of node.question.questions\" [parentComponent]=\"this\"\n    [node]=\"node.children[question.key]\" [parentGroup]=\"parentGroup\" [labelMap]=\"labelMap\"></form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n  <div class=\"cds--accordion__item\" [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\">\n    <button class=\"cds--accordion__heading\" type=\"button\" [attr.aria-expanded]=\"isCollapsed ? 'false' : 'true'\"\n      aria-controls=\"accordion-item-0\" (click)=\"isCollapsed = !isCollapsed\">\n      <svg class=\"cds--accordion__arrow\" ibmIcon=\"chevron--right\" size=\"16\" xmlns=\"http://www.w3.org/2000/svg\"\n        focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\">\n        <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n      </svg>\n      <p class=\"cds--accordion__title\">\n        {{ node.question.label }}\n      </p>\n    </button>\n    <div [collapse]=\"isCollapsed\">\n      <!--Section Components-->\n      <app-custom-component-wrapper [dark]=\"(theme === 'light')\" [componentConfigs]=\"node.question.componentConfigs\">\n      </app-custom-component-wrapper>\n      <div class=\"cds--accordion__content accordion-content-override\" [ngClass]=\"{\n        'accordion-content-dark': theme === 'light'}\">\n        <form-renderer *ngFor=\"let question of node.question.questions\" [parentComponent]=\"this\"\n          [node]=\"node.children[question.key]\" [parentGroup]=\"parentGroup\" [labelMap]=\"labelMap\"></form-renderer>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- MESSAGES -->\n<div *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\" class=\"alert alert-warning\">\n  <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n\n<div *ngIf=\"node.question.controlType === 0\" [formGroup]=\"parentGroup\" [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\">\n  <app-custom-component-wrapper [dark]=\"!(theme === 'light')\" [componentConfigs]=\"node.question.componentConfigs\">\n  </app-custom-component-wrapper>\n  <div class=\"cds--form-item\">\n    <!--LEAF CONTROL-->\n    <div class=\"question-area\">\n      <a class=\"form-tooltip pull-right\" (click)=\"toggleInformation(node.question.extras.id)\" 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        <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n      </a>\n\n      <label *ngIf=\"node.question.label\" [style.color]=\"hasErrors() ? 'red' : ''\" class=\"cds--label\"\n        [attr.for]=\"node.question.key\">\n        {{ node.question.required ? '*' : '' }} {{ node.question.label }}\n      </label>\n\n      <div *ngIf=\"node.question.extras.questionOptions.customControl; else nativeControls\">\n        <app-custom-control-wrapper [formControlName]=\"node.question.key\" [id]=\"node.question.key + 'id'\"\n          [question]=\"node.question\">\n        </app-custom-control-wrapper>\n      </div>\n\n      <ng-template #nativeControls>\n        <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n          <ibm-select [theme]=\"theme\" *ngSwitchCase=\"'select'\" [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\">\n            <option *ngFor=\"let o of node.question.options\" [value]=\"o.value\">\n              {{ o.label }}\n            </option>\n          </ibm-select>\n\n          <!-- <app-file-upload *ngSwitchCase=\"'file'\" [dataSource]=\"dataSource\" [formControlName]=\"node.question.key\"\n          [id]=\"node.question.key + 'id'\" (fileChanged)=\"upload($event)\">\n        </app-file-upload> -->\n          <div *ngSwitchCase=\"'file'\">\n            <app-file-upload [dataSource]=\"dataSource\" [formControlName]=\"node.question.key\"\n              [id]=\"node.question.key + 'id'\" (fileChanged)=\"upload($event)\">\n            </app-file-upload>\n          </div>\n\n          <textarea [theme]=\"theme\" ibmTextArea [ngClass]=\"{\n          'cds--text-area--light': theme === 'light',\n          'cds--text-area--invalid': !node.control.valid\n      }\" [placeholder]=\"node.question.placeholder\" [rows]=\"node.question.rows\" class=\"cds--text-area\"\n            *ngSwitchCase=\"'textarea'\" [formControlName]=\"node.question.key\" [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\">\n        </textarea>\n\n          <ngx-remote-select [theme]=\"theme\" *ngSwitchCase=\"'remote-select'\" [placeholder]=\"node.question.placeholder\"\n            tabindex=\"0\" [dataSource]=\"dataSource\" [componentID]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\" [id]=\"node.question.key + 'id'\"></ngx-remote-select>\n\n          <ngx-datetimepicker [weeks]=\"node.question.extras.questionOptions.weeksList\"\n            [showWeeks]=\"node.question.showWeeksAdder\" [theme]=\"theme\" [id]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\" *ngSwitchCase=\"'date'\">\n          </ngx-datetimepicker>\n          <ng-select [ngClass]=\"{'afe-custom': theme === 'light'}\" [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'multi-select'\" [items]=\"node.question.options\" bindLabel=\"label\" bindValue=\"value\"\n            [multiple]=\"true\" placeholder=\"\" clearAllText=\"Clear\" [formControlName]=\"node.question.key\">\n          </ng-select>\n\n          <ng-select [ngClass]=\"{'afe-custom': theme === 'light'}\" [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'single-select'\" [items]=\"node.question.options\" bindLabel=\"label\" bindValue=\"value\"\n            placeholder=\"\" clearAllText=\"Clear\" [formControlName]=\"node.question.key\">\n          </ng-select>\n\n          <number-input [theme]=\"theme\" *ngSwitchCase=\"'number'\" [id]=\"node.question.key + 'id'\"\n            [min]=\"node.question.extras.questionOptions.min\" [max]=\"node.question.extras.questionOptions.max\"\n            [formControlName]=\"node.question.key\" [attr.placeholder]=\"node.question.placeholder\">\n          </number-input>\n\n          <input [theme]=\"theme\" class=\"cds--text-input\" ibmText *ngSwitchDefault [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\" [type]=\"node.question.renderingType\"\n            [id]=\"node.question.key + 'id'\" [readOnly]=\"node.question.extras.readOnly\"/>\n\n          <div *ngSwitchCase=\"'radio'\">\n            <div *ngFor=\"let o of node.question.options\">\n              <label class=\"form-control no-border\">\n                <input type=\"radio\" [formControlName]=\"node.question.key\" [id]=\"node.question.key + 'id'\"\n                  [value]=\"o.value\" />\n                {{ o.label }}\n              </label>\n            </div>\n          </div>\n\n          <div *ngSwitchCase=\"'checkbox'\">\n            <checkbox [id]=\"node.question.key + 'id'\" [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\" [selected]=\"node.control.value\"></checkbox>\n          </div>\n\n          <div *ngIf=\"\n            node.question.enableHistoricalValue && node.question.historicalDisplay\n          \" style=\"margin-top: 2px\">\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\">{{ node.question.historicalDisplay?._date }}\n                    </strong>\n                    <span class=\"text-primary\" *ngIf=\"\n                      node.question.historicalDisplay &&\n                      node.question.historicalDisplay._date\n                    \">\n                      ({{ node.question.historicalDisplay._date | timeAgo }})</span>\n                  </span>\n                </div>\n                <button type=\"button\" [node]=\"node\" [name]=\"'historyValue'\"\n                  class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\">\n                  Use Value\n                </button>\n              </div>\n            </div>\n          </div>\n          <appointments-overview [node]=\"node\"></appointments-overview>\n          <div *ngIf=\"hasErrors()\">\n            <div *ngFor=\"let e of errors()\">\n              <span class=\"text-danger\">{{ e }}</span>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n\n\n\n      <div class=\"question-info col-md-12 col-lg-12 col-sm-12\" id=\"{{ node.question.extras.id }}\" *ngIf=\"\n        node.question &&\n        node.question.extras.questionInfo &&\n        node.question.extras.questionInfo !== '' &&\n        node.question.extras.questionInfo !== ' '\n      \">\n        {{ node.question.extras.questionInfo }}\n      </div>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"node.question.controlType === 1\" [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\">\n  <!--ARRAY CONTROL-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div class=\"well\" style=\"padding: 2px\" *ngSwitchCase=\"'repeating'\">\n      <h4 style=\"margin: 2px; font-weight: bold\">{{ node.question.label }}</h4>\n      <hr style=\"\n          margin-left: -2px;\n          margin-right: -2px;\n          margin-bottom: 4px;\n          margin-top: 8px;\n          border-width: 2px;\n        \" />\n      <div [ngSwitch]=\"node.question.extras.type\">\n        <div *ngSwitchCase=\"'testOrder'\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <form-renderer *ngFor=\"let question of child.question.questions\" [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\" [parentGroup]=\"child.control\" [labelMap]=\"labelMap\"></form-renderer>\n            <div>{{ child.orderNumber }}</div>\n            <button type=\"button \" class=\"cds--btn cds--btn--danger cds--btn--sm\" (click)=\"node.removeAt(i)\">\n              Remove\n            </button>\n            <br />\n            <hr style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \" />\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <form-renderer *ngFor=\"let question of child.question.questions\" [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\" [parentGroup]=\"child.control\" [labelMap]=\"labelMap\"></form-renderer>\n            <button type=\"button \" class=\"cds--btn cds--btn--danger cds--btn--sm\" (click)=\"node.removeAt(i)\">\n              Remove\n            </button>\n            <br />\n            <hr style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \" />\n          </div>\n        </div>\n      </div>\n      <button type=\"button\" class=\"cds--btn cds--btn--primary\" (click)=\"node.createChildNode()\">\n        Add\n      </button>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"node.question.controlType === 2\" [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\">\n  <!--GROUP-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div *ngSwitchCase=\"'group'\">\n      <form-renderer *ngFor=\"let question of node.question.questions\" [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\" [parentGroup]=\"node.control\" [labelMap]=\"labelMap\"></form-renderer>\n    </div>\n    <div *ngSwitchCase=\"'field-set'\" style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\">\n      <form-renderer *ngFor=\"let question of node.question.questions\" [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\" [parentGroup]=\"node.control\" [labelMap]=\"labelMap\"></form-renderer>\n    </div>\n  </div>\n</div>\n",
-                styles: ['../../style/app.css', DEFAULT_STYLES]
+                template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ngx-tab-set (onSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ngx-tab\n      [tabTitle]=\"question.label\"\n      *ngFor=\"let question of node.question.questions; let i = index\"\n    >\n      <form-renderer\n        [node]=\"node.children[question.key]\"\n        [parentComponent]=\"this\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      >\n      </form-renderer>\n    </ngx-tab>\n    <error-renderer [form]=\"node.form\"></error-renderer>\n  </ngx-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n  <!--Page Components-->\n  <app-custom-component-wrapper\n    [dark]=\"theme === 'light'\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </app-custom-component-wrapper>\n  <form-renderer\n    *ngFor=\"let question of node.question.questions\"\n    [parentComponent]=\"this\"\n    [node]=\"node.children[question.key]\"\n    [parentGroup]=\"parentGroup\"\n    [labelMap]=\"labelMap\"\n  ></form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n  <div\n    class=\"cds--accordion__item\"\n    [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\"\n  >\n    <button\n      class=\"cds--accordion__heading\"\n      type=\"button\"\n      [attr.aria-expanded]=\"isCollapsed ? 'false' : 'true'\"\n      aria-controls=\"accordion-item-0\"\n      (click)=\"isCollapsed = !isCollapsed\"\n    >\n      <svg\n        class=\"cds--accordion__arrow\"\n        ibmIcon=\"chevron--right\"\n        size=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        aria-hidden=\"true\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n      </svg>\n      <p class=\"cds--accordion__title\">\n        {{ node.question.label }}\n      </p>\n    </button>\n    <div [collapse]=\"isCollapsed\">\n      <!--Section Components-->\n      <app-custom-component-wrapper\n        [dark]=\"theme === 'light'\"\n        [componentConfigs]=\"node.question.componentConfigs\"\n      >\n      </app-custom-component-wrapper>\n      <div\n        class=\"cds--accordion__content accordion-content-override\"\n        [ngClass]=\"{\n          'accordion-content-dark': theme === 'light'\n        }\"\n      >\n        <form-renderer\n          *ngFor=\"let question of node.question.questions\"\n          [parentComponent]=\"this\"\n          [node]=\"node.children[question.key]\"\n          [parentGroup]=\"parentGroup\"\n          [labelMap]=\"labelMap\"\n        ></form-renderer>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- MESSAGES -->\n<div\n  *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n  class=\"alert alert-warning\"\n>\n  <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n<div\n  *ngIf=\"node.question.controlType === 0\"\n  [formGroup]=\"parentGroup\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <app-custom-component-wrapper\n    [dark]=\"!(theme === 'light')\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </app-custom-component-wrapper>\n  <div class=\"cds--form-item\">\n    <!--LEAF CONTROL-->\n    <div class=\"question-area\">\n      <a\n        class=\"form-tooltip pull-right\"\n        (click)=\"toggleInformation(node.question.extras.id)\"\n        data-placement=\"right\"\n        *ngIf=\"\n          node.question &&\n          node.question.extras.questionInfo &&\n          node.question.extras.questionInfo !== '' &&\n          node.question.extras.questionInfo !== ' '\n        \"\n      >\n        <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n      </a>\n\n      <label\n        *ngIf=\"node.question.label\"\n        [style.color]=\"hasErrors() ? 'red' : ''\"\n        class=\"cds--label\"\n        [attr.for]=\"node.question.key\"\n      >\n        {{ node.question.required ? '*' : '' }}\n        {{ node.question.prefix ? node.question.prefix + ' ' : ''\n        }}{{ node.question.label }}\n      </label>\n\n      <div\n        *ngIf=\"\n          node.question.extras.questionOptions.customControl;\n          else nativeControls\n        \"\n      >\n        <app-custom-control-wrapper\n          [formControlName]=\"node.question.key\"\n          [id]=\"node.question.key + 'id'\"\n          [question]=\"node.question\"\n        >\n        </app-custom-control-wrapper>\n      </div>\n\n      <ng-template #nativeControls>\n        <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n          <ibm-select\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'select'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n          >\n            <option *ngFor=\"let o of node.question.options\" [value]=\"o.value\">\n              {{ o.label }}\n            </option>\n          </ibm-select>\n\n          <div *ngSwitchCase=\"'file'\">\n            <app-file-upload\n              [dataSource]=\"dataSource\"\n              [formControlName]=\"node.question.key\"\n              [id]=\"node.question.key + 'id'\"\n              (fileChanged)=\"upload($event)\"\n            >\n            </app-file-upload>\n          </div>\n\n          <textarea\n            [theme]=\"theme\"\n            ibmTextArea\n            [ngClass]=\"{\n              'cds--text-area--light': theme === 'light',\n              'cds--text-area--invalid': !node.control.valid\n            }\"\n            [placeholder]=\"node.question.placeholder\"\n            [rows]=\"node.question.rows\"\n            class=\"cds--text-area\"\n            *ngSwitchCase=\"'textarea'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\"\n          >\n          </textarea>\n\n          <ngx-remote-select\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'remote-select'\"\n            [placeholder]=\"node.question.placeholder\"\n            tabindex=\"0\"\n            [dataSource]=\"dataSource\"\n            [componentID]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n          ></ngx-remote-select>\n\n          <ngx-datetimepicker\n            [weeks]=\"node.question.extras.questionOptions.weeksList\"\n            [showWeeks]=\"node.question.showWeeksAdder\"\n            [theme]=\"theme\"\n            [id]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\"\n            *ngSwitchCase=\"'date'\"\n            [datePickerFormat]=\"node.question.datePickerFormat\"\n          >\n          </ngx-datetimepicker>\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'multi-select'\"\n            [items]=\"node.question.options\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [multiple]=\"true\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n          </ng-select>\n\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'single-select'\"\n            [items]=\"node.question.options\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            placeholder=\"\"\n            clearAllText=\"Clear\"\n            [formControlName]=\"node.question.key\"\n          >\n          </ng-select>\n\n          <number-input\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'number'\"\n            [id]=\"node.question.key + 'id'\"\n            [min]=\"node.question.extras.questionOptions.min\"\n            [max]=\"node.question.extras.questionOptions.max\"\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\"\n          >\n          </number-input>\n\n          <input\n            [theme]=\"theme\"\n            class=\"cds--text-input\"\n            ibmText\n            *ngSwitchDefault\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\"\n            [type]=\"node.question.renderingType\"\n            [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\"\n          />\n\n          <div *ngSwitchCase=\"'radio'\">\n            <div\n              *ngFor=\"let o of node.question.options\"\n              [ngClass]=\"{\n                'in-line': node.question.orientation === 'horizontal'\n              }\"\n            >\n              <label class=\"form-control no-border\">\n                <input\n                  type=\"radio\"\n                  [formControlName]=\"node.question.key\"\n                  [id]=\"node.question.key + 'id'\"\n                  [value]=\"o.value\"\n                />\n                {{ o.label }}\n              </label>\n            </div>\n          </div>\n\n          <div *ngSwitchCase=\"'checkbox'\">\n            <checkbox\n              [id]=\"node.question.key + 'id'\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [selected]=\"node.control.value\"\n            ></checkbox>\n          </div>\n\n          <div\n            *ngIf=\"\n              node.question.enableHistoricalValue &&\n              node.question.historicalDisplay\n            \"\n            style=\"margin-top: 2px\"\n          >\n            <div class=\"container-fluid\">\n              <div class=\"row\">\n                <div class=\"col-xs-9\">\n                  <span class=\"text-warning\">Previous Value: </span>\n                  <strong>{{ node.question.historicalDisplay?.text }}</strong>\n                  <span *ngIf=\"node.question.showHistoricalValueDate\">\n                    <span> | </span>\n                    <strong class=\"text-primary\"\n                      >{{ node.question.historicalDisplay?._date | date }}\n                    </strong>\n                    <span\n                      class=\"text-primary\"\n                      *ngIf=\"\n                        node.question.historicalDisplay &&\n                        node.question.historicalDisplay._date\n                      \"\n                    >\n                      ({{\n                        node.question.historicalDisplay._date | timeAgo\n                      }})</span\n                    >\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  [node]=\"node\"\n                  [name]=\"'historyValue'\"\n                  class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\"\n                >\n                  Use Value\n                </button>\n              </div>\n            </div>\n          </div>\n          <appointments-overview [node]=\"node\"></appointments-overview>\n          <div *ngIf=\"hasErrors()\">\n            <div *ngFor=\"let e of errors()\">\n              <span class=\"text-danger\">{{ e }}</span>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n\n      <div\n        class=\"question-info col-md-12 col-lg-12 col-sm-12\"\n        id=\"{{ node.question.extras.id }}\"\n        *ngIf=\"\n          node.question &&\n          node.question.extras.questionInfo &&\n          node.question.extras.questionInfo !== '' &&\n          node.question.extras.questionInfo !== ' '\n        \"\n      >\n        {{ node.question.extras.questionInfo }}\n      </div>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"node.question.controlType === 1\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <!--ARRAY CONTROL-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div class=\"well\" style=\"padding: 2px\" *ngSwitchCase=\"'repeating'\">\n      <h4 style=\"margin: 2px; font-weight: bold\">{{ node.question.label }}</h4>\n      <hr\n        style=\"\n          margin-left: -2px;\n          margin-right: -2px;\n          margin-bottom: 4px;\n          margin-top: 8px;\n          border-width: 2px;\n        \"\n      />\n      <div [ngSwitch]=\"node.question.extras.type\">\n        <div *ngSwitchCase=\"'testOrder'\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <form-renderer\n              *ngFor=\"let question of child.question.questions\"\n              [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\"\n              [parentGroup]=\"child.control\"\n              [labelMap]=\"labelMap\"\n            ></form-renderer>\n            <div>{{ child.orderNumber }}</div>\n            <button\n              type=\"button \"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <form-renderer\n              *ngFor=\"let question of child.question.questions\"\n              [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\"\n              [parentGroup]=\"child.control\"\n              [labelMap]=\"labelMap\"\n            ></form-renderer>\n            <button\n              type=\"button \"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"cds--btn cds--btn--primary\"\n        (click)=\"node.createChildNode()\"\n      >\n        Add\n      </button>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"node.question.controlType === 2\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <!--GROUP-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div *ngSwitchCase=\"'group'\">\n      <form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></form-renderer>\n    </div>\n    <div\n      *ngSwitchCase=\"'field-set'\"\n      style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n    >\n      <form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></form-renderer>\n    </div>\n  </div>\n</div>\n",
+                styles: [".slider{width:auto;margin:30px}.slick-next:before,.slick-prev:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}", "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 #fff;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:700}.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;transition-duration:opacity 1s ease-out;transtion-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border:1px ridge #337ab7;margin-top:2px}.hide-info,.question-info{height:0;display:none}.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:5px solid transparent;border-bottom-color:#337ab7}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}"]
             },] }
 ];
 FormRendererComponent.ctorParameters = () => [
@@ -2480,7 +2265,7 @@ class Form {
                     if (arrayNode &&
                         arrayNode.children &&
                         arrayNode.children.length > 0) {
-                        _.forEach(arrayNode.children, (groupNode) => {
+                        forEach(arrayNode.children, (groupNode) => {
                             this.markInvalidControls(groupNode, invalidControlNodes);
                         });
                     }
@@ -2562,7 +2347,7 @@ class ErrorRendererComponent {
     }
     announceErrorField(errorNode) {
         const nodes = this.form.searchNodeByQuestionId(errorNode.path.substring(0, errorNode.path.indexOf('.')));
-        _.forEach(nodes, (node) => {
+        forEach(nodes, (node) => {
             if (node.question.renderingType === 'page') {
                 const pageIndex = this.getPageIndex(node);
                 this.formErrorsService.announceErrorField(pageIndex + ',' + errorNode.question.key);
@@ -2578,7 +2363,7 @@ class ErrorRendererComponent {
 ErrorRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'error-renderer',
-                template: "<div *ngIf=\"showErrors()\" class=\"container\">\n  <div data-notification *ngFor=\"let errorNode of errorNodes\"\n    class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\" role=\"alert\"\n    (click)=\"announceErrorField(errorNode)\">\n    <div class=\"cds--inline-notification__details\">\n      <div class=\"cds--inline-notification__text-wrapper\">\n        <p class=\"cds--inline-notification__title\">{{ errorNode.question.label }}</p>\n        <p class=\"cds--inline-notification__subtitle\">{{ getControlError(errorNode) }}</p>\n      </div>\n    </div>\n    <button tabindex=\"0\" class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n      type=\"button\">Fix</button>\n    <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform;\"\n      xmlns=\"http://www.w3.org/2000/svg\" class=\"cds--inline-notification__icon\" width=\"20\" height=\"20\"\n      viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path 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\"></path>\n      <path d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\" data-icon-path=\"inner-path\" opacity=\"0\"></path>\n    </svg>\n  </div>\n</div>",
+                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}"]
             },] }
 ];
@@ -2594,10 +2379,10 @@ class HistoricalFieldHelperService {
     getDisplayTextFromOptions(question, valueProperty, displayProperty) {
         let displayText = '';
         const historicalValue = question.historicalDataValue;
-        if (_.isArray(historicalValue.value)) {
+        if (isArray(historicalValue.value)) {
             let valueConverted = 0;
-            _.each(historicalValue.value, (val) => {
-                _.each(question.options, (option) => {
+            each(historicalValue.value, (val) => {
+                each(question.options, (option) => {
                     if (option[valueProperty] === val) {
                         if (valueConverted === 0) {
                             displayText = displayText + option[displayProperty];
@@ -2611,7 +2396,7 @@ class HistoricalFieldHelperService {
             });
         }
         else {
-            _.each(question.options, (option) => {
+            each(question.options, (option) => {
                 if (option[valueProperty] === historicalValue.value) {
                     displayText = option[displayProperty];
                 }
@@ -2653,7 +2438,7 @@ class HistoricalValueDirective {
         if (node) {
             this._node = node;
             if (this._node.question.enableHistoricalValue &&
-                !_.isUndefined(this._node.question.historicalDataValue)) {
+                !isUndefined(this._node.question.historicalDataValue)) {
                 const display = { text: '', _date: '' };
                 if (this._node.question.renderingType === 'select' ||
                     this._node.question.renderingType === 'multi-select' ||
@@ -2662,7 +2447,7 @@ class HistoricalValueDirective {
                     display._date = this._node.question.historicalDataValue.valueDate;
                     this._node.question['historicalDisplay'] = display;
                 }
-                else if (!_.isUndefined(this._node.question.historicalDataValue)) {
+                else if (!isUndefined(this._node.question.historicalDataValue)) {
                     display.text = this._node.question.historicalDataValue.value;
                     display._date = this._node.question.historicalDataValue.valueDate;
                     this._node.question['historicalDisplay'] = display;
@@ -3016,7 +2801,7 @@ NumberInputComponent.numberCount = 0;
 NumberInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'number-input',
-                template: "<div data-numberinput [attr.data-invalid]=\"invalid ? true : null\" class=\"cds--number\" [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  <div class=\"cds--number__input-wrapper\" [ngClass]=\"{\n        'cds--number__input-wrapper--warning': warn\n      }\">\n    <input type=\"number\" [id]=\"id\" [value]=\"value\" [attr.min]=\"min\" [attr.max]=\"max\" [attr.step]=\"step\"\n      [disabled]=\"disabled\" [required]=\"required\" (input)=\"onNumberInputChange($event)\" />\n    <div class=\"cds--number__controls\">\n      <button type=\"button\" class=\"cds--number__control-btn down-icon\" (click)=\"onDecrement()\" title=\"Decrement number\"\n        [attr.aria-label]=\"decrementLabel\" tabindex=\"-1\">\n        <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"currentColor\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" aria-hidden=\"true\" class=\"down-icon\">\n          <path d=\"M8 15H24V17H8z\"></path>\n        </svg>\n      </button>\n      <div class=\"cds--number__rule-divider\"></div>\n      <button type=\"button\" class=\"cds--number__control-btn up-icon\" (click)=\"onIncrement()\" title=\"Increment number\"\n        [attr.aria-label]=\"incrementLabel\" tabindex=\"-1\">\n        <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"currentColor\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" aria-hidden=\"true\" class=\"up-icon\">\n          <path d=\"M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z\"></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 *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></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 *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></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 *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n  </div>\n</div>",
+                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",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -3318,7 +3103,7 @@ class DatePickerComponent {
     ngOnInit() {
         this.initValue();
         // default to current year range
-        ___default.each(this.fullYearRange, (v, i) => {
+        _.each(this.fullYearRange, (v, i) => {
             this.currentYear = this.calendarDate.clone().startOf('year').year();
             if (v.indexOf(this.currentYear) !== -1) {
                 this.displayYearsIndex = i;
@@ -3402,7 +3187,7 @@ class DatePickerComponent {
         for (let year = startYr; year <= currentYear; year++) {
             years.push(year);
         }
-        this.fullYearRange = ___default.chunk(years, 14);
+        this.fullYearRange = _.chunk(years, 14);
     }
     initValue() {
         // set moment locale (default is en)
@@ -3463,7 +3248,7 @@ DatePickerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'date-picker',
                 template: "<picker-modal (onOverlayClick)=\"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</picker-modal>\n",
-                styles: ["*,:after,:before{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;-moz-user-select:none;user-select:none}.picker-footer,.picker-header{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-next:before,.picker-header-nav .nav-prev: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-clear:before,.picker-footer .action-close:before,.picker-footer .action-today: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(180deg,transparent 35%,#777 0,#777 65%,transparent 0),linear-gradient(90deg,transparent 35%,#777 0,#777 65%,transparent 0);transform:rotate(45deg)}"]
+                styles: ["*,:after,:before{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;-moz-user-select:none;-ms-user-select:none;user-select:none}.picker-footer,.picker-header{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-next:before,.picker-header-nav .nav-prev: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-clear:before,.picker-footer .action-close:before,.picker-footer .action-today: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(180deg,transparent 35%,#777 0,#777 65%,transparent 0),linear-gradient(90deg,transparent 35%,#777 0,#777 65%,transparent 0);transform:rotate(45deg)}"]
             },] }
 ];
 DatePickerComponent.ctorParameters = () => [];
@@ -3574,7 +3359,7 @@ TimePickerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'time-picker',
                 template: "<picker-modal (onOverlayClick)=\"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</picker-modal>\n",
-                styles: ["*,:after,:before{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;-moz-user-select:none;user-select:none}.picker-footer,.picker-header{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;-moz-user-select:none;user-select:none}.picker-table-meridiem,.picker-table-number,.picker-table-separator{text-align:center}.picker-table-meridiem,.picker-table-number{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:translateX(-50%) rotate(-135deg)}.arrow.down{bottom:-1rem;transform:translateX(-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-clear:before,.picker-footer .action-close:before,.picker-footer .action-confirm:before,.picker-footer .action-now: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(180deg,transparent 35%,#777 0,#777 65%,transparent 0),linear-gradient(90deg,transparent 35%,#777 0,#777 65%,transparent 0);transform:rotate(45deg)}"]
+                styles: ["*,:after,:before{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;-moz-user-select:none;-ms-user-select:none;user-select:none}.picker-footer,.picker-header{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;-moz-user-select:none;-ms-user-select:none;user-select:none}.picker-table-meridiem,.picker-table-number,.picker-table-separator{text-align:center}.picker-table-meridiem,.picker-table-number{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:translateX(-50%) rotate(-135deg)}.arrow.down{bottom:-1rem;transform:translateX(-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-clear:before,.picker-footer .action-close:before,.picker-footer .action-confirm:before,.picker-footer .action-now: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(180deg,transparent 35%,#777 0,#777 65%,transparent 0),linear-gradient(90deg,transparent 35%,#777 0,#777 65%,transparent 0);transform:rotate(45deg)}"]
             },] }
 ];
 TimePickerComponent.ctorParameters = () => [];
@@ -3762,6 +3547,7 @@ class NgxDatetimeComponent {
         this.isDisabled = false;
         this.id = '';
         this.theme = 'dark';
+        this.datePickerFormat = '';
         this.showWeeks = false;
         this.onChange = (_) => { };
         this.onTouch = () => { };
@@ -3795,7 +3581,7 @@ class NgxDatetimeComponent {
 NgxDatetimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ngx-datetimepicker',
-                template: "<div class=\"date-time-picker-container\">\n    <div data-date-picker data-date-picker-type=\"single\"\n        class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\" [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\">\n        <div class=\"cds--date-picker-container fill\">\n            <div class=\"cds--date-picker-input__wrapper\">\n                <input [disabled]=\"isDisabled\" (dateTimeChange)=\"onInput($event)\" type=\"text\"\n                    class=\"cds--date-picker__input fill\" [id]=\"id\" [value]=\"value\" [owlDateTime]=\"dt1\"\n                    [owlDateTimeTrigger]=\"dt1\" placeholder=\"mm/dd/yyyy\" data-date-picker-input />\n                <svg [owlDateTimeTrigger]=\"dt1\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform;\"\n                    xmlns=\"http://www.w3.org/2000/svg\" data-date-picker-icon=\"true\" class=\"cds--date-picker__icon\"\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\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\n    <div *ngIf=\"showWeeks\" class=\"cds--select some-class week-select-wrapper\" [ngClass]=\"{'cds--select--light': theme === 'light'}\">\n        <div class=\"cds--select-input__wrapper\">\n            <select (change)=\"onWeeksSelected($event.target.value)\" id=\"select-1\" class=\"cds--select-input\">\n                <option class=\"cds--select-option\" value=\"placeholder-item\" disabled=\"\" hidden=\"\" selected=\"\">Select\n                    Weeks</option>\n                <option class=\"cds--select-option\" [value]=\"week\" *ngFor=\"let week of weeks\">{{week}} Weeks</option>\n            </select>\n            <svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"currentColor\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"\n                class=\"cds--select__arrow\">\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\n</div>\n<owl-date-time [pickerType]=\"'calendar'\" [disabled]=\"isDisabled\" #dt1></owl-date-time>",
+                template: "<div class=\"date-time-picker-container\">\n  <div\n    data-date-picker\n    data-date-picker-type=\"single\"\n    class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n    [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\"\n  >\n    <div class=\"cds--date-picker-container fill\">\n      <div class=\"cds--date-picker-input__wrapper\">\n        <input\n          [disabled]=\"isDisabled\"\n          (dateTimeChange)=\"onInput($event)\"\n          type=\"text\"\n          class=\"cds--date-picker__input fill\"\n          [id]=\"id\"\n          [value]=\"value\"\n          [owlDateTime]=\"dt1\"\n          [owlDateTimeTrigger]=\"dt1\"\n          placeholder=\"mm/dd/yyyy\"\n          data-date-picker-input\n        />\n        <svg\n          [owlDateTimeTrigger]=\"dt1\"\n          focusable=\"false\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          style=\"will-change: transform\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          data-date-picker-icon=\"true\"\n          class=\"cds--date-picker__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n          ></path>\n        </svg>\n      </div>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showWeeks\"\n    class=\"cds--select some-class week-select-wrapper\"\n    [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n  >\n    <div class=\"cds--select-input__wrapper\">\n      <select\n        (change)=\"onWeeksSelected($event.target.value)\"\n        id=\"select-1\"\n        class=\"cds--select-input\"\n      >\n        <option\n          class=\"cds--select-option\"\n          value=\"placeholder-item\"\n          disabled=\"\"\n          hidden=\"\"\n          selected=\"\"\n        >\n          Select Weeks\n        </option>\n        <option\n          class=\"cds--select-option\"\n          [value]=\"week\"\n          *ngFor=\"let week of weeks\"\n        >\n          {{week}} Weeks\n        </option>\n      </select>\n      <svg\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n        class=\"cds--select__arrow\"\n      >\n        <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n      </svg>\n    </div>\n  </div>\n</div>\n<owl-date-time\n  [pickerType]=\"datePickerFormat ? datePickerFormat :'calendar'\"\n  [disabled]=\"isDisabled\"\n  #dt1\n></owl-date-time>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -3809,6 +3595,7 @@ NgxDatetimeComponent.decorators = [
 NgxDatetimeComponent.propDecorators = {
     id: [{ type: Input }],
     theme: [{ type: Input }],
+    datePickerFormat: [{ type: Input }],
     showWeeks: [{ type: Input }],
     weeks: [{ type: Input }]
 };
@@ -3865,7 +3652,7 @@ class OwlDateTimeIntl {
         this.hour12PMLabel = 'PM';
     }
 }
-OwlDateTimeIntl.ɵprov = i0.ɵɵdefineInjectable({ factory: function OwlDateTimeIntl_Factory() { return new OwlDateTimeIntl(); }, token: OwlDateTimeIntl, providedIn: "root" });
+OwlDateTimeIntl.ɵprov = ɵɵdefineInjectable({ factory: function OwlDateTimeIntl_Factory() { return new OwlDateTimeIntl(); }, token: OwlDateTimeIntl, providedIn: "root" });
 OwlDateTimeIntl.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -4278,7 +4065,7 @@ OwlCalendarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'owl-date-time-calendar',
                 exportAs: 'owlDateTimeCalendar',
-                template: "<div class=\"owl-dt-calendar-control\">\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n    <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n            type=\"button\" tabindex=\"0\"\n            [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n            [disabled]=\"!prevButtonEnabled()\"\n            [attr.aria-label]=\"prevButtonLabel\"\n            (click)=\"previousClicked()\">\n        <span class=\"owl-dt-control-content owl-dt-control-button-content\" tabindex=\"-1\">\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                 version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250.738 250.738\"\n                 style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\"\n                 width=\"100%\" height=\"100%\">\n                <path style=\"fill-rule: evenodd; clip-rule: evenodd;\" 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            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n    <div class=\"owl-dt-calendar-control-content\">\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n                type=\"button\" tabindex=\"0\"\n                [attr.aria-label]=\"periodButtonLabel\"\n                (click)=\"toggleViews()\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\" tabindex=\"-1\">\n                {{periodButtonText}}\n\n                <span class=\"owl-dt-control-button-arrow\"\n                      [style.transform]=\"'rotate(' + (isMonthView? 0 : 180) +'deg)'\">\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\n                    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n                         width=\"50%\" height=\"50%\" viewBox=\"0 0 292.362 292.362\" style=\"enable-background:new 0 0 292.362 292.362;\"\n                         xml:space=\"preserve\">\n                        <g>\n                            <path 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                        </g>\n                    </svg>\n                    <!-- </editor-fold> -->\n                </span>\n            </span>\n        </button>\n    </div>\n    <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n            type=\"button\" tabindex=\"0\"\n            [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n            [disabled]=\"!nextButtonEnabled()\"\n            [attr.aria-label]=\"nextButtonLabel\"\n            (click)=\"nextClicked()\">\n        <span class=\"owl-dt-control-content owl-dt-control-button-content\" tabindex=\"-1\">\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n        <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n                 viewBox=\"0 0 250.738 250.738\" style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\">\n                <path style=\"fill-rule:evenodd;clip-rule:evenodd;\" 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            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n</div>\n<div class=\"owl-dt-calendar-main\" cdkMonitorSubtreeFocus [ngSwitch]=\"currentView\" tabindex=\"-1\">\n    <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()\"></owl-date-time-month-view>\n\n    <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            (change)=\"goToDateInView($event, 'month')\"></owl-date-time-year-view>\n\n    <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            (change)=\"goToDateInView($event, 'year')\"></owl-date-time-multi-year-view>\n</div>\n",
+                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  <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  ></owl-date-time-month-view>\n\n  <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    (change)=\"goToDateInView($event, 'month')\"\n  ></owl-date-time-year-view>\n\n  <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    (change)=\"goToDateInView($event, 'year')\"\n  ></owl-date-time-multi-year-view>\n</div>\n",
                 host: {
                     '[class.owl-dt-calendar]': 'owlDTCalendarClass'
                 },
@@ -4569,7 +4356,7 @@ OwlTimerComponent.decorators = [
     { type: Component, args: [{
                 exportAs: 'owlDateTimeTimer',
                 selector: 'owl-date-time-timer',
-                template: "<owl-date-time-timer-box\n        [upBtnAriaLabel]=\"upHourButtonLabel\"\n        [downBtnAriaLabel]=\"downHourButtonLabel\"\n        [upBtnDisabled]=\"!upHourEnabled()\"\n        [downBtnDisabled]=\"!downHourEnabled()\"\n        [boxValue]=\"hourBoxValue\"\n        [value]=\"hourValue\" [min]=\"0\" [max]=\"23\"\n        [step]=\"stepHour\" [inputLabel]=\"'Hour'\"\n        (inputChange)=\"setHourValueViaInput($event)\"\n        (valueChange)=\"setHourValue($event)\"></owl-date-time-timer-box>\n<owl-date-time-timer-box\n        [showDivider]=\"true\"\n        [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n        [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n        [upBtnDisabled]=\"!upMinuteEnabled()\"\n        [downBtnDisabled]=\"!downMinuteEnabled()\"\n        [value]=\"minuteValue\" [min]=\"0\" [max]=\"59\"\n        [step]=\"stepMinute\" [inputLabel]=\"'Minute'\"\n        (inputChange)=\"setMinuteValue($event)\"\n        (valueChange)=\"setMinuteValue($event)\"></owl-date-time-timer-box>\n<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\" [min]=\"0\" [max]=\"59\"\n        [step]=\"stepSecond\" [inputLabel]=\"'Second'\"\n        (inputChange)=\"setSecondValue($event)\"\n        (valueChange)=\"setSecondValue($event)\"></owl-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\" class=\"owl-dt-timer-hour12\">\n    <button class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n            type=\"button\" tabindex=\"0\"\n            (click)=\"setMeridiem($event)\">\n        <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n            {{hour12ButtonLabel}}\n        </span>\n    </button>\n</div>\n",
+                template: "<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></owl-date-time-timer-box>\n<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></owl-date-time-timer-box>\n<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></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",
                 preserveWhitespaces: false,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 host: {
@@ -4956,7 +4743,7 @@ OwlDateTimeContainerComponent.decorators = [
     { type: Component, args: [{
                 exportAs: 'owlDateTimeContainer',
                 selector: 'owl-date-time-container',
-                template: "<div [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n     [@fadeInPicker]=\"picker.pickerMode === 'inline'? '' : 'enter'\"\n     class=\"owl-dt-container-inner\">\n\n    <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)\"></owl-date-time-calendar>\n\n    <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)\"></owl-date-time-timer>\n\n    <div *ngIf=\"picker.isInRangeMode\"\n         role=\"radiogroup\"\n         class=\"owl-dt-container-info owl-dt-container-row\">\n        <div role=\"radio\" [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)\" #from>\n            <span class=\"owl-dt-control-content owl-dt-container-range-content\" tabindex=\"-1\">\n                <span class=\"owl-dt-container-info-label\">{{fromLabel}}:</span>\n                <span class=\"owl-dt-container-info-value\">{{fromFormattedValue}}</span>\n            </span>\n        </div>\n        <div role=\"radio\" [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)\" #to>\n            <span class=\"owl-dt-control-content owl-dt-container-range-content\" tabindex=\"-1\">\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 *ngIf=\"showControlButtons\" class=\"owl-dt-container-buttons owl-dt-container-row\">\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\" tabindex=\"0\"\n                (click)=\"onCancelClicked($event)\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\" tabindex=\"-1\">\n                {{cancelLabel}}\n            </span>\n        </button>\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n                type=\"button\" tabindex=\"0\"\n                (click)=\"onSetClicked($event)\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\" tabindex=\"-1\">\n                {{setLabel}}\n            </span>\n        </button>\n    </div>\n</div>\n",
+                template: "<div\n  [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n  [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n  class=\"owl-dt-container-inner\"\n>\n  <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  ></owl-date-time-calendar>\n\n  <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  ></owl-date-time-timer>\n\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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 preserveWhitespaces: false,
                 animations: [
@@ -5204,13 +4991,13 @@ class OwlDialogRef {
         /** Whether the user is allowed to close the dialog. */
         this.disableClose = this.container.config.disableClose;
         this.container.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'enter'), take(1))
+            .pipe(filter$1((event) => event.phaseName === 'done' && event.toState === 'enter'), take(1))
             .subscribe(() => {
             this._afterOpen$.next();
             this._afterOpen$.complete();
         });
         this.container.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'exit'), take(1))
+            .pipe(filter$1((event) => event.phaseName === 'done' && event.toState === 'exit'), take(1))
             .subscribe(() => {
             this.overlayRef.dispose();
             this.locationChanged.unsubscribe();
@@ -5220,7 +5007,7 @@ class OwlDialogRef {
         });
         this.overlayRef
             .keydownEvents()
-            .pipe(filter((event) => event.keyCode === ESCAPE && !this.disableClose))
+            .pipe(filter$1((event) => event.keyCode === ESCAPE && !this.disableClose))
             .subscribe(() => this.close());
         if (location) {
             this.locationChanged = location.subscribe(() => {
@@ -5233,7 +5020,7 @@ class OwlDialogRef {
     close(dialogResult) {
         this.result = dialogResult;
         this.container.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'start'), take(1))
+            .pipe(filter$1((event) => event.phaseName === 'start'), take(1))
             .subscribe(() => {
             this._beforeClose$.next(dialogResult);
             this._beforeClose$.complete();
@@ -6157,7 +5944,7 @@ class OwlDateTimeComponent extends OwlDateTime {
         this.popupRef = this.overlay.create(overlayConfig);
         merge(this.popupRef.backdropClick(), this.popupRef.detachments(), this.popupRef
             .keydownEvents()
-            .pipe(filter((event) => event.keyCode === ESCAPE ||
+            .pipe(filter$1((event) => event.keyCode === ESCAPE ||
             (this._dtInput && event.altKey && event.keyCode === UP_ARROW)))).subscribe(() => this.close());
     }
     /**
@@ -6314,7 +6101,7 @@ OwlDateTimeTriggerDirective.propDecorators = {
 };
 
 /* eslint-disable @angular-eslint/no-host-metadata-property */
-const OWL_DATETIME_VALUE_ACCESSOR$1 = {
+const OWL_DATETIME_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => OwlDateTimeInputDirective),
     multi: true
@@ -6869,7 +6656,7 @@ OwlDateTimeInputDirective.decorators = [
                     '[attr.max]': 'maxIso8601',
                     '[disabled]': 'owlDateTimeInputDisabled'
                 },
-                providers: [OWL_DATETIME_VALUE_ACCESSOR$1, OWL_DATETIME_VALIDATORS]
+                providers: [OWL_DATETIME_VALUE_ACCESSOR, OWL_DATETIME_VALIDATORS]
             },] }
 ];
 OwlDateTimeInputDirective.ctorParameters = () => [
@@ -7012,7 +6799,7 @@ OwlCalendarBodyComponent.decorators = [
     { type: Component, args: [{
                 selector: '[owl-date-time-calendar-body]',
                 exportAs: 'owlDateTimeCalendarBody',
-                template: "<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n    <td *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        <span 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            {{item.displayValue}}\n        </span>\n    </td>\n</tr>\n",
+                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",
                 host: {
                     '[class.owl-dt-calendar-body]': 'owlDTCalendarBodyClass'
                 },
@@ -7425,7 +7212,7 @@ OwlMonthViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'owl-date-time-month-view',
                 exportAs: 'owlYearView',
-                template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n       [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\">\n    <thead class=\"owl-dt-calendar-header\">\n    <tr class=\"owl-dt-weekdays\">\n        <th *ngFor=\"let weekday of weekdays\"\n            [attr.aria-label]=\"weekday.long\"\n            class=\"owl-dt-weekday\" scope=\"col\">\n            <span>{{weekday.short}}</span>\n        </th>\n    </tr>\n    <tr>\n        <th class=\"owl-dt-calendar-table-divider\" aria-hidden=\"true\" colspan=\"7\"></th>\n    </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body role=\"grid\"\n           [rows]=\"days\" [todayValue]=\"todayDate\"\n           [selectedValues]=\"selectedDates\"\n           [selectMode]=\"selectMode\"\n           [activeCell]=\"activeCell\"\n           (keydown)=\"handleCalendarKeydown($event)\"\n           (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n",
+                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    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    (select)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n",
                 host: {
                     '[class.owl-dt-calendar-view]': 'owlDTCalendarView'
                 },
@@ -7776,7 +7563,7 @@ OwlYearViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'owl-date-time-year-view',
                 exportAs: 'owlMonthView',
-                template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n    <tr>\n        <th class=\"owl-dt-calendar-table-divider\" aria-hidden=\"true\" colspan=\"3\"></th>\n    </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body role=\"grid\"\n           [rows]=\"months\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\n           [activeCell]=\"activeCell\"\n           [todayValue]=\"todayMonth\"\n           [selectedValues]=\"selectedMonths\"\n           [selectMode]=\"selectMode\"\n           (keydown)=\"handleCalendarKeydown($event)\"\n           (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n",
+                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    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    (select)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n",
                 host: {
                     '[class.owl-dt-calendar-view]': 'owlDTCalendarView'
                 },
@@ -8134,7 +7921,7 @@ class OwlMultiYearViewComponent {
 OwlMultiYearViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'owl-date-time-multi-year-view',
-                template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n        [disabled]=\"!previousEnabled()\" [attr.aria-label]=\"prevButtonLabel\"\n        type=\"button\" tabindex=\"0\" (click)=\"prevYearList($event)\">\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n             version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250.738 250.738\"\n             style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\"\n             width=\"100%\" height=\"100%\">\n            <path style=\"fill-rule: evenodd; clip-rule: evenodd;\" 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        </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 owl-date-time-calendar-body role=\"grid\"\n           [rows]=\"years\" [numCols]=\"3\" [cellRatio]=\"3 / 7\"\n           [activeCell]=\"activeCell\"\n           [todayValue]=\"todayYear\"\n           [selectedValues]=\"selectedYears\"\n           [selectMode]=\"selectMode\"\n           (keydown)=\"handleCalendarKeydown($event)\"\n           (select)=\"selectCalendarCell($event)\"></tbody>\n</table>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n        [disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\n        type=\"button\" tabindex=\"0\" (click)=\"nextYearList($event)\">\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n             viewBox=\"0 0 250.738 250.738\" style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\">\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\" 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        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n",
+                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    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    (select)=\"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",
                 host: {
                     '[class.owl-dt-calendar-view]': 'owlDTCalendarView',
                     '[class.owl-dt-calendar-multi-year-view]': 'owlDTCalendarMultiYearView'
@@ -8216,7 +8003,7 @@ OwlTimerBoxComponent.decorators = [
     { type: Component, args: [{
                 exportAs: 'owlDateTimeTimerBox',
                 selector: 'owl-date-time-timer-box',
-                template: "<div *ngIf=\"showDivider\" class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\" tabindex=\"-1\"\n        [disabled]=\"upBtnDisabled\"\n        [attr.aria-label]=\"upBtnAriaLabel\"\n        (click)=\"upBtnClicked()\">\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                 version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 451.847 451.846\"\n                 style=\"enable-background:new 0 0 451.847 451.846;\" xml:space=\"preserve\"\n                 width=\"100%\" height=\"100%\">\n                    <path 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                </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n    <input class=\"owl-dt-timer-input\" maxlength=\"2\"\n           [value]=\"displayValue | numberFixedLen : 2\"\n           (input)=\"handleInputChange(valueInput.value)\" #valueInput>\n    <span class=\"owl-hidden-accessible\">{{inputLabel}}</span>\n</label>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\" tabindex=\"-1\"\n        [disabled]=\"downBtnDisabled\"\n        [attr.aria-label]=\"downBtnAriaLabel\"\n        (click)=\"downBtnClicked()\">\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n    <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                 version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 451.847 451.846\"\n                 style=\"enable-background:new 0 0 451.847 451.846;\" xml:space=\"preserve\"\n                 width=\"100%\" height=\"100%\">\n                    <path 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                </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n",
+                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",
                 preserveWhitespaces: false,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 host: {
@@ -8266,7 +8053,7 @@ NumberFixedLenPipe.decorators = [
 ];
 
 /* eslint-disable @angular-eslint/no-host-metadata-property */
-const OWL_DATETIME_VALUE_ACCESSOR = {
+const OWL_DATETIME_VALUE_ACCESSOR$1 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => OwlDateTimeInlineComponent),
     multi: true
@@ -8476,13 +8263,13 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
 OwlDateTimeInlineComponent.decorators = [
     { type: Component, args: [{
                 selector: 'owl-date-time-inline',
-                template: "<owl-date-time-container></owl-date-time-container>",
+                template: "<owl-date-time-container></owl-date-time-container>\n",
                 host: {
                     '[class.owl-dt-inline]': 'owlDTInlineClass'
                 },
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 preserveWhitespaces: false,
-                providers: [OWL_DATETIME_VALUE_ACCESSOR],
+                providers: [OWL_DATETIME_VALUE_ACCESSOR$1],
                 styles: [""]
             },] }
 ];
@@ -8609,9 +8396,9 @@ const DEFAULT_DAY_OF_WEEK_NAMES = {
     short: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
 };
-const ɵ0$1 = (i) => String(i + 1);
+const ɵ0 = (i) => String(i + 1);
 /** The default date names to use if Intl API is not available. */
-const DEFAULT_DATE_NAMES = range(31, ɵ0$1);
+const DEFAULT_DATE_NAMES = range(31, ɵ0);
 /** Whether the browser supports the Intl API. */
 const SUPPORTS_INTL_API = typeof Intl !== 'undefined';
 /**
@@ -8927,14 +8714,14 @@ NativeDateTimeModule.decorators = [
                 providers: [{ provide: DateTimeAdapter, useClass: NativeDateTimeAdapter }]
             },] }
 ];
-const ɵ0 = OWL_NATIVE_DATE_TIME_FORMATS;
+const ɵ0$1 = OWL_NATIVE_DATE_TIME_FORMATS;
 class OwlNativeDateTimeModule {
 }
 OwlNativeDateTimeModule.decorators = [
     { type: NgModule, args: [{
                 imports: [NativeDateTimeModule],
                 providers: [
-                    { provide: OWL_DATE_TIME_FORMATS, useValue: ɵ0 }
+                    { provide: OWL_DATE_TIME_FORMATS, useValue: ɵ0$1 }
                 ]
             },] }
 ];
@@ -8959,7 +8746,7 @@ NgxDateTimePickerModule.decorators = [
             },] }
 ];
 
-class Option$1 {
+class Option {
     constructor(options) {
         this.label = options.label;
         this.value = options.value;
@@ -9000,7 +8787,7 @@ class AfeNgSelectComponent {
             // console.log('options', options);
             const mappedOptions = new Array();
             for (let i = 0; i < options.length; i++) {
-                mappedOptions.push(new Option$1(options[i]));
+                mappedOptions.push(new Option(options[i]));
             }
             this.subject.next(mappedOptions);
         }, (error) => {
@@ -9054,12 +8841,12 @@ class FormSchemaCompiler {
     compileFormSchema(formSchema, referencedComponents) {
         // get all referenced forms
         const refForms = this.getReferencedForms(formSchema, referencedComponents);
-        if (_.isEmpty(refForms)) {
+        if (isEmpty(refForms)) {
             return formSchema;
         }
         // get all place-holders from the form schema
         const placeHolders = this.getAllPlaceholderObjects(formSchema);
-        if (_.isEmpty(placeHolders)) {
+        if (isEmpty(placeHolders)) {
             return formSchema;
         }
         // replace all placeHolders
@@ -9067,11 +8854,11 @@ class FormSchemaCompiler {
         return formSchema;
     }
     findSchemaByName(schemaArray, nameOfSchema) {
-        if (_.isEmpty(schemaArray) || _.isEmpty(nameOfSchema)) {
+        if (isEmpty(schemaArray) || isEmpty(nameOfSchema)) {
             return;
         }
         let foundSchema = {};
-        _.each(schemaArray, (schema) => {
+        each(schemaArray, (schema) => {
             if (schema.name === nameOfSchema) {
                 foundSchema = schema;
             }
@@ -9079,11 +8866,11 @@ class FormSchemaCompiler {
         return foundSchema;
     }
     getPageInSchemaByLabel(schema, pageLabel) {
-        if (_.isEmpty(schema) || _.isEmpty(pageLabel)) {
+        if (isEmpty(schema) || isEmpty(pageLabel)) {
             return;
         }
         let foundPage = {};
-        _.each(schema.pages, (page) => {
+        each(schema.pages, (page) => {
             if (page.label === pageLabel) {
                 foundPage = page;
             }
@@ -9091,15 +8878,15 @@ class FormSchemaCompiler {
         return foundPage;
     }
     getSectionInSchemaByPageLabelBySectionLabel(schema, pageLabel, sectionLabel) {
-        if (_.isEmpty(schema) || _.isEmpty(pageLabel) || _.isEmpty(sectionLabel)) {
+        if (isEmpty(schema) || isEmpty(pageLabel) || isEmpty(sectionLabel)) {
             return;
         }
         const foundPage = this.getPageInSchemaByLabel(schema, pageLabel);
-        if (_.isEmpty(foundPage)) {
+        if (isEmpty(foundPage)) {
             return;
         }
         let foundSection = {};
-        _.each(foundPage.sections, (section) => {
+        each(foundPage.sections, (section) => {
             if (section.label === sectionLabel) {
                 foundSection = section;
             }
@@ -9107,16 +8894,16 @@ class FormSchemaCompiler {
         return foundSection;
     }
     getQuestionByIdInSchema(schema, questionId) {
-        if (_.isEmpty(schema) || _.isEmpty(questionId)) {
+        if (isEmpty(schema) || isEmpty(questionId)) {
             return;
         }
         if (Array.isArray(schema)) {
             let question;
             for (let i = 0; i < schema.length; i++) {
-                if (!_.isEmpty(schema[i])) {
+                if (!isEmpty(schema[i])) {
                     question = this.getQuestionByIdInSchema(schema[i], questionId);
                 }
-                if (!_.isEmpty(question)) {
+                if (!isEmpty(question)) {
                     break;
                 }
             }
@@ -9139,7 +8926,7 @@ class FormSchemaCompiler {
         }
     }
     getQuestionsArrayByQuestionIdInSchema(schema, questionId) {
-        if (_.isEmpty(schema) || _.isEmpty(questionId)) {
+        if (isEmpty(schema) || isEmpty(questionId)) {
             return;
         }
         return this.getQuestionsArrayByQuestionId(schema, schema, questionId);
@@ -9148,10 +8935,10 @@ class FormSchemaCompiler {
         if (Array.isArray(object)) {
             let returnedValue;
             for (let i = 0; i < object.length; i++) {
-                if (!_.isEmpty(object[i])) {
+                if (!isEmpty(object[i])) {
                     returnedValue = this.getQuestionsArrayByQuestionId(object, object[i], questionId);
                 }
-                if (!_.isEmpty(returnedValue)) {
+                if (!isEmpty(returnedValue)) {
                     break;
                 }
             }
@@ -9177,9 +8964,9 @@ class FormSchemaCompiler {
     isSchemaSubObjectExpandable(object) {
         if (typeof object === 'object') {
             const objectKeys = Object.keys(object);
-            if (_.includes(objectKeys, 'pages') ||
-                _.includes(objectKeys, 'sections') ||
-                _.includes(objectKeys, 'questions')) {
+            if (includes(objectKeys, 'pages') ||
+                includes(objectKeys, 'sections') ||
+                includes(objectKeys, 'questions')) {
                 return true;
             }
         }
@@ -9194,18 +8981,18 @@ class FormSchemaCompiler {
         return referencedObjects;
     }
     extractPlaceholderObjects(subSchema, objectsArray) {
-        if (_.isEmpty(subSchema)) {
+        if (isEmpty(subSchema)) {
             return;
         }
         if (Array.isArray(subSchema)) {
             for (let i = 0; i < subSchema.length; i++) {
-                if (!_.isEmpty(subSchema[i])) {
+                if (!isEmpty(subSchema[i])) {
                     this.extractPlaceholderObjects(subSchema[i], objectsArray);
                 }
             }
         }
         else if (typeof subSchema === 'object') {
-            if (!_.isEmpty(subSchema.reference)) {
+            if (!isEmpty(subSchema.reference)) {
                 objectsArray.push(subSchema);
             }
             else if (this.isSchemaSubObjectExpandable(subSchema)) {
@@ -9216,16 +9003,16 @@ class FormSchemaCompiler {
     }
     fillPlaceholderObject(placeHolderObject, referenceObject) {
         for (const member in referenceObject) {
-            if (_.isEmpty(placeHolderObject[member])) {
+            if (isEmpty(placeHolderObject[member])) {
                 placeHolderObject[member] = referenceObject[member];
             }
         }
         return placeHolderObject;
     }
     replaceAllPlaceholdersWithActualObjects(keyValReferencedForms, placeHoldersArray) {
-        _.each(placeHoldersArray, (placeHolder) => {
+        each(placeHoldersArray, (placeHolder) => {
             const referencedObject = this.getReferencedObject(placeHolder.reference, keyValReferencedForms);
-            if (_.isEmpty(referencedObject)) {
+            if (isEmpty(referencedObject)) {
                 console.error('Form compile: Error finding referenced object', placeHolder.reference);
             }
             else {
@@ -9245,7 +9032,7 @@ class FormSchemaCompiler {
     }
     removeExcludedQuestionsFromPlaceholder(placeHolder) {
         if (Array.isArray(placeHolder.reference.excludeQuestions)) {
-            _.each(placeHolder.reference.excludeQuestions, (excludedQuestionId) => {
+            each(placeHolder.reference.excludeQuestions, (excludedQuestionId) => {
                 const questionsArray = this.getQuestionsArrayByQuestionIdInSchema(placeHolder, excludedQuestionId);
                 if (!Array.isArray(questionsArray)) {
                     return;
@@ -9257,32 +9044,32 @@ class FormSchemaCompiler {
         return placeHolder;
     }
     getReferencedObject(referenceData, keyValReferencedForms) {
-        if (_.isEmpty(referenceData.form)) {
+        if (isEmpty(referenceData.form)) {
             console.error('Form compile: reference missing form attribute', referenceData);
             return;
         }
-        if (_.isEmpty(keyValReferencedForms[referenceData.form])) {
+        if (isEmpty(keyValReferencedForms[referenceData.form])) {
             console.error('Form compile: referenced form alias not found', referenceData);
             return;
         }
-        if (!_.isEmpty(referenceData.questionId)) {
+        if (!isEmpty(referenceData.questionId)) {
             return this.getQuestionByIdInSchema(keyValReferencedForms[referenceData.form], referenceData.questionId);
         }
-        if (!_.isEmpty(referenceData.page) && !_.isEmpty(referenceData.section)) {
+        if (!isEmpty(referenceData.page) && !isEmpty(referenceData.section)) {
             return this.getSectionInSchemaByPageLabelBySectionLabel(keyValReferencedForms[referenceData.form], referenceData.page, referenceData.section);
         }
-        if (!_.isEmpty(referenceData.page)) {
+        if (!isEmpty(referenceData.page)) {
             return this.getPageInSchemaByLabel(keyValReferencedForms[referenceData.form], referenceData.page);
         }
         console.error('Form compile: Unsupported reference type', referenceData.reference);
     }
     getReferencedForms(formSchema, formSchemasLookupArray) {
         const referencedForms = formSchema.referencedForms;
-        if (_.isEmpty(referencedForms)) {
+        if (isEmpty(referencedForms)) {
             return;
         }
         const keyValReferencedForms = {};
-        _.each(referencedForms, (reference) => {
+        each(referencedForms, (reference) => {
             keyValReferencedForms[reference.alias] = this.findSchemaByName(formSchemasLookupArray, reference.formName);
         });
         return keyValReferencedForms;
@@ -9440,7 +9227,7 @@ class DummyDataSource {
     resolveSelectedValue(value) {
         let selectOptions = this.sampleData();
         selectOptions = selectOptions.map(function (obj) {
-            const option = new Option$1({
+            const option = new Option({
                 label: obj.label,
                 value: obj.concept
             });
@@ -9465,7 +9252,7 @@ class DummyDataSource {
     searchOptions(searchText) {
         let selectOptions = this.sampleData();
         selectOptions = selectOptions.map(function (obj) {
-            const option = new Option$1({
+            const option = new Option({
                 label: obj.label,
                 value: obj.concept
             });
@@ -9556,13 +9343,13 @@ class HistoricalEncounterDataService {
                 return encStore.data[index];
             }
         };
-        if (___default.isArray(encounters)) {
+        if (_.isArray(encounters)) {
             const group = [];
-            ___default.each(encounters, (encounter) => {
+            _.each(encounters, (encounter) => {
                 group.push(this._transformEncounter(encounter));
             });
             // Sort them in reverse chronological order
-            encStore.data = ___default.sortBy(group, 'encounterDatetime').reverse();
+            encStore.data = _.sortBy(group, 'encounterDatetime').reverse();
         }
         else {
             // Assume a single openmrs rest encounter object.
@@ -9582,24 +9369,24 @@ class HistoricalEncounterDataService {
         if (answers.length > 0) {
             return {
                 value: answers[0],
-                valueDate: moment(object.encounterDatetime).format('ll')
+                valueDate: moment(object.encounterDatetime).format('YYYY-MM-DDTHH:mm:ss')
             };
         }
     }
     getAllValues(path, object, answers) {
-        if (___default.isNil(object)) {
+        if (_.isNil(object)) {
             return;
         }
         if (path.length <= 1) {
-            if (!___default.isNil(object[path[0]])) {
+            if (!_.isNil(object[path[0]])) {
                 answers.push(object[path[0]]);
             }
             return;
         }
         const newpath = path.splice(1);
         const key = path[0];
-        if (___default.isArray(object[key]) && object[key].length > 0) {
-            ___default.each(object[key], (childObject) => {
+        if (_.isArray(object[key]) && object[key].length > 0) {
+            _.each(object[key], (childObject) => {
                 this.getAllValues(newpath.slice(0), childObject, answers);
             });
         }
@@ -9608,7 +9395,7 @@ class HistoricalEncounterDataService {
         }
     }
     _transformEncounter(encounter) {
-        if (___default.isNil(encounter)) {
+        if (_.isNil(encounter)) {
             return;
         }
         // Transform encounter Level details to key value pairs.
@@ -9635,7 +9422,7 @@ class HistoricalEncounterDataService {
         if (encounter.obs) {
             const processedObs = this._transformObs(encounter.obs);
             // add in individual processed obs to prevEncounter
-            ___default.extend(prevEncounter, processedObs);
+            _.extend(prevEncounter, processedObs);
         }
         return prevEncounter;
     }
@@ -9644,19 +9431,19 @@ class HistoricalEncounterDataService {
             return null;
         }
         const obsRep = {};
-        if (___default.isArray(obs)) {
-            ___default.each(obs, (singleObs) => {
+        if (_.isArray(obs)) {
+            _.each(obs, (singleObs) => {
                 this._augumentObs(obsRep, this._transformObs(singleObs));
             });
             return obsRep;
         }
         else if (obs.groupMembers) {
             const group = {};
-            ___default.each(obs.groupMembers, (member) => {
+            _.each(obs.groupMembers, (member) => {
                 this._augumentObs(group, this._transformObs(member));
             });
             // Handle already existing data
-            if (obsRep[obs.concept.uuid] && ___default.isArray(obsRep[obs.concept.uuid])) {
+            if (obsRep[obs.concept.uuid] && _.isArray(obsRep[obs.concept.uuid])) {
                 obsRep[obs.concept.uuid].push(group);
             }
             else {
@@ -9676,14 +9463,14 @@ class HistoricalEncounterDataService {
     }
     _augumentObs(existing, toAdd) {
         for (const key in toAdd) {
-            if (___default.has(existing, key)) {
+            if (_.has(existing, key)) {
                 // check if not an array yet
-                if (!___default.isArray(existing[key])) {
+                if (!_.isArray(existing[key])) {
                     const temp = existing[key];
                     existing[key] = [temp];
                 }
                 // Check whether the incoming is array (for group members)
-                if (___default.isArray(toAdd[key])) {
+                if (_.isArray(toAdd[key])) {
                     Array.prototype.push.apply(existing[key], toAdd[key]);
                 }
                 else {
@@ -9739,6 +9526,7 @@ class QuestionFactory {
     constructor() {
         this.dataSources = {};
         this.historicalHelperService = new HistoricalHelperService();
+        this.quetionIndex = 0;
     }
     createQuestionModel(formSchema, form) {
         if (form) {
@@ -9749,7 +9537,9 @@ class QuestionFactory {
     }
     toSelectQuestion(schemaQuestion) {
         const question = new SelectQuestion({ options: [], type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.componentConfigs = schemaQuestion.componentConfigs || [];
         question.options = schemaQuestion.questionOptions.answers.map(function (obj) {
@@ -9784,7 +9574,9 @@ class QuestionFactory {
             type: '',
             key: ''
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'number';
         question.placeholder = schemaQuestion.questionOptions.placeholder;
@@ -9810,7 +9602,9 @@ class QuestionFactory {
             type: '',
             key: ''
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'number';
         question.placeholder = schemaQuestion.questionOptions.placeholder || '';
@@ -9834,6 +9628,7 @@ class QuestionFactory {
             return this.toEncounterDatetimeQuestion(schemaQuestion);
         }
         const question = new DateQuestion({ type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.renderingType = 'date';
         question.validators = this.addValidators(schemaQuestion);
         question.extras = schemaQuestion;
@@ -9855,8 +9650,11 @@ class QuestionFactory {
         return question;
     }
     toEncounterDatetimeQuestion(schemaQuestion) {
+        var _a;
         const question = new DateQuestion({ type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.renderingType = 'date';
         question.key = schemaQuestion.id;
         question.validators = this.addValidators(schemaQuestion);
@@ -9871,6 +9669,7 @@ class QuestionFactory {
         };
         question.showTime = true;
         question.componentConfigs = schemaQuestion.componentConfigs || [];
+        question.datePickerFormat = (_a = schemaQuestion.datePickerFormat) !== null && _a !== void 0 ? _a : 'calendar';
         this.copyProperties(mappings, schemaQuestion, question);
         this.addDisableOrHideProperty(schemaQuestion, question);
         this.addAlertProperty(schemaQuestion, question);
@@ -9880,9 +9679,12 @@ class QuestionFactory {
     }
     toCheckBoxQuestion(schemaQuestion) {
         const question = new CheckBoxQuestion({ options: [], type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.extras = schemaQuestion;
+        question.orientation = schemaQuestion.questionOptions.orientation;
         question.options = schemaQuestion.questionOptions.answers.map((obj) => {
             return {
                 label: obj.label,
@@ -9911,7 +9713,9 @@ class QuestionFactory {
             type: '',
             key: ''
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.options = schemaQuestion.questionOptions.answers.map(function (obj) {
             return {
@@ -9943,7 +9747,9 @@ class QuestionFactory {
             type: '',
             key: ''
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.placeholder = schemaQuestion.questionOptions.placeholder;
         question.isExpanded = schemaQuestion.isExpanded;
@@ -9970,7 +9776,9 @@ class QuestionFactory {
             type: '',
             key: ''
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'text';
         question.placeholder = schemaQuestion.questionOptions.placeholder;
@@ -9992,7 +9800,9 @@ class QuestionFactory {
     }
     toFileUploadQuestion(schemaQuestion) {
         const question = new FileUploadQuestion({ type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'file';
         question.dataSource = 'file';
@@ -10013,7 +9823,9 @@ class QuestionFactory {
     }
     toDrugQuestion(schemaQuestion) {
         const question = new SelectQuestion({ options: [], type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10034,7 +9846,9 @@ class QuestionFactory {
     }
     toProblemQuestion(schemaQuestion) {
         const question = new SelectQuestion({ options: [], type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10055,7 +9869,9 @@ class QuestionFactory {
     }
     toConceptAnswerSelect(schemaQuestion) {
         const question = new SelectQuestion({ options: [], type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10084,7 +9900,9 @@ class QuestionFactory {
             type: '',
             key: ''
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.questions = this.getChildrenQuestionModels(schemaQuestion.questions);
         question.key = schemaQuestion.id;
         question.validators = this.addValidators(schemaQuestion);
@@ -10110,7 +9928,9 @@ class QuestionFactory {
     }
     toGroupQuestion(schemaQuestion) {
         const question = new QuestionGroup({ questions: [], type: '', key: '' });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.questions = this.getChildrenQuestionModels(schemaQuestion.questions);
         question.key = schemaQuestion.id;
         question.validators = this.addValidators(schemaQuestion);
@@ -10131,6 +9951,7 @@ class QuestionFactory {
     toPageQuestion(schemaQuestion) {
         const question = new QuestionGroup({ questions: [], type: '', key: '' });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.label;
         question.renderingType = 'page';
         question.controlType = AfeControlType.None;
@@ -10145,6 +9966,7 @@ class QuestionFactory {
         const question = new QuestionGroup({ questions: [], type: '', key: '' });
         question.label = schemaQuestion.label;
         question.key = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.renderingType = 'form';
         question.controlType = AfeControlType.AfeFormGroup;
         question.extras = schemaQuestion;
@@ -10158,6 +9980,7 @@ class QuestionFactory {
     toSectionQuestion(schemaQuestion) {
         const question = new QuestionGroup({ questions: [], type: '', key: '' });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.label;
         question.renderingType = 'section';
         question.controlType = AfeControlType.None;
@@ -10174,7 +9997,9 @@ class QuestionFactory {
             searchFunction: function () { },
             resolveFunction: function () { }
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10202,7 +10027,9 @@ class QuestionFactory {
             searchFunction: function () { },
             resolveFunction: function () { }
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10235,7 +10062,9 @@ class QuestionFactory {
             searchFunction: function () { },
             resolveFunction: function () { }
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = schemaQuestion.type;
         question.renderingType = 'remote-select';
@@ -10265,7 +10094,9 @@ class QuestionFactory {
             label: '',
             rendering: ''
         });
+        question.questionIndex = this.quetionIndex;
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.validators = this.addValidators(schemaQuestion);
         question.extras = schemaQuestion;
@@ -10328,6 +10159,7 @@ class QuestionFactory {
         return children;
     }
     toModel(schema, renderType) {
+        this.quetionIndex++;
         if (renderType === 'ui-select-extended') {
             renderType = schema.type;
         }
@@ -10400,6 +10232,7 @@ class QuestionFactory {
         const converted = {};
         converted.type = 'complex-obs';
         converted.label = schemaQuestion.label;
+        converted.prefix = schemaQuestion.prefix;
         converted.id = 'complex_' + schemaQuestion.id;
         converted.questionOptions = {};
         converted.questionOptions.concept = schemaQuestion.questionOptions.concept;
@@ -10438,7 +10271,7 @@ class QuestionFactory {
         const validators = [];
         if (schemaQuestion.validators) {
             // TODO - add more validator types
-            ___default.forEach(schemaQuestion.validators, (validator) => {
+            _.forEach(schemaQuestion.validators, (validator) => {
                 switch (validator.type) {
                     case 'date':
                         validators.push(new DateValidationModel(validator));
@@ -10581,6 +10414,7 @@ class FormFactory {
         this.controlService = controlService;
         this.questionFactroy = questionFactroy;
         this.controlRelationsFactory = controlRelationsFactory;
+        this.nodeIndex = 0;
         this.hd = {
             getValue: () => {
                 return 20;
@@ -10622,6 +10456,8 @@ class FormFactory {
         else {
             node = this.createLeafNode(question, parentNode, parentControl, form);
         }
+        node.nodeIndex = this.nodeIndex;
+        this.nodeIndex++;
         return node;
     }
     createLeafNode(question, parentNode, parentControl, form) {
@@ -10699,15 +10535,19 @@ FormFactory.ctorParameters = () => [
 ];
 
 class ObsAdapterHelper {
-    constructor() { }
+    constructor() {
+        this.formFieldNamespace = 'O3';
+        this.obsIndex = 0;
+    }
     findObsAnswerToQuestion(node, obsArray) {
+        // Find and Order the obs based on form_namespace_and_path
         const found = [];
         if (!this.isObsNode(node)) {
             return found;
         }
         if (node instanceof LeafNode ||
             (node instanceof GroupNode && node.question.extras.type === 'complex-obs')) {
-            ___default.each(obsArray, (item) => {
+            _.each(obsArray, (item) => {
                 if (item.concept &&
                     item.concept.uuid === node.question.extras.questionOptions.concept) {
                     found.push(item);
@@ -10718,7 +10558,7 @@ class ObsAdapterHelper {
         // At this point the node is either a group or a repeating node
         const childQuestionsUuids = this.getChildQuestionsConceptUuids(node);
         if (childQuestionsUuids.length > 0) {
-            ___default.each(obsArray, (obs) => {
+            _.each(obsArray, (obs) => {
                 if (obs.concept &&
                     obs.concept.uuid === node.question.extras.questionOptions.concept &&
                     Array.isArray(obs.groupMembers) &&
@@ -10732,7 +10572,7 @@ class ObsAdapterHelper {
     getChildQuestionsConceptUuids(node) {
         const found = [];
         if (node.question.extras && node.question.extras.questions) {
-            ___default.each(node.question.extras.questions, (question) => {
+            _.each(node.question.extras.questions, (question) => {
                 if (question.questionOptions && question.questionOptions.concept) {
                     found.push(question.questionOptions.concept);
                 }
@@ -10743,7 +10583,7 @@ class ObsAdapterHelper {
     getGroupMembersConceptUuids(obsWithGroupMembers) {
         const found = [];
         if (Array.isArray(obsWithGroupMembers.groupMembers)) {
-            ___default.each(obsWithGroupMembers.groupMembers, (member) => {
+            _.each(obsWithGroupMembers.groupMembers, (member) => {
                 found.push(member.concept.uuid);
             });
         }
@@ -10780,6 +10620,7 @@ class ObsAdapterHelper {
     }
     setMultiselectObsNodeValue(node, obs) {
         if (node && obs.length > 0) {
+            obs = obs.sort(this.comparePath);
             node.initialValue = obs;
             const obsUuids = [];
             for (const m of obs) {
@@ -10825,6 +10666,7 @@ class ObsAdapterHelper {
     setRepeatingGroupObsNodeValue(node, obs) {
         if (node && obs.length > 0) {
             const arrayNode = node;
+            obs = obs.sort(this.comparePath);
             arrayNode.initialValue = obs;
             for (let i = 0; i < obs.length; i++) {
                 const createdNode = arrayNode.createChildNode();
@@ -10832,6 +10674,12 @@ class ObsAdapterHelper {
             }
         }
     }
+    comparePath(first, second) {
+        if (!first || !second) {
+            return -1;
+        }
+        return Number(first.formFieldPath) - Number(second.formFieldPath);
+    }
     setNodeValue(node, obs) {
         switch (this.getObsNodeType(node)) {
             case 'unknown':
@@ -10956,6 +10804,13 @@ class ObsAdapterHelper {
             delete obs.concept;
             obs.uuid = node.initialValue.uuid;
         }
+        return this.addFieldNameSpaceandPath(node, obs);
+    }
+    addFieldNameSpaceandPath(node, obs) {
+        var _a;
+        obs.formFieldNamespace = this.formFieldNamespace;
+        obs.formFieldPath = `${(_a = node === null || node === void 0 ? void 0 : node.question) === null || _a === void 0 ? void 0 : _a.questionIndex}${node === null || node === void 0 ? void 0 : node.nodeIndex}${this.obsIndex}`;
+        this.obsIndex++;
         return obs;
     }
     getComplexObsPayload(node) {
@@ -10996,7 +10851,7 @@ class ObsAdapterHelper {
         const existingUuids = [];
         // add voided obs i.e. deleted options
         if (Array.isArray(node.initialValue)) {
-            ___default.each(node.initialValue, (item) => {
+            _.each(node.initialValue, (item) => {
                 existingUuids.push(item.value.uuid);
                 if (Array.isArray(node.control.value)) {
                     if (node.control.value.indexOf(item.value.uuid) < 0) {
@@ -11017,12 +10872,12 @@ class ObsAdapterHelper {
         }
         // add new obs i.e they didn't exisit originally
         if (Array.isArray(node.control.value)) {
-            ___default.each(node.control.value, (item) => {
+            _.each(node.control.value, (item) => {
                 if (existingUuids.indexOf(item) < 0) {
-                    payload.push({
+                    payload.push(this.addFieldNameSpaceandPath(node, {
                         concept: node.question.extras.questionOptions.concept,
                         value: item
-                    });
+                    }));
                 }
             });
         }
@@ -11031,7 +10886,7 @@ class ObsAdapterHelper {
     getGroupPayload(node) {
         const nodeAsGroup = node;
         let childrenPayload = [];
-        ___default.each(nodeAsGroup.children, (child) => {
+        _.each(nodeAsGroup.children, (child) => {
             const payload = this.getObsNodePayload(child);
             if (payload.length > 0) {
                 childrenPayload = childrenPayload.concat(payload);
@@ -11050,13 +10905,14 @@ class ObsAdapterHelper {
             groupPayload.concept =
                 nodeAsGroup.question.extras.questionOptions.concept;
         }
+        this.addFieldNameSpaceandPath(node, groupPayload);
         return groupPayload;
     }
     getRepeatingGroupPayload(node) {
         const nodeAsArray = node;
         let childrenPayload = [];
         const groupsUuidsAfterEditting = [];
-        ___default.each(nodeAsArray.children, (child) => {
+        _.each(nodeAsArray.children, (child) => {
             const payload = this.getObsNodePayload(child);
             if (payload.length > 0) {
                 childrenPayload = childrenPayload.concat(payload);
@@ -11068,7 +10924,7 @@ class ObsAdapterHelper {
         // void deleted groups
         // console.log('groupsUuidsAfterEditting', groupsUuidsAfterEditting);
         if (nodeAsArray.initialValue && Array.isArray(nodeAsArray.initialValue)) {
-            ___default.each(nodeAsArray.initialValue, (obs) => {
+            _.each(nodeAsArray.initialValue, (obs) => {
                 if (groupsUuidsAfterEditting.indexOf(obs.uuid) < 0) {
                     const voidedGroup = {
                         uuid: obs.uuid,
@@ -11230,7 +11086,7 @@ class ObsValueAdapter {
                     node.question.extras &&
                     node.question.renderingType === 'group') ||
                     forcegroup) {
-                    const groupObs = _.find(payload, (o) => {
+                    const groupObs = find(payload, (o) => {
                         return (o.concept.uuid === node.question.extras.questionOptions.concept &&
                             o.groupMembers);
                     });
@@ -11270,7 +11126,7 @@ class ObsValueAdapter {
             node.question.extras.questionOptions.rendering !== 'multiCheckbox') ||
             node.question.extras.questionOptions.rendering !== 'checkbox' ||
             node.question.extras.questionOptions.rendering !== 'multi-select') {
-            const obs = _.find(payload, (o) => {
+            const obs = find(payload, (o) => {
                 return o.concept.uuid === node.question.extras.questionOptions.concept;
             });
             if (obs) {
@@ -11286,7 +11142,7 @@ class ObsValueAdapter {
             }
         }
         else {
-            const multiObs = _.filter(payload, (o) => {
+            const multiObs = filter(payload, (o) => {
                 return o.concept.uuid === node.question.extras.questionOptions.concept;
             });
             if (multiObs && multiObs.length > 0) {
@@ -11313,7 +11169,7 @@ class ObsValueAdapter {
         // set the usual obs value
         this.setObsValue(valueField, payload);
         // set the obs date
-        const obs = _.find(payload, (o) => {
+        const obs = find(payload, (o) => {
             return o.concept.uuid === node.question.extras.questionOptions.concept;
         });
         if (obs) {
@@ -11330,7 +11186,7 @@ class ObsValueAdapter {
         return values;
     }
     setRepeatingGroupValues(node, payload) {
-        const groupRepeatingObs = _.filter(payload, (o) => {
+        const groupRepeatingObs = filter(payload, (o) => {
             const found = o.concept.uuid === node.question.extras.questionOptions.concept;
             let intersect = false;
             if (found && o.groupMembers) {
@@ -11340,7 +11196,7 @@ class ObsValueAdapter {
                 const schemaQuestions = node.question.questions.map((a) => {
                     return a.extras.questionOptions.concept;
                 });
-                intersect = _.intersection(obs, schemaQuestions).length > 0;
+                intersect = intersection(obs, schemaQuestions).length > 0;
             }
             return found && intersect;
         });
@@ -11390,7 +11246,7 @@ class ObsValueAdapter {
         if (obs.question &&
             obs.question.extras &&
             obs.question.extras.questionOptions.rendering === 'group') {
-            const members = _.filter(this.getObsPayload(obs.groupMembers), (o) => {
+            const members = filter(this.getObsPayload(obs.groupMembers), (o) => {
                 return o.value !== '';
             });
             const mappedMembers = members.map((a) => {
@@ -11439,7 +11295,7 @@ class ObsValueAdapter {
         const current = {};
         for (const key in value) {
             if (value.hasOwnProperty(key)) {
-                const groupQuestion = _.find(node.question.questions, {
+                const groupQuestion = find(node.question.questions, {
                     key: key
                 });
                 const modelValue = value[key];
@@ -11491,7 +11347,7 @@ class ObsValueAdapter {
     leftOuterJoinArrays(first, second) {
         const unique = first.filter(function (obj) {
             return !second.some(function (obj2) {
-                return _.isEqual(obj.value, obj2.value);
+                return isEqual(obj.value, obj2.value);
             });
         });
         return unique;
@@ -11798,7 +11654,7 @@ class OrderValueAdapter {
                     dateVoided: o.auditInfo.dateVoided
                 };
             });
-            return (existingOrders = _.filter(existingOrders, (order) => {
+            return (existingOrders = filter(existingOrders, (order) => {
                 if (order.voided === true || order.dateVoided) {
                     return false;
                 }
@@ -12261,7 +12117,7 @@ class RemoteSelectComponent {
 RemoteSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ngx-remote-select',
-                template: "<div>\n  <ng-select [ngClass]=\"{'afe-custom': theme === 'light'}\" [disabled]=\"disabled\" [items]=\"remoteOptions$ | async\" bindLabel=\"label\" bindValue=\"value\" [multiple]=\"false\"\n    [hideSelected]=\"true\"  [compareWith]=\"compareItems\" [trackByFn]=\"trackByFn\" [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\" [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"  (ngModelChange)=\"selected($event)\">\n  </ng-select>\n</div>",
+                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",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -12401,7 +12257,7 @@ class AppointmentsOverviewComponent {
 AppointmentsOverviewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'appointments-overview',
-                template: "<div *ngIf=\"showAppointments\" class=\"container\">\n  <div *ngIf=\"loadingAppointments\">\n    <span *ngIf=\"!appointmentsLoaded && errorLoadingAppointments\">Error checking appointments</span>\n    <div *ngIf=\"loadingAppointments\" class=\"cds--inline-loading\" aria-live=\"assertive\">\n      <div class=\"cds--inline-loading__animation\">\n        <div aria-atomic=\"true\" aria-labelledby=\"loading-id-2\" aria-live=\"assertive\"\n          class=\"cds--loading cds--loading--small\">\n          <label id=\"loading-id-2\" class=\"cds--visually-hidden\">Active loading indicator</label><svg\n            class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n            <title>Active loading indicator</title>\n            <circle class=\"cds--loading__background\" cx=\"50%\" cy=\"50%\" r=\"44\"></circle>\n            <circle class=\"cds--loading__stroke\" cx=\"50%\" cy=\"50%\" r=\"44\"></circle>\n          </svg>\n        </div>\n      </div>\n      <div class=\"cds--inline-loading__text\">Loading...</div>\n    </div>\n  </div>\n\n  <div class=\"cds--data-table-content\" *ngIf=\"appointmentsLoaded && !errorLoadingAppointments\">\n    <table class=\"cds--data-table cds--data-table--no-border\">\n      <thead>\n        <tr>\n          <th *ngFor=\"let appointment of appointments\" scope=\"col\" [ngClass]=\"{ active: appointment.date === today }\">\n            {{ appointment.date }}\n          </th>\n        </tr>\n      </thead>\n      <tbody aria-live=\"polite\">\n        <tr>\n          <td *ngFor=\"let appointment of appointments\" [ngClass]=\"{ active: appointment.date === today }\">\n            {{ appointment.count }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>",
+                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}"]
             },] }
 ];
@@ -12470,7 +12326,7 @@ class CheckboxControlComponent {
 CheckboxControlComponent.decorators = [
     { type: Component, args: [{
                 selector: 'checkbox',
-                template: "<fieldset class=\"cds--fieldset\">\n  <div class=\"cds--form-item cds--checkbox-wrapper\" *ngFor=\"let option of options; let i = index\">\n    <input type=\"checkbox\" class=\"cds--checkbox\" [id]=\"i + 'id'\" [checked]=\"option.checked\" (change)=\"selectOpt(option, $event)\" [value]=\"option.value\">\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",
+                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",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -12481,6 +12337,7 @@ CheckboxControlComponent.decorators = [
             },] }
 ];
 CheckboxControlComponent.propDecorators = {
+    id: [{ type: Input }],
     options: [{ type: Input }],
     selected: [{ type: Input }]
 };
@@ -12506,17 +12363,8 @@ class TabComponent {
 TabComponent.decorators = [
     { type: Component, args: [{
                 selector: 'ngx-tab',
-                template: `
-    <div *ngIf="active" class="pane" [ngClass]="customPaneClass">
-      <h4>{{ tabTitle }}</h4>
-      <div *ngIf="bypassDOM">
-        <ng-container [ngTemplateOutlet]="template"></ng-container>
-      </div>
-      <div *ngIf="!bypassDOM">
-        <ng-content></ng-content>
-      </div>
-    </div>
-  `
+                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}"]
             },] }
 ];
 TabComponent.propDecorators = {
@@ -12529,7 +12377,7 @@ TabComponent.propDecorators = {
     template: [{ type: ContentChild, args: [TemplateRef,] }]
 };
 
-class TabsetComponent {
+class TabSetComponent {
     constructor() {
         this.disableStyle = false;
         this.customNavClass = '';
@@ -12578,14 +12426,14 @@ class TabsetComponent {
         }
     }
 }
-TabsetComponent.decorators = [
+TabSetComponent.decorators = [
     { type: Component, args: [{
-                selector: 'ngx-tabset',
-                template: "<div class=\"tab-container\">\n  <div class=\"tab\">\n    <button hover-class=\"hover\" class=\"tablinks completed\" *ngFor=\"let tab of tabs\" (click)=\"selectTab(tab)\"\n      [class]=\"getStatusClasses(tab.active,tab.disabled)\">\n      <span>{{ tab.tabTitle }}</span>\n    </button>\n  </div>\n\n\n  <div id=\"tab\" class=\"tabcontent\">\n    <ng-content></ng-content>\n  </div>\n\n</div>",
-                styles: [".tab-container{overflow-x:hidden;display:flex;width:100%}.tab{width:219px;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}@media screen and (max-width:768px){.tab button{height:3rem;border-bottom:.0125rem solid var(--open-mrs-background-gray);width:203px}}.tab button.active.hover,.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-weight:400}.tab button.active,.tab button.completed{font-size:.875rem;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-weight:600}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;line-height:1.43;color:var(--color-gray-100)}.tab button.enabled,.tab button.error{font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;letter-spacing:.16px}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);line-height:1.29;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-weight:400;line-height:1.43;color:var(--gray-gray-30)}.tab button.active.error,.tab button.disabled{font-size:.875rem;font-stretch:normal;font-style:normal;letter-spacing:.16px}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-weight:600;line-height:1.29;color:#da1e28}.tabcontent{width:100%;padding:0 .625rem;margin-left:230px}"]
+                selector: 'ngx-tab-set',
+                template: "<div class=\"tab-container\">\n  <div class=\"tab\">\n    <button\n      hover-class=\"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,.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-weight:400}.tab button.active,.tab button.completed{font-size:.875rem;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-weight:600}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;line-height:1.43;color:var(--color-gray-100)}.tab button.enabled,.tab button.error{font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;letter-spacing:.16px}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);line-height:1.29;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-weight:400;line-height:1.43;color:var(--gray-gray-30)}.tab button.active.error,.tab button.disabled{font-size:.875rem;font-stretch:normal;font-style:normal;letter-spacing:.16px}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-weight:600;line-height:1.29;color:#da1e28}.tab-content{width:100%;margin-left:10rem}"]
             },] }
 ];
-TabsetComponent.propDecorators = {
+TabSetComponent.propDecorators = {
     tabs: [{ type: ContentChildren, args: [TabComponent,] }],
     disableStyle: [{ type: Input }],
     customNavClass: [{ type: Input }],
@@ -12641,8 +12489,8 @@ class NgxTabSetModule {
 }
 NgxTabSetModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [TabComponent, TabsetComponent, HoverClassDirective],
-                exports: [TabComponent, TabsetComponent],
+                declarations: [TabComponent, TabSetComponent, HoverClassDirective],
+                exports: [TabComponent, TabSetComponent],
                 imports: [CommonModule]
             },] }
 ];
@@ -12939,18 +12787,18 @@ Select.propDecorators = {
 };
 
 /* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/directive-class-suffix */
-class Option {
+class Option$1 {
     constructor() {
         this.inputClass = 'cds--select-option';
     }
 }
-Option.decorators = [
+Option$1.decorators = [
     { type: Directive, args: [{
                 // eslint-disable-next-line
                 selector: 'option'
             },] }
 ];
-Option.propDecorators = {
+Option$1.propDecorators = {
     inputClass: [{ type: HostBinding, args: ['class',] }]
 };
 
@@ -12975,8 +12823,8 @@ class SelectModule {
 }
 SelectModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [Select, Option, OptGroup],
-                exports: [Select, Option, OptGroup],
+                declarations: [Select, Option$1, OptGroup],
+                exports: [Select, Option$1, OptGroup],
                 imports: [CommonModule, FormsModule]
             },] }
 ];
@@ -13314,7 +13162,7 @@ class CustomControlWrapperComponent {
 CustomControlWrapperComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-custom-control-wrapper',
-                template: "<div>\n    <ng-template #error>Loading failed...</ng-template>\n    <ng-template #loading>Loading...</ng-template>\n    <ax-lazy-element\n        *axLazyElementDynamic=\"customControlConfig.tag, url: customControlConfig.url; module: true; errorTemplate: error; loadingTemplate: loading\"\n        [question]=\"question\" [value]=\"value\" [disabled]='disabled' (on-change)=\"onValueChange($event)\" [config]=\"config\">\n    </ax-lazy-element>\n</div>",
+                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",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -13349,7 +13197,7 @@ class CustomComponentWrapperComponent {
 CustomComponentWrapperComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-custom-component-wrapper',
-                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=\"componentConfig.tag, url: componentConfig.url; module: true; errorTemplate: error; loadingTemplate: loading\"\n            [config]=\"componentConfig\" [dark]='dark'>\n        </ax-lazy-element>\n    </div>\n</div>"
+                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"
             },] }
 ];
 CustomComponentWrapperComponent.propDecorators = {
@@ -13457,5 +13305,5 @@ var RenderingType;
  * Generated bundle index. Do not edit.
  */
 
-export { AfeControlType, AfeFormArray, AfeFormControl, AfeFormGroup, CheckBoxQuestion, ConditionalValidationModel, ControlRelationsFactory, DataSources, DateQuestion, DateTimePickerModule, DateValidationModel, EncounterAdapter, FileUploadQuestion, Form, FormControlService, FormEntryModule, FormErrorsService, FormFactory, FormSchemaCompiler, HistoricalEncounterDataService, JsExpressionHelper, JsExpressionValidationModel, MaxValidationModel, MinValidationModel, MultiSelectQuestion, NestedQuestion, NgxDateTimePickerModule, ObsAdapterHelper, ObsValueAdapter, Option$1 as Option, OrderValueAdapter, Pair, PersonAttribuAdapter, QuestionBase, QuestionFactory, QuestionGroup, RenderingType, RepeatingQuestion, SelectQuestion, TestOrderQuestion, TextAreaInputQuestion, TextInputQuestion, UiSelectQuestion, ValidationFactory, ValidationModel, SelectModule as ɵa, Select as ɵb, OWL_DIALOG_SCROLL_STRATEGY as ɵba, OWL_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY as ɵbb, OWL_DIALOG_SCROLL_STRATEGY_PROVIDER as ɵbc, OWL_DIALOG_DEFAULT_OPTIONS as ɵbd, OwlDialogService as ɵbe, OwlDialogConfig as ɵbf, OwlCalendarComponent as ɵbg, OWL_DATE_TIME_FORMATS as ɵbi, OwlDateTimeIntl as ɵbj, OWL_DATE_TIME_LOCALE as ɵbk, OWL_DATE_TIME_LOCALE_FACTORY as ɵbl, DateTimeAdapter as ɵbm, OwlTimerComponent as ɵbn, OwlDateTimeTriggerDirective as ɵbo, OWL_DATETIME_VALUE_ACCESSOR$1 as ɵbp, OWL_DATETIME_VALIDATORS as ɵbq, OwlDateTimeInputDirective as ɵbr, OWL_DTPICKER_SCROLL_STRATEGY as ɵbs, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY as ɵbt, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER as ɵbu, OwlDateTimeComponent as ɵbv, OwlDateTime as ɵbw, OWL_DATETIME_VALUE_ACCESSOR as ɵbx, OwlDateTimeInlineComponent as ɵby, OwlDateTimeContainerComponent as ɵbz, Option as ɵc, owlDateTimePickerAnimations as ɵca, OwlMultiYearViewComponent as ɵcb, OwlCalendarBodyComponent as ɵcc, OwlYearViewComponent as ɵcd, OwlMonthViewComponent as ɵce, OwlTimerBoxComponent as ɵcf, NumberFixedLenPipe as ɵcg, NativeDateTimeModule as ɵch, OwlNativeDateTimeModule as ɵci, NativeDateTimeAdapter as ɵcj, OWL_NATIVE_DATE_TIME_FORMATS as ɵck, NgxDatetimeComponent as ɵcl, CustomControlWrapperModule as ɵcm, CustomControlWrapperComponent as ɵcn, CustomComponentWrapperModule as ɵco, CustomComponentWrapperComponent as ɵcp, NgxTabSetModule as ɵcq, TabComponent as ɵcr, TabsetComponent as ɵcs, HoverClassDirective as ɵct, FormRendererComponent as ɵcu, DEFAULT_STYLES as ɵcv, AfeNgSelectComponent as ɵcw, AppointmentsOverviewComponent as ɵcx, HistoricalValueDirective as ɵcy, HistoricalFieldHelperService as ɵcz, OptGroup as ɵd, ErrorRendererComponent as ɵda, TimeAgoPipe as ɵdb, CollapseDirective as ɵdc, HidersDisablersFactory as ɵdd, ExpressionRunner as ɵde, DebugModeService as ɵdf, AlertsFactory as ɵdg, NumberInputModule as ɵe, NumberInputComponent as ɵf, InputModule as ɵg, Label as ɵh, TextArea as ɵi, TextInput as ɵj, DatePickerComponent as ɵk, TimePickerComponent as ɵl, ModalComponent as ɵm, MomentPipe as ɵn, DateTimePickerComponent as ɵo, NgxRemoteSelectModule as ɵp, RemoteSelectComponent as ɵq, RemoteFileUploadModule as ɵr, SharedModule as ɵs, SecurePipe as ɵt, FileUploadComponent as ɵu, CheckboxModule as ɵv, CheckboxControlComponent as ɵw, OwlDateTimeModule as ɵx, OwlDialogModule as ɵy, OwlDialogContainerComponent as ɵz };
+export { AfeControlType, AfeFormArray, AfeFormControl, AfeFormGroup, CheckBoxQuestion, ConditionalValidationModel, ControlRelationsFactory, DataSources, DateQuestion, DateTimePickerModule, DateValidationModel, EncounterAdapter, FileUploadQuestion, Form, FormControlService, FormEntryModule, FormErrorsService, FormFactory, FormSchemaCompiler, HistoricalEncounterDataService, JsExpressionHelper, JsExpressionValidationModel, MaxValidationModel, MinValidationModel, MultiSelectQuestion, NestedQuestion, NgxDateTimePickerModule, ObsAdapterHelper, ObsValueAdapter, Option, OrderValueAdapter, Pair, PersonAttribuAdapter, QuestionBase, QuestionFactory, QuestionGroup, RenderingType, RepeatingQuestion, SelectQuestion, TestOrderQuestion, TextAreaInputQuestion, TextInputQuestion, UiSelectQuestion, ValidationFactory, ValidationModel, SelectModule as ɵa, Select as ɵb, OWL_DIALOG_SCROLL_STRATEGY as ɵba, OWL_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY as ɵbb, OWL_DIALOG_SCROLL_STRATEGY_PROVIDER as ɵbc, OWL_DIALOG_DEFAULT_OPTIONS as ɵbd, OwlDialogService as ɵbe, OwlDialogConfig as ɵbf, OwlCalendarComponent as ɵbg, OWL_DATE_TIME_FORMATS as ɵbi, OwlDateTimeIntl as ɵbj, OWL_DATE_TIME_LOCALE as ɵbk, OWL_DATE_TIME_LOCALE_FACTORY as ɵbl, DateTimeAdapter as ɵbm, OwlTimerComponent as ɵbn, OwlDateTimeTriggerDirective as ɵbo, OWL_DATETIME_VALUE_ACCESSOR as ɵbp, OWL_DATETIME_VALIDATORS as ɵbq, OwlDateTimeInputDirective as ɵbr, OWL_DTPICKER_SCROLL_STRATEGY as ɵbs, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY as ɵbt, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER as ɵbu, OwlDateTimeComponent as ɵbv, OwlDateTime as ɵbw, OWL_DATETIME_VALUE_ACCESSOR$1 as ɵbx, OwlDateTimeInlineComponent as ɵby, OwlDateTimeContainerComponent as ɵbz, Option$1 as ɵc, owlDateTimePickerAnimations as ɵca, OwlMultiYearViewComponent as ɵcb, OwlCalendarBodyComponent as ɵcc, OwlYearViewComponent as ɵcd, OwlMonthViewComponent as ɵce, OwlTimerBoxComponent as ɵcf, NumberFixedLenPipe as ɵcg, NativeDateTimeModule as ɵch, OwlNativeDateTimeModule as ɵci, NativeDateTimeAdapter as ɵcj, OWL_NATIVE_DATE_TIME_FORMATS as ɵck, NgxDatetimeComponent as ɵcl, CustomControlWrapperModule as ɵcm, CustomControlWrapperComponent as ɵcn, CustomComponentWrapperModule as ɵco, CustomComponentWrapperComponent as ɵcp, NgxTabSetModule as ɵcq, TabComponent as ɵcr, TabSetComponent as ɵcs, HoverClassDirective as ɵct, FormRendererComponent as ɵcu, AfeNgSelectComponent as ɵcv, AppointmentsOverviewComponent as ɵcw, HistoricalValueDirective as ɵcx, HistoricalFieldHelperService as ɵcy, ErrorRendererComponent as ɵcz, OptGroup as ɵd, TimeAgoPipe as ɵda, CollapseDirective as ɵdb, HidersDisablersFactory as ɵdc, ExpressionRunner as ɵdd, DebugModeService as ɵde, AlertsFactory as ɵdf, NumberInputModule as ɵe, NumberInputComponent as ɵf, InputModule as ɵg, Label as ɵh, TextArea as ɵi, TextInput as ɵj, DatePickerComponent as ɵk, TimePickerComponent as ɵl, ModalComponent as ɵm, MomentPipe as ɵn, DateTimePickerComponent as ɵo, NgxRemoteSelectModule as ɵp, RemoteSelectComponent as ɵq, RemoteFileUploadModule as ɵr, SharedModule as ɵs, SecurePipe as ɵt, FileUploadComponent as ɵu, CheckboxModule as ɵv, CheckboxControlComponent as ɵw, OwlDateTimeModule as ɵx, OwlDialogModule as ɵy, OwlDialogContainerComponent as ɵz };
 //# sourceMappingURL=openmrs-ngx-formentry.js.map