@openmrs/ngx-formentry 3.0.1-pre.61 → 3.0.1-pre.62

package/fesm2015/openmrs-ngx-formentry.js

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, TemplateRef, Component, Input, ContentChild, Directive, HostListener, EventEmitter, ContentChildren, Output, forwardRef, ViewChild, WrappedValue, InjectionToken, inject, LOCALE_ID, ChangeDetectionStrategy, Optional, Inject, SkipSelf, HostBinding, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, Pipe, TemplateRef, Component, Input, ContentChild, Directive, HostListener, EventEmitter, ContentChildren, Output, forwardRef, ViewChild, WrappedValue, InjectionToken, inject, LOCALE_ID, ChangeDetectionStrategy, HostBinding, Optional, Inject, SkipSelf, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i20 from '@angular/forms';
+import * as i19 from '@angular/forms';
 import { AbstractControl, FormControl, FormGroup, FormArray, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { Subject, BehaviorSubject, concat, of, Subscription, defer, merge } from 'rxjs';
 import moment from 'moment';
@@ -702,7 +702,6 @@ class ExpressionRunner {
         const runner = this;
         const runnable = {
             run: () => {
-                /* eslint-disable */
                 let scope = {};
                 if (control.uuid) {
                     scope[control.uuid] = control.value;
@@ -1936,7 +1935,6 @@ class DataSources {
     }
     registerDataSource(key, dataSource, unWrap = false) {
         if (unWrap) {
-            // eslint-disable-next-line guard-for-in
             for (const o in dataSource) {
                 this.registerDataSource(o, dataSource[o], false);
             }
@@ -1965,11 +1963,11 @@ class TabComponent {
     }
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabComponent, selector: "ngx-tab", inputs: { tabTitle: "tabTitle", tabSubTitle: "tabSubTitle", active: "active", disabled: "disabled", bypassDOM: "bypassDOM", customPaneClass: "customPaneClass" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div *ngIf=\"active\" class=\"pane\" [ngClass]=\"customPaneClass\">\n  <h4>{{ tabTitle }}</h4>\n  <div *ngIf=\"bypassDOM\">\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  </div>\n  <div *ngIf=\"!bypassDOM\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["h4{padding-left:1rem;margin-bottom:.5rem}h4:after{content:\"\";display:block;width:2rem;padding-top:.188rem;border-bottom:.375rem solid var(--brand-01)}.pane{background-color:#f4f4f4;margin:.5rem .125rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabComponent, selector: "ofe-tab", inputs: { tabTitle: "tabTitle", tabSubTitle: "tabSubTitle", active: "active", disabled: "disabled", bypassDOM: "bypassDOM", customPaneClass: "customPaneClass" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div *ngIf=\"active\" class=\"pane\" [ngClass]=\"customPaneClass\">\n  <h4>{{ tabTitle }}</h4>\n  <div *ngIf=\"bypassDOM\">\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  </div>\n  <div *ngIf=\"!bypassDOM\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["h4{padding-left:1rem;margin-bottom:.5rem}h4:after{content:\"\";display:block;width:2rem;padding-top:.188rem;border-bottom:.375rem solid var(--brand-01)}.pane{background-color:#f4f4f4;margin:.5rem .125rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngx-tab',
+                    selector: 'ofe-tab',
                     templateUrl: 'tab.component.html',
                     styleUrls: ['./tab.component.css']
                 }]
@@ -2002,15 +2000,14 @@ class HoverClassDirective {
     }
 }
 HoverClassDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-HoverClassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HoverClassDirective, selector: "[hover-class]", inputs: { hoverClass: ["hover-class", "hoverClass"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+HoverClassDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: { hoverClass: "hoverClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HoverClassDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[hover-class]'
+                    selector: '[ofeHoverClass]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hoverClass: [{
-                type: Input,
-                args: ['hover-class']
+                type: Input
             }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -2025,7 +2022,7 @@ class TabSetComponent {
         this.customNavClass = '';
         this.customTabsClass = '';
         this.selectedIndex = 0;
-        this.onSelect = new EventEmitter();
+        this.tabSelect = new EventEmitter();
     }
     ngOnChanges(changes) {
         if (changes.selectedIndex && !changes.selectedIndex.firstChange) {
@@ -2052,7 +2049,7 @@ class TabSetComponent {
         this.tabs.toArray().forEach((tab) => (tab.active = false));
         // activate the tab the user has clicked on.
         tabToSelect.active = true;
-        this.onSelect.emit(this.tabs.toArray().indexOf(tabToSelect));
+        this.tabSelect.emit(this.tabs.toArray().indexOf(tabToSelect));
     }
     getStatusClasses(active, disabled) {
         if (active) {
@@ -2067,11 +2064,11 @@ class TabSetComponent {
     }
 }
 TabSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabSetComponent, selector: "ngx-tab-set", inputs: { disableStyle: "disableStyle", customNavClass: "customNavClass", customTabsClass: "customTabsClass", selectedIndex: "selectedIndex" }, outputs: { onSelect: "onSelect" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], usesOnChanges: true, ngImport: i0, 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{background-color:var(--gray-gray-10)}.tab button.enabled.hover{background-color:var(--gray-gray-10)}.tab button.completed{border-left:.5rem solid var(--inverse-support-02);background-color:var(--color-green-10);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.active{background-color:#ededed;border-left:.5rem solid #009d9a;font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--color-gray-100)}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--gray-gray-30)}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab-content{width:100%;margin-left:10rem}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HoverClassDirective, selector: "[hover-class]", inputs: ["hover-class"] }] });
+TabSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabSetComponent, selector: "ofe-tab-set", inputs: { disableStyle: "disableStyle", customNavClass: "customNavClass", customTabsClass: "customTabsClass", selectedIndex: "selectedIndex" }, outputs: { tabSelect: "tabSelect" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-container\">\n  <div class=\"tab\">\n    <button\n      ofeHoverClass=\"hover\"\n      class=\"tablinks completed\"\n      *ngFor=\"let tab of tabs\"\n      (click)=\"selectTab(tab)\"\n      [class]=\"getStatusClasses(tab.active, tab.disabled)\"\n    >\n      <span>{{ tab.tabTitle }}</span>\n    </button>\n  </div>\n  <div id=\"tab\" class=\"tab-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".tab-container{overflow-x:hidden;display:flex}.tab{width:10rem;position:fixed}.tab button{font-family:inherit;display:block;background-color:inherit;width:100%;border:none;outline:none;text-align:left;transition:.3s;min-height:2rem;white-space:normal;word-wrap:break-word;margin:0 0 .063rem}.tab button :hover{cursor:pointer}@media screen and (max-width: 768px){.tab button{height:3rem;border-bottom:.0125rem solid var(--open-mrs-background-gray);width:10rem}}.tab button.active.hover{background-color:var(--gray-gray-10)}.tab button.enabled.hover{background-color:var(--gray-gray-10)}.tab button.completed{border-left:.5rem solid var(--inverse-support-02);background-color:var(--color-green-10);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.active{background-color:#ededed;border-left:.5rem solid #009d9a;font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--color-gray-100)}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--gray-gray-30)}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab-content{width:100%;margin-left:10rem}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: ["hoverClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabSetComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngx-tab-set',
+                    selector: 'ofe-tab-set',
                     styleUrls: ['ngx-tab-set.component.scss'],
                     templateUrl: 'ngx-tab-set.component.html'
                 }]
@@ -2086,7 +2083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], selectedIndex: [{
                 type: Input
-            }], onSelect: [{
+            }], tabSelect: [{
                 type: Output
             }] } });
 
@@ -2094,14 +2091,13 @@ class CustomComponentWrapperComponent {
     constructor() {
         this.dark = true;
     }
-    ngOnInit() { }
 }
 CustomComponentWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomComponentWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomComponentWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomComponentWrapperComponent, selector: "app-custom-component-wrapper", inputs: { componentConfigs: "componentConfigs", dark: "dark" }, ngImport: i0, template: "<div>\n  <ng-template #error>Component Loading failed...</ng-template>\n  <ng-template #loading>Loading Component...</ng-template>\n  <div *ngFor=\"let componentConfig of componentConfigs\">\n    <ax-lazy-element\n      *axLazyElementDynamic=\"\n        componentConfig.tag;\n        url: componentConfig.url;\n        module: true;\n        errorTemplate: error;\n        loadingTemplate: loading\n      \"\n      [config]=\"componentConfig\"\n      [dark]=\"dark\"\n    >\n    </ax-lazy-element>\n  </div>\n</div>\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
+CustomComponentWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: { componentConfigs: "componentConfigs", dark: "dark" }, ngImport: i0, template: "<div>\n  <ng-template #error>Component Loading failed...</ng-template>\n  <ng-template #loading>Loading Component...</ng-template>\n  <div *ngFor=\"let componentConfig of componentConfigs\">\n    <ax-lazy-element\n      *axLazyElementDynamic=\"\n        componentConfig.tag;\n        url: componentConfig.url;\n        module: true;\n        errorTemplate: error;\n        loadingTemplate: loading\n      \"\n      [config]=\"componentConfig\"\n      [dark]=\"dark\"\n    >\n    </ax-lazy-element>\n  </div>\n</div>\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomComponentWrapperComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'app-custom-component-wrapper',
+                    selector: 'ofe-custom-component-wrapper',
                     templateUrl: 'custom-component-wrapper.component.html'
                 }]
         }], propDecorators: { componentConfigs: [{
@@ -2162,7 +2158,7 @@ class CustomControlWrapperComponent {
     }
 }
 CustomControlWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomControlWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomControlWrapperComponent, selector: "app-custom-control-wrapper", inputs: { question: "question" }, providers: [
+CustomControlWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: { question: "question" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             multi: true,
@@ -2172,7 +2168,7 @@ CustomControlWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomControlWrapperComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'app-custom-control-wrapper',
+                    selector: 'ofe-custom-control-wrapper',
                     templateUrl: 'custom-control-wrapper.component.html',
                     providers: [
                         {
@@ -2186,26 +2182,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-/* eslint-disable @angular-eslint/component-class-suffix */
 /**
- * `ibm-select` provides a styled `select` component.
+ * `ofe-select` provides a styled `select` component.
  *
  * [See demo](../../?path=/story/select--basic)
  *
  * Example:
  *
  * ```
- * <ibm-select [(ngModel)]="model">
+ * <ofe-select [(ngModel)]="model">
  *     <option value="default" disabled selected hidden>Choose an option</option>
  *     <option value="option1">Option 1</option>
  *    <option value="option2">Option 2</option>
  *     <option value="option3">Option 3</option>
- * </ibm-select>
+ * </ofe-select>
  *    ```
  *
  * <example-url>../../iframe.html?id=select--basic</example-url>
  */
-class Select {
+class SelectComponent {
     constructor() {
         /**
          * `inline` or `default` select displays
@@ -2218,7 +2213,7 @@ class Select {
         /**
          * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`
          */
-        this.id = `select-${Select.selectCount++}`;
+        this.id = `select-${SelectComponent.selectCount++}`;
         /**
          * Number input field render size
          */
@@ -2309,282 +2304,25 @@ class Select {
 /**
  * Tracks the total number of selects instantiated. Used to generate unique IDs
  */
-Select.selectCount = 0;
-Select.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Select.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Select, selector: "ibm-select", inputs: { display: "display", label: "label", helperText: "helperText", invalidText: "invalidText", warn: "warn", warnText: "warnText", id: "id", size: "size", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", theme: "theme", ariaLabel: "ariaLabel", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
+SelectComponent.selectCount = 0;
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "ofe-select", inputs: { display: "display", label: "label", helperText: "helperText", invalidText: "invalidText", warn: "warn", warnText: "warnText", id: "id", size: "size", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", theme: "theme", ariaLabel: "ariaLabel", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
-            useExisting: Select,
+            useExisting: SelectComponent,
             multi: true
         }
-    ], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: `
-    <div class="cds--form-item">
-      <ng-template [ngIf]="skeleton">
-        <div *ngIf="label" class="cds--label cds--skeleton"></div>
-        <div class="cds--select cds--skeleton"></div>
-      </ng-template>
-      <div
-        *ngIf="!skeleton"
-        class="cds--select"
-        [ngClass]="{
-          'cds--select--inline': display === 'inline',
-          'cds--select--light': theme === 'light',
-          'cds--select--invalid': invalid,
-          'cds--select--warning': warn,
-          'cds--select--disabled': disabled
-        }"
-      >
-        <label *ngIf="label" [for]="id" class="cds--label">
-          <ng-container *ngIf="!isTemplate(label)">{{ label }}</ng-container>
-          <ng-template
-            *ngIf="isTemplate(label)"
-            [ngTemplateOutlet]="label"
-          ></ng-template>
-        </label>
-        <div *ngIf="helperText" class="cds--form__helper-text">
-          <ng-container *ngIf="!isTemplate(helperText)">{{
-            helperText
-          }}</ng-container>
-          <ng-template
-            *ngIf="isTemplate(helperText)"
-            [ngTemplateOutlet]="helperText"
-          ></ng-template>
-        </div>
-        <div
-          *ngIf="display === 'inline'; else noInline"
-          class="cds--select-input--inline__wrapper"
-        >
-          <ng-container *ngTemplateOutlet="noInline"></ng-container>
-        </div>
-      </div>
-    </div>
-
-    <!-- select element: dynamically projected based on 'display' variant -->
-    <ng-template #noInline>
-      <div
-        class="cds--select-input__wrapper extend"
-        [attr.data-invalid]="invalid ? true : null"
-      >
-        <select
-          #select
-          [attr.id]="id"
-          [attr.aria-label]="ariaLabel"
-          [disabled]="disabled"
-          (change)="onChange($event)"
-          [attr.aria-invalid]="invalid ? 'true' : null"
-          class="cds--select-input"
-          [ngClass]="{
-            'cds--select-input--xl': size === 'xl',
-            'cds--select-input--sm': size === 'sm'
-          }"
-        >
-          <ng-content></ng-content>
-        </select>
-        <svg
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          style="will-change: transform;"
-          xmlns="http://www.w3.org/2000/svg"
-          class="cds--select__arrow"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          aria-hidden="true"
-        >
-          <path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path>
-        </svg>
-        <svg
-          *ngIf="invalid"
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          style="will-change: transform;"
-          xmlns="http://www.w3.org/2000/svg"
-          class="cds--text-input__invalid-icon"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          aria-hidden="true"
-        >
-          <path
-            d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"
-          ></path>
-          <path
-            d="M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"
-            data-icon-path="inner-path"
-            opacity="0"
-          ></path>
-        </svg>
-      </div>
-      <div
-        *ngIf="invalid && invalidText && !warn"
-        role="alert"
-        class="cds--form-requirement"
-        aria-live="polite"
-      >
-        <ng-container *ngIf="!isTemplate(invalidText)">{{
-          invalidText
-        }}</ng-container>
-        <ng-template
-          *ngIf="isTemplate(invalidText)"
-          [ngTemplateOutlet]="invalidText"
-        ></ng-template>
-      </div>
-      <div *ngIf="!invalid && warn" class="cds--form-requirement">
-        <ng-container *ngIf="!isTemplate(warnText)">{{
-          warnText
-        }}</ng-container>
-        <ng-template
-          *ngIf="isTemplate(warnText)"
-          [ngTemplateOutlet]="warnText"
-        ></ng-template>
-      </div>
-    </ng-template>
-  `, isInline: true, styles: ["\n      .cds--select--inline .cds--form__helper-text {\n        order: 4;\n      }\n\n      .cds--select--inline:not(.cds--select--invalid) .cds--form__helper-text {\n        margin-top: 0;\n      }\n      .cds--select-input__wrapper {\n        min-width: 16rem;\n      }\n    "], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Select, decorators: [{
+    ], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "<div class=\"cds--form-item\">\n  <ng-template [ngIf]=\"skeleton\">\n    <div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n    <div class=\"cds--select cds--skeleton\"></div>\n  </ng-template>\n  <div\n    *ngIf=\"!skeleton\"\n    class=\"cds--select\"\n    [ngClass]=\"{\n      'cds--select--inline': display === 'inline',\n      'cds--select--light': theme === 'light',\n      'cds--select--invalid': invalid,\n      'cds--select--warning': warn,\n      'cds--select--disabled': disabled\n    }\"\n  >\n    <label *ngIf=\"label\" [for]=\"id\" class=\"cds--label\">\n      <ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(label)\"\n        [ngTemplateOutlet]=\"label\"\n      ></ng-template>\n    </label>\n    <div *ngIf=\"helperText\" class=\"cds--form__helper-text\">\n      <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n        helperText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(helperText)\"\n        [ngTemplateOutlet]=\"helperText\"\n      ></ng-template>\n    </div>\n    <div\n      *ngIf=\"display === 'inline'; else noInline\"\n      class=\"cds--select-input--inline__wrapper\"\n    >\n      <ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n  <div\n    class=\"cds--select-input__wrapper extend\"\n    [attr.data-invalid]=\"invalid ? true : null\"\n  >\n    <select\n      #select\n      [attr.id]=\"id\"\n      [attr.aria-label]=\"ariaLabel\"\n      [disabled]=\"disabled\"\n      (change)=\"onChange($event)\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      class=\"cds--select-input\"\n      [ngClass]=\"{\n        'cds--select-input--xl': size === 'xl',\n        'cds--select-input--sm': size === 'sm'\n      }\"\n    >\n      <ng-content></ng-content>\n    </select>\n    <svg\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--select__arrow\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n    </svg>\n    <svg\n      *ngIf=\"invalid\"\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--text-input__invalid-icon\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n      ></path>\n      <path\n        d=\"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n        data-icon-path=\"inner-path\"\n        opacity=\"0\"\n      ></path>\n    </svg>\n  </div>\n  <div\n    *ngIf=\"invalid && invalidText && !warn\"\n    role=\"alert\"\n    class=\"cds--form-requirement\"\n    aria-live=\"polite\"\n  >\n    <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n      invalidText\n    }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(invalidText)\"\n      [ngTemplateOutlet]=\"invalidText\"\n    ></ng-template>\n  </div>\n  <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n    <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(warnText)\"\n      [ngTemplateOutlet]=\"warnText\"\n    ></ng-template>\n  </div>\n</ng-template>\n", styles: [".cds--select--inline .cds--form__helper-text{order:4}.cds--select--inline:not(.cds--select--invalid) .cds--form__helper-text{margin-top:0}.cds--select-input__wrapper{min-width:16rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ibm-select',
-                    template: `
-    <div class="cds--form-item">
-      <ng-template [ngIf]="skeleton">
-        <div *ngIf="label" class="cds--label cds--skeleton"></div>
-        <div class="cds--select cds--skeleton"></div>
-      </ng-template>
-      <div
-        *ngIf="!skeleton"
-        class="cds--select"
-        [ngClass]="{
-          'cds--select--inline': display === 'inline',
-          'cds--select--light': theme === 'light',
-          'cds--select--invalid': invalid,
-          'cds--select--warning': warn,
-          'cds--select--disabled': disabled
-        }"
-      >
-        <label *ngIf="label" [for]="id" class="cds--label">
-          <ng-container *ngIf="!isTemplate(label)">{{ label }}</ng-container>
-          <ng-template
-            *ngIf="isTemplate(label)"
-            [ngTemplateOutlet]="label"
-          ></ng-template>
-        </label>
-        <div *ngIf="helperText" class="cds--form__helper-text">
-          <ng-container *ngIf="!isTemplate(helperText)">{{
-            helperText
-          }}</ng-container>
-          <ng-template
-            *ngIf="isTemplate(helperText)"
-            [ngTemplateOutlet]="helperText"
-          ></ng-template>
-        </div>
-        <div
-          *ngIf="display === 'inline'; else noInline"
-          class="cds--select-input--inline__wrapper"
-        >
-          <ng-container *ngTemplateOutlet="noInline"></ng-container>
-        </div>
-      </div>
-    </div>
-
-    <!-- select element: dynamically projected based on 'display' variant -->
-    <ng-template #noInline>
-      <div
-        class="cds--select-input__wrapper extend"
-        [attr.data-invalid]="invalid ? true : null"
-      >
-        <select
-          #select
-          [attr.id]="id"
-          [attr.aria-label]="ariaLabel"
-          [disabled]="disabled"
-          (change)="onChange($event)"
-          [attr.aria-invalid]="invalid ? 'true' : null"
-          class="cds--select-input"
-          [ngClass]="{
-            'cds--select-input--xl': size === 'xl',
-            'cds--select-input--sm': size === 'sm'
-          }"
-        >
-          <ng-content></ng-content>
-        </select>
-        <svg
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          style="will-change: transform;"
-          xmlns="http://www.w3.org/2000/svg"
-          class="cds--select__arrow"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          aria-hidden="true"
-        >
-          <path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path>
-        </svg>
-        <svg
-          *ngIf="invalid"
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          style="will-change: transform;"
-          xmlns="http://www.w3.org/2000/svg"
-          class="cds--text-input__invalid-icon"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          aria-hidden="true"
-        >
-          <path
-            d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"
-          ></path>
-          <path
-            d="M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"
-            data-icon-path="inner-path"
-            opacity="0"
-          ></path>
-        </svg>
-      </div>
-      <div
-        *ngIf="invalid && invalidText && !warn"
-        role="alert"
-        class="cds--form-requirement"
-        aria-live="polite"
-      >
-        <ng-container *ngIf="!isTemplate(invalidText)">{{
-          invalidText
-        }}</ng-container>
-        <ng-template
-          *ngIf="isTemplate(invalidText)"
-          [ngTemplateOutlet]="invalidText"
-        ></ng-template>
-      </div>
-      <div *ngIf="!invalid && warn" class="cds--form-requirement">
-        <ng-container *ngIf="!isTemplate(warnText)">{{
-          warnText
-        }}</ng-container>
-        <ng-template
-          *ngIf="isTemplate(warnText)"
-          [ngTemplateOutlet]="warnText"
-        ></ng-template>
-      </div>
-    </ng-template>
-  `,
-                    styles: [
-                        `
-      .cds--select--inline .cds--form__helper-text {
-        order: 4;
-      }
-
-      .cds--select--inline:not(.cds--select--invalid) .cds--form__helper-text {
-        margin-top: 0;
-      }
-      .cds--select-input__wrapper {
-        min-width: 16rem;
-      }
-    `
-                    ],
+                    selector: 'ofe-select',
+                    templateUrl: 'select.component.html',
+                    styleUrls: ['./select.component.scss'],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: Select,
+                            useExisting: SelectComponent,
                             multi: true
                         }
                     ]
@@ -2627,9 +2365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['focusout']
             }] } });
 
-/* eslint-disable @angular-eslint/component-class-suffix */
 // Using similarity from AsyncPipe to avoid having to pipe |secure|async in HTML.
-// eslint-disable-next-line @angular-eslint/use-pipe-transform-interface
 class SecurePipe {
     constructor(_ref, sanitizer) {
         this._ref = _ref;
@@ -2807,17 +2543,17 @@ class FileUploadComponent {
     }
 }
 FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileUploadComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "app-file-upload", inputs: { dataSource: "dataSource" }, providers: [
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "ofe-file-upload", inputs: { dataSource: "dataSource" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => FileUploadComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<lib-ngx-file-uploader\n  [srcUrl]=\"pdfUrl\"\n  [formEntry]=\"formEntryMode\"\n  [(ngModel)]=\"fileUuid\"\n  (_onClear)=\"clearValue()\"\n  (uploadData)=\"onFileChange($event)\"\n>\n</lib-ngx-file-uploader>\n<div *ngIf=\"fileUuid\">\n  <img\n    *ngIf=\"!pdfUploaded\"\n    class=\"img-responsive\"\n    [src]=\"fileUuid | secure: this.dataSource.fetchFile\"\n    alt=\"\"\n  />\n</div>\n", styles: ["\n      img {\n        margin-left: auto;\n        margin-right: auto;\n        display: block;\n      }\n    "], components: [{ type: i1$2.NgxFileUploaderComponent, selector: "lib-ngx-file-uploader", inputs: ["singleFile", "formEntry", "srcUrl", "source"], outputs: ["fileChanged", "uploadData", "_onClear"] }], directives: [{ type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "secure": SecurePipe } });
+    ], ngImport: i0, template: "<lib-ngx-file-uploader\n  [srcUrl]=\"pdfUrl\"\n  [formEntry]=\"formEntryMode\"\n  [(ngModel)]=\"fileUuid\"\n  (_onClear)=\"clearValue()\"\n  (uploadData)=\"onFileChange($event)\"\n>\n</lib-ngx-file-uploader>\n<div *ngIf=\"fileUuid\">\n  <img\n    *ngIf=\"!pdfUploaded\"\n    class=\"img-responsive\"\n    [src]=\"fileUuid | secure: this.dataSource.fetchFile\"\n    alt=\"\"\n  />\n</div>\n", styles: ["\n      img {\n        margin-left: auto;\n        margin-right: auto;\n        display: block;\n      }\n    "], components: [{ type: i1$2.NgxFileUploaderComponent, selector: "lib-ngx-file-uploader", inputs: ["singleFile", "formEntry", "srcUrl", "source"], outputs: ["fileChanged", "uploadData", "_onClear"] }], directives: [{ type: i19.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "secure": SecurePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'app-file-upload',
+                    selector: 'ofe-file-upload',
                     templateUrl: 'file-upload.component.html',
                     providers: [
                         {
@@ -2845,14 +2581,14 @@ class RemoteSelectComponent {
         this.renderer = renderer;
         this.remoteOptionsLoading = false;
         this.remoteOptionInput$ = new Subject();
-        this.placeholder = 'Search...';
-        this.disabled = false;
-        this.theme = 'dark';
         this.items = [];
         this.value = [];
         this.loading = false;
         this.searchText = '';
         this.notFoundMsg = 'match no found';
+        this.placeholder = 'Search...';
+        this.disabled = false;
+        this.theme = 'dark';
         this.done = new EventEmitter();
         this.compareItems = (item, selected) => {
             if (item.value && selected.value) {
@@ -2933,17 +2669,17 @@ class RemoteSelectComponent {
     }
 }
 RemoteSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoteSelectComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-RemoteSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RemoteSelectComponent, selector: "ngx-remote-select", inputs: { placeholder: "placeholder", componentID: "componentID", disabled: "disabled", theme: "theme", dataSource: "dataSource" }, outputs: { done: "done" }, providers: [
+RemoteSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: { placeholder: "placeholder", componentID: "componentID", disabled: "disabled", theme: "theme", dataSource: "dataSource" }, outputs: { done: "done" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RemoteSelectComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div>\n  <ng-select\n    [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n    [disabled]=\"disabled\"\n    [items]=\"remoteOptions$ | async\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"false\"\n    [hideSelected]=\"true\"\n    [compareWith]=\"compareItems\"\n    [trackByFn]=\"trackByFn\"\n    [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1.AsyncPipe } });
+    ], ngImport: i0, template: "<div>\n  <ng-select\n    [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n    [disabled]=\"disabled\"\n    [items]=\"remoteOptions$ | async\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"false\"\n    [hideSelected]=\"true\"\n    [compareWith]=\"compareItems\"\n    [trackByFn]=\"trackByFn\"\n    [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoteSelectComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngx-remote-select',
+                    selector: 'ofe-remote-select',
                     templateUrl: 'remote-select.component.html',
                     providers: [
                         {
@@ -2967,65 +2703,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-/**
- * date-time-picker-intl.service
- */
-class OwlDateTimeIntl {
-    constructor() {
-        /**
-         * Stream that emits whenever the labels here are changed. Use this to notify
-         * components if the labels have changed after initialization.
-         */
-        this.changes = new Subject();
-        /** A label for the up second button (used by screen readers).  */
-        this.upSecondLabel = 'Add a second';
-        /** A label for the down second button (used by screen readers).  */
-        this.downSecondLabel = 'Minus a second';
-        /** A label for the up minute button (used by screen readers).  */
-        this.upMinuteLabel = 'Add a minute';
-        /** A label for the down minute button (used by screen readers).  */
-        this.downMinuteLabel = 'Minus a minute';
-        /** A label for the up hour button (used by screen readers).  */
-        this.upHourLabel = 'Add a hour';
-        /** A label for the down hour button (used by screen readers).  */
-        this.downHourLabel = 'Minus a hour';
-        /** A label for the previous month button (used by screen readers). */
-        this.prevMonthLabel = 'Previous month';
-        /** A label for the next month button (used by screen readers). */
-        this.nextMonthLabel = 'Next month';
-        /** A label for the previous year button (used by screen readers). */
-        this.prevYearLabel = 'Previous year';
-        /** A label for the next year button (used by screen readers). */
-        this.nextYearLabel = 'Next year';
-        /** A label for the previous multi-year button (used by screen readers). */
-        this.prevMultiYearLabel = 'Previous 21 years';
-        /** A label for the next multi-year button (used by screen readers). */
-        this.nextMultiYearLabel = 'Next 21 years';
-        /** A label for the 'switch to month view' button (used by screen readers). */
-        this.switchToMonthViewLabel = 'Change to month view';
-        /** A label for the 'switch to year view' button (used by screen readers). */
-        this.switchToMultiYearViewLabel = 'Choose month and year';
-        /** A label for the cancel button */
-        this.cancelBtnLabel = 'Cancel';
-        /** A label for the set button */
-        this.setBtnLabel = 'Set';
-        /** A label for the range 'from' in picker info */
-        this.rangeFromLabel = 'From';
-        /** A label for the range 'to' in picker info */
-        this.rangeToLabel = 'To';
-        /** A label for the hour12 button (AM) */
-        this.hour12AMLabel = 'AM';
-        /** A label for the hour12 button (PM) */
-        this.hour12PMLabel = 'PM';
-    }
-}
-OwlDateTimeIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OwlDateTimeIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 /**
  * date-time-adapter.class
  */
@@ -3138,13 +2815,71 @@ class DateTimeAdapter {
     }
 }
 
+/**
+ * date-time-picker-intl.service
+ */
+class OwlDateTimeIntl {
+    constructor() {
+        /**
+         * Stream that emits whenever the labels here are changed. Use this to notify
+         * components if the labels have changed after initialization.
+         */
+        this.changes = new Subject();
+        /** A label for the up second button (used by screen readers).  */
+        this.upSecondLabel = 'Add a second';
+        /** A label for the down second button (used by screen readers).  */
+        this.downSecondLabel = 'Minus a second';
+        /** A label for the up minute button (used by screen readers).  */
+        this.upMinuteLabel = 'Add a minute';
+        /** A label for the down minute button (used by screen readers).  */
+        this.downMinuteLabel = 'Minus a minute';
+        /** A label for the up hour button (used by screen readers).  */
+        this.upHourLabel = 'Add a hour';
+        /** A label for the down hour button (used by screen readers).  */
+        this.downHourLabel = 'Minus a hour';
+        /** A label for the previous month button (used by screen readers). */
+        this.prevMonthLabel = 'Previous month';
+        /** A label for the next month button (used by screen readers). */
+        this.nextMonthLabel = 'Next month';
+        /** A label for the previous year button (used by screen readers). */
+        this.prevYearLabel = 'Previous year';
+        /** A label for the next year button (used by screen readers). */
+        this.nextYearLabel = 'Next year';
+        /** A label for the previous multi-year button (used by screen readers). */
+        this.prevMultiYearLabel = 'Previous 21 years';
+        /** A label for the next multi-year button (used by screen readers). */
+        this.nextMultiYearLabel = 'Next 21 years';
+        /** A label for the 'switch to month view' button (used by screen readers). */
+        this.switchToMonthViewLabel = 'Change to month view';
+        /** A label for the 'switch to year view' button (used by screen readers). */
+        this.switchToMultiYearViewLabel = 'Choose month and year';
+        /** A label for the cancel button */
+        this.cancelBtnLabel = 'Cancel';
+        /** A label for the set button */
+        this.setBtnLabel = 'Set';
+        /** A label for the range 'from' in picker info */
+        this.rangeFromLabel = 'From';
+        /** A label for the range 'to' in picker info */
+        this.rangeToLabel = 'To';
+        /** A label for the hour12 button (AM) */
+        this.hour12AMLabel = 'AM';
+        /** A label for the hour12 button (PM) */
+        this.hour12PMLabel = 'PM';
+    }
+}
+OwlDateTimeIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OwlDateTimeIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * date-time-format.class
  */
 /** InjectionToken for date time picker that can be used to override default format. */
 const OWL_DATE_TIME_FORMATS = new InjectionToken('OWL_DATE_TIME_FORMATS');
 
-/* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/no-host-metadata-property */
 class CalendarCell {
     constructor(value, displayValue, ariaLabel, enabled, out = false, cellClass = '') {
         this.value = value;
@@ -3159,6 +2894,7 @@ class OwlCalendarBodyComponent {
     constructor(elmRef, ngZone) {
         this.elmRef = elmRef;
         this.ngZone = ngZone;
+        this.owlDTCalendarBodyClass = true;
         /**
          * The cell number of the active cell in the table.
          */
@@ -3174,10 +2910,7 @@ class OwlCalendarBodyComponent {
         /**
          * Emit when a calendar cell is selected
          * */
-        this.select = new EventEmitter();
-    }
-    get owlDTCalendarBodyClass() {
-        return true;
+        this.cellSelected = new EventEmitter();
     }
     get isInSingleMode() {
         return this.selectMode === 'single';
@@ -3187,9 +2920,8 @@ class OwlCalendarBodyComponent {
             this.selectMode === 'rangeFrom' ||
             this.selectMode === 'rangeTo');
     }
-    ngOnInit() { }
     selectCell(cell) {
-        this.select.emit(cell);
+        this.cellSelected.emit(cell);
     }
     isActiveCell(rowIndex, colIndex) {
         const cellNumber = rowIndex * this.numCols + colIndex;
@@ -3261,21 +2993,21 @@ class OwlCalendarBodyComponent {
     }
 }
 OwlCalendarBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlCalendarBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-OwlCalendarBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { select: "select" }, host: { properties: { "class.owl-dt-calendar-body": "owlDTCalendarBodyClass" } }, exportAs: ["owlDateTimeCalendarBody"], ngImport: i0, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <td\n    *ngFor=\"let item of row; let colIndex = index\"\n    class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\n    [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n    [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n    [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n    [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n    [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n    [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n    [attr.aria-label]=\"item.ariaLabel\"\n    [attr.aria-disabled]=\"!item.enabled || null\"\n    [style.width.%]=\"100 / numCols\"\n    [style.paddingTop.%]=\"(50 * cellRatio) / numCols\"\n    [style.paddingBottom.%]=\"(50 * cellRatio) / numCols\"\n    (click)=\"selectCell(item)\"\n  >\n    <span\n      class=\"owl-dt-calendar-cell-content\"\n      [ngClass]=\"{\n        'owl-dt-calendar-cell-out': item.out,\n        'owl-dt-calendar-cell-today': item.value === todayValue,\n        'owl-dt-calendar-cell-selected': isSelected(item.value)\n      }\"\n    >\n      {{ item.displayValue }}\n    </span>\n  </td>\n</tr>\n", styles: [""], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlCalendarBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { cellSelected: "cellSelected" }, host: { properties: { "class.owl-dt-calendar-body": "this.owlDTCalendarBodyClass" } }, exportAs: ["owlDateTimeCalendarBody"], ngImport: i0, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <td\n    *ngFor=\"let item of row; let colIndex = index\"\n    class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\n    [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n    [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n    [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n    [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n    [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n    [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n    [attr.aria-label]=\"item.ariaLabel\"\n    [attr.aria-disabled]=\"!item.enabled || null\"\n    [style.width.%]=\"100 / numCols\"\n    [style.paddingTop.%]=\"(50 * cellRatio) / numCols\"\n    [style.paddingBottom.%]=\"(50 * cellRatio) / numCols\"\n    (click)=\"selectCell(item)\"\n  >\n    <span\n      class=\"owl-dt-calendar-cell-content\"\n      [ngClass]=\"{\n        'owl-dt-calendar-cell-out': item.out,\n        'owl-dt-calendar-cell-today': item.value === todayValue,\n        'owl-dt-calendar-cell-selected': isSelected(item.value)\n      }\"\n    >\n      {{ item.displayValue }}\n    </span>\n  </td>\n</tr>\n", styles: [""], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlCalendarBodyComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[owl-date-time-calendar-body]',
+                    /* eslint-disable-next-line @angular-eslint/component-selector */
+                    selector: '[ofe-owl-date-time-calendar-body]',
                     exportAs: 'owlDateTimeCalendarBody',
                     templateUrl: './calendar-body.component.html',
                     styleUrls: ['./calendar-body.component.scss'],
-                    host: {
-                        '[class.owl-dt-calendar-body]': 'owlDTCalendarBodyClass'
-                    },
-                    preserveWhitespaces: false,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { activeCell: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { owlDTCalendarBodyClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-body']
+            }], activeCell: [{
                 type: Input
             }], rows: [{
                 type: Input
@@ -3289,11 +3021,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], selectMode: [{
                 type: Input
-            }], select: [{
+            }], cellSelected: [{
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 const DAYS_PER_WEEK = 7;
 const WEEKS_PER_VIEW = 6;
 class OwlMonthViewComponent {
@@ -3333,6 +3064,9 @@ class OwlMonthViewComponent {
         /** Emits when any date is activated. */
         this.pickerMomentChange = new EventEmitter();
     }
+    get owlDTCalendarView() {
+        return true;
+    }
     get firstDayOfWeek() {
         return this._firstDayOfWeek;
     }
@@ -3443,9 +3177,6 @@ class OwlMonthViewComponent {
             this.selectMode === 'rangeFrom' ||
             this.selectMode === 'rangeTo');
     }
-    get owlDTCalendarView() {
-        return true;
-    }
     ngOnInit() {
         this.generateWeekDays();
         this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
@@ -3679,18 +3410,14 @@ class OwlMonthViewComponent {
     }
 }
 OwlMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlMonthViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMonthViewComponent, selector: "owl-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlYearView"], ngImport: i0, template: "<table\n  class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n  [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\"\n>\n  <thead class=\"owl-dt-calendar-header\">\n    <tr class=\"owl-dt-weekdays\">\n      <th\n        *ngFor=\"let weekday of weekdays\"\n        [attr.aria-label]=\"weekday.long\"\n        class=\"owl-dt-weekday\"\n        scope=\"col\"\n      >\n        <span>{{ weekday.short }}</span>\n      </th>\n    </tr>\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    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", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMonthViewComponent, selector: "ofe-owl-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlYearView"], ngImport: i0, template: "<table\n  class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n  [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\"\n>\n  <thead class=\"owl-dt-calendar-header\">\n    <tr class=\"owl-dt-weekdays\">\n      <th\n        *ngFor=\"let weekday of weekdays\"\n        [attr.aria-label]=\"weekday.long\"\n        class=\"owl-dt-weekday\"\n        scope=\"col\"\n      >\n        <span>{{ weekday.short }}</span>\n      </th>\n    </tr>\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"days\"\n    [todayValue]=\"todayDate\"\n    [selectedValues]=\"selectedDates\"\n    [selectMode]=\"selectMode\"\n    [activeCell]=\"activeCell\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlMonthViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'owl-date-time-month-view',
+                    selector: 'ofe-owl-date-time-month-view',
                     exportAs: 'owlYearView',
                     templateUrl: './calendar-month-view.component.html',
                     styleUrls: ['./calendar-month-view.component.scss'],
-                    host: {
-                        '[class.owl-dt-calendar-view]': 'owlDTCalendarView'
-                    },
-                    preserveWhitespaces: false,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
@@ -3700,7 +3427,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }, {
                     type: Inject,
                     args: [OWL_DATE_TIME_FORMATS]
-                }] }]; }, propDecorators: { hideOtherMonths: [{
+                }] }]; }, propDecorators: { owlDTCalendarView: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-view']
+            }], hideOtherMonths: [{
                 type: Input
             }], firstDayOfWeek: [{
                 type: Input
@@ -3729,7 +3459,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [OwlCalendarBodyComponent, { static: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 const MONTHS_PER_YEAR = 12;
 const MONTHS_PER_ROW = 3;
 class OwlYearViewComponent {
@@ -3752,7 +3481,7 @@ class OwlYearViewComponent {
         /**
          * Callback to invoke when a new month is selected
          * */
-        this.change = new EventEmitter();
+        this.monthChange = new EventEmitter();
         /**
          * Emits the selected year. This doesn't imply a change on the selected date
          * */
@@ -3763,6 +3492,9 @@ class OwlYearViewComponent {
         this.keyboardEnter = new EventEmitter();
         this.monthNames = this.dateTimeAdapter.getMonthNames('short');
     }
+    get owlDTCalendarView() {
+        return true;
+    }
     get selectMode() {
         return this._selectMode;
     }
@@ -3848,9 +3580,6 @@ class OwlYearViewComponent {
             this.selectMode === 'rangeFrom' ||
             this.selectMode === 'rangeTo');
     }
-    get owlDTCalendarView() {
-        return true;
-    }
     ngOnInit() {
         this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
             this.generateMonthList();
@@ -3878,7 +3607,7 @@ class OwlYearViewComponent {
         this.monthSelected.emit(firstDateOfMonth);
         const daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(firstDateOfMonth);
         const result = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.pickerMoment), month, Math.min(daysInMonth, this.dateTimeAdapter.getDate(this.pickerMoment)), this.dateTimeAdapter.getHours(this.pickerMoment), this.dateTimeAdapter.getMinutes(this.pickerMoment), this.dateTimeAdapter.getSeconds(this.pickerMoment));
-        this.change.emit(result);
+        this.monthChange.emit(result);
     }
     /**
      * Handle keydown event on calendar body
@@ -4047,18 +3776,14 @@ class OwlYearViewComponent {
     }
 }
 OwlYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlYearViewComponent, selector: "owl-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { change: "change", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlMonthView"], ngImport: i0, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"3\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    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", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlYearViewComponent, selector: "ofe-owl-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { monthChange: "monthChange", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlMonthView"], ngImport: i0, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"3\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"months\"\n    [numCols]=\"3\"\n    [cellRatio]=\"3 / 7\"\n    [activeCell]=\"activeCell\"\n    [todayValue]=\"todayMonth\"\n    [selectedValues]=\"selectedMonths\"\n    [selectMode]=\"selectMode\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlYearViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'owl-date-time-year-view',
+                    selector: 'ofe-owl-date-time-year-view',
                     exportAs: 'owlMonthView',
                     templateUrl: './calendar-year-view.component.html',
                     styleUrls: ['./calendar-year-view.component.scss'],
-                    host: {
-                        '[class.owl-dt-calendar-view]': 'owlDTCalendarView'
-                    },
-                    preserveWhitespaces: false,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
@@ -4068,7 +3793,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }, {
                     type: Inject,
                     args: [OWL_DATE_TIME_FORMATS]
-                }] }]; }, propDecorators: { selectMode: [{
+                }] }]; }, propDecorators: { owlDTCalendarView: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-view']
+            }], selectMode: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -4082,7 +3810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], maxDate: [{
                 type: Input
-            }], change: [{
+            }], monthChange: [{
                 type: Output
             }], monthSelected: [{
                 type: Output
@@ -4095,7 +3823,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [OwlCalendarBodyComponent, { static: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 const YEARS_PER_ROW = 3;
 const YEAR_ROWS = 7;
 class OwlMultiYearViewComponent {
@@ -4112,7 +3839,7 @@ class OwlMultiYearViewComponent {
         /**
          * Callback to invoke when a new month is selected
          * */
-        this.change = new EventEmitter();
+        this.monthChange = new EventEmitter();
         /**
          * Emits the selected year. This doesn't imply a change on the selected date
          * */
@@ -4122,6 +3849,12 @@ class OwlMultiYearViewComponent {
         /** Emits when use keyboard enter to select a calendar cell */
         this.keyboardEnter = new EventEmitter();
     }
+    get owlDTCalendarView() {
+        return true;
+    }
+    get owlDTCalendarMultiYearView() {
+        return true;
+    }
     get selectMode() {
         return this._selectMode;
     }
@@ -4229,13 +3962,6 @@ class OwlMultiYearViewComponent {
     get nextButtonLabel() {
         return this.pickerIntl.nextMultiYearLabel;
     }
-    get owlDTCalendarView() {
-        return true;
-    }
-    get owlDTCalendarMultiYearView() {
-        return true;
-    }
-    ngOnInit() { }
     ngAfterContentInit() {
         this._todayYear = this.dateTimeAdapter.getYear(this.dateTimeAdapter.now());
         this.generateYearList();
@@ -4252,7 +3978,7 @@ class OwlMultiYearViewComponent {
         const firstDateOfMonth = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerMoment), 1);
         const daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(firstDateOfMonth);
         const selected = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerMoment), Math.min(daysInMonth, this.dateTimeAdapter.getDate(this.pickerMoment)), this.dateTimeAdapter.getHours(this.pickerMoment), this.dateTimeAdapter.getMinutes(this.pickerMoment), this.dateTimeAdapter.getSeconds(this.pickerMoment));
-        this.change.emit(selected);
+        this.monthChange.emit(selected);
     }
     /**
      * Generate the previous year list
@@ -4422,23 +4148,24 @@ class OwlMultiYearViewComponent {
     }
 }
 OwlMultiYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlMultiYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlMultiYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { change: "change", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "owlDTCalendarView", "class.owl-dt-calendar-multi-year-view": "owlDTCalendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], ngImport: i0, template: "<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!previousEnabled()\"\n  [attr.aria-label]=\"prevButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"prevYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th colspan=\"3\">{{ tableHeader }}</th>\n    </tr>\n  </thead>\n  <tbody\n    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", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlMultiYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMultiYearViewComponent, selector: "ofe-owl-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { monthChange: "monthChange", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView", "class.owl-dt-calendar-multi-year-view": "this.owlDTCalendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], ngImport: i0, template: "<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!previousEnabled()\"\n  [attr.aria-label]=\"prevButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"prevYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th colspan=\"3\">{{ tableHeader }}</th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"years\"\n    [numCols]=\"3\"\n    [cellRatio]=\"3 / 7\"\n    [activeCell]=\"activeCell\"\n    [todayValue]=\"todayYear\"\n    [selectedValues]=\"selectedYears\"\n    [selectMode]=\"selectMode\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!nextEnabled()\"\n  [attr.aria-label]=\"nextButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"nextYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n    <svg\n      version=\"1.1\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                C197.237,120.447,195.534,115.448,191.75,111.689z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlMultiYearViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'owl-date-time-multi-year-view',
+                    selector: 'ofe-owl-date-time-multi-year-view',
                     templateUrl: './calendar-multi-year-view.component.html',
                     styleUrls: ['./calendar-multi-year-view.component.scss'],
-                    host: {
-                        '[class.owl-dt-calendar-view]': 'owlDTCalendarView',
-                        '[class.owl-dt-calendar-multi-year-view]': 'owlDTCalendarMultiYearView'
-                    },
-                    preserveWhitespaces: false,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { selectMode: [{
+                }] }]; }, propDecorators: { owlDTCalendarView: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-view']
+            }], owlDTCalendarMultiYearView: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-multi-year-view']
+            }], selectMode: [{
                 type: Input
             }], selected: [{
                 type: Input
@@ -4452,7 +4179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], maxDate: [{
                 type: Input
-            }], change: [{
+            }], monthChange: [{
                 type: Output
             }], yearSelected: [{
                 type: Output
@@ -4465,7 +4192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [OwlCalendarBodyComponent, { static: true }]
             }] } });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 class OwlCalendarComponent {
     constructor(elmRef, pickerIntl, ngZone, cdRef, dateTimeAdapter, dateTimeFormats) {
         this.elmRef = elmRef;
@@ -4518,6 +4244,9 @@ class OwlCalendarComponent {
             this.cdRef.markForCheck();
         });
     }
+    get owlDTCalendarClass() {
+        return true;
+    }
     get minDate() {
         return this._minDate;
     }
@@ -4614,13 +4343,6 @@ class OwlCalendarComponent {
     get isMonthView() {
         return this._currentView === 'month';
     }
-    /**
-     * Bind class 'owl-dt-calendar' to host
-     * */
-    get owlDTCalendarClass() {
-        return true;
-    }
-    ngOnInit() { }
     ngAfterContentInit() {
         this._currentView = this.startView;
     }
@@ -4752,18 +4474,14 @@ class OwlCalendarComponent {
     }
 }
 OwlCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlCalendarComponent, deps: [{ token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", pickerMoment: "pickerMoment", selected: "selected", selecteds: "selecteds", dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", startView: "startView", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0, template: "<div class=\"owl-dt-calendar-control\">\n  <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!prevButtonEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    (click)=\"previousClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n        width=\"100%\"\n        height=\"100%\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n  <div class=\"owl-dt-calendar-control-content\">\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"periodButtonLabel\"\n      (click)=\"toggleViews()\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ periodButtonText }}\n\n        <span\n          class=\"owl-dt-control-button-arrow\"\n          [style.transform]=\"'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\"\n        >\n          <!-- <editor-fold desc=\"SVG Arrow\"> -->\n          <svg\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            width=\"50%\"\n            height=\"50%\"\n            viewBox=\"0 0 292.362 292.362\"\n            style=\"enable-background: new 0 0 292.362 292.362\"\n            xml:space=\"preserve\"\n          >\n            <g>\n              <path\n                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\n              />\n            </g>\n          </svg>\n          <!-- </editor-fold> -->\n        </span>\n      </span>\n    </button>\n  </div>\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!nextButtonEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    (click)=\"nextClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n      <svg\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n</div>\n<div\n  class=\"owl-dt-calendar-main\"\n  cdkMonitorSubtreeFocus\n  [ngSwitch]=\"currentView\"\n  tabindex=\"-1\"\n>\n  <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", styles: [""], components: [{ type: OwlMonthViewComponent, selector: "owl-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"], exportAs: ["owlYearView"] }, { type: OwlYearViewComponent, selector: "owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "monthSelected", "pickerMomentChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { type: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }], directives: [{ type: i1$4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarComponent, selector: "ofe-owl-date-time-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", pickerMoment: "pickerMoment", selected: "selected", selecteds: "selecteds", dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", startView: "startView", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "this.owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0, template: "<div class=\"owl-dt-calendar-control\">\n  <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!prevButtonEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    (click)=\"previousClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n        width=\"100%\"\n        height=\"100%\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n  <div class=\"owl-dt-calendar-control-content\">\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"periodButtonLabel\"\n      (click)=\"toggleViews()\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ periodButtonText }}\n\n        <span\n          class=\"owl-dt-control-button-arrow\"\n          [style.transform]=\"'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\"\n        >\n          <!-- <editor-fold desc=\"SVG Arrow\"> -->\n          <svg\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            width=\"50%\"\n            height=\"50%\"\n            viewBox=\"0 0 292.362 292.362\"\n            style=\"enable-background: new 0 0 292.362 292.362\"\n            xml:space=\"preserve\"\n          >\n            <g>\n              <path\n                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\n              />\n            </g>\n          </svg>\n          <!-- </editor-fold> -->\n        </span>\n      </span>\n    </button>\n  </div>\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!nextButtonEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    (click)=\"nextClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n      <svg\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n</div>\n<div\n  class=\"owl-dt-calendar-main\"\n  cdkMonitorSubtreeFocus\n  [ngSwitch]=\"currentView\"\n  tabindex=\"-1\"\n>\n  <ofe-owl-date-time-month-view\n    *ngSwitchCase=\"'month'\"\n    [pickerMoment]=\"pickerMoment\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    [hideOtherMonths]=\"hideOtherMonths\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (selectedChange)=\"dateSelected($event)\"\n    (userSelection)=\"userSelected()\"\n  ></ofe-owl-date-time-month-view>\n\n  <ofe-owl-date-time-year-view\n    *ngSwitchCase=\"'year'\"\n    [pickerMoment]=\"pickerMoment\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    (keyboardEnter)=\"focusActiveCell()\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (monthSelected)=\"selectMonthInYearView($event)\"\n    (monthChange)=\"goToDateInView($event, 'month')\"\n  ></ofe-owl-date-time-year-view>\n\n  <ofe-owl-date-time-multi-year-view\n    *ngSwitchCase=\"'multi-years'\"\n    [pickerMoment]=\"pickerMoment\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    (keyboardEnter)=\"focusActiveCell()\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (yearSelected)=\"selectYearInMultiYearView($event)\"\n    (monthChange)=\"goToDateInView($event, 'year')\"\n  ></ofe-owl-date-time-multi-year-view>\n</div>\n", styles: [""], components: [{ type: OwlMonthViewComponent, selector: "ofe-owl-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"], exportAs: ["owlYearView"] }, { type: OwlYearViewComponent, selector: "ofe-owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["monthChange", "monthSelected", "pickerMomentChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { type: OwlMultiYearViewComponent, selector: "ofe-owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["monthChange", "yearSelected", "pickerMomentChange", "keyboardEnter"] }], directives: [{ type: i1$4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlCalendarComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'owl-date-time-calendar',
+                    selector: 'ofe-owl-date-time-calendar',
                     exportAs: 'owlDateTimeCalendar',
                     templateUrl: './calendar.component.html',
                     styleUrls: ['./calendar.component.scss'],
-                    host: {
-                        '[class.owl-dt-calendar]': 'owlDTCalendarClass'
-                    },
-                    preserveWhitespaces: false,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
@@ -4773,7 +4491,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }, {
                     type: Inject,
                     args: [OWL_DATE_TIME_FORMATS]
-                }] }]; }, propDecorators: { minDate: [{
+                }] }]; }, propDecorators: { owlDTCalendarClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar']
+            }], minDate: [{
                 type: Input
             }], maxDate: [{
                 type: Input
@@ -4805,6 +4526,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * date-time-picker.animations
+ */
+const owlDateTimePickerAnimations = {
+    transformPicker: trigger('transformPicker', [
+        state('void', style({ opacity: 0, transform: 'scale(1, 0)' })),
+        state('enter', style({ opacity: 1, transform: 'scale(1, 1)' })),
+        transition('void => enter', group([
+            query('@fadeInPicker', animateChild(), { optional: true }),
+            animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+        ])),
+        transition('enter => void', animate('100ms linear', style({ opacity: 0 })))
+    ]),
+    fadeInPicker: trigger('fadeInPicker', [
+        state('enter', style({ opacity: 1 })),
+        state('void', style({ opacity: 0 })),
+        transition('void => enter', animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
+    ])
+};
+
 /**
  * numberFixedLen.pipe
  */
@@ -4831,7 +4572,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 class OwlTimerBoxComponent {
     constructor() {
         this.showDivider = false;
@@ -4841,12 +4581,12 @@ class OwlTimerBoxComponent {
         this.inputStream = new Subject();
         this.inputStreamSub = Subscription.EMPTY;
     }
-    get displayValue() {
-        return this.boxValue || this.value;
-    }
     get owlDTTimerBoxClass() {
         return true;
     }
+    get displayValue() {
+        return this.boxValue || this.value;
+    }
     ngOnInit() {
         this.inputStreamSub = this.inputStream
             .pipe(debounceTime(500), distinctUntilChanged())
@@ -4880,21 +4620,20 @@ class OwlTimerBoxComponent {
     }
 }
 OwlTimerBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OwlTimerBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerBoxComponent, selector: "owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "owlDTTimerBoxClass" } }, exportAs: ["owlDateTimeTimerBox"], ngImport: i0, template: "<div *ngIf=\"showDivider\" class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"upBtnDisabled\"\n  [attr.aria-label]=\"upBtnAriaLabel\"\n  (click)=\"upBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n  <input\n    class=\"owl-dt-timer-input\"\n    maxlength=\"2\"\n    [value]=\"displayValue | numberFixedLen: 2\"\n    (input)=\"handleInputChange(valueInput.value)\"\n    #valueInput\n  />\n  <span class=\"owl-hidden-accessible\">{{ inputLabel }}</span>\n</label>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"downBtnDisabled\"\n  [attr.aria-label]=\"downBtnAriaLabel\"\n  (click)=\"downBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlTimerBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerBoxComponent, selector: "ofe-owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "this.owlDTTimerBoxClass" } }, exportAs: ["owlDateTimeTimerBox"], ngImport: i0, template: "<div *ngIf=\"showDivider\" class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"upBtnDisabled\"\n  [attr.aria-label]=\"upBtnAriaLabel\"\n  (click)=\"upBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n  <input\n    class=\"owl-dt-timer-input\"\n    maxlength=\"2\"\n    [value]=\"displayValue | numberFixedLen: 2\"\n    (input)=\"handleInputChange(valueInput.value)\"\n    #valueInput\n  />\n  <span class=\"owl-hidden-accessible\">{{ inputLabel }}</span>\n</label>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"downBtnDisabled\"\n  [attr.aria-label]=\"downBtnAriaLabel\"\n  (click)=\"downBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'owlDateTimeTimerBox',
-                    selector: 'owl-date-time-timer-box',
+                    selector: 'ofe-owl-date-time-timer-box',
                     templateUrl: './timer-box.component.html',
                     styleUrls: ['./timer-box.component.scss'],
-                    preserveWhitespaces: false,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class.owl-dt-timer-box]': 'owlDTTimerBoxClass'
-                    }
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showDivider: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { owlDTTimerBoxClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-timer-box']
+            }], showDivider: [{
                 type: Input
             }], upBtnAriaLabel: [{
                 type: Input
@@ -4922,7 +4661,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 class OwlTimerComponent {
     constructor(ngZone, elmRef, pickerIntl, cdRef, dateTimeAdapter) {
         this.ngZone = ngZone;
@@ -4945,6 +4683,12 @@ class OwlTimerComponent {
         this.stepSecond = 1;
         this.selectedChange = new EventEmitter();
     }
+    get owlDTTimeTabIndex() {
+        return -1;
+    }
+    get owlDTTimerClass() {
+        return true;
+    }
     get pickerMoment() {
         return this._pickerMoment;
     }
@@ -5026,13 +4770,6 @@ class OwlTimerComponent {
             ? this.pickerIntl.hour12PMLabel
             : this.pickerIntl.hour12AMLabel;
     }
-    get owlDTTimerClass() {
-        return true;
-    }
-    get owlDTTimeTabIndex() {
-        return -1;
-    }
-    ngOnInit() { }
     /**
      * Focus to the host element
      * */
@@ -5175,24 +4912,25 @@ class OwlTimerComponent {
     }
 }
 OwlTimerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlTimerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlTimerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: { pickerMoment: "pickerMoment", minDateTime: "minDateTime", maxDateTime: "maxDateTime", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.owl-dt-timer": "owlDTTimerClass", "attr.tabindex": "owlDTTimeTabIndex" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0, 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", styles: [""], components: [{ type: OwlTimerBoxComponent, selector: "owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlTimerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerComponent, selector: "ofe-owl-date-time-timer", inputs: { pickerMoment: "pickerMoment", minDateTime: "minDateTime", maxDateTime: "maxDateTime", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "attr.tabindex": "this.owlDTTimeTabIndex", "class.owl-dt-timer": "this.owlDTTimerClass" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0, template: "<ofe-owl-date-time-timer-box\n  [upBtnAriaLabel]=\"upHourButtonLabel\"\n  [downBtnAriaLabel]=\"downHourButtonLabel\"\n  [upBtnDisabled]=\"!upHourEnabled()\"\n  [downBtnDisabled]=\"!downHourEnabled()\"\n  [boxValue]=\"hourBoxValue\"\n  [value]=\"hourValue\"\n  [min]=\"0\"\n  [max]=\"23\"\n  [step]=\"stepHour\"\n  [inputLabel]=\"'Hour'\"\n  (inputChange)=\"setHourValueViaInput($event)\"\n  (valueChange)=\"setHourValue($event)\"\n></ofe-owl-date-time-timer-box>\n<ofe-owl-date-time-timer-box\n  [showDivider]=\"true\"\n  [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n  [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n  [upBtnDisabled]=\"!upMinuteEnabled()\"\n  [downBtnDisabled]=\"!downMinuteEnabled()\"\n  [value]=\"minuteValue\"\n  [min]=\"0\"\n  [max]=\"59\"\n  [step]=\"stepMinute\"\n  [inputLabel]=\"'Minute'\"\n  (inputChange)=\"setMinuteValue($event)\"\n  (valueChange)=\"setMinuteValue($event)\"\n></ofe-owl-date-time-timer-box>\n<ofe-owl-date-time-timer-box\n  *ngIf=\"showSecondsTimer\"\n  [showDivider]=\"true\"\n  [upBtnAriaLabel]=\"upSecondButtonLabel\"\n  [downBtnAriaLabel]=\"downSecondButtonLabel\"\n  [upBtnDisabled]=\"!upSecondEnabled()\"\n  [downBtnDisabled]=\"!downSecondEnabled()\"\n  [value]=\"secondValue\"\n  [min]=\"0\"\n  [max]=\"59\"\n  [step]=\"stepSecond\"\n  [inputLabel]=\"'Second'\"\n  (inputChange)=\"setSecondValue($event)\"\n  (valueChange)=\"setSecondValue($event)\"\n></ofe-owl-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\" class=\"owl-dt-timer-hour12\">\n  <button\n    class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"setMeridiem($event)\"\n  >\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n      {{ hour12ButtonLabel }}\n    </span>\n  </button>\n</div>\n", styles: [""], components: [{ type: OwlTimerBoxComponent, selector: "ofe-owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlTimerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'owlDateTimeTimer',
-                    selector: 'owl-date-time-timer',
+                    selector: 'ofe-owl-date-time-timer',
                     templateUrl: './timer.component.html',
                     styleUrls: ['./timer.component.scss'],
-                    preserveWhitespaces: false,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class.owl-dt-timer]': 'owlDTTimerClass',
-                        '[attr.tabindex]': 'owlDTTimeTabIndex'
-                    }
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { pickerMoment: [{
+                }] }]; }, propDecorators: { owlDTTimeTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], owlDTTimerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-timer']
+            }], pickerMoment: [{
                 type: Input
             }], minDateTime: [{
                 type: Input
@@ -5212,27 +4950,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
-/**
- * date-time-picker.animations
- */
-const owlDateTimePickerAnimations = {
-    transformPicker: trigger('transformPicker', [
-        state('void', style({ opacity: 0, transform: 'scale(1, 0)' })),
-        state('enter', style({ opacity: 1, transform: 'scale(1, 1)' })),
-        transition('void => enter', group([
-            query('@fadeInPicker', animateChild(), { optional: true }),
-            animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
-        ])),
-        transition('enter => void', animate('100ms linear', style({ opacity: 0 })))
-    ]),
-    fadeInPicker: trigger('fadeInPicker', [
-        state('enter', style({ opacity: 1 })),
-        state('void', style({ opacity: 0 })),
-        transition('void => enter', animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
-    ])
-};
-
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 class OwlDateTimeContainerComponent {
     constructor(cdRef, elmRef, pickerIntl, dateTimeAdapter) {
         this.cdRef = cdRef;
@@ -5250,6 +4967,33 @@ class OwlDateTimeContainerComponent {
         this.confirmSelected$ = new Subject();
         this.pickerOpened$ = new Subject();
     }
+    get owlDTContainerClass() {
+        return true;
+    }
+    get owlDTPopupContainerClass() {
+        return this.picker.pickerMode === 'popup';
+    }
+    get owlDTDialogContainerClass() {
+        return this.picker.pickerMode === 'dialog';
+    }
+    get owlDTInlineContainerClass() {
+        return this.picker.pickerMode === 'inline';
+    }
+    get owlDTContainerDisabledClass() {
+        return this.picker.disabled;
+    }
+    get owlDTContainerId() {
+        return this.picker.id;
+    }
+    get owlDTContainerAnimation() {
+        return this.picker.pickerMode === 'inline' ? '' : 'enter';
+    }
+    handleContainerAnimationDone(event) {
+        const toState = event.toState;
+        if (toState === 'enter') {
+            this.pickerOpened$.next();
+        }
+    }
     get hidePickerStream() {
         return this.hidePicker$.asObservable();
     }
@@ -5320,40 +5064,12 @@ class OwlDateTimeContainerComponent {
     get containerElm() {
         return this.elmRef.nativeElement;
     }
-    get owlDTContainerClass() {
-        return true;
-    }
-    get owlDTPopupContainerClass() {
-        return this.picker.pickerMode === 'popup';
-    }
-    get owlDTDialogContainerClass() {
-        return this.picker.pickerMode === 'dialog';
-    }
-    get owlDTInlineContainerClass() {
-        return this.picker.pickerMode === 'inline';
-    }
-    get owlDTContainerDisabledClass() {
-        return this.picker.disabled;
-    }
-    get owlDTContainerId() {
-        return this.picker.id;
-    }
-    get owlDTContainerAnimation() {
-        return this.picker.pickerMode === 'inline' ? '' : 'enter';
-    }
-    ngOnInit() { }
     ngAfterContentInit() {
         this.initPicker();
     }
     ngAfterViewInit() {
         this.focusPicker();
     }
-    handleContainerAnimationDone(event) {
-        const toState = event.toState;
-        if (toState === 'enter') {
-            this.pickerOpened$.next();
-        }
-    }
     dateSelected(date) {
         let result;
         if (this.picker.isInSingleMode) {
@@ -5567,7 +5283,7 @@ class OwlDateTimeContainerComponent {
     }
 }
 OwlDateTimeContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlDateTimeContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", host: { listeners: { "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.owl-dt-container": "owlDTContainerClass", "class.owl-dt-popup-container": "owlDTPopupContainerClass", "class.owl-dt-dialog-container": "owlDTDialogContainerClass", "class.owl-dt-inline-container": "owlDTInlineContainerClass", "class.owl-dt-container-disabled": "owlDTContainerDisabledClass", "attr.id": "owlDTContainerId", "@transformPicker": "owlDTContainerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div\n  [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n  [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n  class=\"owl-dt-container-inner\"\n>\n  <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", styles: [""], components: [{ type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerMoment", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }, { type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }], directives: [{ type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+OwlDateTimeContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeContainerComponent, selector: "ofe-owl-date-time-container", host: { listeners: { "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.owl-dt-container": "this.owlDTContainerClass", "class.owl-dt-popup-container": "this.owlDTPopupContainerClass", "class.owl-dt-dialog-container": "this.owlDTDialogContainerClass", "class.owl-dt-inline-container": "this.owlDTInlineContainerClass", "class.owl-dt-container-disabled": "this.owlDTContainerDisabledClass", "attr.id": "this.owlDTContainerId", "@transformPicker": "this.owlDTContainerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div\n  [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n  [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n  class=\"owl-dt-container-inner\"\n>\n  <ofe-owl-date-time-calendar\n    *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n    class=\"owl-dt-container-row\"\n    [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n    [(pickerMoment)]=\"pickerMoment\"\n    [selected]=\"picker.selected\"\n    [selecteds]=\"picker.selecteds\"\n    [selectMode]=\"picker.selectMode\"\n    [minDate]=\"picker.minDateTime\"\n    [maxDate]=\"picker.maxDateTime\"\n    [dateFilter]=\"picker.dateTimeFilter\"\n    [startView]=\"picker.startView\"\n    [hideOtherMonths]=\"picker.hideOtherMonths\"\n    (yearSelected)=\"picker.selectYear($event)\"\n    (monthSelected)=\"picker.selectMonth($event)\"\n    (selectedChange)=\"dateSelected($event)\"\n  ></ofe-owl-date-time-calendar>\n  <ofe-owl-date-time-timer\n    *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n    class=\"owl-dt-container-row\"\n    [pickerMoment]=\"pickerMoment\"\n    [minDateTime]=\"picker.minDateTime\"\n    [maxDateTime]=\"picker.maxDateTime\"\n    [showSecondsTimer]=\"picker.showSecondsTimer\"\n    [hour12Timer]=\"picker.hour12Timer\"\n    [stepHour]=\"picker.stepHour\"\n    [stepMinute]=\"picker.stepMinute\"\n    [stepSecond]=\"picker.stepSecond\"\n    (selectedChange)=\"timeSelected($event)\"\n  ></ofe-owl-date-time-timer>\n  <div\n    *ngIf=\"picker.isInRangeMode\"\n    role=\"radiogroup\"\n    class=\"owl-dt-container-info owl-dt-container-row\"\n  >\n    <div\n      role=\"radio\"\n      [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n      [attr.aria-checked]=\"activeSelectedIndex === 0\"\n      class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n      [ngClass]=\"{ 'owl-dt-container-info-active': activeSelectedIndex === 0 }\"\n      (click)=\"handleClickOnInfoGroup($event, 0)\"\n      (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n      #from\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-container-range-content\"\n        tabindex=\"-1\"\n      >\n        <span class=\"owl-dt-container-info-label\">{{ fromLabel }}:</span>\n        <span class=\"owl-dt-container-info-value\">{{\n          fromFormattedValue\n        }}</span>\n      </span>\n    </div>\n    <div\n      role=\"radio\"\n      [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n      [attr.aria-checked]=\"activeSelectedIndex === 1\"\n      class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n      [ngClass]=\"{ 'owl-dt-container-info-active': activeSelectedIndex === 1 }\"\n      (click)=\"handleClickOnInfoGroup($event, 1)\"\n      (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n      #to\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-container-range-content\"\n        tabindex=\"-1\"\n      >\n        <span class=\"owl-dt-container-info-label\">{{ toLabel }}:</span>\n        <span class=\"owl-dt-container-info-value\">{{ toFormattedValue }}</span>\n      </span>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showControlButtons\"\n    class=\"owl-dt-container-buttons owl-dt-container-row\"\n  >\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      (click)=\"onCancelClicked($event)\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ cancelLabel }}\n      </span>\n    </button>\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      (click)=\"onSetClicked($event)\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ setLabel }}\n      </span>\n    </button>\n  </div>\n</div>\n", styles: [""], components: [{ type: OwlCalendarComponent, selector: "ofe-owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerMoment", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }, { type: OwlTimerComponent, selector: "ofe-owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }], directives: [{ type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
         owlDateTimePickerAnimations.transformPicker,
         owlDateTimePickerAnimations.fadeInPicker
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -5575,25 +5291,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Component,
             args: [{
                     exportAs: 'owlDateTimeContainer',
-                    selector: 'owl-date-time-container',
+                    selector: 'ofe-owl-date-time-container',
                     templateUrl: './date-time-picker-container.component.html',
                     styleUrls: ['./date-time-picker-container.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
                     animations: [
                         owlDateTimePickerAnimations.transformPicker,
                         owlDateTimePickerAnimations.fadeInPicker
-                    ],
-                    host: {
-                        '(@transformPicker.done)': 'handleContainerAnimationDone($event)',
-                        '[class.owl-dt-container]': 'owlDTContainerClass',
-                        '[class.owl-dt-popup-container]': 'owlDTPopupContainerClass',
-                        '[class.owl-dt-dialog-container]': 'owlDTDialogContainerClass',
-                        '[class.owl-dt-inline-container]': 'owlDTInlineContainerClass',
-                        '[class.owl-dt-container-disabled]': 'owlDTContainerDisabledClass',
-                        '[attr.id]': 'owlDTContainerId',
-                        '[@transformPicker]': 'owlDTContainerAnimation'
-                    }
+                    ]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
                     type: Optional
@@ -5603,6 +5308,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], timer: [{
                 type: ViewChild,
                 args: [OwlTimerComponent, { static: false }]
+            }], owlDTContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-container']
+            }], owlDTPopupContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-popup-container']
+            }], owlDTDialogContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-dialog-container']
+            }], owlDTInlineContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-inline-container']
+            }], owlDTContainerDisabledClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-container-disabled']
+            }], owlDTContainerId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], owlDTContainerAnimation: [{
+                type: HostBinding,
+                args: ['@transformPicker']
+            }], handleContainerAnimationDone: [{
+                type: HostListener,
+                args: ['@transformPicker.done', ['$event']]
             }] } });
 
 /**
@@ -5936,7 +5665,6 @@ class OwlDialogRef {
     }
 }
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 const zoomFadeIn = {
     opacity: 0,
     transform: 'translateX({{ x }}) translateY({{ y }}) scale({{scale}})'
@@ -5971,15 +5699,12 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
         // This would help us to refocus back to element when the dialog was closed.
         this.elementFocusedBeforeDialogWasOpened = null;
     }
-    get config() {
-        return this._config;
+    get owlDialogContainerTabIndex() {
+        return -1;
     }
     get owlDialogContainerClass() {
         return true;
     }
-    get owlDialogContainerTabIndex() {
-        return -1;
-    }
     get owlDialogContainerId() {
         return this._config.id;
     }
@@ -5995,7 +5720,23 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
     get owlDialogContainerAnimation() {
         return { value: this.state, params: this.params };
     }
-    ngOnInit() { }
+    onAnimationStart(event) {
+        this.isAnimating = true;
+        this.animationStateChanged.emit(event);
+    }
+    onAnimationDone(event) {
+        if (event.toState === 'enter') {
+            this.trapFocus();
+        }
+        else if (event.toState === 'exit') {
+            this.restoreFocus();
+        }
+        this.animationStateChanged.emit(event);
+        this.isAnimating = false;
+    }
+    get config() {
+        return this._config;
+    }
     /**
      * Attach a ComponentPortal as content to this dialog container.
      */
@@ -6015,20 +5756,6 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
             this.calculateZoomOrigin(event);
         }
     }
-    onAnimationStart(event) {
-        this.isAnimating = true;
-        this.animationStateChanged.emit(event);
-    }
-    onAnimationDone(event) {
-        if (event.toState === 'enter') {
-            this.trapFocus();
-        }
-        else if (event.toState === 'exit') {
-            this.restoreFocus();
-        }
-        this.animationStateChanged.emit(event);
-        this.isAnimating = false;
-    }
     startExitAnimation() {
         this.state = 'exit';
         this.changeDetector.markForCheck();
@@ -6086,7 +5813,7 @@ class OwlDialogContainerComponent extends BasePortalOutlet {
     }
 }
 OwlDialogContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$4.FocusTrapFactory }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlDialogContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDialogContainerComponent, selector: "owl-dialog-container", host: { listeners: { "@slideModal.start": "onAnimationStart($event)", "@slideModal.done": "onAnimationDone($event)" }, properties: { "class.owl-dialog-container": "owlDialogContainerClass", "attr.tabindex": "owlDialogContainerTabIndex", "attr.id": "owlDialogContainerId", "attr.role": "owlDialogContainerRole", "attr.aria-labelledby": "owlDialogContainerAriaLabelledby", "attr.aria-describedby": "owlDialogContainerAriaDescribedby", "@slideModal": "owlDialogContainerAnimation" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+OwlDialogContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDialogContainerComponent, selector: "ofe-owl-dialog-container", host: { listeners: { "@slideModal.start": "onAnimationStart($event)", "@slideModal.done": "onAnimationDone($event)" }, properties: { "attr.tabindex": "this.owlDialogContainerTabIndex", "class.owl-dialog-container": "this.owlDialogContainerClass", "attr.id": "this.owlDialogContainerId", "attr.role": "this.owlDialogContainerRole", "attr.aria-labelledby": "this.owlDialogContainerAriaLabelledby", "attr.aria-describedby": "this.owlDialogContainerAriaDescribedby", "@slideModal": "this.owlDialogContainerAnimation" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
         trigger('slideModal', [
             transition('void => enter', [
                 style(zoomFadeInFrom),
@@ -6113,7 +5840,7 @@ OwlDialogContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDialogContainerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'owl-dialog-container',
+                    selector: 'ofe-owl-dialog-container',
                     templateUrl: './dialog-container.component.html',
                     animations: [
                         trigger('slideModal', [
@@ -6138,25 +5865,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             }),
                             transition('enter => exit', [animateChild(), animate(200, style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
                         ])
-                    ],
-                    host: {
-                        '(@slideModal.start)': 'onAnimationStart($event)',
-                        '(@slideModal.done)': 'onAnimationDone($event)',
-                        '[class.owl-dialog-container]': 'owlDialogContainerClass',
-                        '[attr.tabindex]': 'owlDialogContainerTabIndex',
-                        '[attr.id]': 'owlDialogContainerId',
-                        '[attr.role]': 'owlDialogContainerRole',
-                        '[attr.aria-labelledby]': 'owlDialogContainerAriaLabelledby',
-                        '[attr.aria-describedby]': 'owlDialogContainerAriaDescribedby',
-                        '[@slideModal]': 'owlDialogContainerAnimation'
-                    }
+                    ]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$4.FocusTrapFactory }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; }, propDecorators: { portalOutlet: [{
+                }] }]; }, propDecorators: { owlDialogContainerTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], owlDialogContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dialog-container']
+            }], owlDialogContainerId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], owlDialogContainerRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], owlDialogContainerAriaLabelledby: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], owlDialogContainerAriaDescribedby: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], owlDialogContainerAnimation: [{
+                type: HostBinding,
+                args: ['@slideModal']
+            }], onAnimationStart: [{
+                type: HostListener,
+                args: ['@slideModal.start', ['$event']]
+            }], onAnimationDone: [{
+                type: HostListener,
+                args: ['@slideModal.done', ['$event']]
+            }], portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
             }] } });
@@ -6410,9 +6153,6 @@ function applyConfigDefaults(config, defaultOptions) {
     return extendObject(new OwlDialogConfig(), config, defaultOptions);
 }
 
-/**
- * date-time-picker.component
- */
 /** Injection token that determines the scroll handling while the dtPicker is open. */
 const OWL_DTPICKER_SCROLL_STRATEGY = new InjectionToken('owl-dtpicker-scroll-strategy');
 /** @docs-private */
@@ -6591,7 +6331,6 @@ class OwlDateTimeComponent extends OwlDateTime {
     get isInRangeMode() {
         return this._dtInput.isInRangeMode;
     }
-    ngOnInit() { }
     ngOnDestroy() {
         this.close();
         this.dtInputSub.unsubscribe();
@@ -6874,16 +6613,15 @@ class OwlDateTimeComponent extends OwlDateTime {
     }
 }
 OwlDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeComponent, deps: [{ token: i1$5.Overlay }, { token: i0.ViewContainerRef }, { token: OwlDialogService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeComponent, selector: "owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0, template: "", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeComponent, selector: "ofe-owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0, template: "", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'owl-date-time',
+                    selector: 'ofe-owl-date-time',
                     exportAs: 'owlDateTime',
                     templateUrl: './date-time-picker.component.html',
                     styleUrls: ['./date-time-picker.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: i1$5.Overlay }, { type: i0.ViewContainerRef }, { type: OwlDialogService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
                     type: Optional
@@ -6926,7 +6664,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 const OWL_DATETIME_VALUE_ACCESSOR$1 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => OwlDateTimeInputDirective),
@@ -7075,6 +6812,56 @@ class OwlDateTimeInputDirective {
             this.value = this.value;
         });
     }
+    get owlDateTimeInputAriaHaspopup() {
+        return true;
+    }
+    get maxIso8601() {
+        return this.max ? this.dateTimeAdapter.toIso8601(this.max) : null;
+    }
+    get minIso8601() {
+        return this.min ? this.dateTimeAdapter.toIso8601(this.min) : null;
+    }
+    get owlDateTimeInputAriaOwns() {
+        return (this.dtPicker.opened && this.dtPicker.id) || null;
+    }
+    get owlDateTimeInputDisabled() {
+        return this.disabled;
+    }
+    handleBlurOnHost($event) {
+        this.onModelTouched();
+    }
+    handleChangeOnHost($event) {
+        let v;
+        if (this.isInSingleMode) {
+            v = this.value;
+        }
+        else if (this.isInRangeMode) {
+            v = this.values;
+        }
+        this.dateTimeChange.emit({
+            source: this,
+            value: v,
+            input: this.elmRef.nativeElement
+        });
+    }
+    handleInputOnHost($event) {
+        const value = $event.target.value;
+        if (this._selectMode === 'single') {
+            this.changeInputInSingleMode(value);
+        }
+        else if (this._selectMode === 'range') {
+            this.changeInputInRangeMode(value);
+        }
+        else {
+            this.changeInputInRangeFromToMode(value);
+        }
+    }
+    handleKeydownOnHost($event) {
+        if ($event.altKey && $event.keyCode === DOWN_ARROW) {
+            this.dtPicker.open();
+            $event.preventDefault();
+        }
+    }
     /**
      * The date time picker that this input is associated with.
      * */
@@ -7185,21 +6972,6 @@ class OwlDateTimeInputDirective {
             this._selectMode === 'rangeFrom' ||
             this._selectMode === 'rangeTo');
     }
-    get owlDateTimeInputAriaHaspopup() {
-        return true;
-    }
-    get owlDateTimeInputAriaOwns() {
-        return (this.dtPicker.opened && this.dtPicker.id) || null;
-    }
-    get minIso8601() {
-        return this.min ? this.dateTimeAdapter.toIso8601(this.min) : null;
-    }
-    get maxIso8601() {
-        return this.max ? this.dateTimeAdapter.toIso8601(this.max) : null;
-    }
-    get owlDateTimeInputDisabled() {
-        return this.disabled;
-    }
     ngOnInit() {
         if (!this.dtPicker) {
             throw Error(`OwlDateTimePicker: the picker input doesn't have any associated owl-date-time component`);
@@ -7257,44 +7029,6 @@ class OwlDateTimeInputDirective {
     registerOnValidatorChange(fn) {
         this.validatorOnChange = fn;
     }
-    /**
-     * Open the picker when user hold alt + DOWN_ARROW
-     * */
-    handleKeydownOnHost(event) {
-        if (event.altKey && event.keyCode === DOWN_ARROW) {
-            this.dtPicker.open();
-            event.preventDefault();
-        }
-    }
-    handleBlurOnHost(event) {
-        this.onModelTouched();
-    }
-    handleInputOnHost(event) {
-        const value = event.target.value;
-        if (this._selectMode === 'single') {
-            this.changeInputInSingleMode(value);
-        }
-        else if (this._selectMode === 'range') {
-            this.changeInputInRangeMode(value);
-        }
-        else {
-            this.changeInputInRangeFromToMode(value);
-        }
-    }
-    handleChangeOnHost(event) {
-        let v;
-        if (this.isInSingleMode) {
-            v = this.value;
-        }
-        else if (this.isInRangeMode) {
-            v = this.values;
-        }
-        this.dateTimeChange.emit({
-            source: this,
-            value: v,
-            input: this.elmRef.nativeElement
-        });
-    }
     /**
      * Set the native input property 'value'
      */
@@ -7468,23 +7202,12 @@ class OwlDateTimeInputDirective {
     }
 }
 OwlDateTimeInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-OwlDateTimeInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: { owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", selectMode: "selectMode", value: "value", values: "values", _disabled: "_disabled", rangeSeparator: "rangeSeparator" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "keydown": "handleKeydownOnHost($event)", "blur": "handleBlurOnHost($event)", "input": "handleInputOnHost($event)", "change": "handleChangeOnHost($event)" }, properties: { "attr.aria-haspopup": "owlDateTimeInputAriaHaspopup", "attr.aria-owns": "owlDateTimeInputAriaOwns", "attr.min": "minIso8601", "attr.max": "maxIso8601", "disabled": "owlDateTimeInputDisabled" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR$1, OWL_DATETIME_VALIDATORS], exportAs: ["owlDateTimeInput"], ngImport: i0 });
+OwlDateTimeInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: { owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", selectMode: "selectMode", value: "value", values: "values", _disabled: "_disabled", rangeSeparator: "rangeSeparator" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "blur": "handleBlurOnHost($event)", "change": "handleChangeOnHost($event)", "input": "handleInputOnHost($event)", "keydown": "handleKeydownOnHost($event)" }, properties: { "attr.aria-haspopup": "this.owlDateTimeInputAriaHaspopup", "attr.max": "this.maxIso8601", "attr.min": "this.minIso8601", "attr.aria-owns": "this.owlDateTimeInputAriaOwns", "disabled": "this.owlDateTimeInputDisabled" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR$1, OWL_DATETIME_VALIDATORS], exportAs: ["owlDateTimeInput"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[owlDateTime]',
                     exportAs: 'owlDateTimeInput',
-                    host: {
-                        '(keydown)': 'handleKeydownOnHost($event)',
-                        '(blur)': 'handleBlurOnHost($event)',
-                        '(input)': 'handleInputOnHost($event)',
-                        '(change)': 'handleChangeOnHost($event)',
-                        '[attr.aria-haspopup]': 'owlDateTimeInputAriaHaspopup',
-                        '[attr.aria-owns]': 'owlDateTimeInputAriaOwns',
-                        '[attr.min]': 'minIso8601',
-                        '[attr.max]': 'maxIso8601',
-                        '[disabled]': 'owlDateTimeInputDisabled'
-                    },
                     providers: [OWL_DATETIME_VALUE_ACCESSOR$1, OWL_DATETIME_VALIDATORS]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DateTimeAdapter, decorators: [{
@@ -7494,7 +7217,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }, {
                     type: Inject,
                     args: [OWL_DATE_TIME_FORMATS]
-                }] }]; }, propDecorators: { owlDateTime: [{
+                }] }]; }, propDecorators: { owlDateTimeInputAriaHaspopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], maxIso8601: [{
+                type: HostBinding,
+                args: ['attr.max']
+            }], minIso8601: [{
+                type: HostBinding,
+                args: ['attr.min']
+            }], owlDateTimeInputAriaOwns: [{
+                type: HostBinding,
+                args: ['attr.aria-owns']
+            }], owlDateTimeInputDisabled: [{
+                type: HostBinding,
+                args: ['disabled']
+            }], handleBlurOnHost: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }], handleChangeOnHost: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], handleInputOnHost: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], handleKeydownOnHost: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], owlDateTime: [{
                 type: Input
             }], owlDateTimeFilter: [{
                 type: Input
@@ -7518,12 +7268,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 class OwlDateTimeTriggerDirective {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
         this.stateChanges = Subscription.EMPTY;
     }
+    get owlDTTriggerDisabledClass() {
+        return this.disabled;
+    }
+    handleClickOnHost($event) {
+        if (this.dtPicker) {
+            this.dtPicker.open();
+            $event.stopPropagation();
+        }
+    }
     get disabled() {
         return this._disabled === undefined
             ? this.dtPicker.disabled
@@ -7532,10 +7290,6 @@ class OwlDateTimeTriggerDirective {
     set disabled(value) {
         this._disabled = value;
     }
-    get owlDTTriggerDisabledClass() {
-        return this.disabled;
-    }
-    ngOnInit() { }
     ngOnChanges(changes) {
         if (changes.datepicker) {
             this.watchStateChanges();
@@ -7547,12 +7301,6 @@ class OwlDateTimeTriggerDirective {
     ngOnDestroy() {
         this.stateChanges.unsubscribe();
     }
-    handleClickOnHost(event) {
-        if (this.dtPicker) {
-            this.dtPicker.open();
-            event.stopPropagation();
-        }
-    }
     watchStateChanges() {
         this.stateChanges.unsubscribe();
         const inputDisabled = this.dtPicker && this.dtPicker.dtInput
@@ -7567,19 +7315,21 @@ class OwlDateTimeTriggerDirective {
     }
 }
 OwlDateTimeTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-OwlDateTimeTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: { dtPicker: ["owlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0 });
+OwlDateTimeTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeTriggerDirective, selector: "[ofeOwlDateTimeTrigger]", inputs: { dtPicker: ["ofeOwlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "this.owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeTriggerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[owlDateTimeTrigger]',
-                    host: {
-                        '(click)': 'handleClickOnHost($event)',
-                        '[class.owl-dt-trigger-disabled]': 'owlDTTriggerDisabledClass'
-                    }
+                    selector: '[ofeOwlDateTimeTrigger]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dtPicker: [{
                 type: Input,
-                args: ['owlDateTimeTrigger']
+                args: ['ofeOwlDateTimeTrigger']
+            }], owlDTTriggerDisabledClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-trigger-disabled']
+            }], handleClickOnHost: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }], disabled: [{
                 type: Input
             }] } });
@@ -7622,17 +7372,17 @@ class NgxDatetimeComponent {
     }
 }
 NgxDatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxDatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NgxDatetimeComponent, selector: "ngx-datetimepicker", inputs: { id: "id", theme: "theme", datePickerFormat: "datePickerFormat", showWeeks: "showWeeks", weeks: "weeks" }, providers: [
+NgxDatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: { id: "id", theme: "theme", datePickerFormat: "datePickerFormat", showWeeks: "showWeeks", weeks: "weeks" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => NgxDatetimeComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"date-time-picker-container\">\n  <div\n    data-date-picker\n    data-date-picker-type=\"single\"\n    class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n    [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\"\n  >\n    <div class=\"cds--date-picker-container fill\">\n      <div class=\"cds--date-picker-input__wrapper\">\n        <input\n          [disabled]=\"isDisabled\"\n          (dateTimeChange)=\"onInput($event)\"\n          type=\"text\"\n          class=\"cds--date-picker__input fill\"\n          [id]=\"id\"\n          [value]=\"value\"\n          [owlDateTime]=\"dt1\"\n          [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", styles: [".date-time-picker-container{display:flex;justify-content:space-between}.week-select-wrapper{margin-left:1rem;width:30%}\n"], components: [{ type: OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled", "rangeSeparator"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i20.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    ], ngImport: i0, template: "<div class=\"date-time-picker-container\">\n  <div\n    data-date-picker\n    data-date-picker-type=\"single\"\n    class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n    [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\"\n  >\n    <div class=\"cds--date-picker-container fill\">\n      <div class=\"cds--date-picker-input__wrapper\">\n        <input\n          [disabled]=\"isDisabled\"\n          (dateTimeChange)=\"onInput($event)\"\n          type=\"text\"\n          class=\"cds--date-picker__input fill\"\n          [id]=\"id\"\n          [value]=\"value\"\n          [owlDateTime]=\"dt1\"\n          [ofeOwlDateTimeTrigger]=\"dt1\"\n          placeholder=\"mm/dd/yyyy\"\n          data-date-picker-input\n        />\n        <svg\n          [ofeOwlDateTimeTrigger]=\"dt1\"\n          focusable=\"false\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          style=\"will-change: transform\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          data-date-picker-icon=\"true\"\n          class=\"cds--date-picker__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n          ></path>\n        </svg>\n      </div>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showWeeks\"\n    class=\"cds--select some-class week-select-wrapper\"\n    [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n  >\n    <div class=\"cds--select-input__wrapper\">\n      <select\n        (change)=\"onWeeksSelected($event.target.value)\"\n        id=\"select-1\"\n        class=\"cds--select-input\"\n      >\n        <option\n          class=\"cds--select-option\"\n          value=\"placeholder-item\"\n          disabled=\"\"\n          hidden=\"\"\n          selected=\"\"\n        >\n          Select Weeks\n        </option>\n        <option\n          class=\"cds--select-option\"\n          [value]=\"week\"\n          *ngFor=\"let week of weeks\"\n        >\n          {{week}} Weeks\n        </option>\n      </select>\n      <svg\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n        class=\"cds--select__arrow\"\n      >\n        <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n      </svg>\n    </div>\n  </div>\n</div>\n<ofe-owl-date-time\n  [pickerType]=\"datePickerFormat ? datePickerFormat : 'calendar'\"\n  [disabled]=\"isDisabled\"\n  #dt1\n></ofe-owl-date-time>\n", styles: [".date-time-picker-container{display:flex;justify-content:space-between}.week-select-wrapper{margin-left:1rem;width:30%}\n"], components: [{ type: OwlDateTimeComponent, selector: "ofe-owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled", "rangeSeparator"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: OwlDateTimeTriggerDirective, selector: "[ofeOwlDateTimeTrigger]", inputs: ["ofeOwlDateTimeTrigger", "disabled"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i19.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDatetimeComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngx-datetimepicker',
+                    selector: 'ofe-ngx-date-time-picker',
                     templateUrl: './ngx-datetime-picker.html',
                     styleUrls: ['./ngx-datetime-picker.css'],
                     providers: [
@@ -7708,7 +7458,7 @@ class NumberInputComponent {
         /**
          * Emits event notifying other classes when a change in state occurs in the input.
          */
-        this.change = new EventEmitter();
+        this.numberChange = new EventEmitter();
         /**
          * Sets the decrement label text
          */
@@ -7803,7 +7553,7 @@ class NumberInputComponent {
         const event = new NumberChangeEvent();
         event.source = this;
         event.value = this.value;
-        this.change.emit(event);
+        this.numberChange.emit(event);
         this.propagateChange(this.value);
     }
     onNumberInputChange(event) {
@@ -7819,7 +7569,7 @@ class NumberInputComponent {
  */
 NumberInputComponent.numberCount = 0;
 NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumberInputComponent, selector: "number-input", inputs: { theme: "theme", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", id: "id", size: "size", required: "required", value: "value", min: "min", max: "max", label: "label", helperText: "helperText", invalidText: "invalidText", step: "step", precision: "precision", warn: "warn", warnText: "warnText", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel" }, outputs: { change: "change" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
+NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumberInputComponent, selector: "ofe-number-input", inputs: { theme: "theme", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", id: "id", size: "size", required: "required", value: "value", min: "min", max: "max", label: "label", helperText: "helperText", invalidText: "invalidText", step: "step", precision: "precision", warn: "warn", warnText: "warnText", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel" }, outputs: { numberChange: "numberChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => NumberInputComponent),
@@ -7829,7 +7579,7 @@ NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'number-input',
+                    selector: 'ofe-number-input',
                     templateUrl: 'number-input.component.html',
                     providers: [
                         {
@@ -7873,7 +7623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], warnText: [{
                 type: Input
-            }], change: [{
+            }], numberChange: [{
                 type: Output
             }], decrementLabel: [{
                 type: Input
@@ -7898,7 +7648,6 @@ class RadioButtonControlComponent {
             return option;
         });
     }
-    ngAfterViewInit() { }
     writeValue(value) { }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -7934,7 +7683,7 @@ class RadioButtonControlComponent {
     }
 }
 RadioButtonControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonControlComponent, selector: "radio", inputs: { id: "id", selected: "selected", options: "options", allowRadioUnselect: "allowRadioUnselect" }, providers: [
+RadioButtonControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: { id: "id", selected: "selected", options: "options", allowRadioUnselect: "allowRadioUnselect" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RadioButtonControlComponent),
@@ -7944,7 +7693,7 @@ RadioButtonControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonControlComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'radio',
+                    selector: 'ofe-radio-button',
                     templateUrl: './radio.component.html',
                     providers: [
                         {
@@ -7979,7 +7728,6 @@ class CheckboxControlComponent {
             return option;
         });
     }
-    ngAfterViewInit() { }
     writeValue(value) {
         this.value = value;
     }
@@ -8023,7 +7771,7 @@ class CheckboxControlComponent {
     }
 }
 CheckboxControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxControlComponent, selector: "checkbox", inputs: { id: "id", options: "options", selected: "selected" }, providers: [
+CheckboxControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: { id: "id", options: "options", selected: "selected" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => CheckboxControlComponent),
@@ -8033,7 +7781,7 @@ CheckboxControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxControlComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'checkbox',
+                    selector: 'ofe-checkbox',
                     templateUrl: './checkbox.component.html',
                     providers: [
                         {
@@ -8060,7 +7808,6 @@ class AppointmentsOverviewComponent {
         this.appointments = [];
         this.today = '';
     }
-    ngOnInit() { }
     ngOnChanges() {
         this.node.control.valueChanges.subscribe((appointmentDate) => {
             var _a, _b;
@@ -8156,11 +7903,11 @@ class AppointmentsOverviewComponent {
     }
 }
 AppointmentsOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppointmentsOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AppointmentsOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppointmentsOverviewComponent, selector: "appointments-overview", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showAppointments\" class=\"container\">\n  <div *ngIf=\"loadingAppointments\">\n    <span *ngIf=\"!appointmentsLoaded && errorLoadingAppointments\"\n      >Error checking appointments</span\n    >\n    <div\n      *ngIf=\"loadingAppointments\"\n      class=\"cds--inline-loading\"\n      aria-live=\"assertive\"\n    >\n      <div class=\"cds--inline-loading__animation\">\n        <div\n          aria-atomic=\"true\"\n          aria-labelledby=\"loading-id-2\"\n          aria-live=\"assertive\"\n          class=\"cds--loading cds--loading--small\"\n        >\n          <label id=\"loading-id-2\" class=\"cds--visually-hidden\"\n            >Active loading indicator</label\n          ><svg class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n            <title>Active loading indicator</title>\n            <circle\n              class=\"cds--loading__background\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n            <circle\n              class=\"cds--loading__stroke\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n          </svg>\n        </div>\n      </div>\n      <div class=\"cds--inline-loading__text\">Loading...</div>\n    </div>\n  </div>\n\n  <div\n    class=\"cds--data-table-content\"\n    *ngIf=\"appointmentsLoaded && !errorLoadingAppointments\"\n  >\n    <table class=\"cds--data-table cds--data-table--no-border\">\n      <thead>\n        <tr>\n          <th\n            *ngFor=\"let appointment of appointments\"\n            scope=\"col\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.date }}\n          </th>\n        </tr>\n      </thead>\n      <tbody aria-live=\"polite\">\n        <tr>\n          <td\n            *ngFor=\"let appointment of appointments\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.count }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".container{margin-top:.625rem}.active{background-color:#e0e0e0;cursor:pointer}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+AppointmentsOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"showAppointments\" class=\"container\">\n  <div *ngIf=\"loadingAppointments\">\n    <span *ngIf=\"!appointmentsLoaded && errorLoadingAppointments\"\n      >Error checking appointments</span\n    >\n    <div\n      *ngIf=\"loadingAppointments\"\n      class=\"cds--inline-loading\"\n      aria-live=\"assertive\"\n    >\n      <div class=\"cds--inline-loading__animation\">\n        <div\n          aria-atomic=\"true\"\n          aria-labelledby=\"loading-id-2\"\n          aria-live=\"assertive\"\n          class=\"cds--loading cds--loading--small\"\n        >\n          <label id=\"loading-id-2\" class=\"cds--visually-hidden\"\n            >Active loading indicator</label\n          ><svg class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n            <title>Active loading indicator</title>\n            <circle\n              class=\"cds--loading__background\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n            <circle\n              class=\"cds--loading__stroke\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n          </svg>\n        </div>\n      </div>\n      <div class=\"cds--inline-loading__text\">Loading...</div>\n    </div>\n  </div>\n\n  <div\n    class=\"cds--data-table-content\"\n    *ngIf=\"appointmentsLoaded && !errorLoadingAppointments\"\n  >\n    <table class=\"cds--data-table cds--data-table--no-border\">\n      <thead>\n        <tr>\n          <th\n            *ngFor=\"let appointment of appointments\"\n            scope=\"col\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.date }}\n          </th>\n        </tr>\n      </thead>\n      <tbody aria-live=\"polite\">\n        <tr>\n          <td\n            *ngFor=\"let appointment of appointments\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.count }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".container{margin-top:.625rem}.active{background-color:#e0e0e0;cursor:pointer}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppointmentsOverviewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'appointments-overview',
+                    selector: 'ofe-appointments-overview',
                     templateUrl: './appointments-overview.component.html',
                     styleUrls: ['./appointments-overview.component.css']
                 }]
@@ -8168,107 +7915,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-class HistoricalFieldHelperService {
-    getDisplayTextFromOptions(question, valueProperty, displayProperty) {
-        let displayText = '';
-        const historicalValue = question.historicalDataValue;
-        if (_.isArray(historicalValue.value)) {
-            let valueConverted = 0;
-            _.each(historicalValue.value, (val) => {
-                _.each(question.options, (option) => {
-                    if (option[valueProperty] === val) {
-                        if (valueConverted === 0) {
-                            displayText = displayText + option[displayProperty];
-                        }
-                        else {
-                            displayText = displayText + ', ' + option[displayProperty];
-                        }
-                        valueConverted++;
-                    }
-                });
-            });
-        }
-        else {
-            _.each(question.options, (option) => {
-                if (option[valueProperty] === historicalValue.value) {
-                    displayText = option[displayProperty];
-                }
-            });
-        }
-        return displayText;
-    }
-}
-HistoricalFieldHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-HistoricalFieldHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService, decorators: [{
-            type: Injectable
-        }] });
-
-class HistoricalValueDirective {
-    constructor(historicalFieldHelper) {
-        this.historicalFieldHelper = historicalFieldHelper;
-        this._nodeChange = new EventEmitter();
-    }
-    setValue(e) {
-        if (e.target.name === 'historyValue') {
-            if (this._node &&
-                (!this.compareString(this._node.question.renderingType, 'page') ||
-                    !this.compareString(this._node.question.renderingType, 'section'))) {
-                this._node.control.setValue(this._node.question.historicalDataValue.value);
-                this._node.question['historicalValue'] = this._node.question.historicalDataValue;
-                e.stopPropagation();
-                this._nodeChange.emit(this._node);
-            }
-        }
-    }
-    compareString(a, b) {
-        if (a === b) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    set node(node) {
-        if (node) {
-            this._node = node;
-            if (this._node.question.enableHistoricalValue &&
-                !_.isUndefined(this._node.question.historicalDataValue)) {
-                const display = { text: '', _date: '' };
-                if (this._node.question.renderingType === 'select' ||
-                    this._node.question.renderingType === 'multi-select' ||
-                    this._node.question.renderingType === 'single-select') {
-                    display.text = this.historicalFieldHelper.getDisplayTextFromOptions(this._node.question, 'value', 'label');
-                    display._date = this._node.question.historicalDataValue.valueDate;
-                    this._node.question['historicalDisplay'] = display;
-                }
-                else if (!_.isUndefined(this._node.question.historicalDataValue)) {
-                    display.text = this._node.question.historicalDataValue.value;
-                    display._date = this._node.question.historicalDataValue.valueDate;
-                    this._node.question['historicalDisplay'] = display;
-                }
-            }
-        }
-    }
-}
-HistoricalValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalValueDirective, deps: [{ token: HistoricalFieldHelperService }], target: i0.ɵɵFactoryTarget.Directive });
-HistoricalValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HistoricalValueDirective, selector: "[node]", inputs: { _node: "_node", node: "node" }, outputs: { _nodeChange: "_nodeChange" }, host: { listeners: { "click": "setValue($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalValueDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[node]`
-                }]
-        }], ctorParameters: function () { return [{ type: HistoricalFieldHelperService }]; }, propDecorators: { _node: [{
-                type: Input
-            }], _nodeChange: [{
-                type: Output
-            }], setValue: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], node: [{
-                type: Input
-            }] } });
-
 const COLLAPSE_ANIMATION_TIMING = '400ms cubic-bezier(0.4,0.0,0.2,1)';
 const expandAnimation = [
     style({ height: 0, visibility: 'hidden' }),
@@ -8279,11 +7925,11 @@ const collapseAnimation = [
     animate(COLLAPSE_ANIMATION_TIMING, style({ height: 0, visibility: 'hidden' }))
 ];
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 class CollapseDirective {
     constructor(_el, _renderer, _builder) {
         this._el = _el;
         this._renderer = _renderer;
+        // @HostBinding('class.collapse')
         /** This event fires as soon as content collapses */
         this.collapsed = new EventEmitter();
         /** This event fires when collapsing is started */
@@ -8405,16 +8051,12 @@ class CollapseDirective {
     }
 }
 CollapseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$6.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-CollapseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CollapseDirective, selector: "[collapse]", inputs: { display: "display", isAnimated: "isAnimated", collapse: "collapse" }, outputs: { collapsed: "collapsed", collapses: "collapses", expanded: "expanded", expands: "expands" }, host: { properties: { "class.collapse": "this.isCollapse", "class.in": "this.isExpanded", "class.show": "this.isExpanded", "attr.aria-expanded": "this.isExpanded", "attr.aria-hidden": "this.isCollapsed", "class.collapsing": "this.isCollapsing" } }, exportAs: ["bs-collapse"], ngImport: i0 });
+CollapseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CollapseDirective, selector: "[ofeCollapse]", inputs: { display: "display", isAnimated: "isAnimated", collapse: "collapse" }, outputs: { collapsed: "collapsed", collapses: "collapses", expanded: "expanded", expands: "expands" }, host: { properties: { "class.in": "this.isExpanded", "class.show": "this.isExpanded", "attr.aria-expanded": "this.isExpanded", "attr.aria-hidden": "this.isCollapsed", "class.collapse": "this.isCollapse", "class.collapsing": "this.isCollapsing" } }, exportAs: ["bs-collapse"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CollapseDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[collapse]',
-                    exportAs: 'bs-collapse',
-                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-                    host: {
-                        '[class.collapse]': 'true'
-                    }
+                    selector: '[ofeCollapse]',
+                    exportAs: 'bs-collapse'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$6.AnimationBuilder }]; }, propDecorators: { collapsed: [{
                 type: Output
@@ -8450,38 +8092,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-/* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/directive-class-suffix */
-class Option$1 {
-    constructor() {
-        this.inputClass = 'cds--select-option';
-    }
-}
-Option$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Option$1, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-Option$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Option$1, selector: "option", host: { properties: { "class": "this.inputClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Option$1, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line
-                    selector: 'option'
-                }]
-        }], propDecorators: { inputClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/directive-class-suffix */
 /**
  * A directive for applying styling to a textarea element.
  *
  * Example:
  *
  * ```html
- * <textarea ibmTextArea></textarea>
+ * <textarea ofeTextAreaInput></textarea>
  * ```
  *
  * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
  */
-class TextArea {
+class TextAreaDirective {
     constructor() {
         /**
          * `light` or `dark` input theme
@@ -8495,12 +8117,12 @@ class TextArea {
         return this.theme === 'light';
     }
 }
-TextArea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TextArea.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextArea, selector: "[ibmTextArea]", inputs: { theme: "theme", invalid: "invalid", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--skeleton": "this.skeleton", "class.cds--text-area--light": "this.isLightTheme" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextArea, decorators: [{
+TextAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TextAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: { theme: "theme", invalid: "invalid", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--skeleton": "this.skeleton", "class.cds--text-area--light": "this.isLightTheme" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ibmTextArea]'
+                    selector: '[ofeTextAreaInput]'
                 }]
         }], propDecorators: { theme: [{
                 type: Input
@@ -8522,19 +8144,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.cds--text-area--light']
             }] } });
 
-/* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/directive-class-suffix */
 /**
  * A directive for applying styling to an input element.
  *
  * Example:
  *
  * ```html
- * <input ibmText/>
+ * <input ofeTextInput/>
  * ```
  *
  * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
  */
-class TextInput {
+class TextInputDirective {
     constructor() {
         /**
          * `light` or `dark` input theme
@@ -8559,12 +8180,12 @@ class TextInput {
         return this.theme === 'light';
     }
 }
-TextInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TextInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextInput, selector: "[ibmText]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--xl": "this.isSizeXl", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input__field-wrapper--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextInput, decorators: [{
+TextInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TextInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextInputDirective, selector: "[ofeTextInput]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--xl": "this.isSizeXl", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input__field-wrapper--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ibmText]'
+                    selector: '[ofeTextInput]'
                 }]
         }], propDecorators: { theme: [{
                 type: Input
@@ -8599,6 +8220,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.cds--text-input--light']
             }] } });
 
+class HistoricalFieldHelperService {
+    getDisplayTextFromOptions(question, valueProperty, displayProperty) {
+        let displayText = '';
+        const historicalValue = question.historicalDataValue;
+        if (_.isArray(historicalValue.value)) {
+            let valueConverted = 0;
+            _.each(historicalValue.value, (val) => {
+                _.each(question.options, (option) => {
+                    if (option[valueProperty] === val) {
+                        if (valueConverted === 0) {
+                            displayText = displayText + option[displayProperty];
+                        }
+                        else {
+                            displayText = displayText + ', ' + option[displayProperty];
+                        }
+                        valueConverted++;
+                    }
+                });
+            });
+        }
+        else {
+            _.each(question.options, (option) => {
+                if (option[valueProperty] === historicalValue.value) {
+                    displayText = option[displayProperty];
+                }
+            });
+        }
+        return displayText;
+    }
+}
+HistoricalFieldHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+HistoricalFieldHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalFieldHelperService, decorators: [{
+            type: Injectable
+        }] });
+
+class HistoricalValueDirective {
+    constructor(historicalFieldHelper) {
+        this.historicalFieldHelper = historicalFieldHelper;
+        this._nodeChange = new EventEmitter();
+    }
+    setValue(e) {
+        if (e.target.name === 'historyValue') {
+            if (this._node &&
+                (!this.compareString(this._node.question.renderingType, 'page') ||
+                    !this.compareString(this._node.question.renderingType, 'section'))) {
+                this._node.control.setValue(this._node.question.historicalDataValue.value);
+                this._node.question['historicalValue'] = this._node.question.historicalDataValue;
+                e.stopPropagation();
+                this._nodeChange.emit(this._node);
+            }
+        }
+    }
+    compareString(a, b) {
+        if (a === b) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    set node(node) {
+        if (node) {
+            this._node = node;
+            if (this._node.question.enableHistoricalValue &&
+                !_.isUndefined(this._node.question.historicalDataValue)) {
+                const display = { text: '', _date: '' };
+                if (this._node.question.renderingType === 'select' ||
+                    this._node.question.renderingType === 'multi-select' ||
+                    this._node.question.renderingType === 'single-select') {
+                    display.text = this.historicalFieldHelper.getDisplayTextFromOptions(this._node.question, 'value', 'label');
+                    display._date = this._node.question.historicalDataValue.valueDate;
+                    this._node.question['historicalDisplay'] = display;
+                }
+                else if (!_.isUndefined(this._node.question.historicalDataValue)) {
+                    display.text = this._node.question.historicalDataValue.value;
+                    display._date = this._node.question.historicalDataValue.valueDate;
+                    this._node.question['historicalDisplay'] = display;
+                }
+            }
+        }
+    }
+}
+HistoricalValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalValueDirective, deps: [{ token: HistoricalFieldHelperService }], target: i0.ɵɵFactoryTarget.Directive });
+HistoricalValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HistoricalValueDirective, selector: "[ofeNode]", inputs: { _node: "_node", node: "node" }, outputs: { _nodeChange: "_nodeChange" }, host: { listeners: { "click": "setValue($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HistoricalValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[ofeNode]`
+                }]
+        }], ctorParameters: function () { return [{ type: HistoricalFieldHelperService }]; }, propDecorators: { _node: [{
+                type: Input
+            }], _nodeChange: [{
+                type: Output
+            }], setValue: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], node: [{
+                type: Input
+            }] } });
+
 class FormRendererComponent {
     constructor(validationFactory, dataSources, formErrorsService, document) {
         this.validationFactory = validationFactory;
@@ -8799,11 +8521,11 @@ class FormRendererComponent {
     }
 }
 FormRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-FormRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormRendererComponent, selector: "form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap", controlId: "controlId" }, usesOnChanges: true, ngImport: i0, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <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\n    <div *ngIf=\"showErrors()\" class=\"container\">\n      <div\n        data-notification\n        *ngFor=\"let errorNode of errorNodes\"\n        class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n        role=\"alert\"\n        (click)=\"announceErrorField(errorNode)\"\n      >\n        <div class=\"cds--inline-notification__details\">\n          <div class=\"cds--inline-notification__text-wrapper\">\n            <p class=\"cds--inline-notification__title\">\n              {{ errorNode.question.label }}\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  </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            <radio [id]=\"node.question.key + 'id'\" [formControlName]=\"node.question.key\"\n                   [options]=\"node.question.options\" [selected]=\"node.control.value\" [allowRadioUnselect]=\"node.question.allowRadioUnselect\"></radio>\n          </div>\n\n          <div *ngSwitchCase=\"'checkbox'\">\n            <checkbox\n              [id]=\"node.question.key + 'id' + controlId\"\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              [controlId]=\"i\"\n            ></form-renderer>\n            <button\n              type=\"button\"\n              style=\"width: 100px\"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"cds--btn cds--btn--primary cds--btn--sm\"\n        (click)=\"node.createChildNode()\"\n      >\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-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:bold}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transtion-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:1.5rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box}.question-area{width:100%;max-width:18rem}.in-line{display:inline-block;padding-right:.5rem}\n"], components: [{ type: TabSetComponent, selector: "ngx-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["onSelect"] }, { type: TabComponent, selector: "ngx-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "app-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "app-custom-control-wrapper", inputs: ["question"] }, { type: Select, selector: "ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "app-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ngx-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ngx-datetimepicker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: NumberInputComponent, selector: "number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["change"] }, { type: RadioButtonControlComponent, selector: "radio", inputs: ["id", "selected", "options", "allowRadioUnselect"] }, { type: CheckboxControlComponent, selector: "checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "appointments-overview", inputs: ["node"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { type: i20.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i20.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i20.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: Option$1, selector: "option" }, { type: i20.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: TextArea, selector: "[ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInput, selector: "[ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "date": i1.DatePipe, "timeAgo": TimeAgoPipe } });
+FormRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap", controlId: "controlId" }, usesOnChanges: true, ngImport: i0, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ofe-tab\n      [tabTitle]=\"question.label\"\n      *ngFor=\"let question of node.question.questions; let i = index\"\n    >\n      <ofe-form-renderer\n        [node]=\"node.children[question.key]\"\n        [parentComponent]=\"this\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      >\n      </ofe-form-renderer>\n    </ofe-tab>\n    <div *ngIf=\"showErrors()\" class=\"container\">\n      <div\n        data-notification\n        *ngFor=\"let errorNode of errorNodes\"\n        class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n        role=\"alert\"\n        (click)=\"announceErrorField(errorNode)\"\n      >\n        <div class=\"cds--inline-notification__details\">\n          <div class=\"cds--inline-notification__text-wrapper\">\n            <p class=\"cds--inline-notification__title\">\n              {{ errorNode.question.label }}\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  </ofe-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n  <!--Page Components-->\n  <ofe-custom-component-wrapper\n    [dark]=\"theme === 'light'\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </ofe-custom-component-wrapper>\n  <ofe-form-renderer\n    *ngFor=\"let question of node.question.questions\"\n    [parentComponent]=\"this\"\n    [node]=\"node.children[question.key]\"\n    [parentGroup]=\"parentGroup\"\n    [labelMap]=\"labelMap\"\n  ></ofe-form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n  <div\n    class=\"cds--accordion__item\"\n    [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\"\n  >\n    <button\n      class=\"cds--accordion__heading\"\n      type=\"button\"\n      [attr.aria-expanded]=\"isCollapsed ? 'false' : 'true'\"\n      aria-controls=\"accordion-item-0\"\n      (click)=\"isCollapsed = !isCollapsed\"\n    >\n      <svg\n        class=\"cds--accordion__arrow\"\n        ibmIcon=\"chevron--right\"\n        size=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        aria-hidden=\"true\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n      >\n        <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n      </svg>\n      <p class=\"cds--accordion__title\">\n        {{ node.question.label }}\n      </p>\n    </button>\n    <div ofeCollapse=\"isCollapsed\">\n      <!--Section Components-->\n      <ofe-custom-component-wrapper\n        [dark]=\"theme === 'light'\"\n        [componentConfigs]=\"node.question.componentConfigs\"\n      >\n      </ofe-custom-component-wrapper>\n      <div\n        class=\"cds--accordion__content accordion-content-override\"\n        [ngClass]=\"{\n          'accordion-content-dark': theme === 'light'\n        }\"\n      >\n        <ofe-form-renderer\n          *ngFor=\"let question of node.question.questions\"\n          [parentComponent]=\"this\"\n          [node]=\"node.children[question.key]\"\n          [parentGroup]=\"parentGroup\"\n          [labelMap]=\"labelMap\"\n        ></ofe-form-renderer>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- MESSAGES -->\n<div\n  *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n  class=\"alert alert-warning\"\n>\n  <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n<div\n  *ngIf=\"node.question.controlType === 0\"\n  [formGroup]=\"parentGroup\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <ofe-custom-component-wrapper\n    [dark]=\"!(theme === 'light')\"\n    [componentConfigs]=\"node.question.componentConfigs\"\n  >\n  </ofe-custom-component-wrapper>\n  <div class=\"cds--form-item\">\n    <!--LEAF CONTROL-->\n    <div class=\"question-area\">\n      <a\n        class=\"form-tooltip pull-right\"\n        (click)=\"toggleInformation(node.question.extras.id)\"\n        data-placement=\"right\"\n        *ngIf=\"\n          node.question &&\n          node.question.extras.questionInfo &&\n          node.question.extras.questionInfo !== '' &&\n          node.question.extras.questionInfo !== ' '\n        \"\n      >\n        <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n      </a>\n\n      <label\n        *ngIf=\"node.question.label\"\n        [style.color]=\"hasErrors() ? 'red' : ''\"\n        class=\"cds--label\"\n        [attr.for]=\"node.question.key\"\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        <ofe-custom-control-wrapper\n          [formControlName]=\"node.question.key\"\n          [id]=\"node.question.key + 'id'\"\n          [question]=\"node.question\"\n        >\n        </ofe-custom-control-wrapper>\n      </div>\n\n      <ng-template #nativeControls>\n        <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n          <ofe-select\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'select'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n          >\n            <option *ngFor=\"let o of node.question.options\" [value]=\"o.value\">\n              {{ o.label }}\n            </option>\n          </ofe-select>\n\n          <div *ngSwitchCase=\"'file'\">\n            <ofe-file-upload\n              [dataSource]=\"dataSource\"\n              [formControlName]=\"node.question.key\"\n              [id]=\"node.question.key + 'id'\"\n              (fileChanged)=\"upload($event)\"\n            >\n            </ofe-file-upload>\n          </div>\n\n          <textarea\n            [theme]=\"theme\"\n            ofeTextAreaInput\n            [ngClass]=\"{\n              'cds--text-area--light': theme === 'light',\n              'cds--text-area--invalid': !node.control.valid\n            }\"\n            [placeholder]=\"node.question.placeholder\"\n            [rows]=\"node.question.rows\"\n            class=\"cds--text-area\"\n            *ngSwitchCase=\"'textarea'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\"\n          >\n          </textarea>\n\n          <ofe-remote-select\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'remote-select'\"\n            [placeholder]=\"node.question.placeholder\"\n            tabindex=\"0\"\n            [dataSource]=\"dataSource\"\n            [componentID]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\"\n            [id]=\"node.question.key + 'id'\"\n          ></ofe-remote-select>\n\n          <ofe-ngx-date-time-picker\n            [weeks]=\"node.question.extras.questionOptions.weeksList\"\n            [showWeeks]=\"node.question.showWeeksAdder\"\n            [theme]=\"theme\"\n            [id]=\"node.question.key + 'id'\"\n            [formControlName]=\"node.question.key\"\n            *ngSwitchCase=\"'date'\"\n            [datePickerFormat]=\"node.question.datePickerFormat\"\n          >\n          </ofe-ngx-date-time-picker>\n          <ng-select\n            [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n            [id]=\"node.question.key + 'id'\"\n            *ngSwitchCase=\"'multi-select'\"\n            [items]=\"node.question.options\"\n            bindLabel=\"label\"\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          <ofe-number-input\n            [theme]=\"theme\"\n            *ngSwitchCase=\"'number'\"\n            [id]=\"node.question.key + 'id'\"\n            [min]=\"node.question.extras.questionOptions.min\"\n            [max]=\"node.question.extras.questionOptions.max\"\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\"\n          >\n          </ofe-number-input>\n\n          <input\n            [theme]=\"theme\"\n            class=\"cds--text-input\"\n            ofeTextInput\n            *ngSwitchDefault\n            [formControlName]=\"node.question.key\"\n            [attr.placeholder]=\"node.question.placeholder\"\n            [type]=\"node.question.renderingType\"\n            [id]=\"node.question.key + 'id'\"\n            [readOnly]=\"node.question.extras.readOnly\"\n          />\n\n          <div *ngSwitchCase=\"'radio'\">\n            <ofe-radio-button\n              [id]=\"node.question.key + 'id'\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [selected]=\"node.control.value\"\n              [allowRadioUnselect]=\"node.question.allowRadioUnselect\"\n            ></ofe-radio-button>\n          </div>\n\n          <div *ngSwitchCase=\"'checkbox'\">\n            <ofe-checkbox\n              [id]=\"node.question.key + 'id' + controlId\"\n              [formControlName]=\"node.question.key\"\n              [options]=\"node.question.options\"\n              [selected]=\"node.control.value\"\n            ></ofe-checkbox>\n          </div>\n\n          <div\n            *ngIf=\"\n              node.question.enableHistoricalValue &&\n              node.question.historicalDisplay\n            \"\n            style=\"margin-top: 2px\"\n          >\n            <div class=\"container-fluid\">\n              <div class=\"row\">\n                <div class=\"col-xs-9\">\n                  <span class=\"text-warning\">Previous Value: </span>\n                  <strong>{{ node.question.historicalDisplay?.text }}</strong>\n                  <span *ngIf=\"node.question.showHistoricalValueDate\">\n                    <span> | </span>\n                    <strong class=\"text-primary\"\n                      >{{ node.question.historicalDisplay?._date | date }}\n                    </strong>\n                    <span\n                      class=\"text-primary\"\n                      *ngIf=\"\n                        node.question.historicalDisplay &&\n                        node.question.historicalDisplay._date\n                      \"\n                    >\n                      ({{\n                        node.question.historicalDisplay._date | timeAgo\n                      }})</span\n                    >\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  ofeNode=\"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          <ofe-appointments-overview [node]=\"node\"></ofe-appointments-overview>\n          <div *ngIf=\"hasErrors()\">\n            <div *ngFor=\"let e of errors()\">\n              <span class=\"text-danger\">{{ e }}</span>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n\n      <div\n        class=\"question-info col-md-12 col-lg-12 col-sm-12\"\n        id=\"{{ node.question.extras.id }}\"\n        *ngIf=\"\n          node.question &&\n          node.question.extras.questionInfo &&\n          node.question.extras.questionInfo !== '' &&\n          node.question.extras.questionInfo !== ' '\n        \"\n      >\n        {{ node.question.extras.questionInfo }}\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            <ofe-form-renderer\n              *ngFor=\"let question of child.question.questions\"\n              [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\"\n              [parentGroup]=\"child.control\"\n              [labelMap]=\"labelMap\"\n            ></ofe-form-renderer>\n            <div>{{ child.orderNumber }}</div>\n            <button\n              type=\"button \"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n          <div *ngFor=\"let child of node.children; let i = index\">\n            <ofe-form-renderer\n              *ngFor=\"let question of child.question.questions\"\n              [parentComponent]=\"this\"\n              [node]=\"child.children[question.key]\"\n              [parentGroup]=\"child.control\"\n              [labelMap]=\"labelMap\"\n              [controlId]=\"i\"\n            ></ofe-form-renderer>\n            <button\n              type=\"button\"\n              style=\"width: 100px\"\n              class=\"cds--btn cds--btn--danger cds--btn--sm\"\n              (click)=\"node.removeAt(i)\"\n            >\n              Remove\n            </button>\n            <br />\n            <hr\n              style=\"\n                margin-left: -2px;\n                margin-right: -2px;\n                margin-bottom: 4px;\n                margin-top: 8px;\n                border-width: 1px;\n              \"\n            />\n          </div>\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"cds--btn cds--btn--primary cds--btn--sm\"\n        (click)=\"node.createChildNode()\"\n      >\n        Add\n      </button>\n    </div>\n  </div>\n</div>\n<div\n  *ngIf=\"node.question.controlType === 2\"\n  [hidden]=\"node.control.hidden\"\n  [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n  <!--GROUP-->\n  <div [ngSwitch]=\"node.question.renderingType\">\n    <div *ngSwitchCase=\"'group'\">\n      <ofe-form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></ofe-form-renderer>\n    </div>\n    <div\n      *ngSwitchCase=\"'field-set'\"\n      style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n    >\n      <ofe-form-renderer\n        *ngFor=\"let question of node.question.questions\"\n        [parentComponent]=\"this\"\n        [node]=\"node.children[question.key]\"\n        [parentGroup]=\"node.control\"\n        [labelMap]=\"labelMap\"\n      ></ofe-form-renderer>\n    </div>\n  </div>\n</div>\n", styles: [".slider{width:auto;margin:30px}.slick-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:bold}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transtion-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:1.5rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box}.question-area{width:100%;max-width:18rem}.in-line{display:inline-block;padding-right:.5rem}\n"], components: [{ type: TabSetComponent, selector: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["tabSelect"] }, { type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: i1$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: NumberInputComponent, selector: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "selected", "options", "allowRadioUnselect"] }, { type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: ["node"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[ofeCollapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i19.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i19.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i19.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i19.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: ["theme", "invalid", "skeleton"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { type: HistoricalValueDirective, selector: "[ofeNode]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }], pipes: { "date": i1.DatePipe, "timeAgo": TimeAgoPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormRendererComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'form-renderer',
+                    selector: 'ofe-form-renderer',
                     templateUrl: 'form-renderer.component.html',
                     styleUrls: ['../../style/app.css', './form-renderer.component.css']
                 }]
@@ -8882,7 +8604,6 @@ class Form {
     searchNodeByQuestionType(rootNode, questionType, found) {
         if (rootNode instanceof GroupNode) {
             const nodeAsGroup = rootNode;
-            // eslint-disable-next-line guard-for-in
             for (const o in nodeAsGroup.children) {
                 this.searchNodeByQuestionType(nodeAsGroup.children[o], questionType, found);
             }
@@ -8908,7 +8629,6 @@ class Form {
         }
         if (rootNode instanceof GroupNode) {
             const nodeAsGroup = rootNode;
-            // eslint-disable-next-line guard-for-in
             for (const o in nodeAsGroup.children) {
                 this.findNodesByQuestionId(nodeAsGroup.children[o], questionId, results);
             }
@@ -8977,7 +8697,6 @@ class Form {
         }
         if (rootNode instanceof GroupNode) {
             const nodeAsGroup = rootNode;
-            // eslint-disable-next-line guard-for-in
             for (const o in nodeAsGroup.children) {
                 this._updateAlertsForAllControls(nodeAsGroup.children[o]);
             }
@@ -9000,7 +8719,6 @@ class Form {
         }
         if (rootNode instanceof GroupNode) {
             const nodeAsGroup = rootNode;
-            // eslint-disable-next-line guard-for-in
             for (const o in nodeAsGroup.children) {
                 this._updateHiddenDisabledStateForAllControls(nodeAsGroup.children[o]);
             }
@@ -9019,7 +8737,6 @@ class ErrorRendererComponent {
         this.validationFactory = validationFactory;
         this.formErrorsService = formErrorsService;
     }
-    ngOnInit() { }
     showErrors() {
         return !this.form.valid && this.form.showErrors;
     }
@@ -9050,11 +8767,11 @@ class ErrorRendererComponent {
     }
 }
 ErrorRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ErrorRendererComponent, deps: [{ token: ValidationFactory }, { token: FormErrorsService }], target: i0.ɵɵFactoryTarget.Component });
-ErrorRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ErrorRendererComponent, selector: "error-renderer", inputs: { form: "form" }, ngImport: i0, template: "<div *ngIf=\"showErrors()\" class=\"container\">\n  <div\n    data-notification\n    *ngFor=\"let errorNode of errorNodes\"\n    class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n    role=\"alert\"\n    (click)=\"announceErrorField(errorNode)\"\n  >\n    <div class=\"cds--inline-notification__details\">\n      <div class=\"cds--inline-notification__text-wrapper\">\n        <p class=\"cds--inline-notification__title\">\n          {{ errorNode.question.label }}\n        </p>\n        <p class=\"cds--inline-notification__subtitle\">\n          {{ getControlError(errorNode) }}\n        </p>\n      </div>\n    </div>\n    <button\n      tabindex=\"0\"\n      class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n      type=\"button\"\n    >\n      Fix\n    </button>\n    <svg\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--inline-notification__icon\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n      ></path>\n      <path\n        d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n        data-icon-path=\"inner-path\"\n        opacity=\"0\"\n      ></path>\n    </svg>\n  </div>\n</div>\n", styles: ["ul{list-style:none}.list-group-item{padding:2px 15px;cursor:pointer}ul li:hover{background-color:#fff}h4{margin-top:7px;margin-bottom:7px}.pointer{cursor:pointer}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ErrorRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ErrorRendererComponent, selector: "ofe-error-renderer", inputs: { form: "form" }, ngImport: i0, template: "<div *ngIf=\"showErrors()\" class=\"container\">\n  <div\n    data-notification\n    *ngFor=\"let errorNode of errorNodes\"\n    class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n    role=\"alert\"\n    (click)=\"announceErrorField(errorNode)\"\n  >\n    <div class=\"cds--inline-notification__details\">\n      <div class=\"cds--inline-notification__text-wrapper\">\n        <p class=\"cds--inline-notification__title\">\n          {{ errorNode.question.label }}\n        </p>\n        <p class=\"cds--inline-notification__subtitle\">\n          {{ getControlError(errorNode) }}\n        </p>\n      </div>\n    </div>\n    <button\n      tabindex=\"0\"\n      class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n      type=\"button\"\n    >\n      Fix\n    </button>\n    <svg\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--inline-notification__icon\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n      ></path>\n      <path\n        d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n        data-icon-path=\"inner-path\"\n        opacity=\"0\"\n      ></path>\n    </svg>\n  </div>\n</div>\n", styles: ["ul{list-style:none}.list-group-item{padding:2px 15px;cursor:pointer}ul li:hover{background-color:#fff}h4{margin-top:7px;margin-bottom:7px}.pointer{cursor:pointer}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ErrorRendererComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'error-renderer',
+                    selector: 'ofe-error-renderer',
                     templateUrl: 'error-renderer.component.html',
                     styleUrls: ['./error-renderer.component.css']
                 }]
@@ -9131,25 +8848,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 // webpack2_
 class ModalComponent {
     constructor() {
-        this.onOverlayClick = new EventEmitter();
+        this.overlayClick = new EventEmitter();
     }
-    ngOnInit() { }
     closeModal() {
-        this.onOverlayClick.emit(false);
+        this.overlayClick.emit(false);
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModalComponent, selector: "picker-modal", outputs: { onOverlayClick: "onOverlayClick" }, ngImport: i0, template: "<section class=\"x-modal\">\n  <section class=\"modal-overlay\" (click)=\"closeModal()\"></section>\n  <section class=\"modal-main\" id=\"section-modal-main\">\n    <ng-content></ng-content>\n  </section>\n</section>\n", styles: [":host{z-index:9999999999}*,*:before,*:after{box-sizing:border-box}.modal-main{position:absolute;left:19.6%;right:auto;top:auto;z-index:111;background-color:#fff;border:1px solid #d7dad7;border-radius:6px;transform:translate(-50%);box-shadow:0 5px 15px #0000004d}\n"], animations: [], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModalComponent, selector: "ofe-picker-modal", outputs: { overlayClick: "overlayClick" }, ngImport: i0, template: "<section class=\"x-modal\">\n  <section class=\"modal-overlay\" (click)=\"closeModal()\"></section>\n  <section class=\"modal-main\" id=\"section-modal-main\">\n    <ng-content></ng-content>\n  </section>\n</section>\n", styles: [":host{z-index:9999999999}*,*:before,*:after{box-sizing:border-box}.modal-main{position:absolute;left:19.6%;right:auto;top:auto;z-index:111;background-color:#fff;border:1px solid #d7dad7;border-radius:6px;transform:translate(-50%);box-shadow:0 5px 15px #0000004d}\n"], animations: [], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'picker-modal',
+                    selector: 'ofe-picker-modal',
                     templateUrl: './modal.component.html',
                     styleUrls: ['./modal.component.css'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     animations: []
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { onOverlayClick: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { overlayClick: [{
                 type: Output
             }] } });
 
@@ -9179,8 +8895,8 @@ class DatePickerComponent {
         this.locale = 'en';
         this.viewFormat = 'll';
         this.returnObject = 'js';
-        this.onDatePickerCancel = new EventEmitter();
-        this.onSelectDate = new EventEmitter();
+        this.datePickerCancel = new EventEmitter();
+        this.dateSelect = new EventEmitter();
         this.onDisplayMonths = false;
         this.onDisplayYears = false;
         this.displayYearsIndex = 0;
@@ -9236,7 +8952,7 @@ class DatePickerComponent {
         const daysDifference = day.diff(this.calendarDate.clone().startOf('date'), 'days');
         day = this.calendarDate.clone().add(daysDifference, 'd');
         const selectedDay = this.parseToReturnObjectType(day);
-        this.onSelectDate.emit(selectedDay);
+        this.dateSelect.emit(selectedDay);
         this.cancelDatePicker();
         return;
     }
@@ -9252,17 +8968,17 @@ class DatePickerComponent {
     }
     selectToday() {
         const today = this.parseToReturnObjectType(moment());
-        this.onSelectDate.emit(today);
+        this.dateSelect.emit(today);
         this.cancelDatePicker();
         return;
     }
     clearPickDate() {
-        this.onSelectDate.emit(null);
+        this.dateSelect.emit(null);
         this.cancelDatePicker();
         return;
     }
     cancelDatePicker() {
-        this.onDatePickerCancel.emit(false);
+        this.datePickerCancel.emit(false);
         return;
     }
     generateYears() {
@@ -9331,11 +9047,11 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "date-picker", inputs: { initDate: "initDate", locale: "locale", viewFormat: "viewFormat", returnObject: "returnObject" }, outputs: { onDatePickerCancel: "onDatePickerCancel", onSelectDate: "onSelectDate" }, ngImport: i0, template: "<picker-modal (onOverlayClick)=\"cancelDatePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-prev\" (click)=\"prev()\"></span>\n        </div>\n        <div class=\"picker-header-content\">\n          <div class=\"content\">\n            <span (click)=\"showMonthSelection()\" class=\"month\">{{\n              calendarDate | moment: 'MMMM'\n            }}</span>\n            <span class=\"seperator\">|</span>\n            <span (click)=\"showYearSelection()\" class=\"year\">{{\n              calendarDate | moment: 'YYYY'\n            }}</span>\n          </div>\n        </div>\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-next\" (click)=\"next()\"></span>\n        </div>\n      </div>\n      <div class=\"picker-calendar\">\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span class=\"picker-weekday\" *ngFor=\"let day of dayNames\">{{\n            day\n          }}</span>\n        </div>\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span\n            class=\"picker-day\"\n            (click)=\"selectDay(day)\"\n            [ngClass]=\"{\n              'out-focus': day.month() !== calendarDate.month(),\n              today: day.isSame(today),\n              selected: day.isSame(selectedDate)\n            }\"\n            *ngFor=\"let day of calendarDays\"\n          >\n            {{ day | moment: 'D' }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayMonths\">\n          <span\n            class=\"picker-month\"\n            *ngFor=\"let month of monthsShort\"\n            (click)=\"selectMonth(month)\"\n            [ngClass]=\"{\n              selected: month === currentMonth\n            }\"\n          >\n            {{ month }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayYears\">\n          <span\n            class=\"picker-year\"\n            *ngFor=\"let year of displayYearRange\"\n            (click)=\"selectYear(year)\"\n            [ngClass]=\"{\n              selected: year === currentYear\n            }\"\n          >\n            {{ year }}\n          </span>\n        </div>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-today\" (click)=\"selectToday()\">\n          <span class=\"text\">Today</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearPickDate()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelDatePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:666px}.picker-box{font-family:\"Open Sans\";min-width:400px!important;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;display:flex;height:2.5rem;width:100%}.picker-header-nav{position:relative;cursor:pointer;width:calc(100% / 8)}.picker-header-nav>*{position:absolute;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%)}.picker-header-nav .nav-prev:before,.picker-header-nav .nav-next:before{content:\" \";border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-right:.75em solid #000;width:0;height:0;display:block;margin:0 auto}.picker-header-nav .nav-next:before{border-right:0;border-left:.75em solid #000}.picker-header-content{width:calc(100% * 6 / 8);text-align:center}.picker-header-content .month{font-size:1.778rem;line-height:2.5rem;margin-right:.5rem;font-weight:700}.picker-header-content .year{font-style:italic;color:#999}.picker-calendar{width:100%}.picker-calendar .picker-calendar-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.625rem}.picker-calendar .picker-weekday{font-weight:700;text-align:left;color:#999;width:calc(100% / 7)}.picker-calendar .picker-day,.picker-calendar .picker-month,.picker-calendar .picker-year{font-size:1.333rem;line-height:2.5rem;position:relative;height:2.5rem;text-align:center;cursor:pointer;width:calc(100% / 7)}.picker-calendar .picker-day:hover,.picker-calendar .picker-month:hover,.picker-calendar .picker-year:hover{background:#b1dcfb}.picker-calendar .out-focus{color:#ddd}.picker-calendar .out-focus:hover{color:#000}.picker-calendar .selected{background:#0089ec;color:#fff}.picker-calendar .selected:hover{background:#0089ec}.picker-calendar .today:before{content:\" \";position:absolute;top:2px;right:2px;width:0;height:0;border-top:.5em solid #0059bc;border-left:.5em solid transparent}.picker-footer{cursor:pointer}.picker-footer .picker-action{text-align:center;width:calc(100% / 3)}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-today:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-today:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "picker-modal", outputs: ["onOverlayClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "moment": MomentPipe } });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "ofe-date-picker", inputs: { initDate: "initDate", locale: "locale", viewFormat: "viewFormat", returnObject: "returnObject" }, outputs: { datePickerCancel: "datePickerCancel", dateSelect: "dateSelect" }, ngImport: i0, template: "<ofe-picker-modal (overlayClick)=\"cancelDatePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-prev\" (click)=\"prev()\"></span>\n        </div>\n        <div class=\"picker-header-content\">\n          <div class=\"content\">\n            <span (click)=\"showMonthSelection()\" class=\"month\">{{\n              calendarDate | moment: 'MMMM'\n            }}</span>\n            <span class=\"seperator\">|</span>\n            <span (click)=\"showYearSelection()\" class=\"year\">{{\n              calendarDate | moment: 'YYYY'\n            }}</span>\n          </div>\n        </div>\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-next\" (click)=\"next()\"></span>\n        </div>\n      </div>\n      <div class=\"picker-calendar\">\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span class=\"picker-weekday\" *ngFor=\"let day of dayNames\">{{\n            day\n          }}</span>\n        </div>\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span\n            class=\"picker-day\"\n            (click)=\"selectDay(day)\"\n            [ngClass]=\"{\n              'out-focus': day.month() !== calendarDate.month(),\n              today: day.isSame(today),\n              selected: day.isSame(selectedDate)\n            }\"\n            *ngFor=\"let day of calendarDays\"\n          >\n            {{ day | moment: 'D' }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayMonths\">\n          <span\n            class=\"picker-month\"\n            *ngFor=\"let month of monthsShort\"\n            (click)=\"selectMonth(month)\"\n            [ngClass]=\"{\n              selected: month === currentMonth\n            }\"\n          >\n            {{ month }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayYears\">\n          <span\n            class=\"picker-year\"\n            *ngFor=\"let year of displayYearRange\"\n            (click)=\"selectYear(year)\"\n            [ngClass]=\"{\n              selected: year === currentYear\n            }\"\n          >\n            {{ year }}\n          </span>\n        </div>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-today\" (click)=\"selectToday()\">\n          <span class=\"text\">Today</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearPickDate()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelDatePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ofe-picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:666px}.picker-box{font-family:\"Open Sans\";min-width:400px!important;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;display:flex;height:2.5rem;width:100%}.picker-header-nav{position:relative;cursor:pointer;width:calc(100% / 8)}.picker-header-nav>*{position:absolute;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%)}.picker-header-nav .nav-prev:before,.picker-header-nav .nav-next:before{content:\" \";border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-right:.75em solid #000;width:0;height:0;display:block;margin:0 auto}.picker-header-nav .nav-next:before{border-right:0;border-left:.75em solid #000}.picker-header-content{width:calc(100% * 6 / 8);text-align:center}.picker-header-content .month{font-size:1.778rem;line-height:2.5rem;margin-right:.5rem;font-weight:700}.picker-header-content .year{font-style:italic;color:#999}.picker-calendar{width:100%}.picker-calendar .picker-calendar-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.625rem}.picker-calendar .picker-weekday{font-weight:700;text-align:left;color:#999;width:calc(100% / 7)}.picker-calendar .picker-day,.picker-calendar .picker-month,.picker-calendar .picker-year{font-size:1.333rem;line-height:2.5rem;position:relative;height:2.5rem;text-align:center;cursor:pointer;width:calc(100% / 7)}.picker-calendar .picker-day:hover,.picker-calendar .picker-month:hover,.picker-calendar .picker-year:hover{background:#b1dcfb}.picker-calendar .out-focus{color:#ddd}.picker-calendar .out-focus:hover{color:#000}.picker-calendar .selected{background:#0089ec;color:#fff}.picker-calendar .selected:hover{background:#0089ec}.picker-calendar .today:before{content:\" \";position:absolute;top:2px;right:2px;width:0;height:0;border-top:.5em solid #0059bc;border-left:.5em solid transparent}.picker-footer{cursor:pointer}.picker-footer .picker-action{text-align:center;width:calc(100% / 3)}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-today:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-today:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "ofe-picker-modal", outputs: ["overlayClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "moment": MomentPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'date-picker',
+                    selector: 'ofe-date-picker',
                     templateUrl: './date-picker.component.html',
                     styleUrls: ['./date-picker.component.css']
                 }]
@@ -9347,9 +9063,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], returnObject: [{
                 type: Input
-            }], onDatePickerCancel: [{
+            }], datePickerCancel: [{
                 type: Output
-            }], onSelectDate: [{
+            }], dateSelect: [{
                 type: Output
             }] } });
 
@@ -9365,8 +9081,8 @@ class TimePickerComponent {
         this.viewFormat = 'hh:mm A';
         this.use12Hour = false;
         this.returnObject = 'js';
-        this.onSelectTime = new EventEmitter();
-        this.onTimePickerCancel = new EventEmitter();
+        this.timeSelect = new EventEmitter();
+        this.timePickerCancel = new EventEmitter();
         this.hourFormat = 'HH';
     }
     ngOnInit() {
@@ -9407,23 +9123,23 @@ class TimePickerComponent {
     }
     selectTime() {
         const selectTime = this.parseToReturnObjectType(this.time);
-        this.onSelectTime.emit(selectTime);
+        this.timeSelect.emit(selectTime);
         this.cancelTimePicker();
         return;
     }
     selectNow() {
         const selectTime = this.parseToReturnObjectType(moment());
-        this.onSelectTime.emit(selectTime);
+        this.timeSelect.emit(selectTime);
         this.cancelTimePicker();
         return;
     }
     clearTime() {
-        this.onSelectTime.emit(null);
+        this.timeSelect.emit(null);
         this.cancelTimePicker();
         return;
     }
     cancelTimePicker() {
-        this.onTimePickerCancel.emit(false);
+        this.timePickerCancel.emit(false);
         return;
     }
     parseToReturnObjectType(time) {
@@ -9448,11 +9164,11 @@ class TimePickerComponent {
     }
 }
 TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "time-picker", inputs: { initTime: "initTime", showSecond: "showSecond", viewFormat: "viewFormat", use12Hour: "use12Hour", returnObject: "returnObject" }, outputs: { onSelectTime: "onSelectTime", onTimePickerCancel: "onTimePickerCancel" }, ngImport: i0, template: "<picker-modal (onOverlayClick)=\"cancelTimePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">Time Picker</div>\n      <div class=\"picker-table\">\n        <ul class=\"picker-table-time\">\n          <li class=\"picker-table-number hour\">\n            <span class=\"arrow up\" (click)=\"increaseHour()\"></span>\n            {{ time | moment: hourFormat }}\n            <span class=\"arrow down\" (click)=\"decreaseHour()\"></span>\n          </li>\n          <li class=\"picker-table-separator\">:</li>\n          <li class=\"picker-table-number minute\">\n            <span class=\"arrow up\" (click)=\"increaseMinute()\"></span>\n            {{ time | moment: 'mm' }}\n            <span class=\"arrow down\" (click)=\"decreaseMinute()\"></span>\n          </li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-separator\">:</li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-number second\">\n            <span class=\"arrow up\" (click)=\"increaseSecond()\"></span>\n            {{ time | moment: 'ss' }}\n            <span class=\"arrow down\" (click)=\"decreaseSecond()\"></span>\n          </li>\n          <li *ngIf=\"use12Hour\" class=\"picker-table-meridiem meridiem\">\n            {{ time | moment: 'A' }}\n          </li>\n        </ul>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-now\" (click)=\"selectNow()\">\n          <span class=\"text\">Now</span>\n        </div>\n        <div class=\"picker-action action-confirm\" (click)=\"selectTime()\">\n          <span class=\"text\">Confirm</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearTime()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelTimePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:40rem;font-family:\"Open Sans\"}.picker-box{width:100%;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;height:2.5rem;width:100%}.picker-header{text-align:center}.picker-table{width:100%;margin:2.5rem 0}.picker-table-time{font-size:2.37rem;line-height:2.5rem;list-style:none;margin:0;padding:0;display:flex;justify-content:center;width:100%;-webkit-user-select:none;user-select:none}.picker-table-number,.picker-table-meridiem,.picker-table-separator{text-align:center}.picker-table-number,.picker-table-meridiem{position:relative;width:20%}.arrow{position:absolute;left:50%;border:solid #777;border-width:0 .2rem .2rem 0;display:inline-block;padding:.25rem;cursor:pointer}.arrow.up{top:-1rem;transform:translate(-50%) rotate(-135deg)}.arrow.down{bottom:-1rem;transform:translate(-50%) rotate(45deg)}.arrow:hover{border-color:#1975d2}.picker-table-separator{width:calc(20% / 3)}.picker-footer{display:flex;justify-content:center;width:100%;cursor:pointer}.picker-footer .picker-action{width:25%;text-align:center}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-now:before,.picker-footer .action-confirm:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-now:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-confirm:before{width:1rem;height:1rem;border-radius:100%;background-color:#00b5ad}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "picker-modal", outputs: ["onOverlayClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "moment": MomentPipe } });
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "ofe-time-picker", inputs: { initTime: "initTime", showSecond: "showSecond", viewFormat: "viewFormat", use12Hour: "use12Hour", returnObject: "returnObject" }, outputs: { timeSelect: "timeSelect", timePickerCancel: "timePickerCancel" }, ngImport: i0, template: "<ofe-picker-modal (overlayClick)=\"cancelTimePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">Time Picker</div>\n      <div class=\"picker-table\">\n        <ul class=\"picker-table-time\">\n          <li class=\"picker-table-number hour\">\n            <span class=\"arrow up\" (click)=\"increaseHour()\"></span>\n            {{ time | moment: hourFormat }}\n            <span class=\"arrow down\" (click)=\"decreaseHour()\"></span>\n          </li>\n          <li class=\"picker-table-separator\">:</li>\n          <li class=\"picker-table-number minute\">\n            <span class=\"arrow up\" (click)=\"increaseMinute()\"></span>\n            {{ time | moment: 'mm' }}\n            <span class=\"arrow down\" (click)=\"decreaseMinute()\"></span>\n          </li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-separator\">:</li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-number second\">\n            <span class=\"arrow up\" (click)=\"increaseSecond()\"></span>\n            {{ time | moment: 'ss' }}\n            <span class=\"arrow down\" (click)=\"decreaseSecond()\"></span>\n          </li>\n          <li *ngIf=\"use12Hour\" class=\"picker-table-meridiem meridiem\">\n            {{ time | moment: 'A' }}\n          </li>\n        </ul>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-now\" (click)=\"selectNow()\">\n          <span class=\"text\">Now</span>\n        </div>\n        <div class=\"picker-action action-confirm\" (click)=\"selectTime()\">\n          <span class=\"text\">Confirm</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearTime()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelTimePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ofe-picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:40rem;font-family:\"Open Sans\"}.picker-box{width:100%;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;height:2.5rem;width:100%}.picker-header{text-align:center}.picker-table{width:100%;margin:2.5rem 0}.picker-table-time{font-size:2.37rem;line-height:2.5rem;list-style:none;margin:0;padding:0;display:flex;justify-content:center;width:100%;-webkit-user-select:none;user-select:none}.picker-table-number,.picker-table-meridiem,.picker-table-separator{text-align:center}.picker-table-number,.picker-table-meridiem{position:relative;width:20%}.arrow{position:absolute;left:50%;border:solid #777;border-width:0 .2rem .2rem 0;display:inline-block;padding:.25rem;cursor:pointer}.arrow.up{top:-1rem;transform:translate(-50%) rotate(-135deg)}.arrow.down{bottom:-1rem;transform:translate(-50%) rotate(45deg)}.arrow:hover{border-color:#1975d2}.picker-table-separator{width:calc(20% / 3)}.picker-footer{display:flex;justify-content:center;width:100%;cursor:pointer}.picker-footer .picker-action{width:25%;text-align:center}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-now:before,.picker-footer .action-confirm:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-now:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-confirm:before{width:1rem;height:1rem;border-radius:100%;background-color:#00b5ad}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "ofe-picker-modal", outputs: ["overlayClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "moment": MomentPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'time-picker',
+                    selector: 'ofe-time-picker',
                     templateUrl: './time-picker.component.html',
                     styleUrls: ['./time-picker.component.css']
                 }]
@@ -9466,9 +9182,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], returnObject: [{
                 type: Input
-            }], onSelectTime: [{
+            }], timeSelect: [{
                 type: Output
-            }], onTimePickerCancel: [{
+            }], timePickerCancel: [{
                 type: Output
             }] } });
 
@@ -9478,13 +9194,12 @@ class DateTimePickerComponent {
         this.showTime = false;
         this.showWeeks = false;
         this.weeks = [2, 4, 6, 8, 12, 16, 24];
-        this.onDateChange = new EventEmitter();
+        this.dateChange = new EventEmitter();
         this.showDatePicker = false;
         this.showTimePicker = false;
         this.onChange = () => { };
         this.onTouched = () => { };
     }
-    ngOnInit() { }
     weeksSelected(count) {
         const now = new Date();
         const nextDate = now.setDate(now.getDate() + count * 7);
@@ -9530,7 +9245,7 @@ class DateTimePickerComponent {
     }
     set value(val) {
         this.modelValue = val;
-        this.onDateChange.emit(val);
+        this.dateChange.emit(val);
         this.onChange(val);
         this.onTouched();
     }
@@ -9550,17 +9265,17 @@ class DateTimePickerComponent {
     }
 }
 DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "date-time-picker", inputs: { modelValue: "modelValue", showDate: "showDate", showTime: "showTime", showWeeks: "showWeeks", weeks: "weeks" }, outputs: { onDateChange: "onDateChange" }, providers: [
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "ofe-date-time-picker", inputs: { modelValue: "modelValue", showDate: "showDate", showTime: "showTime", showWeeks: "showWeeks", weeks: "weeks" }, outputs: { dateChange: "dateChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DateTimePickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"row\">\n  <div *ngIf=\"!showTime\" class=\"col-xs-12 col-md-12\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-8 col-md-8\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-4 col-md-4\">\n    <input\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'shortTime'\"\n      (focus)=\"toggleTimePicker(true)\"\n      readonly\n      placeholder=\"Select Time\"\n    />\n  </div>\n</div>\n<date-picker\n  *ngIf=\"showDatePicker\"\n  [initDate]=\"value\"\n  (onSelectDate)=\"setDate($event)\"\n  (onDatePickerCancel)=\"toggleDatePicker($event)\"\n></date-picker>\n\n<time-picker\n  *ngIf=\"showTimePicker\"\n  [initTime]=\"value\"\n  [use12Hour]=\"true\"\n  (onSelectTime)=\"setTime($event)\"\n  (onTimePickerCancel)=\"toggleTimePicker($event)\"\n></time-picker>\n", styles: ["input[readonly]{background-color:#fff}.up{bottom:100%!important;top:auto!important}.glyphicon{top:1px}\n"], components: [{ type: DatePickerComponent, selector: "date-picker", inputs: ["initDate", "locale", "viewFormat", "returnObject"], outputs: ["onDatePickerCancel", "onSelectDate"] }, { type: TimePickerComponent, selector: "time-picker", inputs: ["initTime", "showSecond", "viewFormat", "use12Hour", "returnObject"], outputs: ["onSelectTime", "onTimePickerCancel"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1.DatePipe } });
+    ], ngImport: i0, template: "<div class=\"row\">\n  <div *ngIf=\"!showTime\" class=\"col-xs-12 col-md-12\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-8 col-md-8\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-4 col-md-4\">\n    <input\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'shortTime'\"\n      (focus)=\"toggleTimePicker(true)\"\n      readonly\n      placeholder=\"Select Time\"\n    />\n  </div>\n</div>\n<ofe-date-picker\n  *ngIf=\"showDatePicker\"\n  [initDate]=\"value\"\n  (dateSelect)=\"setDate($event)\"\n  (datePickerCancel)=\"toggleDatePicker($event)\"\n></ofe-date-picker>\n\n<ofe-time-picker\n  *ngIf=\"showTimePicker\"\n  [initTime]=\"value\"\n  [use12Hour]=\"true\"\n  (timeSelect)=\"setTime($event)\"\n  (timePickerCancel)=\"toggleTimePicker($event)\"\n></ofe-time-picker>\n", styles: ["input[readonly]{background-color:#fff}.up{bottom:100%!important;top:auto!important}.glyphicon{top:1px}\n"], components: [{ type: DatePickerComponent, selector: "ofe-date-picker", inputs: ["initDate", "locale", "viewFormat", "returnObject"], outputs: ["datePickerCancel", "dateSelect"] }, { type: TimePickerComponent, selector: "ofe-time-picker", inputs: ["initTime", "showSecond", "viewFormat", "use12Hour", "returnObject"], outputs: ["timeSelect", "timePickerCancel"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'date-time-picker',
+                    selector: 'ofe-date-time-picker',
                     templateUrl: './date-time-picker.component.html',
                     styleUrls: ['./date-time-picker.component.css'],
                     providers: [
@@ -9581,7 +9296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], weeks: [{
                 type: Input
-            }], onDateChange: [{
+            }], dateChange: [{
                 type: Output
             }] } });
 
@@ -9623,7 +9338,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-/* eslint-disable @angular-eslint/no-host-metadata-property */
 const OWL_DATETIME_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => OwlDateTimeInlineComponent),
@@ -9659,6 +9373,9 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
         this.onModelChange = () => { };
         this.onModelTouched = () => { };
     }
+    get owlDTInlineClass() {
+        return true;
+    }
     get pickerType() {
         return this._pickerType;
     }
@@ -9705,7 +9422,7 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
     set startAt(date) {
         this._startAt = this.getValidDate(this.dateTimeAdapter.deserialize(date));
     }
-    get dateTimeFilter() {
+    get owlDateTimeFilter() {
         return this._dateTimeFilter;
     }
     set dateTimeFilter(filter) {
@@ -9780,9 +9497,6 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
             this._selectMode === 'rangeFrom' ||
             this._selectMode === 'rangeTo');
     }
-    get owlDTInlineClass() {
-        return true;
-    }
     ngOnInit() {
         this.container.picker = this;
     }
@@ -9832,18 +9546,14 @@ class OwlDateTimeInlineComponent extends OwlDateTime {
     }
 }
 OwlDateTimeInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OwlDateTimeInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInlineComponent, selector: "owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", dateTimeFilter: ["owlDateTimeFilter", "dateTimeFilter"], minDateTime: ["min", "minDateTime"], maxDateTime: ["max", "maxDateTime"], value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-inline": "owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<owl-date-time-container></owl-date-time-container>\n", styles: [""], components: [{ type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OwlDateTimeInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInlineComponent, selector: "ofe-owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-inline": "this.owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ofe-owl-date-time-container></ofe-owl-date-time-container>\n", styles: [""], components: [{ type: OwlDateTimeContainerComponent, selector: "ofe-owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'owl-date-time-inline',
+                    selector: 'ofe-owl-date-time-inline',
                     templateUrl: './date-time-inline.component.html',
                     styleUrls: ['./date-time-inline.component.scss'],
-                    host: {
-                        '[class.owl-dt-inline]': 'owlDTInlineClass'
-                    },
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
                     providers: [OWL_DATETIME_VALUE_ACCESSOR]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
@@ -9853,7 +9563,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }, {
                     type: Inject,
                     args: [OWL_DATE_TIME_FORMATS]
-                }] }]; }, propDecorators: { container: [{
+                }] }]; }, propDecorators: { owlDTInlineClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-inline']
+            }], container: [{
                 type: ViewChild,
                 args: [OwlDateTimeContainerComponent, { static: true }]
             }], pickerType: [{
@@ -9864,15 +9577,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], startAt: [{
                 type: Input
-            }], dateTimeFilter: [{
-                type: Input,
-                args: ['owlDateTimeFilter']
-            }], minDateTime: [{
-                type: Input,
-                args: ['min']
-            }], maxDateTime: [{
-                type: Input,
-                args: ['max']
+            }], owlDateTimeFilter: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
             }], value: [{
                 type: Input
             }], values: [{
@@ -10374,7 +10084,6 @@ NgxDateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NgxDateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -10410,7 +10119,6 @@ class AfeNgSelectComponent {
         this.propagateChange = fn;
     }
     registerOnTouched(fn) { }
-    ngOnChanges(changes) { }
     ngOnInit() {
         if (this.extras) {
             if (this.extras.originalValue) {
@@ -10450,13 +10158,13 @@ class AfeNgSelectComponent {
     }
 }
 AfeNgSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AfeNgSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AfeNgSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AfeNgSelectComponent, selector: "afe-ng-select", inputs: { dataSource: "dataSource", multiple: "multiple", extras: "extras" }, providers: [
+AfeNgSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AfeNgSelectComponent, selector: "ofe-ng-select", inputs: { dataSource: "dataSource", multiple: "multiple", extras: "extras" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => AfeNgSelectComponent),
             multi: true
         }
-    ], usesOnChanges: true, ngImport: i0, template: `<ng-select
+    ], ngImport: i0, template: `<ng-select
     (searchInputText)="getChangingText($event)"
     (ngModelChange)="onValueChange($event)"
     [options]="question_options"
@@ -10466,7 +10174,7 @@ AfeNgSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AfeNgSelectComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'afe-ng-select',
+                    selector: 'ofe-ng-select',
                     template: `<ng-select
     (searchInputText)="getChangingText($event)"
     (ngModelChange)="onValueChange($event)"
@@ -12331,7 +12039,6 @@ class ObsAdapterHelper {
             let valueField; // essential memmber
             let dateField; // other member to be manipulated by user
             const nodeAsGroup = node;
-            // eslint-disable-next-line guard-for-in
             for (const o in nodeAsGroup.children) {
                 if (nodeAsGroup.children[o].question.extras.questionOptions
                     .obsField === 'value') {
@@ -12354,7 +12061,6 @@ class ObsAdapterHelper {
         if (node && obs.length > 0) {
             const groupNode = node;
             groupNode.initialValue = obs[0];
-            // eslint-disable-next-line guard-for-in
             for (const o in groupNode.children) {
                 this.setNodeValue(groupNode.children[o], obs[0].groupMembers);
             }
@@ -12382,7 +12088,6 @@ class ObsAdapterHelper {
             case 'unknown':
                 if (node instanceof GroupNode) {
                     const groupNode = node;
-                    // eslint-disable-next-line guard-for-in
                     for (const o in groupNode.children) {
                         this.setNodeValue(groupNode.children[o], obs);
                     }
@@ -12514,7 +12219,6 @@ class ObsAdapterHelper {
         let valueField; // essential memmber
         let dateField; // other member to be manipulated by user
         const nodeAsGroup = node;
-        // eslint-disable-next-line guard-for-in
         for (const o in nodeAsGroup.children) {
             if (nodeAsGroup.children[o].question.extras.questionOptions
                 .obsField === 'value') {
@@ -12641,7 +12345,6 @@ class ObsAdapterHelper {
             case 'unknown':
                 if (node instanceof GroupNode) {
                     const groupNode = node;
-                    // eslint-disable-next-line guard-for-in
                     for (const o in groupNode.children) {
                         const groupNodePayoad = this.getObsNodePayload(groupNode.children[o]);
                         if (Array.isArray(groupNodePayoad) && groupNodePayoad.length > 0) {
@@ -12852,7 +12555,6 @@ class ObsValueAdapter {
     setComplexObsValue(node, payload) {
         let valueField;
         let dateField;
-        // eslint-disable-next-line guard-for-in
         for (const o in node.children) {
             if (node.children[o].question.extras.questionOptions
                 .obsField === 'value') {
@@ -13053,14 +12755,12 @@ class ObsValueAdapter {
         const newPayload = [];
         for (const obs of payload) {
             const groupPayload = [];
-            /* eslint-disable */
             for (let key in obs.value) {
                 let concept = key.split(':')[0];
                 let value = key.split(':')[1];
                 groupPayload.push({ concept: concept, value: value });
             }
             newPayload.push({ concept: groupConcept, groupMembers: groupPayload });
-            /* eslint-enable */
         }
         return newPayload;
     }
@@ -13119,7 +12819,6 @@ class ObsValueAdapter {
     processComplexObs(node, obsPayload) {
         let valueField;
         let dateField;
-        // eslint-disable-next-line guard-for-in
         for (const o in node.children) {
             if (node.children[o].question.extras.questionOptions
                 .obsField === 'value') {
@@ -13441,7 +13140,6 @@ class OrderValueAdapter {
                                 break;
                             case 'repeating':
                                 if (formNode.children) {
-                                    // eslint-disable-next-line guard-for-in
                                     for (const node in formNode.children) {
                                         const question = formNode.children[node].question;
                                         if (question.extras &&
@@ -13600,7 +13298,6 @@ class EncounterAdapter {
         }
         if (rootNode instanceof GroupNode) {
             const node = rootNode;
-            // eslint-disable-next-line guard-for-in
             for (const o in node.children) {
                 if (node.children[o] instanceof NodeBase) {
                     this._getEncounterNodes(node.children[o], array);
@@ -13695,7 +13392,6 @@ class PersonAttribuAdapter {
         }
         if (rootNode instanceof GroupNode) {
             const node = rootNode;
-            // eslint-disable-next-line guard-for-in
             for (const o in node.children) {
                 if (node.children[o] instanceof NodeBase) {
                     this._getPersonAttributesNodes(node.children[o], array);
@@ -13791,19 +13487,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-/* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/directive-class-suffix */
-class OptGroup {
+class OptionDirective {
+    constructor() {
+        this.inputClass = 'cds--select-option';
+    }
+}
+OptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+OptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptionDirective, selector: "[ofeOption]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ofeOption]'
+                }]
+        }], propDecorators: { inputClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class OptGroupDirective {
     constructor() {
         this.inputClass = 'cds--select-optgroup';
     }
 }
-OptGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-OptGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptGroup, selector: "optgroup", host: { properties: { "class": "this.inputClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptGroup, decorators: [{
+OptGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+OptGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptGroupDirective, selector: "[ofeOptgroup]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptGroupDirective, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line
-                    selector: 'optgroup'
+                    selector: '[ofeOptgroup]'
                 }]
         }], propDecorators: { inputClass: [{
                 type: HostBinding,
@@ -13814,43 +13525,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class SelectModule {
 }
 SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, declarations: [Select, Option$1, OptGroup], imports: [CommonModule, FormsModule], exports: [Select, Option$1, OptGroup] });
+SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, declarations: [SelectComponent, OptionDirective, OptGroupDirective], imports: [CommonModule, FormsModule], exports: [SelectComponent, OptionDirective, OptGroupDirective] });
 SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, imports: [[CommonModule, FormsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [Select, Option$1, OptGroup],
-                    exports: [Select, Option$1, OptGroup],
+                    declarations: [SelectComponent, OptionDirective, OptGroupDirective],
+                    exports: [SelectComponent, OptionDirective, OptGroupDirective],
                     imports: [CommonModule, FormsModule]
                 }]
         }] });
 
-/* eslint-disable @angular-eslint/component-class-suffix */
 /**
  * [See demo](../../?path=/story/input--label)
  *
  * ```html
- * <ibm-label labelState="success">
+ * <ofe-label labelState="success">
  *     <label label>Field with success</label>
  *     <input type="text" class="input-field">
- * </ibm-label>
+ * </ofe-label>
  *
- * <ibm-label labelState="warning">
+ * <ofe-label labelState="warning">
  *     <label label>Field with warning</label>
  *     <input type="text" class="input-field">
- * </ibm-label>
+ * </ofe-label>
  *
- * <ibm-label labelState="error">
+ * <ofe-label labelState="error">
  *     <label label>Field with error</label>
  *     <input type="text" class="input-field">
- * </ibm-label>
+ * </ofe-label>
  * ```
  *
  * <example-url>../../iframe.html?id=input--label</example-url>
  */
-class Label {
+class LabelComponent {
     /**
-     * Creates an instance of Label.
+     * Creates an instance of LabelComponent.
      */
     constructor() {
         /**
@@ -13861,7 +13571,7 @@ class Label {
          * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
          * its input counterpart through the 'for' attribute.
          */
-        this.labelInputID = 'ibm-label-' + Label.labelCounter;
+        this.labelInputID = 'ofe-label-' + LabelComponent.labelCounter;
         /**
          * State of the `Label` will determine the styles applied.
          */
@@ -13879,7 +13589,7 @@ class Label {
          */
         this.warn = false;
         this.labelClass = true;
-        Label.labelCounter++;
+        LabelComponent.labelCounter++;
     }
     /**
      * Update wrapper class if a textarea is hosted.
@@ -13907,9 +13617,9 @@ class Label {
 /**
  * Used to build the id of the input item associated with the `Label`.
  */
-Label.labelCounter = 0;
-Label.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Label.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Label, selector: "ibm-label", inputs: { labelInputID: "labelInputID", labelState: "labelState", skeleton: "skeleton", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextArea, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
+LabelComponent.labelCounter = 0;
+LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LabelComponent, selector: "ofe-label", inputs: { labelInputID: "labelInputID", labelState: "labelState", skeleton: "skeleton", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextAreaDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
     <label
       [for]="labelInputID"
       [attr.aria-label]="ariaLabel"
@@ -13980,10 +13690,10 @@ Label.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.1
       ></ng-template>
     </div>
   `, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Label, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ibm-label',
+                    selector: 'ofe-label',
                     template: `
     <label
       [for]="labelInputID"
@@ -14079,7 +13789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['wrapper', { static: false }]
             }], textArea: [{
                 type: ContentChild,
-                args: [TextArea, { static: false }]
+                args: [TextAreaDirective, { static: false }]
             }], labelClass: [{
                 type: HostBinding,
                 args: ['class.cds--form-item']
@@ -14089,13 +13799,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class InputModule {
 }
 InputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, declarations: [Label, TextInput, TextArea], imports: [CommonModule, FormsModule], exports: [Label, TextInput, TextArea] });
+InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, declarations: [LabelComponent, TextInputDirective, TextAreaDirective], imports: [CommonModule, FormsModule], exports: [LabelComponent, TextInputDirective, TextAreaDirective] });
 InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, imports: [[CommonModule, FormsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [Label, TextInput, TextArea],
-                    exports: [Label, TextInput, TextArea],
+                    declarations: [LabelComponent, TextInputDirective, TextAreaDirective],
+                    exports: [LabelComponent, TextInputDirective, TextAreaDirective],
                     imports: [CommonModule, FormsModule]
                 }]
         }] });