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

package/fesm2015/openmrs-ngx-formentry.js

@@ -1917,188 +1917,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 +1946,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 +1996,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 +2007,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 +2094,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 +2119,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 = () => [
@@ -2578,7 +2365,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}"]
             },] }
 ];
@@ -3016,7 +2803,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,
@@ -3762,6 +3549,7 @@ class NgxDatetimeComponent {
         this.isDisabled = false;
         this.id = '';
         this.theme = 'dark';
+        this.datePickerFormat = '';
         this.showWeeks = false;
         this.onChange = (_) => { };
         this.onTouch = () => { };
@@ -3795,7 +3583,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 +3597,7 @@ NgxDatetimeComponent.decorators = [
 NgxDatetimeComponent.propDecorators = {
     id: [{ type: Input }],
     theme: [{ type: Input }],
+    datePickerFormat: [{ type: Input }],
     showWeeks: [{ type: Input }],
     weeks: [{ type: Input }]
 };
@@ -4278,7 +4067,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 +4358,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 +4745,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: [
@@ -7012,7 +6801,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 +7214,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 +7565,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 +7923,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 +8005,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: {
@@ -8476,7 +8265,7 @@ 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'
                 },
@@ -9582,7 +9371,7 @@ 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')
             };
         }
     }
@@ -9750,6 +9539,7 @@ class QuestionFactory {
     toSelectQuestion(schemaQuestion) {
         const question = new SelectQuestion({ options: [], type: '', key: '' });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.componentConfigs = schemaQuestion.componentConfigs || [];
         question.options = schemaQuestion.questionOptions.answers.map(function (obj) {
@@ -9785,6 +9575,7 @@ class QuestionFactory {
             key: ''
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'number';
         question.placeholder = schemaQuestion.questionOptions.placeholder;
@@ -9811,6 +9602,7 @@ class QuestionFactory {
             key: ''
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'number';
         question.placeholder = schemaQuestion.questionOptions.placeholder || '';
@@ -9855,8 +9647,10 @@ class QuestionFactory {
         return question;
     }
     toEncounterDatetimeQuestion(schemaQuestion) {
+        var _a;
         const question = new DateQuestion({ type: '', key: '' });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.renderingType = 'date';
         question.key = schemaQuestion.id;
         question.validators = this.addValidators(schemaQuestion);
@@ -9871,6 +9665,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);
@@ -9881,8 +9676,10 @@ class QuestionFactory {
     toCheckBoxQuestion(schemaQuestion) {
         const question = new CheckBoxQuestion({ options: [], type: '', key: '' });
         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,
@@ -9912,6 +9709,7 @@ class QuestionFactory {
             key: ''
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.options = schemaQuestion.questionOptions.answers.map(function (obj) {
             return {
@@ -9944,6 +9742,7 @@ class QuestionFactory {
             key: ''
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.placeholder = schemaQuestion.questionOptions.placeholder;
         question.isExpanded = schemaQuestion.isExpanded;
@@ -9971,6 +9770,7 @@ class QuestionFactory {
             key: ''
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'text';
         question.placeholder = schemaQuestion.questionOptions.placeholder;
@@ -9993,6 +9793,7 @@ class QuestionFactory {
     toFileUploadQuestion(schemaQuestion) {
         const question = new FileUploadQuestion({ type: '', key: '' });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'file';
         question.dataSource = 'file';
@@ -10014,6 +9815,7 @@ class QuestionFactory {
     toDrugQuestion(schemaQuestion) {
         const question = new SelectQuestion({ options: [], type: '', key: '' });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10035,6 +9837,7 @@ class QuestionFactory {
     toProblemQuestion(schemaQuestion) {
         const question = new SelectQuestion({ options: [], type: '', key: '' });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10056,6 +9859,7 @@ class QuestionFactory {
     toConceptAnswerSelect(schemaQuestion) {
         const question = new SelectQuestion({ options: [], type: '', key: '' });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10085,6 +9889,7 @@ class QuestionFactory {
             key: ''
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.questions = this.getChildrenQuestionModels(schemaQuestion.questions);
         question.key = schemaQuestion.id;
         question.validators = this.addValidators(schemaQuestion);
@@ -10111,6 +9916,7 @@ class QuestionFactory {
     toGroupQuestion(schemaQuestion) {
         const question = new QuestionGroup({ questions: [], type: '', key: '' });
         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 +9937,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 +9952,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 +9966,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;
@@ -10175,6 +9984,7 @@ class QuestionFactory {
             resolveFunction: function () { }
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10203,6 +10013,7 @@ class QuestionFactory {
             resolveFunction: function () { }
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = 'remote-select';
         question.validators = this.addValidators(schemaQuestion);
@@ -10236,6 +10047,7 @@ class QuestionFactory {
             resolveFunction: function () { }
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.renderingType = schemaQuestion.type;
         question.renderingType = 'remote-select';
@@ -10266,6 +10078,7 @@ class QuestionFactory {
             rendering: ''
         });
         question.label = schemaQuestion.label;
+        question.prefix = schemaQuestion.prefix;
         question.key = schemaQuestion.id;
         question.validators = this.addValidators(schemaQuestion);
         question.extras = schemaQuestion;
@@ -10400,6 +10213,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;
@@ -12261,7 +12075,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 +12215,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 +12284,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 +12295,7 @@ CheckboxControlComponent.decorators = [
             },] }
 ];
 CheckboxControlComponent.propDecorators = {
+    id: [{ type: Input }],
     options: [{ type: Input }],
     selected: [{ type: Input }]
 };
@@ -12506,17 +12321,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 +12335,7 @@ TabComponent.propDecorators = {
     template: [{ type: ContentChild, args: [TemplateRef,] }]
 };
 
-class TabsetComponent {
+class TabSetComponent {
     constructor() {
         this.disableStyle = false;
         this.customNavClass = '';
@@ -12578,14 +12384,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 +12447,8 @@ class NgxTabSetModule {
 }
 NgxTabSetModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [TabComponent, TabsetComponent, HoverClassDirective],
-                exports: [TabComponent, TabsetComponent],
+                declarations: [TabComponent, TabSetComponent, HoverClassDirective],
+                exports: [TabComponent, TabSetComponent],
                 imports: [CommonModule]
             },] }
 ];
@@ -13314,7 +13120,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 +13155,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 +13263,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$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, 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