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

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

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('moment'), require('lodash'), require('@angular-extensions/elements'), require('ngx-file-uploader-openmrs'), require('@angular/platform-browser'), require('rxjs/operators'), require('@ng-select/ng-select'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('@angular/cdk/keycodes'), require('@angular/cdk/coercion'), require('@angular/cdk/a11y'), require('@angular/animations'), require('ngx-webcam'), require('@angular/cdk/platform')) :
     typeof define === 'function' && define.amd ? define('@openmrs/ngx-formentry', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'moment', 'lodash', '@angular-extensions/elements', 'ngx-file-uploader-openmrs', '@angular/platform-browser', 'rxjs/operators', '@ng-select/ng-select', '@angular/cdk/portal', '@angular/cdk/overlay', '@angular/cdk/keycodes', '@angular/cdk/coercion', '@angular/cdk/a11y', '@angular/animations', 'ngx-webcam', '@angular/cdk/platform'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.openmrs = global.openmrs || {}, global.openmrs["ngx-formentry"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.moment, global.lodash, global["@angular-extensions/elements"], global["ngx-file-uploader-openmrs"], global.ng.platformBrowser, global.rxjs.operators, global["@ng-select/ng-select"], global.ng.cdk.portal, global.ng.cdk.overlay, global.ng.cdk.keycodes, global.ng.cdk.coercion, global.ng.cdk.a11y, global.ng.animations, global["ngx-webcam"], global.ng.cdk.platform));
-})(this, (function (exports, i0, i1, i20, rxjs, moment, _, i2, i1$2, i1$1, operators, i1$3, i2$1, i1$6, keycodes, coercion, i1$4, i1$5, ngxWebcam, i1$7) { 'use strict';
+})(this, (function (exports, i0, i1, i19, rxjs, moment, _, i2, i1$2, i1$1, operators, i1$3, i2$1, i1$6, keycodes, coercion, i1$4, i1$5, ngxWebcam, i1$7) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +26,7 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i20__namespace = /*#__PURE__*/_interopNamespace(i20);
+    var i19__namespace = /*#__PURE__*/_interopNamespace(i19);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
     var ___namespace = /*#__PURE__*/_interopNamespace(_);
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
@@ -605,7 +605,7 @@
             configurable: true
         });
         ControlRelations.prototype.addRelatedControls = function (relatedTo) {
-            if (relatedTo instanceof i20.AbstractControl) {
+            if (relatedTo instanceof i19.AbstractControl) {
                 this.relations.push(new ControlRelation(this._relationFor, relatedTo));
             }
             if (relatedTo instanceof Array) {
@@ -1132,7 +1132,6 @@
             var runner = this;
             var runnable = {
                 run: function () {
-                    /* eslint-disable */
                     var scope = {};
                     if (control.uuid) {
                         scope[control.uuid] = control.value;
@@ -1400,7 +1399,7 @@
             _super.prototype.setValue.call(this, value);
         };
         return AfeFormControl;
-    }(i20.FormControl));
+    }(i19.FormControl));
 
     var AfeFormGroup = /** @class */ (function (_super) {
         __extends(AfeFormGroup, _super);
@@ -1463,7 +1462,7 @@
             _super.prototype.setValue.call(this, value);
         };
         return AfeFormGroup;
-    }(i20.FormGroup));
+    }(i19.FormGroup));
 
     var AfeFormArray = /** @class */ (function (_super) {
         __extends(AfeFormArray, _super);
@@ -1554,7 +1553,7 @@
             _super.prototype.setValue.call(this, value);
         };
         return AfeFormArray;
-    }(i20.FormArray));
+    }(i19.FormArray));
 
     exports.AfeControlType = void 0;
     (function (AfeControlType) {
@@ -2215,14 +2214,14 @@
         });
         Object.defineProperty(ValidationFactory.prototype, "minLengthValidator", {
             get: function () {
-                return i20.Validators.minLength;
+                return i19.Validators.minLength;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(ValidationFactory.prototype, "maxLengthValidator", {
             get: function () {
-                return i20.Validators.maxLength;
+                return i19.Validators.maxLength;
             },
             enumerable: false,
             configurable: true
@@ -2502,7 +2501,6 @@
         DataSources.prototype.registerDataSource = function (key, dataSource, unWrap) {
             if (unWrap === void 0) { unWrap = false; }
             if (unWrap) {
-                // eslint-disable-next-line guard-for-in
                 for (var o in dataSource) {
                     this.registerDataSource(o, dataSource[o], false);
                 }
@@ -2533,11 +2531,11 @@
         return TabComponent;
     }());
     TabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabComponent, selector: "ngx-tab", inputs: { tabTitle: "tabTitle", tabSubTitle: "tabSubTitle", active: "active", disabled: "disabled", bypassDOM: "bypassDOM", customPaneClass: "customPaneClass" }, queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], ngImport: i0__namespace, template: "<div *ngIf=\"active\" class=\"pane\" [ngClass]=\"customPaneClass\">\n  <h4>{{ tabTitle }}</h4>\n  <div *ngIf=\"bypassDOM\">\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  </div>\n  <div *ngIf=\"!bypassDOM\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["h4{padding-left:1rem;margin-bottom:.5rem}h4:after{content:\"\";display:block;width:2rem;padding-top:.188rem;border-bottom:.375rem solid var(--brand-01)}.pane{background-color:#f4f4f4;margin:.5rem .125rem}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    TabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabComponent, selector: "ofe-tab", inputs: { tabTitle: "tabTitle", tabSubTitle: "tabSubTitle", active: "active", disabled: "disabled", bypassDOM: "bypassDOM", customPaneClass: "customPaneClass" }, queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], ngImport: i0__namespace, template: "<div *ngIf=\"active\" class=\"pane\" [ngClass]=\"customPaneClass\">\n  <h4>{{ tabTitle }}</h4>\n  <div *ngIf=\"bypassDOM\">\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  </div>\n  <div *ngIf=\"!bypassDOM\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: ["h4{padding-left:1rem;margin-bottom:.5rem}h4:after{content:\"\";display:block;width:2rem;padding-top:.188rem;border-bottom:.375rem solid var(--brand-01)}.pane{background-color:#f4f4f4;margin:.5rem .125rem}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-tab',
+                        selector: 'ofe-tab',
                         templateUrl: 'tab.component.html',
                         styleUrls: ['./tab.component.css']
                     }]
@@ -2571,15 +2569,14 @@
         return HoverClassDirective;
     }());
     HoverClassDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HoverClassDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    HoverClassDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HoverClassDirective, selector: "[hover-class]", inputs: { hoverClass: ["hover-class", "hoverClass"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0__namespace });
+    HoverClassDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: { hoverClass: "hoverClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HoverClassDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
-                        selector: '[hover-class]'
+                        selector: '[ofeHoverClass]'
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { hoverClass: [{
-                    type: i0.Input,
-                    args: ['hover-class']
+                    type: i0.Input
                 }], onMouseEnter: [{
                     type: i0.HostListener,
                     args: ['mouseenter']
@@ -2594,7 +2591,7 @@
             this.customNavClass = '';
             this.customTabsClass = '';
             this.selectedIndex = 0;
-            this.onSelect = new i0.EventEmitter();
+            this.tabSelect = new i0.EventEmitter();
         }
         TabSetComponent.prototype.ngOnChanges = function (changes) {
             if (changes.selectedIndex && !changes.selectedIndex.firstChange) {
@@ -2622,7 +2619,7 @@
             this.tabs.toArray().forEach(function (tab) { return (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));
         };
         TabSetComponent.prototype.getStatusClasses = function (active, disabled) {
             if (active) {
@@ -2638,11 +2635,11 @@
         return TabSetComponent;
     }());
     TabSetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabSetComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TabSetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabSetComponent, selector: "ngx-tab-set", inputs: { disableStyle: "disableStyle", customNavClass: "customNavClass", customTabsClass: "customTabsClass", selectedIndex: "selectedIndex" }, outputs: { onSelect: "onSelect" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], usesOnChanges: true, ngImport: i0__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HoverClassDirective, selector: "[hover-class]", inputs: ["hover-class"] }] });
+    TabSetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabSetComponent, selector: "ofe-tab-set", inputs: { disableStyle: "disableStyle", customNavClass: "customNavClass", customTabsClass: "customTabsClass", selectedIndex: "selectedIndex" }, outputs: { tabSelect: "tabSelect" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"tab-container\">\n  <div class=\"tab\">\n    <button\n      ofeHoverClass=\"hover\"\n      class=\"tablinks completed\"\n      *ngFor=\"let tab of tabs\"\n      (click)=\"selectTab(tab)\"\n      [class]=\"getStatusClasses(tab.active, tab.disabled)\"\n    >\n      <span>{{ tab.tabTitle }}</span>\n    </button>\n  </div>\n  <div id=\"tab\" class=\"tab-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".tab-container{overflow-x:hidden;display:flex}.tab{width:10rem;position:fixed}.tab button{font-family:inherit;display:block;background-color:inherit;width:100%;border:none;outline:none;text-align:left;transition:.3s;min-height:2rem;white-space:normal;word-wrap:break-word;margin:0 0 .063rem}.tab button :hover{cursor:pointer}@media screen and (max-width: 768px){.tab button{height:3rem;border-bottom:.0125rem solid var(--open-mrs-background-gray);width:10rem}}.tab button.active.hover{background-color:var(--gray-gray-10)}.tab button.enabled.hover{background-color:var(--gray-gray-10)}.tab button.completed{border-left:.5rem solid var(--inverse-support-02);background-color:var(--color-green-10);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.active{background-color:#ededed;border-left:.5rem solid #009d9a;font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--color-gray-100)}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-size:.875rem;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--gray-gray-30)}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab-content{width:100%;margin-left:10rem}\n"], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HoverClassDirective, selector: "[ofeHoverClass]", inputs: ["hoverClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TabSetComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-tab-set',
+                        selector: 'ofe-tab-set',
                         styleUrls: ['ngx-tab-set.component.scss'],
                         templateUrl: 'ngx-tab-set.component.html'
                     }]
@@ -2657,7 +2654,7 @@
                     type: i0.Input
                 }], selectedIndex: [{
                     type: i0.Input
-                }], onSelect: [{
+                }], tabSelect: [{
                     type: i0.Output
                 }] } });
 
@@ -2665,15 +2662,14 @@
         function CustomComponentWrapperComponent() {
             this.dark = true;
         }
-        CustomComponentWrapperComponent.prototype.ngOnInit = function () { };
         return CustomComponentWrapperComponent;
     }());
     CustomComponentWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentWrapperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CustomComponentWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomComponentWrapperComponent, selector: "app-custom-component-wrapper", inputs: { componentConfigs: "componentConfigs", dark: "dark" }, ngImport: i0__namespace, template: "<div>\n  <ng-template #error>Component Loading failed...</ng-template>\n  <ng-template #loading>Loading Component...</ng-template>\n  <div *ngFor=\"let componentConfig of componentConfigs\">\n    <ax-lazy-element\n      *axLazyElementDynamic=\"\n        componentConfig.tag;\n        url: componentConfig.url;\n        module: true;\n        errorTemplate: error;\n        loadingTemplate: loading\n      \"\n      [config]=\"componentConfig\"\n      [dark]=\"dark\"\n    >\n    </ax-lazy-element>\n  </div>\n</div>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
+    CustomComponentWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: { componentConfigs: "componentConfigs", dark: "dark" }, ngImport: i0__namespace, template: "<div>\n  <ng-template #error>Component Loading failed...</ng-template>\n  <ng-template #loading>Loading Component...</ng-template>\n  <div *ngFor=\"let componentConfig of componentConfigs\">\n    <ax-lazy-element\n      *axLazyElementDynamic=\"\n        componentConfig.tag;\n        url: componentConfig.url;\n        module: true;\n        errorTemplate: error;\n        loadingTemplate: loading\n      \"\n      [config]=\"componentConfig\"\n      [dark]=\"dark\"\n    >\n    </ax-lazy-element>\n  </div>\n</div>\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.LazyElementDynamicDirective, selector: "[axLazyElementDynamic]", inputs: ["axLazyElementDynamic", "axLazyElementDynamicUrl", "axLazyElementDynamicLoadingTemplate", "axLazyElementDynamicErrorTemplate", "axLazyElementDynamicModule", "axLazyElementDynamicImportMap"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomComponentWrapperComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'app-custom-component-wrapper',
+                        selector: 'ofe-custom-component-wrapper',
                         templateUrl: 'custom-component-wrapper.component.html'
                     }]
             }], propDecorators: { componentConfigs: [{
@@ -2727,9 +2723,9 @@
         return CustomControlWrapperComponent;
     }());
     CustomControlWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CustomControlWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomControlWrapperComponent, selector: "app-custom-control-wrapper", inputs: { question: "question" }, providers: [
+    CustomControlWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: { question: "question" }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: i0.forwardRef(function () { return CustomControlWrapperComponent; })
             }
@@ -2737,11 +2733,11 @@
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'app-custom-control-wrapper',
+                        selector: 'ofe-custom-control-wrapper',
                         templateUrl: 'custom-control-wrapper.component.html',
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 multi: true,
                                 useExisting: i0.forwardRef(function () { return CustomControlWrapperComponent; })
                             }
@@ -2751,27 +2747,26 @@
                     type: i0.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>
      */
-    var Select = /** @class */ (function () {
-        function Select() {
+    var SelectComponent = /** @class */ (function () {
+        function SelectComponent() {
             /**
              * `inline` or `default` select displays
              */
@@ -2783,7 +2778,7 @@
             /**
              * 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
              */
@@ -2811,7 +2806,7 @@
             this.onChangeHandler = function (_) { };
             this.onTouchedHandler = function () { };
         }
-        Object.defineProperty(Select.prototype, "value", {
+        Object.defineProperty(SelectComponent.prototype, "value", {
             get: function () {
                 return this._value;
             },
@@ -2824,7 +2819,7 @@
             enumerable: false,
             configurable: true
         });
-        Select.prototype.ngAfterViewInit = function () {
+        SelectComponent.prototype.ngAfterViewInit = function () {
             if (this.value !== undefined &&
                 this.value !== null &&
                 this.select &&
@@ -2835,32 +2830,32 @@
         /**
          * Receives a value from the model.
          */
-        Select.prototype.writeValue = function (obj) {
+        SelectComponent.prototype.writeValue = function (obj) {
             this.value = obj;
         };
         /**
          * Registers a listener that notifies the model when the control updates
          */
-        Select.prototype.registerOnChange = function (fn) {
+        SelectComponent.prototype.registerOnChange = function (fn) {
             this.onChangeHandler = fn;
         };
         /**
          * Registers a listener that notifies the model when the control is blurred
          */
-        Select.prototype.registerOnTouched = function (fn) {
+        SelectComponent.prototype.registerOnTouched = function (fn) {
             this.onTouchedHandler = fn;
         };
         /**
          * Sets the disabled state through the model
          */
-        Select.prototype.setDisabledState = function (isDisabled) {
+        SelectComponent.prototype.setDisabledState = function (isDisabled) {
             this.disabled = isDisabled;
         };
         /**
          * Handles the change event from the `select`.
          * Sends events to the change handler and emits a `selected` event.
          */
-        Select.prototype.onChange = function (event) {
+        SelectComponent.prototype.onChange = function (event) {
             this.value = event.target.value;
             this.onChangeHandler(event.target.value);
             this.valueChange.emit(event.target.value);
@@ -2868,38 +2863,36 @@
         /**
          * Listens for the host blurring, and notifies the model
          */
-        Select.prototype.focusOut = function () {
+        SelectComponent.prototype.focusOut = function () {
             this.onTouchedHandler();
         };
-        Select.prototype.isTemplate = function (value) {
+        SelectComponent.prototype.isTemplate = function (value) {
             return value instanceof i0.TemplateRef;
         };
-        return Select;
+        return SelectComponent;
     }());
     /**
      * Tracks the total number of selects instantiated. Used to generate unique IDs
      */
-    Select.selectCount = 0;
-    Select.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Select, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Select.ɵcmp = i0__namespace.ɵɵ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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "ofe-select", inputs: { display: "display", label: "label", helperText: "helperText", invalidText: "invalidText", warn: "warn", warnText: "warnText", id: "id", size: "size", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", theme: "theme", ariaLabel: "ariaLabel", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
-                useExisting: Select,
+                provide: i19.NG_VALUE_ACCESSOR,
+                useExisting: SelectComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0__namespace, template: "\n    <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)\">{{\n          warnText\n        }}</ng-container>\n        <ng-template\n          *ngIf=\"isTemplate(warnText)\"\n          [ngTemplateOutlet]=\"warnText\"\n        ></ng-template>\n      </div>\n    </ng-template>\n  ", 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Select, decorators: [{
+        ], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"cds--form-item\">\n  <ng-template [ngIf]=\"skeleton\">\n    <div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n    <div class=\"cds--select cds--skeleton\"></div>\n  </ng-template>\n  <div\n    *ngIf=\"!skeleton\"\n    class=\"cds--select\"\n    [ngClass]=\"{\n      'cds--select--inline': display === 'inline',\n      'cds--select--light': theme === 'light',\n      'cds--select--invalid': invalid,\n      'cds--select--warning': warn,\n      'cds--select--disabled': disabled\n    }\"\n  >\n    <label *ngIf=\"label\" [for]=\"id\" class=\"cds--label\">\n      <ng-container *ngIf=\"!isTemplate(label)\">{{ label }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(label)\"\n        [ngTemplateOutlet]=\"label\"\n      ></ng-template>\n    </label>\n    <div *ngIf=\"helperText\" class=\"cds--form__helper-text\">\n      <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n        helperText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(helperText)\"\n        [ngTemplateOutlet]=\"helperText\"\n      ></ng-template>\n    </div>\n    <div\n      *ngIf=\"display === 'inline'; else noInline\"\n      class=\"cds--select-input--inline__wrapper\"\n    >\n      <ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n  <div\n    class=\"cds--select-input__wrapper extend\"\n    [attr.data-invalid]=\"invalid ? true : null\"\n  >\n    <select\n      #select\n      [attr.id]=\"id\"\n      [attr.aria-label]=\"ariaLabel\"\n      [disabled]=\"disabled\"\n      (change)=\"onChange($event)\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      class=\"cds--select-input\"\n      [ngClass]=\"{\n        'cds--select-input--xl': size === 'xl',\n        'cds--select-input--sm': size === 'sm'\n      }\"\n    >\n      <ng-content></ng-content>\n    </select>\n    <svg\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--select__arrow\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n    </svg>\n    <svg\n      *ngIf=\"invalid\"\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--text-input__invalid-icon\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n      ></path>\n      <path\n        d=\"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n        data-icon-path=\"inner-path\"\n        opacity=\"0\"\n      ></path>\n    </svg>\n  </div>\n  <div\n    *ngIf=\"invalid && invalidText && !warn\"\n    role=\"alert\"\n    class=\"cds--form-requirement\"\n    aria-live=\"polite\"\n  >\n    <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n      invalidText\n    }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(invalidText)\"\n      [ngTemplateOutlet]=\"invalidText\"\n    ></ng-template>\n  </div>\n  <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n    <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n    <ng-template\n      *ngIf=\"isTemplate(warnText)\"\n      [ngTemplateOutlet]=\"warnText\"\n    ></ng-template>\n  </div>\n</ng-template>\n", styles: [".cds--select--inline .cds--form__helper-text{order:4}.cds--select--inline:not(.cds--select--invalid) .cds--form__helper-text{margin-top:0}.cds--select-input__wrapper{min-width:16rem}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ibm-select',
-                        template: "\n    <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)\">{{\n          warnText\n        }}</ng-container>\n        <ng-template\n          *ngIf=\"isTemplate(warnText)\"\n          [ngTemplateOutlet]=\"warnText\"\n        ></ng-template>\n      </div>\n    </ng-template>\n  ",
-                        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    "
-                        ],
+                        selector: 'ofe-select',
+                        templateUrl: 'select.component.html',
+                        styleUrls: ['./select.component.scss'],
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
-                                useExisting: Select,
+                                provide: i19.NG_VALUE_ACCESSOR,
+                                useExisting: SelectComponent,
                                 multi: true
                             }
                         ]
@@ -2942,9 +2935,7 @@
                     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
     var SecurePipe = /** @class */ (function () {
         function SecurePipe(_ref, sanitizer) {
             this._ref = _ref;
@@ -3142,21 +3133,21 @@
         return FileUploadComponent;
     }());
     FileUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileUploadComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "app-file-upload", inputs: { dataSource: "dataSource" }, providers: [
+    FileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "ofe-file-upload", inputs: { dataSource: "dataSource" }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return FileUploadComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<lib-ngx-file-uploader\n  [srcUrl]=\"pdfUrl\"\n  [formEntry]=\"formEntryMode\"\n  [(ngModel)]=\"fileUuid\"\n  (_onClear)=\"clearValue()\"\n  (uploadData)=\"onFileChange($event)\"\n>\n</lib-ngx-file-uploader>\n<div *ngIf=\"fileUuid\">\n  <img\n    *ngIf=\"!pdfUploaded\"\n    class=\"img-responsive\"\n    [src]=\"fileUuid | secure: this.dataSource.fetchFile\"\n    alt=\"\"\n  />\n</div>\n", styles: ["\n      img {\n        margin-left: auto;\n        margin-right: auto;\n        display: block;\n      }\n    "], components: [{ type: i1__namespace$2.NgxFileUploaderComponent, selector: "lib-ngx-file-uploader", inputs: ["singleFile", "formEntry", "srcUrl", "source"], outputs: ["fileChanged", "uploadData", "_onClear"] }], directives: [{ type: i20__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "secure": SecurePipe } });
+        ], ngImport: i0__namespace, template: "<lib-ngx-file-uploader\n  [srcUrl]=\"pdfUrl\"\n  [formEntry]=\"formEntryMode\"\n  [(ngModel)]=\"fileUuid\"\n  (_onClear)=\"clearValue()\"\n  (uploadData)=\"onFileChange($event)\"\n>\n</lib-ngx-file-uploader>\n<div *ngIf=\"fileUuid\">\n  <img\n    *ngIf=\"!pdfUploaded\"\n    class=\"img-responsive\"\n    [src]=\"fileUuid | secure: this.dataSource.fetchFile\"\n    alt=\"\"\n  />\n</div>\n", styles: ["\n      img {\n        margin-left: auto;\n        margin-right: auto;\n        display: block;\n      }\n    "], components: [{ type: i1__namespace$2.NgxFileUploaderComponent, selector: "lib-ngx-file-uploader", inputs: ["singleFile", "formEntry", "srcUrl", "source"], outputs: ["fileChanged", "uploadData", "_onClear"] }], directives: [{ type: i19__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "secure": SecurePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FileUploadComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'app-file-upload',
+                        selector: 'ofe-file-upload',
                         templateUrl: 'file-upload.component.html',
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return FileUploadComponent; }),
                                 multi: true
                             }
@@ -3174,14 +3165,14 @@
             this.renderer = renderer;
             this.remoteOptionsLoading = false;
             this.remoteOptionInput$ = new rxjs.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 i0.EventEmitter();
             this.compareItems = function (item, selected) {
                 if (item.value && selected.value) {
@@ -3270,21 +3261,21 @@
         return RemoteSelectComponent;
     }());
     RemoteSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteSelectComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RemoteSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RemoteSelectComponent, selector: "ngx-remote-select", inputs: { placeholder: "placeholder", componentID: "componentID", disabled: "disabled", theme: "theme", dataSource: "dataSource" }, outputs: { done: "done" }, providers: [
+    RemoteSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: { placeholder: "placeholder", componentID: "componentID", disabled: "disabled", theme: "theme", dataSource: "dataSource" }, outputs: { done: "done" }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return RemoteSelectComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<div>\n  <ng-select\n    [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n    [disabled]=\"disabled\"\n    [items]=\"remoteOptions$ | async\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"false\"\n    [hideSelected]=\"true\"\n    [compareWith]=\"compareItems\"\n    [trackByFn]=\"trackByFn\"\n    [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i1__namespace$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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1__namespace.AsyncPipe } });
+        ], ngImport: i0__namespace, template: "<div>\n  <ng-select\n    [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n    [disabled]=\"disabled\"\n    [items]=\"remoteOptions$ | async\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"false\"\n    [hideSelected]=\"true\"\n    [compareWith]=\"compareItems\"\n    [trackByFn]=\"trackByFn\"\n    [loading]=\"loading\"\n    typeToSearchText=\"Please enter 2 or more characters\"\n    [typeahead]=\"remoteOptionInput$\"\n    [(ngModel)]=\"selectedRemoteOptions\"\n    (ngModelChange)=\"selected($event)\"\n  >\n  </ng-select>\n</div>\n", components: [{ type: i1__namespace$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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i19__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i1__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-remote-select',
+                        selector: 'ofe-remote-select',
                         templateUrl: 'remote-select.component.html',
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return RemoteSelectComponent; }),
                                 multi: true
                             }
@@ -3487,7 +3478,6 @@
         return DateTimeAdapter;
     }());
 
-    /* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/no-host-metadata-property */
     var CalendarCell = /** @class */ (function () {
         function CalendarCell(value, displayValue, ariaLabel, enabled, out, cellClass) {
             if (out === void 0) { out = false; }
@@ -3505,6 +3495,7 @@
         function OwlCalendarBodyComponent(elmRef, ngZone) {
             this.elmRef = elmRef;
             this.ngZone = ngZone;
+            this.owlDTCalendarBodyClass = true;
             /**
              * The cell number of the active cell in the table.
              */
@@ -3520,15 +3511,8 @@
             /**
              * Emit when a calendar cell is selected
              * */
-            this.select = new i0.EventEmitter();
+            this.cellSelected = new i0.EventEmitter();
         }
-        Object.defineProperty(OwlCalendarBodyComponent.prototype, "owlDTCalendarBodyClass", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(OwlCalendarBodyComponent.prototype, "isInSingleMode", {
             get: function () {
                 return this.selectMode === 'single';
@@ -3545,9 +3529,8 @@
             enumerable: false,
             configurable: true
         });
-        OwlCalendarBodyComponent.prototype.ngOnInit = function () { };
         OwlCalendarBodyComponent.prototype.selectCell = function (cell) {
-            this.select.emit(cell);
+            this.cellSelected.emit(cell);
         };
         OwlCalendarBodyComponent.prototype.isActiveCell = function (rowIndex, colIndex) {
             var cellNumber = rowIndex * this.numCols + colIndex;
@@ -3621,21 +3604,21 @@
         return OwlCalendarBodyComponent;
     }());
     OwlCalendarBodyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlCalendarBodyComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlCalendarBodyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarBodyComponent, selector: "[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__namespace, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <td\n    *ngFor=\"let item of row; let colIndex = index\"\n    class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\n    [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n    [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n    [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n    [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n    [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n    [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n    [attr.aria-label]=\"item.ariaLabel\"\n    [attr.aria-disabled]=\"!item.enabled || null\"\n    [style.width.%]=\"100 / numCols\"\n    [style.paddingTop.%]=\"(50 * cellRatio) / numCols\"\n    [style.paddingBottom.%]=\"(50 * cellRatio) / numCols\"\n    (click)=\"selectCell(item)\"\n  >\n    <span\n      class=\"owl-dt-calendar-cell-content\"\n      [ngClass]=\"{\n        'owl-dt-calendar-cell-out': item.out,\n        'owl-dt-calendar-cell-today': item.value === todayValue,\n        'owl-dt-calendar-cell-selected': isSelected(item.value)\n      }\"\n    >\n      {{ item.displayValue }}\n    </span>\n  </td>\n</tr>\n", styles: [""], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    OwlCalendarBodyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { cellSelected: "cellSelected" }, host: { properties: { "class.owl-dt-calendar-body": "this.owlDTCalendarBodyClass" } }, exportAs: ["owlDateTimeCalendarBody"], ngImport: i0__namespace, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <td\n    *ngFor=\"let item of row; let colIndex = index\"\n    class=\"owl-dt-calendar-cell {{ item.cellClass }}\"\n    [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n    [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n    [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n    [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n    [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n    [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n    [attr.aria-label]=\"item.ariaLabel\"\n    [attr.aria-disabled]=\"!item.enabled || null\"\n    [style.width.%]=\"100 / numCols\"\n    [style.paddingTop.%]=\"(50 * cellRatio) / numCols\"\n    [style.paddingBottom.%]=\"(50 * cellRatio) / numCols\"\n    (click)=\"selectCell(item)\"\n  >\n    <span\n      class=\"owl-dt-calendar-cell-content\"\n      [ngClass]=\"{\n        'owl-dt-calendar-cell-out': item.out,\n        'owl-dt-calendar-cell-today': item.value === todayValue,\n        'owl-dt-calendar-cell-selected': isSelected(item.value)\n      }\"\n    >\n      {{ item.displayValue }}\n    </span>\n  </td>\n</tr>\n", styles: [""], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlCalendarBodyComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { activeCell: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { owlDTCalendarBodyClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-calendar-body']
+                }], activeCell: [{
                     type: i0.Input
                 }], rows: [{
                     type: i0.Input
@@ -3649,11 +3632,10 @@
                     type: i0.Input
                 }], selectMode: [{
                     type: i0.Input
-                }], select: [{
+                }], cellSelected: [{
                     type: i0.Output
                 }] } });
 
-    /* eslint-disable @angular-eslint/no-host-metadata-property */
     var DAYS_PER_WEEK = 7;
     var WEEKS_PER_VIEW = 6;
     var OwlMonthViewComponent = /** @class */ (function () {
@@ -3693,6 +3675,13 @@
             /** Emits when any date is activated. */
             this.pickerMomentChange = new i0.EventEmitter();
         }
+        Object.defineProperty(OwlMonthViewComponent.prototype, "owlDTCalendarView", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(OwlMonthViewComponent.prototype, "firstDayOfWeek", {
             get: function () {
                 return this._firstDayOfWeek;
@@ -3856,13 +3845,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlMonthViewComponent.prototype, "owlDTCalendarView", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
         OwlMonthViewComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.generateWeekDays();
@@ -4099,18 +4081,14 @@
         return OwlMonthViewComponent;
     }());
     OwlMonthViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlMonthViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlMonthViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMonthViewComponent, selector: "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__namespace, template: "<table\n  class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n  [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\"\n>\n  <thead class=\"owl-dt-calendar-header\">\n    <tr class=\"owl-dt-weekdays\">\n      <th\n        *ngFor=\"let weekday of weekdays\"\n        [attr.aria-label]=\"weekday.long\"\n        class=\"owl-dt-weekday\"\n        scope=\"col\"\n      >\n        <span>{{ weekday.short }}</span>\n      </th>\n    </tr>\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    OwlMonthViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMonthViewComponent, selector: "ofe-owl-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlYearView"], ngImport: i0__namespace, template: "<table\n  class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n  [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\"\n>\n  <thead class=\"owl-dt-calendar-header\">\n    <tr class=\"owl-dt-weekdays\">\n      <th\n        *ngFor=\"let weekday of weekdays\"\n        [attr.aria-label]=\"weekday.long\"\n        class=\"owl-dt-weekday\"\n        scope=\"col\"\n      >\n        <span>{{ weekday.short }}</span>\n      </th>\n    </tr>\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"7\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"days\"\n    [todayValue]=\"todayDate\"\n    [selectedValues]=\"selectedDates\"\n    [selectMode]=\"selectMode\"\n    [activeCell]=\"activeCell\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlMonthViewComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () {
@@ -4122,7 +4100,10 @@
                             type: i0.Inject,
                             args: [OWL_DATE_TIME_FORMATS]
                         }] }];
-        }, propDecorators: { hideOtherMonths: [{
+        }, propDecorators: { owlDTCalendarView: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-calendar-view']
+                }], hideOtherMonths: [{
                     type: i0.Input
                 }], firstDayOfWeek: [{
                     type: i0.Input
@@ -4151,7 +4132,6 @@
                     args: [OwlCalendarBodyComponent, { static: true }]
                 }] } });
 
-    /* eslint-disable @angular-eslint/no-host-metadata-property */
     var MONTHS_PER_YEAR = 12;
     var MONTHS_PER_ROW = 3;
     var OwlYearViewComponent = /** @class */ (function () {
@@ -4174,7 +4154,7 @@
             /**
              * Callback to invoke when a new month is selected
              * */
-            this.change = new i0.EventEmitter();
+            this.monthChange = new i0.EventEmitter();
             /**
              * Emits the selected year. This doesn't imply a change on the selected date
              * */
@@ -4185,6 +4165,13 @@
             this.keyboardEnter = new i0.EventEmitter();
             this.monthNames = this.dateTimeAdapter.getMonthNames('short');
         }
+        Object.defineProperty(OwlYearViewComponent.prototype, "owlDTCalendarView", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(OwlYearViewComponent.prototype, "selectMode", {
             get: function () {
                 return this._selectMode;
@@ -4314,13 +4301,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlYearViewComponent.prototype, "owlDTCalendarView", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
         OwlYearViewComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(function () {
@@ -4349,7 +4329,7 @@
             this.monthSelected.emit(firstDateOfMonth);
             var daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(firstDateOfMonth);
             var 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
@@ -4519,18 +4499,14 @@
         return OwlYearViewComponent;
     }());
     OwlYearViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlYearViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlYearViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlYearViewComponent, selector: "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__namespace, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"3\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    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__namespace.ChangeDetectionStrategy.OnPush });
+    OwlYearViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlYearViewComponent, selector: "ofe-owl-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { monthChange: "monthChange", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlMonthView"], ngImport: i0__namespace, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th\n        class=\"owl-dt-calendar-table-divider\"\n        aria-hidden=\"true\"\n        colspan=\"3\"\n      ></th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"months\"\n    [numCols]=\"3\"\n    [cellRatio]=\"3 / 7\"\n    [activeCell]=\"activeCell\"\n    [todayValue]=\"todayMonth\"\n    [selectedValues]=\"selectedMonths\"\n    [selectMode]=\"selectMode\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlYearViewComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () {
@@ -4542,7 +4518,10 @@
                             type: i0.Inject,
                             args: [OWL_DATE_TIME_FORMATS]
                         }] }];
-        }, propDecorators: { selectMode: [{
+        }, propDecorators: { owlDTCalendarView: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-calendar-view']
+                }], selectMode: [{
                     type: i0.Input
                 }], selected: [{
                     type: i0.Input
@@ -4556,7 +4535,7 @@
                     type: i0.Input
                 }], maxDate: [{
                     type: i0.Input
-                }], change: [{
+                }], monthChange: [{
                     type: i0.Output
                 }], monthSelected: [{
                     type: i0.Output
@@ -4569,7 +4548,6 @@
                     args: [OwlCalendarBodyComponent, { static: true }]
                 }] } });
 
-    /* eslint-disable @angular-eslint/no-host-metadata-property */
     var YEARS_PER_ROW = 3;
     var YEAR_ROWS = 7;
     var OwlMultiYearViewComponent = /** @class */ (function () {
@@ -4586,7 +4564,7 @@
             /**
              * Callback to invoke when a new month is selected
              * */
-            this.change = new i0.EventEmitter();
+            this.monthChange = new i0.EventEmitter();
             /**
              * Emits the selected year. This doesn't imply a change on the selected date
              * */
@@ -4596,6 +4574,20 @@
             /** Emits when use keyboard enter to select a calendar cell */
             this.keyboardEnter = new i0.EventEmitter();
         }
+        Object.defineProperty(OwlMultiYearViewComponent.prototype, "owlDTCalendarView", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlMultiYearViewComponent.prototype, "owlDTCalendarMultiYearView", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(OwlMultiYearViewComponent.prototype, "selectMode", {
             get: function () {
                 return this._selectMode;
@@ -4768,21 +4760,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlMultiYearViewComponent.prototype, "owlDTCalendarView", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlMultiYearViewComponent.prototype, "owlDTCalendarMultiYearView", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        OwlMultiYearViewComponent.prototype.ngOnInit = function () { };
         OwlMultiYearViewComponent.prototype.ngAfterContentInit = function () {
             this._todayYear = this.dateTimeAdapter.getYear(this.dateTimeAdapter.now());
             this.generateYearList();
@@ -4799,7 +4776,7 @@
             var firstDateOfMonth = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerMoment), 1);
             var daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(firstDateOfMonth);
             var 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
@@ -4971,25 +4948,26 @@
         return OwlMultiYearViewComponent;
     }());
     OwlMultiYearViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlMultiYearViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlMultiYearViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMultiYearViewComponent, selector: "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__namespace, template: "<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!previousEnabled()\"\n  [attr.aria-label]=\"prevButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"prevYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th colspan=\"3\">{{ tableHeader }}</th>\n    </tr>\n  </thead>\n  <tbody\n    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__namespace.ChangeDetectionStrategy.OnPush });
+    OwlMultiYearViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlMultiYearViewComponent, selector: "ofe-owl-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { monthChange: "monthChange", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView", "class.owl-dt-calendar-multi-year-view": "this.owlDTCalendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], ngImport: i0__namespace, template: "<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!previousEnabled()\"\n  [attr.aria-label]=\"prevButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"prevYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n  <thead class=\"owl-dt-calendar-header\">\n    <tr>\n      <th colspan=\"3\">{{ tableHeader }}</th>\n    </tr>\n  </thead>\n  <tbody\n    ofe-owl-date-time-calendar-body\n    role=\"grid\"\n    [rows]=\"years\"\n    [numCols]=\"3\"\n    [cellRatio]=\"3 / 7\"\n    [activeCell]=\"activeCell\"\n    [todayValue]=\"todayYear\"\n    [selectedValues]=\"selectedYears\"\n    [selectMode]=\"selectMode\"\n    (keydown)=\"handleCalendarKeydown($event)\"\n    (cellSelected)=\"selectCalendarCell($event)\"\n  ></tbody>\n</table>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  [disabled]=\"!nextEnabled()\"\n  [attr.aria-label]=\"nextButtonLabel\"\n  type=\"button\"\n  tabindex=\"0\"\n  (click)=\"nextYearList($event)\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n    <svg\n      version=\"1.1\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 250.738 250.738\"\n      style=\"enable-background: new 0 0 250.738 250.738\"\n      xml:space=\"preserve\"\n    >\n      <path\n        style=\"fill-rule: evenodd; clip-rule: evenodd\"\n        d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                C197.237,120.447,195.534,115.448,191.75,111.689z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[ofe-owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["cellSelected"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlMultiYearViewComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ChangeDetectorRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
                             type: i0.Optional
                         }] }];
-        }, propDecorators: { selectMode: [{
+        }, propDecorators: { owlDTCalendarView: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-calendar-view']
+                }], owlDTCalendarMultiYearView: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-calendar-multi-year-view']
+                }], selectMode: [{
                     type: i0.Input
                 }], selected: [{
                     type: i0.Input
@@ -5003,7 +4981,7 @@
                     type: i0.Input
                 }], maxDate: [{
                     type: i0.Input
-                }], change: [{
+                }], monthChange: [{
                     type: i0.Output
                 }], yearSelected: [{
                     type: i0.Output
@@ -5016,7 +4994,6 @@
                     args: [OwlCalendarBodyComponent, { static: true }]
                 }] } });
 
-    /* eslint-disable @angular-eslint/no-host-metadata-property */
     var OwlCalendarComponent = /** @class */ (function () {
         function OwlCalendarComponent(elmRef, pickerIntl, ngZone, cdRef, dateTimeAdapter, dateTimeFormats) {
             var _this = this;
@@ -5070,6 +5047,13 @@
                 _this.cdRef.markForCheck();
             });
         }
+        Object.defineProperty(OwlCalendarComponent.prototype, "owlDTCalendarClass", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(OwlCalendarComponent.prototype, "minDate", {
             get: function () {
                 return this._minDate;
@@ -5223,17 +5207,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlCalendarComponent.prototype, "owlDTCalendarClass", {
-            /**
-             * Bind class 'owl-dt-calendar' to host
-             * */
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        OwlCalendarComponent.prototype.ngOnInit = function () { };
         OwlCalendarComponent.prototype.ngAfterContentInit = function () {
             this._currentView = this.startView;
         };
@@ -5367,18 +5340,14 @@
         return OwlCalendarComponent;
     }());
     OwlCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlCalendarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarComponent, selector: "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__namespace, template: "<div class=\"owl-dt-calendar-control\">\n  <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!prevButtonEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    (click)=\"previousClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n        width=\"100%\"\n        height=\"100%\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n  <div class=\"owl-dt-calendar-control-content\">\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"periodButtonLabel\"\n      (click)=\"toggleViews()\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ periodButtonText }}\n\n        <span\n          class=\"owl-dt-control-button-arrow\"\n          [style.transform]=\"'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\"\n        >\n          <!-- <editor-fold desc=\"SVG Arrow\"> -->\n          <svg\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            width=\"50%\"\n            height=\"50%\"\n            viewBox=\"0 0 292.362 292.362\"\n            style=\"enable-background: new 0 0 292.362 292.362\"\n            xml:space=\"preserve\"\n          >\n            <g>\n              <path\n                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\n              />\n            </g>\n          </svg>\n          <!-- </editor-fold> -->\n        </span>\n      </span>\n    </button>\n  </div>\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!nextButtonEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    (click)=\"nextClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n      <svg\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n</div>\n<div\n  class=\"owl-dt-calendar-main\"\n  cdkMonitorSubtreeFocus\n  [ngSwitch]=\"currentView\"\n  tabindex=\"-1\"\n>\n  <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__namespace$4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    OwlCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlCalendarComponent, selector: "ofe-owl-date-time-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", pickerMoment: "pickerMoment", selected: "selected", selecteds: "selecteds", dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", startView: "startView", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "this.owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0__namespace, template: "<div class=\"owl-dt-calendar-control\">\n  <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!prevButtonEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    (click)=\"previousClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n        width=\"100%\"\n        height=\"100%\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n  <div class=\"owl-dt-calendar-control-content\">\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"periodButtonLabel\"\n      (click)=\"toggleViews()\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ periodButtonText }}\n\n        <span\n          class=\"owl-dt-control-button-arrow\"\n          [style.transform]=\"'rotate(' + (isMonthView ? 0 : 180) + 'deg)'\"\n        >\n          <!-- <editor-fold desc=\"SVG Arrow\"> -->\n          <svg\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            width=\"50%\"\n            height=\"50%\"\n            viewBox=\"0 0 292.362 292.362\"\n            style=\"enable-background: new 0 0 292.362 292.362\"\n            xml:space=\"preserve\"\n          >\n            <g>\n              <path\n                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"\n              />\n            </g>\n          </svg>\n          <!-- </editor-fold> -->\n        </span>\n      </span>\n    </button>\n  </div>\n  <button\n    class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"0\"\n    [style.visibility]=\"showControlArrows ? 'visible' : 'hidden'\"\n    [disabled]=\"!nextButtonEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    (click)=\"nextClicked()\"\n  >\n    <span\n      class=\"owl-dt-control-content owl-dt-control-button-content\"\n      tabindex=\"-1\"\n    >\n      <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n      <svg\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 250.738 250.738\"\n        style=\"enable-background: new 0 0 250.738 250.738\"\n        xml:space=\"preserve\"\n      >\n        <path\n          style=\"fill-rule: evenodd; clip-rule: evenodd\"\n          d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\"\n        />\n      </svg>\n      <!-- </editor-fold> -->\n    </span>\n  </button>\n</div>\n<div\n  class=\"owl-dt-calendar-main\"\n  cdkMonitorSubtreeFocus\n  [ngSwitch]=\"currentView\"\n  tabindex=\"-1\"\n>\n  <ofe-owl-date-time-month-view\n    *ngSwitchCase=\"'month'\"\n    [pickerMoment]=\"pickerMoment\"\n    [firstDayOfWeek]=\"firstDayOfWeek\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    [hideOtherMonths]=\"hideOtherMonths\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (selectedChange)=\"dateSelected($event)\"\n    (userSelection)=\"userSelected()\"\n  ></ofe-owl-date-time-month-view>\n\n  <ofe-owl-date-time-year-view\n    *ngSwitchCase=\"'year'\"\n    [pickerMoment]=\"pickerMoment\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    (keyboardEnter)=\"focusActiveCell()\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (monthSelected)=\"selectMonthInYearView($event)\"\n    (monthChange)=\"goToDateInView($event, 'month')\"\n  ></ofe-owl-date-time-year-view>\n\n  <ofe-owl-date-time-multi-year-view\n    *ngSwitchCase=\"'multi-years'\"\n    [pickerMoment]=\"pickerMoment\"\n    [selected]=\"selected\"\n    [selecteds]=\"selecteds\"\n    [selectMode]=\"selectMode\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [dateFilter]=\"dateFilter\"\n    (keyboardEnter)=\"focusActiveCell()\"\n    (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n    (yearSelected)=\"selectYearInMultiYearView($event)\"\n    (monthChange)=\"goToDateInView($event, 'year')\"\n  ></ofe-owl-date-time-multi-year-view>\n</div>\n", styles: [""], components: [{ type: OwlMonthViewComponent, selector: "ofe-owl-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"], exportAs: ["owlYearView"] }, { type: OwlYearViewComponent, selector: "ofe-owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["monthChange", "monthSelected", "pickerMomentChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { type: OwlMultiYearViewComponent, selector: "ofe-owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["monthChange", "yearSelected", "pickerMomentChange", "keyboardEnter"] }], directives: [{ type: i1__namespace$4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlCalendarComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () {
@@ -5390,7 +5359,10 @@
                             type: i0.Inject,
                             args: [OWL_DATE_TIME_FORMATS]
                         }] }];
-        }, propDecorators: { minDate: [{
+        }, propDecorators: { owlDTCalendarClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-calendar']
+                }], minDate: [{
                     type: i0.Input
                 }], maxDate: [{
                     type: i0.Input
@@ -5422,6 +5394,26 @@
                     type: i0.Output
                 }] } });
 
+    /**
+     * date-time-picker.animations
+     */
+    var owlDateTimePickerAnimations = {
+        transformPicker: i1$5.trigger('transformPicker', [
+            i1$5.state('void', i1$5.style({ opacity: 0, transform: 'scale(1, 0)' })),
+            i1$5.state('enter', i1$5.style({ opacity: 1, transform: 'scale(1, 1)' })),
+            i1$5.transition('void => enter', i1$5.group([
+                i1$5.query('@fadeInPicker', i1$5.animateChild(), { optional: true }),
+                i1$5.animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+            ])),
+            i1$5.transition('enter => void', i1$5.animate('100ms linear', i1$5.style({ opacity: 0 })))
+        ]),
+        fadeInPicker: i1$5.trigger('fadeInPicker', [
+            i1$5.state('enter', i1$5.style({ opacity: 1 })),
+            i1$5.state('void', i1$5.style({ opacity: 0 })),
+            i1$5.transition('void => enter', i1$5.animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
+        ])
+    };
+
     /**
      * numberFixedLen.pipe
      */
@@ -5451,7 +5443,6 @@
                     }]
             }] });
 
-    /* eslint-disable @angular-eslint/no-host-metadata-property */
     var OwlTimerBoxComponent = /** @class */ (function () {
         function OwlTimerBoxComponent() {
             this.showDivider = false;
@@ -5461,16 +5452,16 @@
             this.inputStream = new rxjs.Subject();
             this.inputStreamSub = rxjs.Subscription.EMPTY;
         }
-        Object.defineProperty(OwlTimerBoxComponent.prototype, "displayValue", {
+        Object.defineProperty(OwlTimerBoxComponent.prototype, "owlDTTimerBoxClass", {
             get: function () {
-                return this.boxValue || this.value;
+                return true;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlTimerBoxComponent.prototype, "owlDTTimerBoxClass", {
+        Object.defineProperty(OwlTimerBoxComponent.prototype, "displayValue", {
             get: function () {
-                return true;
+                return this.boxValue || this.value;
             },
             enumerable: false,
             configurable: true
@@ -5510,21 +5501,20 @@
         return OwlTimerBoxComponent;
     }());
     OwlTimerBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlTimerBoxComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlTimerBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerBoxComponent, selector: "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__namespace, template: "<div *ngIf=\"showDivider\" class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"upBtnDisabled\"\n  [attr.aria-label]=\"upBtnAriaLabel\"\n  (click)=\"upBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n  <input\n    class=\"owl-dt-timer-input\"\n    maxlength=\"2\"\n    [value]=\"displayValue | numberFixedLen: 2\"\n    (input)=\"handleInputChange(valueInput.value)\"\n    #valueInput\n  />\n  <span class=\"owl-hidden-accessible\">{{ inputLabel }}</span>\n</label>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"downBtnDisabled\"\n  [attr.aria-label]=\"downBtnAriaLabel\"\n  (click)=\"downBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    OwlTimerBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerBoxComponent, selector: "ofe-owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "this.owlDTTimerBoxClass" } }, exportAs: ["owlDateTimeTimerBox"], ngImport: i0__namespace, template: "<div *ngIf=\"showDivider\" class=\"owl-dt-timer-divider\" aria-hidden=\"true\"></div>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"upBtnDisabled\"\n  [attr.aria-label]=\"upBtnAriaLabel\"\n  (click)=\"upBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n  <input\n    class=\"owl-dt-timer-input\"\n    maxlength=\"2\"\n    [value]=\"displayValue | numberFixedLen: 2\"\n    (input)=\"handleInputChange(valueInput.value)\"\n    #valueInput\n  />\n  <span class=\"owl-hidden-accessible\">{{ inputLabel }}</span>\n</label>\n<button\n  class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n  type=\"button\"\n  tabindex=\"-1\"\n  [disabled]=\"downBtnDisabled\"\n  [attr.aria-label]=\"downBtnAriaLabel\"\n  (click)=\"downBtnClicked()\"\n>\n  <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n    <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n      version=\"1.1\"\n      x=\"0px\"\n      y=\"0px\"\n      viewBox=\"0 0 451.847 451.846\"\n      style=\"enable-background: new 0 0 451.847 451.846\"\n      xml:space=\"preserve\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      <path\n        d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\"\n      />\n    </svg>\n    <!-- </editor-fold> -->\n  </span>\n</button>\n", styles: [""], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlTimerBoxComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                        host: {
-                            '[class.owl-dt-timer-box]': 'owlDTTimerBoxClass'
-                        }
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { showDivider: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { owlDTTimerBoxClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-timer-box']
+                }], showDivider: [{
                     type: i0.Input
                 }], upBtnAriaLabel: [{
                     type: i0.Input
@@ -5552,7 +5542,6 @@
                     type: i0.Output
                 }] } });
 
-    /* eslint-disable @angular-eslint/no-host-metadata-property */
     var OwlTimerComponent = /** @class */ (function () {
         function OwlTimerComponent(ngZone, elmRef, pickerIntl, cdRef, dateTimeAdapter) {
             this.ngZone = ngZone;
@@ -5575,6 +5564,20 @@
             this.stepSecond = 1;
             this.selectedChange = new i0.EventEmitter();
         }
+        Object.defineProperty(OwlTimerComponent.prototype, "owlDTTimeTabIndex", {
+            get: function () {
+                return -1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlTimerComponent.prototype, "owlDTTimerClass", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(OwlTimerComponent.prototype, "pickerMoment", {
             get: function () {
                 return this._pickerMoment;
@@ -5712,21 +5715,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlTimerComponent.prototype, "owlDTTimerClass", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlTimerComponent.prototype, "owlDTTimeTabIndex", {
-            get: function () {
-                return -1;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        OwlTimerComponent.prototype.ngOnInit = function () { };
         /**
          * Focus to the host element
          * */
@@ -5871,26 +5859,27 @@
         return OwlTimerComponent;
     }());
     OwlTimerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlTimerComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlTimerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerComponent, selector: "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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    OwlTimerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlTimerComponent, selector: "ofe-owl-date-time-timer", inputs: { pickerMoment: "pickerMoment", minDateTime: "minDateTime", maxDateTime: "maxDateTime", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "attr.tabindex": "this.owlDTTimeTabIndex", "class.owl-dt-timer": "this.owlDTTimerClass" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0__namespace, template: "<ofe-owl-date-time-timer-box\n  [upBtnAriaLabel]=\"upHourButtonLabel\"\n  [downBtnAriaLabel]=\"downHourButtonLabel\"\n  [upBtnDisabled]=\"!upHourEnabled()\"\n  [downBtnDisabled]=\"!downHourEnabled()\"\n  [boxValue]=\"hourBoxValue\"\n  [value]=\"hourValue\"\n  [min]=\"0\"\n  [max]=\"23\"\n  [step]=\"stepHour\"\n  [inputLabel]=\"'Hour'\"\n  (inputChange)=\"setHourValueViaInput($event)\"\n  (valueChange)=\"setHourValue($event)\"\n></ofe-owl-date-time-timer-box>\n<ofe-owl-date-time-timer-box\n  [showDivider]=\"true\"\n  [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n  [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n  [upBtnDisabled]=\"!upMinuteEnabled()\"\n  [downBtnDisabled]=\"!downMinuteEnabled()\"\n  [value]=\"minuteValue\"\n  [min]=\"0\"\n  [max]=\"59\"\n  [step]=\"stepMinute\"\n  [inputLabel]=\"'Minute'\"\n  (inputChange)=\"setMinuteValue($event)\"\n  (valueChange)=\"setMinuteValue($event)\"\n></ofe-owl-date-time-timer-box>\n<ofe-owl-date-time-timer-box\n  *ngIf=\"showSecondsTimer\"\n  [showDivider]=\"true\"\n  [upBtnAriaLabel]=\"upSecondButtonLabel\"\n  [downBtnAriaLabel]=\"downSecondButtonLabel\"\n  [upBtnDisabled]=\"!upSecondEnabled()\"\n  [downBtnDisabled]=\"!downSecondEnabled()\"\n  [value]=\"secondValue\"\n  [min]=\"0\"\n  [max]=\"59\"\n  [step]=\"stepSecond\"\n  [inputLabel]=\"'Second'\"\n  (inputChange)=\"setSecondValue($event)\"\n  (valueChange)=\"setSecondValue($event)\"\n></ofe-owl-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\" class=\"owl-dt-timer-hour12\">\n  <button\n    class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"setMeridiem($event)\"\n  >\n    <span class=\"owl-dt-control-button-content\" tabindex=\"-1\">\n      {{ hour12ButtonLabel }}\n    </span>\n  </button>\n</div>\n", styles: [""], components: [{ type: OwlTimerBoxComponent, selector: "ofe-owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlTimerComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                        host: {
-                            '[class.owl-dt-timer]': 'owlDTTimerClass',
-                            '[attr.tabindex]': 'owlDTTimeTabIndex'
-                        }
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ElementRef }, { type: OwlDateTimeIntl }, { type: i0__namespace.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
                             type: i0.Optional
                         }] }];
-        }, propDecorators: { pickerMoment: [{
+        }, propDecorators: { owlDTTimeTabIndex: [{
+                    type: i0.HostBinding,
+                    args: ['attr.tabindex']
+                }], owlDTTimerClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-timer']
+                }], pickerMoment: [{
                     type: i0.Input
                 }], minDateTime: [{
                     type: i0.Input
@@ -5910,26 +5899,6 @@
                     type: i0.Output
                 }] } });
 
-    /**
-     * date-time-picker.animations
-     */
-    var owlDateTimePickerAnimations = {
-        transformPicker: i1$5.trigger('transformPicker', [
-            i1$5.state('void', i1$5.style({ opacity: 0, transform: 'scale(1, 0)' })),
-            i1$5.state('enter', i1$5.style({ opacity: 1, transform: 'scale(1, 1)' })),
-            i1$5.transition('void => enter', i1$5.group([
-                i1$5.query('@fadeInPicker', i1$5.animateChild(), { optional: true }),
-                i1$5.animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
-            ])),
-            i1$5.transition('enter => void', i1$5.animate('100ms linear', i1$5.style({ opacity: 0 })))
-        ]),
-        fadeInPicker: i1$5.trigger('fadeInPicker', [
-            i1$5.state('enter', i1$5.style({ opacity: 1 })),
-            i1$5.state('void', i1$5.style({ opacity: 0 })),
-            i1$5.transition('void => enter', i1$5.animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
-        ])
-    };
-
     var OwlDateTimeContainerComponent = /** @class */ (function () {
         function OwlDateTimeContainerComponent(cdRef, elmRef, pickerIntl, dateTimeAdapter) {
             this.cdRef = cdRef;
@@ -5947,6 +5916,61 @@
             this.confirmSelected$ = new rxjs.Subject();
             this.pickerOpened$ = new rxjs.Subject();
         }
+        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerClass", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTPopupContainerClass", {
+            get: function () {
+                return this.picker.pickerMode === 'popup';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTDialogContainerClass", {
+            get: function () {
+                return this.picker.pickerMode === 'dialog';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTInlineContainerClass", {
+            get: function () {
+                return this.picker.pickerMode === 'inline';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerDisabledClass", {
+            get: function () {
+                return this.picker.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerId", {
+            get: function () {
+                return this.picker.id;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerAnimation", {
+            get: function () {
+                return this.picker.pickerMode === 'inline' ? '' : 'enter';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OwlDateTimeContainerComponent.prototype.handleContainerAnimationDone = function (event) {
+            var toState = event.toState;
+            if (toState === 'enter') {
+                this.pickerOpened$.next();
+            }
+        };
         Object.defineProperty(OwlDateTimeContainerComponent.prototype, "hidePickerStream", {
             get: function () {
                 return this.hidePicker$.asObservable();
@@ -6069,68 +6093,12 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerClass", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTPopupContainerClass", {
-            get: function () {
-                return this.picker.pickerMode === 'popup';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTDialogContainerClass", {
-            get: function () {
-                return this.picker.pickerMode === 'dialog';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTInlineContainerClass", {
-            get: function () {
-                return this.picker.pickerMode === 'inline';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerDisabledClass", {
-            get: function () {
-                return this.picker.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerId", {
-            get: function () {
-                return this.picker.id;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeContainerComponent.prototype, "owlDTContainerAnimation", {
-            get: function () {
-                return this.picker.pickerMode === 'inline' ? '' : 'enter';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        OwlDateTimeContainerComponent.prototype.ngOnInit = function () { };
         OwlDateTimeContainerComponent.prototype.ngAfterContentInit = function () {
             this.initPicker();
         };
         OwlDateTimeContainerComponent.prototype.ngAfterViewInit = function () {
             this.focusPicker();
         };
-        OwlDateTimeContainerComponent.prototype.handleContainerAnimationDone = function (event) {
-            var toState = event.toState;
-            if (toState === 'enter') {
-                this.pickerOpened$.next();
-            }
-        };
         OwlDateTimeContainerComponent.prototype.dateSelected = function (date) {
             var result;
             if (this.picker.isInSingleMode) {
@@ -6345,7 +6313,7 @@
         return OwlDateTimeContainerComponent;
     }());
     OwlDateTimeContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlDateTimeContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeContainerComponent, selector: "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__namespace, 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__namespace$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    OwlDateTimeContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeContainerComponent, selector: "ofe-owl-date-time-container", host: { listeners: { "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.owl-dt-container": "this.owlDTContainerClass", "class.owl-dt-popup-container": "this.owlDTPopupContainerClass", "class.owl-dt-dialog-container": "this.owlDTDialogContainerClass", "class.owl-dt-inline-container": "this.owlDTInlineContainerClass", "class.owl-dt-container-disabled": "this.owlDTContainerDisabledClass", "attr.id": "this.owlDTContainerId", "@transformPicker": "this.owlDTContainerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0__namespace, template: "<div\n  [cdkTrapFocus]=\"picker.pickerMode !== 'inline'\"\n  [@fadeInPicker]=\"picker.pickerMode === 'inline' ? '' : 'enter'\"\n  class=\"owl-dt-container-inner\"\n>\n  <ofe-owl-date-time-calendar\n    *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n    class=\"owl-dt-container-row\"\n    [firstDayOfWeek]=\"picker.firstDayOfWeek\"\n    [(pickerMoment)]=\"pickerMoment\"\n    [selected]=\"picker.selected\"\n    [selecteds]=\"picker.selecteds\"\n    [selectMode]=\"picker.selectMode\"\n    [minDate]=\"picker.minDateTime\"\n    [maxDate]=\"picker.maxDateTime\"\n    [dateFilter]=\"picker.dateTimeFilter\"\n    [startView]=\"picker.startView\"\n    [hideOtherMonths]=\"picker.hideOtherMonths\"\n    (yearSelected)=\"picker.selectYear($event)\"\n    (monthSelected)=\"picker.selectMonth($event)\"\n    (selectedChange)=\"dateSelected($event)\"\n  ></ofe-owl-date-time-calendar>\n  <ofe-owl-date-time-timer\n    *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n    class=\"owl-dt-container-row\"\n    [pickerMoment]=\"pickerMoment\"\n    [minDateTime]=\"picker.minDateTime\"\n    [maxDateTime]=\"picker.maxDateTime\"\n    [showSecondsTimer]=\"picker.showSecondsTimer\"\n    [hour12Timer]=\"picker.hour12Timer\"\n    [stepHour]=\"picker.stepHour\"\n    [stepMinute]=\"picker.stepMinute\"\n    [stepSecond]=\"picker.stepSecond\"\n    (selectedChange)=\"timeSelected($event)\"\n  ></ofe-owl-date-time-timer>\n  <div\n    *ngIf=\"picker.isInRangeMode\"\n    role=\"radiogroup\"\n    class=\"owl-dt-container-info owl-dt-container-row\"\n  >\n    <div\n      role=\"radio\"\n      [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n      [attr.aria-checked]=\"activeSelectedIndex === 0\"\n      class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n      [ngClass]=\"{ 'owl-dt-container-info-active': activeSelectedIndex === 0 }\"\n      (click)=\"handleClickOnInfoGroup($event, 0)\"\n      (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n      #from\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-container-range-content\"\n        tabindex=\"-1\"\n      >\n        <span class=\"owl-dt-container-info-label\">{{ fromLabel }}:</span>\n        <span class=\"owl-dt-container-info-value\">{{\n          fromFormattedValue\n        }}</span>\n      </span>\n    </div>\n    <div\n      role=\"radio\"\n      [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n      [attr.aria-checked]=\"activeSelectedIndex === 1\"\n      class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n      [ngClass]=\"{ 'owl-dt-container-info-active': activeSelectedIndex === 1 }\"\n      (click)=\"handleClickOnInfoGroup($event, 1)\"\n      (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n      #to\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-container-range-content\"\n        tabindex=\"-1\"\n      >\n        <span class=\"owl-dt-container-info-label\">{{ toLabel }}:</span>\n        <span class=\"owl-dt-container-info-value\">{{ toFormattedValue }}</span>\n      </span>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showControlButtons\"\n    class=\"owl-dt-container-buttons owl-dt-container-row\"\n  >\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      (click)=\"onCancelClicked($event)\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ cancelLabel }}\n      </span>\n    </button>\n    <button\n      class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n      type=\"button\"\n      tabindex=\"0\"\n      (click)=\"onSetClicked($event)\"\n    >\n      <span\n        class=\"owl-dt-control-content owl-dt-control-button-content\"\n        tabindex=\"-1\"\n      >\n        {{ setLabel }}\n      </span>\n    </button>\n  </div>\n</div>\n", styles: [""], components: [{ type: OwlCalendarComponent, selector: "ofe-owl-date-time-calendar", inputs: ["minDate", "maxDate", "pickerMoment", "selected", "selecteds", "dateFilter", "firstDayOfWeek", "selectMode", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }, { type: OwlTimerComponent, selector: "ofe-owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }], directives: [{ type: i1__namespace$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             owlDateTimePickerAnimations.transformPicker,
             owlDateTimePickerAnimations.fadeInPicker
         ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
@@ -6353,25 +6321,14 @@
                 type: i0.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: i0.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__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
@@ -6383,6 +6340,30 @@
                 }], timer: [{
                     type: i0.ViewChild,
                     args: [OwlTimerComponent, { static: false }]
+                }], owlDTContainerClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-container']
+                }], owlDTPopupContainerClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-popup-container']
+                }], owlDTDialogContainerClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-dialog-container']
+                }], owlDTInlineContainerClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-inline-container']
+                }], owlDTContainerDisabledClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-container-disabled']
+                }], owlDTContainerId: [{
+                    type: i0.HostBinding,
+                    args: ['attr.id']
+                }], owlDTContainerAnimation: [{
+                    type: i0.HostBinding,
+                    args: ['@transformPicker']
+                }], handleContainerAnimationDone: [{
+                    type: i0.HostListener,
+                    args: ['@transformPicker.done', ['$event']]
                 }] } });
 
     /**
@@ -6802,9 +6783,9 @@
             _this.elementFocusedBeforeDialogWasOpened = null;
             return _this;
         }
-        Object.defineProperty(OwlDialogContainerComponent.prototype, "config", {
+        Object.defineProperty(OwlDialogContainerComponent.prototype, "owlDialogContainerTabIndex", {
             get: function () {
-                return this._config;
+                return -1;
             },
             enumerable: false,
             configurable: true
@@ -6816,13 +6797,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlDialogContainerComponent.prototype, "owlDialogContainerTabIndex", {
-            get: function () {
-                return -1;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(OwlDialogContainerComponent.prototype, "owlDialogContainerId", {
             get: function () {
                 return this._config.id;
@@ -6858,7 +6832,27 @@
             enumerable: false,
             configurable: true
         });
-        OwlDialogContainerComponent.prototype.ngOnInit = function () { };
+        OwlDialogContainerComponent.prototype.onAnimationStart = function (event) {
+            this.isAnimating = true;
+            this.animationStateChanged.emit(event);
+        };
+        OwlDialogContainerComponent.prototype.onAnimationDone = function (event) {
+            if (event.toState === 'enter') {
+                this.trapFocus();
+            }
+            else if (event.toState === 'exit') {
+                this.restoreFocus();
+            }
+            this.animationStateChanged.emit(event);
+            this.isAnimating = false;
+        };
+        Object.defineProperty(OwlDialogContainerComponent.prototype, "config", {
+            get: function () {
+                return this._config;
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
          * Attach a ComponentPortal as content to this dialog container.
          */
@@ -6878,20 +6872,6 @@
                 this.calculateZoomOrigin(event);
             }
         };
-        OwlDialogContainerComponent.prototype.onAnimationStart = function (event) {
-            this.isAnimating = true;
-            this.animationStateChanged.emit(event);
-        };
-        OwlDialogContainerComponent.prototype.onAnimationDone = function (event) {
-            if (event.toState === 'enter') {
-                this.trapFocus();
-            }
-            else if (event.toState === 'exit') {
-                this.restoreFocus();
-            }
-            this.animationStateChanged.emit(event);
-            this.isAnimating = false;
-        };
         OwlDialogContainerComponent.prototype.startExitAnimation = function () {
             this.state = 'exit';
             this.changeDetector.markForCheck();
@@ -6951,7 +6931,7 @@
         return OwlDialogContainerComponent;
     }(i2$1.BasePortalOutlet));
     OwlDialogContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace$4.FocusTrapFactory }, { token: i1.DOCUMENT, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlDialogContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDialogContainerComponent, selector: "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: i2$1.CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2__namespace$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+    OwlDialogContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDialogContainerComponent, selector: "ofe-owl-dialog-container", host: { listeners: { "@slideModal.start": "onAnimationStart($event)", "@slideModal.done": "onAnimationDone($event)" }, properties: { "attr.tabindex": "this.owlDialogContainerTabIndex", "class.owl-dialog-container": "this.owlDialogContainerClass", "attr.id": "this.owlDialogContainerId", "attr.role": "this.owlDialogContainerRole", "attr.aria-labelledby": "this.owlDialogContainerAriaLabelledby", "attr.aria-describedby": "this.owlDialogContainerAriaDescribedby", "@slideModal": "this.owlDialogContainerAnimation" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: i2$1.CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2__namespace$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
             i1$5.trigger('slideModal', [
                 i1$5.transition('void => enter', [
                     i1$5.style(zoomFadeInFrom),
@@ -6978,7 +6958,7 @@
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDialogContainerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'owl-dialog-container',
+                        selector: 'ofe-owl-dialog-container',
                         templateUrl: './dialog-container.component.html',
                         animations: [
                             i1$5.trigger('slideModal', [
@@ -7003,18 +6983,7 @@
                                 }),
                                 i1$5.transition('enter => exit', [i1$5.animateChild(), i1$5.animate(200, i1$5.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__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i1__namespace$4.FocusTrapFactory }, { type: undefined, decorators: [{
@@ -7023,7 +6992,34 @@
                             type: i0.Inject,
                             args: [i1.DOCUMENT]
                         }] }];
-        }, propDecorators: { portalOutlet: [{
+        }, propDecorators: { owlDialogContainerTabIndex: [{
+                    type: i0.HostBinding,
+                    args: ['attr.tabindex']
+                }], owlDialogContainerClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dialog-container']
+                }], owlDialogContainerId: [{
+                    type: i0.HostBinding,
+                    args: ['attr.id']
+                }], owlDialogContainerRole: [{
+                    type: i0.HostBinding,
+                    args: ['attr.role']
+                }], owlDialogContainerAriaLabelledby: [{
+                    type: i0.HostBinding,
+                    args: ['attr.aria-labelledby']
+                }], owlDialogContainerAriaDescribedby: [{
+                    type: i0.HostBinding,
+                    args: ['attr.aria-describedby']
+                }], owlDialogContainerAnimation: [{
+                    type: i0.HostBinding,
+                    args: ['@slideModal']
+                }], onAnimationStart: [{
+                    type: i0.HostListener,
+                    args: ['@slideModal.start', ['$event']]
+                }], onAnimationDone: [{
+                    type: i0.HostListener,
+                    args: ['@slideModal.done', ['$event']]
+                }], portalOutlet: [{
                     type: i0.ViewChild,
                     args: [i2$1.CdkPortalOutlet, { static: true }]
                 }] } });
@@ -7545,7 +7541,6 @@
             enumerable: false,
             configurable: true
         });
-        OwlDateTimeComponent.prototype.ngOnInit = function () { };
         OwlDateTimeComponent.prototype.ngOnDestroy = function () {
             this.close();
             this.dtInputSub.unsubscribe();
@@ -7833,16 +7828,15 @@
         return OwlDateTimeComponent;
     }(OwlDateTime));
     OwlDateTimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeComponent, deps: [{ token: i1__namespace$5.Overlay }, { token: i0__namespace.ViewContainerRef }, { token: OwlDialogService }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: i1.DOCUMENT, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlDateTimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeComponent, selector: "owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0__namespace, template: "", styles: [""], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    OwlDateTimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeComponent, selector: "ofe-owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0__namespace, template: "", styles: [""], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                        preserveWhitespaces: false
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () {
             return [{ type: i1__namespace$5.Overlay }, { type: i0__namespace.ViewContainerRef }, { type: OwlDialogService }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
@@ -7887,14 +7881,13 @@
                     type: i0.Output
                 }] } });
 
-    /* eslint-disable @angular-eslint/no-host-metadata-property */
     var OWL_DATETIME_VALUE_ACCESSOR$1 = {
-        provide: i20.NG_VALUE_ACCESSOR,
+        provide: i19.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return OwlDateTimeInputDirective; }),
         multi: true
     };
     var OWL_DATETIME_VALIDATORS = {
-        provide: i20.NG_VALIDATORS,
+        provide: i19.NG_VALIDATORS,
         useExisting: i0.forwardRef(function () { return OwlDateTimeInputDirective; }),
         multi: true
     };
@@ -8009,7 +8002,7 @@
                     : { owlDateTimeRange: true };
             };
             /** The combined form control validator for this input. */
-            this.validator = i20.Validators.compose([
+            this.validator = i19.Validators.compose([
                 this.parseValidator,
                 this.minValidator,
                 this.maxValidator,
@@ -8037,6 +8030,76 @@
                 _this.value = _this.value;
             });
         }
+        Object.defineProperty(OwlDateTimeInputDirective.prototype, "owlDateTimeInputAriaHaspopup", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeInputDirective.prototype, "maxIso8601", {
+            get: function () {
+                return this.max ? this.dateTimeAdapter.toIso8601(this.max) : null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeInputDirective.prototype, "minIso8601", {
+            get: function () {
+                return this.min ? this.dateTimeAdapter.toIso8601(this.min) : null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeInputDirective.prototype, "owlDateTimeInputAriaOwns", {
+            get: function () {
+                return (this.dtPicker.opened && this.dtPicker.id) || null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeInputDirective.prototype, "owlDateTimeInputDisabled", {
+            get: function () {
+                return this.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OwlDateTimeInputDirective.prototype.handleBlurOnHost = function ($event) {
+            this.onModelTouched();
+        };
+        OwlDateTimeInputDirective.prototype.handleChangeOnHost = function ($event) {
+            var 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
+            });
+        };
+        OwlDateTimeInputDirective.prototype.handleInputOnHost = function ($event) {
+            var value = $event.target.value;
+            if (this._selectMode === 'single') {
+                this.changeInputInSingleMode(value);
+            }
+            else if (this._selectMode === 'range') {
+                this.changeInputInRangeMode(value);
+            }
+            else {
+                this.changeInputInRangeFromToMode(value);
+            }
+        };
+        OwlDateTimeInputDirective.prototype.handleKeydownOnHost = function ($event) {
+            if ($event.altKey && $event.keyCode === keycodes.DOWN_ARROW) {
+                this.dtPicker.open();
+                $event.preventDefault();
+            }
+        };
         Object.defineProperty(OwlDateTimeInputDirective.prototype, "owlDateTime", {
             /**
              * The date time picker that this input is associated with.
@@ -8196,41 +8259,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlDateTimeInputDirective.prototype, "owlDateTimeInputAriaHaspopup", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeInputDirective.prototype, "owlDateTimeInputAriaOwns", {
-            get: function () {
-                return (this.dtPicker.opened && this.dtPicker.id) || null;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeInputDirective.prototype, "minIso8601", {
-            get: function () {
-                return this.min ? this.dateTimeAdapter.toIso8601(this.min) : null;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeInputDirective.prototype, "maxIso8601", {
-            get: function () {
-                return this.max ? this.dateTimeAdapter.toIso8601(this.max) : null;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(OwlDateTimeInputDirective.prototype, "owlDateTimeInputDisabled", {
-            get: function () {
-                return this.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
         OwlDateTimeInputDirective.prototype.ngOnInit = function () {
             if (!this.dtPicker) {
                 throw Error("OwlDateTimePicker: the picker input doesn't have any associated owl-date-time component");
@@ -8289,44 +8317,6 @@
         OwlDateTimeInputDirective.prototype.registerOnValidatorChange = function (fn) {
             this.validatorOnChange = fn;
         };
-        /**
-         * Open the picker when user hold alt + DOWN_ARROW
-         * */
-        OwlDateTimeInputDirective.prototype.handleKeydownOnHost = function (event) {
-            if (event.altKey && event.keyCode === keycodes.DOWN_ARROW) {
-                this.dtPicker.open();
-                event.preventDefault();
-            }
-        };
-        OwlDateTimeInputDirective.prototype.handleBlurOnHost = function (event) {
-            this.onModelTouched();
-        };
-        OwlDateTimeInputDirective.prototype.handleInputOnHost = function (event) {
-            var value = event.target.value;
-            if (this._selectMode === 'single') {
-                this.changeInputInSingleMode(value);
-            }
-            else if (this._selectMode === 'range') {
-                this.changeInputInRangeMode(value);
-            }
-            else {
-                this.changeInputInRangeFromToMode(value);
-            }
-        };
-        OwlDateTimeInputDirective.prototype.handleChangeOnHost = function (event) {
-            var 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'
          */
@@ -8501,23 +8491,12 @@
         return OwlDateTimeInputDirective;
     }());
     OwlDateTimeInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeInputDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    OwlDateTimeInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: { owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", selectMode: "selectMode", value: "value", values: "values", _disabled: "_disabled", rangeSeparator: "rangeSeparator" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "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__namespace });
+    OwlDateTimeInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: { owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", selectMode: "selectMode", value: "value", values: "values", _disabled: "_disabled", rangeSeparator: "rangeSeparator" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "blur": "handleBlurOnHost($event)", "change": "handleChangeOnHost($event)", "input": "handleInputOnHost($event)", "keydown": "handleKeydownOnHost($event)" }, properties: { "attr.aria-haspopup": "this.owlDateTimeInputAriaHaspopup", "attr.max": "this.maxIso8601", "attr.min": "this.minIso8601", "attr.aria-owns": "this.owlDateTimeInputAriaOwns", "disabled": "this.owlDateTimeInputDisabled" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR$1, OWL_DATETIME_VALIDATORS], exportAs: ["owlDateTimeInput"], ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeInputDirective, decorators: [{
                 type: i0.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 () {
@@ -8529,7 +8508,34 @@
                             type: i0.Inject,
                             args: [OWL_DATE_TIME_FORMATS]
                         }] }];
-        }, propDecorators: { owlDateTime: [{
+        }, propDecorators: { owlDateTimeInputAriaHaspopup: [{
+                    type: i0.HostBinding,
+                    args: ['attr.aria-haspopup']
+                }], maxIso8601: [{
+                    type: i0.HostBinding,
+                    args: ['attr.max']
+                }], minIso8601: [{
+                    type: i0.HostBinding,
+                    args: ['attr.min']
+                }], owlDateTimeInputAriaOwns: [{
+                    type: i0.HostBinding,
+                    args: ['attr.aria-owns']
+                }], owlDateTimeInputDisabled: [{
+                    type: i0.HostBinding,
+                    args: ['disabled']
+                }], handleBlurOnHost: [{
+                    type: i0.HostListener,
+                    args: ['blur', ['$event']]
+                }], handleChangeOnHost: [{
+                    type: i0.HostListener,
+                    args: ['change', ['$event']]
+                }], handleInputOnHost: [{
+                    type: i0.HostListener,
+                    args: ['input', ['$event']]
+                }], handleKeydownOnHost: [{
+                    type: i0.HostListener,
+                    args: ['keydown', ['$event']]
+                }], owlDateTime: [{
                     type: i0.Input
                 }], owlDateTimeFilter: [{
                     type: i0.Input
@@ -8553,12 +8559,24 @@
                     type: i0.Output
                 }] } });
 
-    /* eslint-disable @angular-eslint/no-host-metadata-property */
     var OwlDateTimeTriggerDirective = /** @class */ (function () {
         function OwlDateTimeTriggerDirective(changeDetector) {
             this.changeDetector = changeDetector;
             this.stateChanges = rxjs.Subscription.EMPTY;
         }
+        Object.defineProperty(OwlDateTimeTriggerDirective.prototype, "owlDTTriggerDisabledClass", {
+            get: function () {
+                return this.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OwlDateTimeTriggerDirective.prototype.handleClickOnHost = function ($event) {
+            if (this.dtPicker) {
+                this.dtPicker.open();
+                $event.stopPropagation();
+            }
+        };
         Object.defineProperty(OwlDateTimeTriggerDirective.prototype, "disabled", {
             get: function () {
                 return this._disabled === undefined
@@ -8571,14 +8589,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlDateTimeTriggerDirective.prototype, "owlDTTriggerDisabledClass", {
-            get: function () {
-                return this.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        OwlDateTimeTriggerDirective.prototype.ngOnInit = function () { };
         OwlDateTimeTriggerDirective.prototype.ngOnChanges = function (changes) {
             if (changes.datepicker) {
                 this.watchStateChanges();
@@ -8590,12 +8600,6 @@
         OwlDateTimeTriggerDirective.prototype.ngOnDestroy = function () {
             this.stateChanges.unsubscribe();
         };
-        OwlDateTimeTriggerDirective.prototype.handleClickOnHost = function (event) {
-            if (this.dtPicker) {
-                this.dtPicker.open();
-                event.stopPropagation();
-            }
-        };
         OwlDateTimeTriggerDirective.prototype.watchStateChanges = function () {
             var _this = this;
             this.stateChanges.unsubscribe();
@@ -8612,19 +8616,21 @@
         return OwlDateTimeTriggerDirective;
     }());
     OwlDateTimeTriggerDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeTriggerDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    OwlDateTimeTriggerDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: { dtPicker: ["owlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0__namespace });
+    OwlDateTimeTriggerDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeTriggerDirective, selector: "[ofeOwlDateTimeTrigger]", inputs: { dtPicker: ["ofeOwlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "this.owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeTriggerDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
-                        selector: '[owlDateTimeTrigger]',
-                        host: {
-                            '(click)': 'handleClickOnHost($event)',
-                            '[class.owl-dt-trigger-disabled]': 'owlDTTriggerDisabledClass'
-                        }
+                        selector: '[ofeOwlDateTimeTrigger]'
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { dtPicker: [{
                     type: i0.Input,
-                    args: ['owlDateTimeTrigger']
+                    args: ['ofeOwlDateTimeTrigger']
+                }], owlDTTriggerDisabledClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-trigger-disabled']
+                }], handleClickOnHost: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
                 }], disabled: [{
                     type: i0.Input
                 }] } });
@@ -8668,22 +8674,22 @@
         return NgxDatetimeComponent;
     }());
     NgxDatetimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDatetimeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxDatetimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NgxDatetimeComponent, selector: "ngx-datetimepicker", inputs: { id: "id", theme: "theme", datePickerFormat: "datePickerFormat", showWeeks: "showWeeks", weeks: "weeks" }, providers: [
+    NgxDatetimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: { id: "id", theme: "theme", datePickerFormat: "datePickerFormat", showWeeks: "showWeeks", weeks: "weeks" }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return NgxDatetimeComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<div class=\"date-time-picker-container\">\n  <div\n    data-date-picker\n    data-date-picker-type=\"single\"\n    class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n    [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\"\n  >\n    <div class=\"cds--date-picker-container fill\">\n      <div class=\"cds--date-picker-input__wrapper\">\n        <input\n          [disabled]=\"isDisabled\"\n          (dateTimeChange)=\"onInput($event)\"\n          type=\"text\"\n          class=\"cds--date-picker__input fill\"\n          [id]=\"id\"\n          [value]=\"value\"\n          [owlDateTime]=\"dt1\"\n          [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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled", "rangeSeparator"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i20__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        ], ngImport: i0__namespace, template: "<div class=\"date-time-picker-container\">\n  <div\n    data-date-picker\n    data-date-picker-type=\"single\"\n    class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n    [ngClass]=\"{\n    'cds--date-picker--light': theme === 'light'\n}\"\n  >\n    <div class=\"cds--date-picker-container fill\">\n      <div class=\"cds--date-picker-input__wrapper\">\n        <input\n          [disabled]=\"isDisabled\"\n          (dateTimeChange)=\"onInput($event)\"\n          type=\"text\"\n          class=\"cds--date-picker__input fill\"\n          [id]=\"id\"\n          [value]=\"value\"\n          [owlDateTime]=\"dt1\"\n          [ofeOwlDateTimeTrigger]=\"dt1\"\n          placeholder=\"mm/dd/yyyy\"\n          data-date-picker-input\n        />\n        <svg\n          [ofeOwlDateTimeTrigger]=\"dt1\"\n          focusable=\"false\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          style=\"will-change: transform\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          data-date-picker-icon=\"true\"\n          class=\"cds--date-picker__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n          ></path>\n        </svg>\n      </div>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"showWeeks\"\n    class=\"cds--select some-class week-select-wrapper\"\n    [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n  >\n    <div class=\"cds--select-input__wrapper\">\n      <select\n        (change)=\"onWeeksSelected($event.target.value)\"\n        id=\"select-1\"\n        class=\"cds--select-input\"\n      >\n        <option\n          class=\"cds--select-option\"\n          value=\"placeholder-item\"\n          disabled=\"\"\n          hidden=\"\"\n          selected=\"\"\n        >\n          Select Weeks\n        </option>\n        <option\n          class=\"cds--select-option\"\n          [value]=\"week\"\n          *ngFor=\"let week of weeks\"\n        >\n          {{week}} Weeks\n        </option>\n      </select>\n      <svg\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n        class=\"cds--select__arrow\"\n      >\n        <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n      </svg>\n    </div>\n  </div>\n</div>\n<ofe-owl-date-time\n  [pickerType]=\"datePickerFormat ? datePickerFormat : 'calendar'\"\n  [disabled]=\"isDisabled\"\n  #dt1\n></ofe-owl-date-time>\n", styles: [".date-time-picker-container{display:flex;justify-content:space-between}.week-select-wrapper{margin-left:1rem;width:30%}\n"], components: [{ type: OwlDateTimeComponent, selector: "ofe-owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled", "rangeSeparator"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { type: OwlDateTimeTriggerDirective, selector: "[ofeOwlDateTimeTrigger]", inputs: ["ofeOwlDateTimeTrigger", "disabled"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i19__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDatetimeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ngx-datetimepicker',
+                        selector: 'ofe-ngx-date-time-picker',
                         templateUrl: './ngx-datetime-picker.html',
                         styleUrls: ['./ngx-datetime-picker.css'],
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return NgxDatetimeComponent; }),
                                 multi: true
                             }
@@ -8757,7 +8763,7 @@
             /**
              * Emits event notifying other classes when a change in state occurs in the input.
              */
-            this.change = new i0.EventEmitter();
+            this.numberChange = new i0.EventEmitter();
             /**
              * Sets the decrement label text
              */
@@ -8856,7 +8862,7 @@
             var event = new NumberChangeEvent();
             event.source = this;
             event.value = this.value;
-            this.change.emit(event);
+            this.numberChange.emit(event);
             this.propagateChange(this.value);
         };
         NumberInputComponent.prototype.onNumberInputChange = function (event) {
@@ -8873,9 +8879,9 @@
      */
     NumberInputComponent.numberCount = 0;
     NumberInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NumberInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumberInputComponent, selector: "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__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumberInputComponent, selector: "ofe-number-input", inputs: { theme: "theme", disabled: "disabled", skeleton: "skeleton", invalid: "invalid", id: "id", size: "size", required: "required", value: "value", min: "min", max: "max", label: "label", helperText: "helperText", invalidText: "invalidText", step: "step", precision: "precision", warn: "warn", warnText: "warnText", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel" }, outputs: { numberChange: "numberChange" }, host: { listeners: { "focusout": "focusOut()" } }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return NumberInputComponent; }),
                 multi: true
             }
@@ -8883,11 +8889,11 @@
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'number-input',
+                        selector: 'ofe-number-input',
                         templateUrl: 'number-input.component.html',
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return NumberInputComponent; }),
                                 multi: true
                             }
@@ -8927,7 +8933,7 @@
                     type: i0.Input
                 }], warnText: [{
                     type: i0.Input
-                }], change: [{
+                }], numberChange: [{
                     type: i0.Output
                 }], decrementLabel: [{
                     type: i0.Input
@@ -8953,7 +8959,6 @@
                 return option;
             });
         };
-        RadioButtonControlComponent.prototype.ngAfterViewInit = function () { };
         RadioButtonControlComponent.prototype.writeValue = function (value) { };
         RadioButtonControlComponent.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
@@ -8992,9 +8997,9 @@
         return RadioButtonControlComponent;
     }());
     RadioButtonControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RadioButtonControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonControlComponent, selector: "radio", inputs: { id: "id", selected: "selected", options: "options", allowRadioUnselect: "allowRadioUnselect" }, providers: [
+    RadioButtonControlComponent.ɵcmp = i0__namespace.ɵɵ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: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return RadioButtonControlComponent; }),
                 multi: true
             }
@@ -9002,11 +9007,11 @@
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioButtonControlComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'radio',
+                        selector: 'ofe-radio-button',
                         templateUrl: './radio.component.html',
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return RadioButtonControlComponent; }),
                                 multi: true
                             }
@@ -9038,7 +9043,6 @@
                 return option;
             });
         };
-        CheckboxControlComponent.prototype.ngAfterViewInit = function () { };
         CheckboxControlComponent.prototype.writeValue = function (value) {
             this.value = value;
         };
@@ -9087,9 +9091,9 @@
         return CheckboxControlComponent;
     }());
     CheckboxControlComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxControlComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CheckboxControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxControlComponent, selector: "checkbox", inputs: { id: "id", options: "options", selected: "selected" }, providers: [
+    CheckboxControlComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: { id: "id", options: "options", selected: "selected" }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return CheckboxControlComponent; }),
                 multi: true
             }
@@ -9097,11 +9101,11 @@
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxControlComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'checkbox',
+                        selector: 'ofe-checkbox',
                         templateUrl: './checkbox.component.html',
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return CheckboxControlComponent; }),
                                 multi: true
                             }
@@ -9124,7 +9128,6 @@
             this.appointments = [];
             this.today = '';
         }
-        AppointmentsOverviewComponent.prototype.ngOnInit = function () { };
         AppointmentsOverviewComponent.prototype.ngOnChanges = function () {
             var _this = this;
             this.node.control.valueChanges.subscribe(function (appointmentDate) {
@@ -9151,196 +9154,87 @@
                                 .startOf('week')
                                 .add(1, 'day')
                                 .format('YYYY-MM-DD');
-                            var endDate = moment__default["default"](appointmentDate)
-                                .endOf('week')
-                                .subtract(1, 'day')
-                                .format('YYYY-MM-DD');
-                            _this.today = moment__default["default"](appointmentDate).format('DD-MM-YYYY');
-                            // create 5 week days
-                            var scheduledAppointments_1 = [];
-                            var programTypes = [
-                                '781d85b0-1359-11df-a1f1-0026b9348838',
-                                '781d897a-1359-11df-a1f1-0026b9348838',
-                                '96047aaf-7ab3-45e9-be6a-b61810fe617d',
-                                'c19aec66-1a40-4588-9b03-b6be55a8dd1d',
-                                'f7793d42-11ac-4cfd-9b35-e0a21a7a7c31',
-                                '334c9e98-173f-4454-a8ce-f80b20b7fdf0',
-                                '96ba279b-b23b-4e78-aba9-dcbd46a96b7b',
-                                '781d8880-1359-11df-a1f1-0026b9348838'
-                            ];
-                            var programTypeParams = programTypes.join();
-                            for (var i = 1; i <= 5; i++) {
-                                scheduledAppointments_1.push({
-                                    date: moment__default["default"](appointmentDate)
-                                        .startOf('week')
-                                        .add(i, 'day')
-                                        .format('DD-MM-YYYY'),
-                                    count: 0
-                                });
-                            }
-                            dataSource
-                                .getMonthlySchedule({
-                                startDate: startDate,
-                                endDate: endDate,
-                                limit: 5,
-                                locationUuids: locationUuid,
-                                programType: programTypeParams
-                            })
-                                .subscribe(function (_c) {
-                                var results = _c.results;
-                                _this.appointmentsLoaded = true;
-                                _this.loadingAppointments = false;
-                                scheduledAppointments_1.map(function (appointment, index) {
-                                    appointment.count =
-                                        results[index] !== undefined
-                                            ? results[index].count.scheduled
-                                            : 0;
-                                });
-                                _this.appointments = scheduledAppointments_1;
-                            }, function (error) {
-                                _this.loadingAppointments = false;
-                                _this.errorLoadingAppointments = true;
-                                _this.showAppointments = false;
-                                console.error(error);
-                            });
-                        }
-                        else {
-                            _this.showAppointments = false;
-                            _this.errorLoadingAppointments = true;
-                        }
-                    }
-                }
-            });
-        };
-        AppointmentsOverviewComponent.prototype.resetProperties = function () {
-            this.loadingAppointments = false;
-            this.appointmentsLoaded = false;
-            this.errorLoadingAppointments = false;
-            this.showAppointments = false;
-            this.appointments = [];
-            this.today = '';
-        };
-        return AppointmentsOverviewComponent;
-    }());
-    AppointmentsOverviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppointmentsOverviewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AppointmentsOverviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppointmentsOverviewComponent, selector: "appointments-overview", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"showAppointments\" class=\"container\">\n  <div *ngIf=\"loadingAppointments\">\n    <span *ngIf=\"!appointmentsLoaded && errorLoadingAppointments\"\n      >Error checking appointments</span\n    >\n    <div\n      *ngIf=\"loadingAppointments\"\n      class=\"cds--inline-loading\"\n      aria-live=\"assertive\"\n    >\n      <div class=\"cds--inline-loading__animation\">\n        <div\n          aria-atomic=\"true\"\n          aria-labelledby=\"loading-id-2\"\n          aria-live=\"assertive\"\n          class=\"cds--loading cds--loading--small\"\n        >\n          <label id=\"loading-id-2\" class=\"cds--visually-hidden\"\n            >Active loading indicator</label\n          ><svg class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n            <title>Active loading indicator</title>\n            <circle\n              class=\"cds--loading__background\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n            <circle\n              class=\"cds--loading__stroke\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n          </svg>\n        </div>\n      </div>\n      <div class=\"cds--inline-loading__text\">Loading...</div>\n    </div>\n  </div>\n\n  <div\n    class=\"cds--data-table-content\"\n    *ngIf=\"appointmentsLoaded && !errorLoadingAppointments\"\n  >\n    <table class=\"cds--data-table cds--data-table--no-border\">\n      <thead>\n        <tr>\n          <th\n            *ngFor=\"let appointment of appointments\"\n            scope=\"col\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.date }}\n          </th>\n        </tr>\n      </thead>\n      <tbody aria-live=\"polite\">\n        <tr>\n          <td\n            *ngFor=\"let appointment of appointments\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.count }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".container{margin-top:.625rem}.active{background-color:#e0e0e0;cursor:pointer}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppointmentsOverviewComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'appointments-overview',
-                        templateUrl: './appointments-overview.component.html',
-                        styleUrls: ['./appointments-overview.component.css']
-                    }]
-            }], ctorParameters: function () { return []; }, propDecorators: { node: [{
-                    type: i0.Input
-                }] } });
-
-    var HistoricalFieldHelperService = /** @class */ (function () {
-        function HistoricalFieldHelperService() {
-        }
-        HistoricalFieldHelperService.prototype.getDisplayTextFromOptions = function (question, valueProperty, displayProperty) {
-            var displayText = '';
-            var historicalValue = question.historicalDataValue;
-            if (___namespace.isArray(historicalValue.value)) {
-                var valueConverted_1 = 0;
-                ___namespace.each(historicalValue.value, function (val) {
-                    ___namespace.each(question.options, function (option) {
-                        if (option[valueProperty] === val) {
-                            if (valueConverted_1 === 0) {
-                                displayText = displayText + option[displayProperty];
-                            }
-                            else {
-                                displayText = displayText + ', ' + option[displayProperty];
-                            }
-                            valueConverted_1++;
-                        }
-                    });
-                });
-            }
-            else {
-                ___namespace.each(question.options, function (option) {
-                    if (option[valueProperty] === historicalValue.value) {
-                        displayText = option[displayProperty];
-                    }
-                });
-            }
-            return displayText;
-        };
-        return HistoricalFieldHelperService;
-    }());
-    HistoricalFieldHelperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    HistoricalFieldHelperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var HistoricalValueDirective = /** @class */ (function () {
-        function HistoricalValueDirective(historicalFieldHelper) {
-            this.historicalFieldHelper = historicalFieldHelper;
-            this._nodeChange = new i0.EventEmitter();
-        }
-        HistoricalValueDirective.prototype.setValue = function (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);
-                }
-            }
-        };
-        HistoricalValueDirective.prototype.compareString = function (a, b) {
-            if (a === b) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        };
-        Object.defineProperty(HistoricalValueDirective.prototype, "node", {
-            set: function (node) {
-                if (node) {
-                    this._node = node;
-                    if (this._node.question.enableHistoricalValue &&
-                        !___namespace.isUndefined(this._node.question.historicalDataValue)) {
-                        var 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;
+                            var endDate = moment__default["default"](appointmentDate)
+                                .endOf('week')
+                                .subtract(1, 'day')
+                                .format('YYYY-MM-DD');
+                            _this.today = moment__default["default"](appointmentDate).format('DD-MM-YYYY');
+                            // create 5 week days
+                            var scheduledAppointments_1 = [];
+                            var programTypes = [
+                                '781d85b0-1359-11df-a1f1-0026b9348838',
+                                '781d897a-1359-11df-a1f1-0026b9348838',
+                                '96047aaf-7ab3-45e9-be6a-b61810fe617d',
+                                'c19aec66-1a40-4588-9b03-b6be55a8dd1d',
+                                'f7793d42-11ac-4cfd-9b35-e0a21a7a7c31',
+                                '334c9e98-173f-4454-a8ce-f80b20b7fdf0',
+                                '96ba279b-b23b-4e78-aba9-dcbd46a96b7b',
+                                '781d8880-1359-11df-a1f1-0026b9348838'
+                            ];
+                            var programTypeParams = programTypes.join();
+                            for (var i = 1; i <= 5; i++) {
+                                scheduledAppointments_1.push({
+                                    date: moment__default["default"](appointmentDate)
+                                        .startOf('week')
+                                        .add(i, 'day')
+                                        .format('DD-MM-YYYY'),
+                                    count: 0
+                                });
+                            }
+                            dataSource
+                                .getMonthlySchedule({
+                                startDate: startDate,
+                                endDate: endDate,
+                                limit: 5,
+                                locationUuids: locationUuid,
+                                programType: programTypeParams
+                            })
+                                .subscribe(function (_c) {
+                                var results = _c.results;
+                                _this.appointmentsLoaded = true;
+                                _this.loadingAppointments = false;
+                                scheduledAppointments_1.map(function (appointment, index) {
+                                    appointment.count =
+                                        results[index] !== undefined
+                                            ? results[index].count.scheduled
+                                            : 0;
+                                });
+                                _this.appointments = scheduledAppointments_1;
+                            }, function (error) {
+                                _this.loadingAppointments = false;
+                                _this.errorLoadingAppointments = true;
+                                _this.showAppointments = false;
+                                console.error(error);
+                            });
                         }
-                        else if (!___namespace.isUndefined(this._node.question.historicalDataValue)) {
-                            display.text = this._node.question.historicalDataValue.value;
-                            display._date = this._node.question.historicalDataValue.valueDate;
-                            this._node.question['historicalDisplay'] = display;
+                        else {
+                            _this.showAppointments = false;
+                            _this.errorLoadingAppointments = true;
                         }
                     }
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return HistoricalValueDirective;
+            });
+        };
+        AppointmentsOverviewComponent.prototype.resetProperties = function () {
+            this.loadingAppointments = false;
+            this.appointmentsLoaded = false;
+            this.errorLoadingAppointments = false;
+            this.showAppointments = false;
+            this.appointments = [];
+            this.today = '';
+        };
+        return AppointmentsOverviewComponent;
     }());
-    HistoricalValueDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalValueDirective, deps: [{ token: HistoricalFieldHelperService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    HistoricalValueDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HistoricalValueDirective, selector: "[node]", inputs: { _node: "_node", node: "node" }, outputs: { _nodeChange: "_nodeChange" }, host: { listeners: { "click": "setValue($event)" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalValueDirective, decorators: [{
-                type: i0.Directive,
+    AppointmentsOverviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppointmentsOverviewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppointmentsOverviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: { node: "node" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"showAppointments\" class=\"container\">\n  <div *ngIf=\"loadingAppointments\">\n    <span *ngIf=\"!appointmentsLoaded && errorLoadingAppointments\"\n      >Error checking appointments</span\n    >\n    <div\n      *ngIf=\"loadingAppointments\"\n      class=\"cds--inline-loading\"\n      aria-live=\"assertive\"\n    >\n      <div class=\"cds--inline-loading__animation\">\n        <div\n          aria-atomic=\"true\"\n          aria-labelledby=\"loading-id-2\"\n          aria-live=\"assertive\"\n          class=\"cds--loading cds--loading--small\"\n        >\n          <label id=\"loading-id-2\" class=\"cds--visually-hidden\"\n            >Active loading indicator</label\n          ><svg class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n            <title>Active loading indicator</title>\n            <circle\n              class=\"cds--loading__background\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n            <circle\n              class=\"cds--loading__stroke\"\n              cx=\"50%\"\n              cy=\"50%\"\n              r=\"44\"\n            ></circle>\n          </svg>\n        </div>\n      </div>\n      <div class=\"cds--inline-loading__text\">Loading...</div>\n    </div>\n  </div>\n\n  <div\n    class=\"cds--data-table-content\"\n    *ngIf=\"appointmentsLoaded && !errorLoadingAppointments\"\n  >\n    <table class=\"cds--data-table cds--data-table--no-border\">\n      <thead>\n        <tr>\n          <th\n            *ngFor=\"let appointment of appointments\"\n            scope=\"col\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.date }}\n          </th>\n        </tr>\n      </thead>\n      <tbody aria-live=\"polite\">\n        <tr>\n          <td\n            *ngFor=\"let appointment of appointments\"\n            [ngClass]=\"{ active: appointment.date === today }\"\n          >\n            {{ appointment.count }}\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".container{margin-top:.625rem}.active{background-color:#e0e0e0;cursor:pointer}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppointmentsOverviewComponent, decorators: [{
+                type: i0.Component,
                 args: [{
-                        selector: "[node]"
+                        selector: 'ofe-appointments-overview',
+                        templateUrl: './appointments-overview.component.html',
+                        styleUrls: ['./appointments-overview.component.css']
                     }]
-            }], ctorParameters: function () { return [{ type: HistoricalFieldHelperService }]; }, propDecorators: { _node: [{
-                    type: i0.Input
-                }], _nodeChange: [{
-                    type: i0.Output
-                }], setValue: [{
-                    type: i0.HostListener,
-                    args: ['click', ['$event']]
-                }], node: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { node: [{
                     type: i0.Input
                 }] } });
 
@@ -9358,6 +9252,7 @@
         function CollapseDirective(_el, _renderer, _builder) {
             this._el = _el;
             this._renderer = _renderer;
+            // @HostBinding('class.collapse')
             /** This event fires as soon as content collapses */
             this.collapsed = new i0.EventEmitter();
             /** This event fires when collapsing is started */
@@ -9491,16 +9386,12 @@
         return CollapseDirective;
     }());
     CollapseDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CollapseDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i1__namespace$6.AnimationBuilder }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    CollapseDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    CollapseDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CollapseDirective, selector: "[ofeCollapse]", inputs: { display: "display", isAnimated: "isAnimated", collapse: "collapse" }, outputs: { collapsed: "collapsed", collapses: "collapses", expanded: "expanded", expands: "expands" }, host: { properties: { "class.in": "this.isExpanded", "class.show": "this.isExpanded", "attr.aria-expanded": "this.isExpanded", "attr.aria-hidden": "this.isCollapsed", "class.collapse": "this.isCollapse", "class.collapsing": "this.isCollapsing" } }, exportAs: ["bs-collapse"], ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CollapseDirective, decorators: [{
                 type: i0.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__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: i1__namespace$6.AnimationBuilder }]; }, propDecorators: { collapsed: [{
                     type: i0.Output
@@ -9536,40 +9427,19 @@
                     type: i0.Input
                 }] } });
 
-    /* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/directive-class-suffix */
-    var Option$1 = /** @class */ (function () {
-        function Option() {
-            this.inputClass = 'cds--select-option';
-        }
-        return Option;
-    }());
-    Option$1.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Option$1, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    Option$1.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Option$1, selector: "option", host: { properties: { "class": "this.inputClass" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Option$1, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        // eslint-disable-next-line
-                        selector: 'option'
-                    }]
-            }], propDecorators: { inputClass: [{
-                    type: i0.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.
      */
-    var TextArea = /** @class */ (function () {
-        function TextArea() {
+    var TextAreaDirective = /** @class */ (function () {
+        function TextAreaDirective() {
             /**
              * `light` or `dark` input theme
              */
@@ -9578,21 +9448,21 @@
             this.invalid = false;
             this.skeleton = false;
         }
-        Object.defineProperty(TextArea.prototype, "isLightTheme", {
+        Object.defineProperty(TextAreaDirective.prototype, "isLightTheme", {
             get: function () {
                 return this.theme === 'light';
             },
             enumerable: false,
             configurable: true
         });
-        return TextArea;
+        return TextAreaDirective;
     }());
-    TextArea.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextArea, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TextArea.ɵdir = i0__namespace.ɵɵ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__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextArea, decorators: [{
+    TextAreaDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextAreaDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TextAreaDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: { theme: "theme", invalid: "invalid", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--skeleton": "this.skeleton", "class.cds--text-area--light": "this.isLightTheme" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextAreaDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
-                        selector: '[ibmTextArea]'
+                        selector: '[ofeTextAreaInput]'
                     }]
             }], propDecorators: { theme: [{
                     type: i0.Input
@@ -9614,20 +9484,19 @@
                     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.
      */
-    var TextInput = /** @class */ (function () {
-        function TextInput() {
+    var TextInputDirective = /** @class */ (function () {
+        function TextInputDirective() {
             /**
              * `light` or `dark` input theme
              */
@@ -9641,35 +9510,35 @@
             this.warn = false;
             this.skeleton = false;
         }
-        Object.defineProperty(TextInput.prototype, "isSizeXl", {
+        Object.defineProperty(TextInputDirective.prototype, "isSizeXl", {
             get: function () {
                 return this.size === 'xl';
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(TextInput.prototype, "isSizeSm", {
+        Object.defineProperty(TextInputDirective.prototype, "isSizeSm", {
             get: function () {
                 return this.size === 'sm';
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(TextInput.prototype, "isLightTheme", {
+        Object.defineProperty(TextInputDirective.prototype, "isLightTheme", {
             get: function () {
                 return this.theme === 'light';
             },
             enumerable: false,
             configurable: true
         });
-        return TextInput;
+        return TextInputDirective;
     }());
-    TextInput.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextInput, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TextInput.ɵdir = i0__namespace.ɵɵ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__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextInput, decorators: [{
+    TextInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextInputDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TextInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextInputDirective, selector: "[ofeTextInput]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--xl": "this.isSizeXl", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input__field-wrapper--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
-                        selector: '[ibmText]'
+                        selector: '[ofeTextInput]'
                     }]
             }], propDecorators: { theme: [{
                     type: i0.Input
@@ -9704,6 +9573,115 @@
                     args: ['class.cds--text-input--light']
                 }] } });
 
+    var HistoricalFieldHelperService = /** @class */ (function () {
+        function HistoricalFieldHelperService() {
+        }
+        HistoricalFieldHelperService.prototype.getDisplayTextFromOptions = function (question, valueProperty, displayProperty) {
+            var displayText = '';
+            var historicalValue = question.historicalDataValue;
+            if (___namespace.isArray(historicalValue.value)) {
+                var valueConverted_1 = 0;
+                ___namespace.each(historicalValue.value, function (val) {
+                    ___namespace.each(question.options, function (option) {
+                        if (option[valueProperty] === val) {
+                            if (valueConverted_1 === 0) {
+                                displayText = displayText + option[displayProperty];
+                            }
+                            else {
+                                displayText = displayText + ', ' + option[displayProperty];
+                            }
+                            valueConverted_1++;
+                        }
+                    });
+                });
+            }
+            else {
+                ___namespace.each(question.options, function (option) {
+                    if (option[valueProperty] === historicalValue.value) {
+                        displayText = option[displayProperty];
+                    }
+                });
+            }
+            return displayText;
+        };
+        return HistoricalFieldHelperService;
+    }());
+    HistoricalFieldHelperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    HistoricalFieldHelperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalFieldHelperService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var HistoricalValueDirective = /** @class */ (function () {
+        function HistoricalValueDirective(historicalFieldHelper) {
+            this.historicalFieldHelper = historicalFieldHelper;
+            this._nodeChange = new i0.EventEmitter();
+        }
+        HistoricalValueDirective.prototype.setValue = function (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);
+                }
+            }
+        };
+        HistoricalValueDirective.prototype.compareString = function (a, b) {
+            if (a === b) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        };
+        Object.defineProperty(HistoricalValueDirective.prototype, "node", {
+            set: function (node) {
+                if (node) {
+                    this._node = node;
+                    if (this._node.question.enableHistoricalValue &&
+                        !___namespace.isUndefined(this._node.question.historicalDataValue)) {
+                        var 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 (!___namespace.isUndefined(this._node.question.historicalDataValue)) {
+                            display.text = this._node.question.historicalDataValue.value;
+                            display._date = this._node.question.historicalDataValue.valueDate;
+                            this._node.question['historicalDisplay'] = display;
+                        }
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return HistoricalValueDirective;
+    }());
+    HistoricalValueDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalValueDirective, deps: [{ token: HistoricalFieldHelperService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    HistoricalValueDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HistoricalValueDirective, selector: "[ofeNode]", inputs: { _node: "_node", node: "node" }, outputs: { _nodeChange: "_nodeChange" }, host: { listeners: { "click": "setValue($event)" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HistoricalValueDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: "[ofeNode]"
+                    }]
+            }], ctorParameters: function () { return [{ type: HistoricalFieldHelperService }]; }, propDecorators: { _node: [{
+                    type: i0.Input
+                }], _nodeChange: [{
+                    type: i0.Output
+                }], setValue: [{
+                    type: i0.HostListener,
+                    args: ['click', ['$event']]
+                }], node: [{
+                    type: i0.Input
+                }] } });
+
     var FormRendererComponent = /** @class */ (function () {
         function FormRendererComponent(validationFactory, dataSources, formErrorsService, document) {
             this.validationFactory = validationFactory;
@@ -9913,11 +9891,11 @@
         return FormRendererComponent;
     }());
     FormRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: i1.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FormRendererComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { type: i20__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i20__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i20__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i20__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: Option$1, selector: "option" }, { type: i20__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: TextArea, selector: "[ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInput, selector: "[ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "date": i1__namespace.DatePipe, "timeAgo": TimeAgoPipe } });
+    FormRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap", controlId: "controlId" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n  <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n    <ofe-tab\n      [tabTitle]=\"question.label\"\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__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: CollapseDirective, selector: "[ofeCollapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { type: i19__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i19__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i19__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i19__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i19__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i19__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i19__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: ["theme", "invalid", "skeleton"] }, { type: i1__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { type: HistoricalValueDirective, selector: "[ofeNode]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }], pipes: { "date": i1__namespace.DatePipe, "timeAgo": TimeAgoPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'form-renderer',
+                        selector: 'ofe-form-renderer',
                         templateUrl: 'form-renderer.component.html',
                         styleUrls: ['../../style/app.css', './form-renderer.component.css']
                     }]
@@ -9945,7 +9923,6 @@
             this.validationFactory = validationFactory;
             this.formErrorsService = formErrorsService;
         }
-        ErrorRendererComponent.prototype.ngOnInit = function () { };
         ErrorRendererComponent.prototype.showErrors = function () {
             return !this.form.valid && this.form.showErrors;
         };
@@ -9982,11 +9959,11 @@
         return ErrorRendererComponent;
     }());
     ErrorRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ErrorRendererComponent, deps: [{ token: ValidationFactory }, { token: FormErrorsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ErrorRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ErrorRendererComponent, selector: "error-renderer", inputs: { form: "form" }, ngImport: i0__namespace, template: "<div *ngIf=\"showErrors()\" class=\"container\">\n  <div\n    data-notification\n    *ngFor=\"let errorNode of errorNodes\"\n    class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n    role=\"alert\"\n    (click)=\"announceErrorField(errorNode)\"\n  >\n    <div class=\"cds--inline-notification__details\">\n      <div class=\"cds--inline-notification__text-wrapper\">\n        <p class=\"cds--inline-notification__title\">\n          {{ errorNode.question.label }}\n        </p>\n        <p class=\"cds--inline-notification__subtitle\">\n          {{ getControlError(errorNode) }}\n        </p>\n      </div>\n    </div>\n    <button\n      tabindex=\"0\"\n      class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n      type=\"button\"\n    >\n      Fix\n    </button>\n    <svg\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--inline-notification__icon\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n      ></path>\n      <path\n        d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n        data-icon-path=\"inner-path\"\n        opacity=\"0\"\n      ></path>\n    </svg>\n  </div>\n</div>\n", styles: ["ul{list-style:none}.list-group-item{padding:2px 15px;cursor:pointer}ul li:hover{background-color:#fff}h4{margin-top:7px;margin-bottom:7px}.pointer{cursor:pointer}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    ErrorRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ErrorRendererComponent, selector: "ofe-error-renderer", inputs: { form: "form" }, ngImport: i0__namespace, template: "<div *ngIf=\"showErrors()\" class=\"container\">\n  <div\n    data-notification\n    *ngFor=\"let errorNode of errorNodes\"\n    class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n    role=\"alert\"\n    (click)=\"announceErrorField(errorNode)\"\n  >\n    <div class=\"cds--inline-notification__details\">\n      <div class=\"cds--inline-notification__text-wrapper\">\n        <p class=\"cds--inline-notification__title\">\n          {{ errorNode.question.label }}\n        </p>\n        <p class=\"cds--inline-notification__subtitle\">\n          {{ getControlError(errorNode) }}\n        </p>\n      </div>\n    </div>\n    <button\n      tabindex=\"0\"\n      class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n      type=\"button\"\n    >\n      Fix\n    </button>\n    <svg\n      focusable=\"false\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      style=\"will-change: transform\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"cds--inline-notification__icon\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n      ></path>\n      <path\n        d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n        data-icon-path=\"inner-path\"\n        opacity=\"0\"\n      ></path>\n    </svg>\n  </div>\n</div>\n", styles: ["ul{list-style:none}.list-group-item{padding:2px 15px;cursor:pointer}ul li:hover{background-color:#fff}h4{margin-top:7px;margin-bottom:7px}.pointer{cursor:pointer}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ErrorRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'error-renderer',
+                        selector: 'ofe-error-renderer',
                         templateUrl: 'error-renderer.component.html',
                         styleUrls: ['./error-renderer.component.css']
                     }]
@@ -10000,12 +9977,12 @@
         return NumberInputModule;
     }());
     NumberInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NumberInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, declarations: [NumberInputComponent], imports: [i1.CommonModule, i20.FormsModule], exports: [NumberInputComponent] });
-    NumberInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, providers: [], imports: [[i1.CommonModule, i20.FormsModule]] });
+    NumberInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, declarations: [NumberInputComponent], imports: [i1.CommonModule, i19.FormsModule], exports: [NumberInputComponent] });
+    NumberInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, providers: [], imports: [[i1.CommonModule, i19.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberInputModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i20.FormsModule],
+                        imports: [i1.CommonModule, i19.FormsModule],
                         exports: [NumberInputComponent],
                         declarations: [NumberInputComponent],
                         providers: []
@@ -10037,13 +10014,13 @@
     }());
     RemoteFileUploadModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     RemoteFileUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, declarations: [FileUploadComponent], imports: [i1.CommonModule,
-            i20.FormsModule,
+            i19.FormsModule,
             SharedModule,
             ngxWebcam.WebcamModule,
             i1$2.NgxFileUploaderModule], exports: [FileUploadComponent] });
     RemoteFileUploadModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RemoteFileUploadModule, providers: [], imports: [[
                 i1.CommonModule,
-                i20.FormsModule,
+                i19.FormsModule,
                 SharedModule,
                 ngxWebcam.WebcamModule,
                 i1$2.NgxFileUploaderModule
@@ -10053,7 +10030,7 @@
                 args: [{
                         imports: [
                             i1.CommonModule,
-                            i20.FormsModule,
+                            i19.FormsModule,
                             SharedModule,
                             ngxWebcam.WebcamModule,
                             i1$2.NgxFileUploaderModule
@@ -10072,26 +10049,25 @@
     // webpack2_
     var ModalComponent = /** @class */ (function () {
         function ModalComponent() {
-            this.onOverlayClick = new i0.EventEmitter();
+            this.overlayClick = new i0.EventEmitter();
         }
-        ModalComponent.prototype.ngOnInit = function () { };
         ModalComponent.prototype.closeModal = function () {
-            this.onOverlayClick.emit(false);
+            this.overlayClick.emit(false);
         };
         return ModalComponent;
     }());
     ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ModalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModalComponent, selector: "picker-modal", outputs: { onOverlayClick: "onOverlayClick" }, ngImport: i0__namespace, template: "<section class=\"x-modal\">\n  <section class=\"modal-overlay\" (click)=\"closeModal()\"></section>\n  <section class=\"modal-main\" id=\"section-modal-main\">\n    <ng-content></ng-content>\n  </section>\n</section>\n", styles: [":host{z-index:9999999999}*,*:before,*:after{box-sizing:border-box}.modal-main{position:absolute;left:19.6%;right:auto;top:auto;z-index:111;background-color:#fff;border:1px solid #d7dad7;border-radius:6px;transform:translate(-50%);box-shadow:0 5px 15px #0000004d}\n"], animations: [], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ModalComponent, selector: "ofe-picker-modal", outputs: { overlayClick: "overlayClick" }, ngImport: i0__namespace, template: "<section class=\"x-modal\">\n  <section class=\"modal-overlay\" (click)=\"closeModal()\"></section>\n  <section class=\"modal-main\" id=\"section-modal-main\">\n    <ng-content></ng-content>\n  </section>\n</section>\n", styles: [":host{z-index:9999999999}*,*:before,*:after{box-sizing:border-box}.modal-main{position:absolute;left:19.6%;right:auto;top:auto;z-index:111;background-color:#fff;border:1px solid #d7dad7;border-radius:6px;transform:translate(-50%);box-shadow:0 5px 15px #0000004d}\n"], animations: [], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ModalComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'picker-modal',
+                        selector: 'ofe-picker-modal',
                         templateUrl: './modal.component.html',
                         styleUrls: ['./modal.component.css'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         animations: []
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { onOverlayClick: [{
+            }], ctorParameters: function () { return []; }, propDecorators: { overlayClick: [{
                     type: i0.Output
                 }] } });
 
@@ -10124,8 +10100,8 @@
             this.locale = 'en';
             this.viewFormat = 'll';
             this.returnObject = 'js';
-            this.onDatePickerCancel = new i0.EventEmitter();
-            this.onSelectDate = new i0.EventEmitter();
+            this.datePickerCancel = new i0.EventEmitter();
+            this.dateSelect = new i0.EventEmitter();
             this.onDisplayMonths = false;
             this.onDisplayYears = false;
             this.displayYearsIndex = 0;
@@ -10182,7 +10158,7 @@
             var daysDifference = day.diff(this.calendarDate.clone().startOf('date'), 'days');
             day = this.calendarDate.clone().add(daysDifference, 'd');
             var selectedDay = this.parseToReturnObjectType(day);
-            this.onSelectDate.emit(selectedDay);
+            this.dateSelect.emit(selectedDay);
             this.cancelDatePicker();
             return;
         };
@@ -10198,17 +10174,17 @@
         };
         DatePickerComponent.prototype.selectToday = function () {
             var today = this.parseToReturnObjectType(moment__default["default"]());
-            this.onSelectDate.emit(today);
+            this.dateSelect.emit(today);
             this.cancelDatePicker();
             return;
         };
         DatePickerComponent.prototype.clearPickDate = function () {
-            this.onSelectDate.emit(null);
+            this.dateSelect.emit(null);
             this.cancelDatePicker();
             return;
         };
         DatePickerComponent.prototype.cancelDatePicker = function () {
-            this.onDatePickerCancel.emit(false);
+            this.datePickerCancel.emit(false);
             return;
         };
         DatePickerComponent.prototype.generateYears = function () {
@@ -10278,11 +10254,11 @@
         return DatePickerComponent;
     }());
     DatePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DatePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DatePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "date-picker", inputs: { initDate: "initDate", locale: "locale", viewFormat: "viewFormat", returnObject: "returnObject" }, outputs: { onDatePickerCancel: "onDatePickerCancel", onSelectDate: "onSelectDate" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "moment": MomentPipe } });
+    DatePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DatePickerComponent, selector: "ofe-date-picker", inputs: { initDate: "initDate", locale: "locale", viewFormat: "viewFormat", returnObject: "returnObject" }, outputs: { datePickerCancel: "datePickerCancel", dateSelect: "dateSelect" }, ngImport: i0__namespace, template: "<ofe-picker-modal (overlayClick)=\"cancelDatePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-prev\" (click)=\"prev()\"></span>\n        </div>\n        <div class=\"picker-header-content\">\n          <div class=\"content\">\n            <span (click)=\"showMonthSelection()\" class=\"month\">{{\n              calendarDate | moment: 'MMMM'\n            }}</span>\n            <span class=\"seperator\">|</span>\n            <span (click)=\"showYearSelection()\" class=\"year\">{{\n              calendarDate | moment: 'YYYY'\n            }}</span>\n          </div>\n        </div>\n        <div class=\"picker-header-nav\">\n          <span class=\"nav-next\" (click)=\"next()\"></span>\n        </div>\n      </div>\n      <div class=\"picker-calendar\">\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span class=\"picker-weekday\" *ngFor=\"let day of dayNames\">{{\n            day\n          }}</span>\n        </div>\n        <div\n          class=\"picker-calendar-row\"\n          *ngIf=\"!onDisplayMonths && !onDisplayYears\"\n        >\n          <span\n            class=\"picker-day\"\n            (click)=\"selectDay(day)\"\n            [ngClass]=\"{\n              'out-focus': day.month() !== calendarDate.month(),\n              today: day.isSame(today),\n              selected: day.isSame(selectedDate)\n            }\"\n            *ngFor=\"let day of calendarDays\"\n          >\n            {{ day | moment: 'D' }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayMonths\">\n          <span\n            class=\"picker-month\"\n            *ngFor=\"let month of monthsShort\"\n            (click)=\"selectMonth(month)\"\n            [ngClass]=\"{\n              selected: month === currentMonth\n            }\"\n          >\n            {{ month }}\n          </span>\n        </div>\n        <div class=\"picker-calendar-row\" *ngIf=\"onDisplayYears\">\n          <span\n            class=\"picker-year\"\n            *ngFor=\"let year of displayYearRange\"\n            (click)=\"selectYear(year)\"\n            [ngClass]=\"{\n              selected: year === currentYear\n            }\"\n          >\n            {{ year }}\n          </span>\n        </div>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-today\" (click)=\"selectToday()\">\n          <span class=\"text\">Today</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearPickDate()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelDatePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ofe-picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:666px}.picker-box{font-family:\"Open Sans\";min-width:400px!important;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;display:flex;height:2.5rem;width:100%}.picker-header-nav{position:relative;cursor:pointer;width:calc(100% / 8)}.picker-header-nav>*{position:absolute;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%)}.picker-header-nav .nav-prev:before,.picker-header-nav .nav-next:before{content:\" \";border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-right:.75em solid #000;width:0;height:0;display:block;margin:0 auto}.picker-header-nav .nav-next:before{border-right:0;border-left:.75em solid #000}.picker-header-content{width:calc(100% * 6 / 8);text-align:center}.picker-header-content .month{font-size:1.778rem;line-height:2.5rem;margin-right:.5rem;font-weight:700}.picker-header-content .year{font-style:italic;color:#999}.picker-calendar{width:100%}.picker-calendar .picker-calendar-row{display:flex;flex-wrap:wrap;width:100%;margin-bottom:.625rem}.picker-calendar .picker-weekday{font-weight:700;text-align:left;color:#999;width:calc(100% / 7)}.picker-calendar .picker-day,.picker-calendar .picker-month,.picker-calendar .picker-year{font-size:1.333rem;line-height:2.5rem;position:relative;height:2.5rem;text-align:center;cursor:pointer;width:calc(100% / 7)}.picker-calendar .picker-day:hover,.picker-calendar .picker-month:hover,.picker-calendar .picker-year:hover{background:#b1dcfb}.picker-calendar .out-focus{color:#ddd}.picker-calendar .out-focus:hover{color:#000}.picker-calendar .selected{background:#0089ec;color:#fff}.picker-calendar .selected:hover{background:#0089ec}.picker-calendar .today:before{content:\" \";position:absolute;top:2px;right:2px;width:0;height:0;border-top:.5em solid #0059bc;border-left:.5em solid transparent}.picker-footer{cursor:pointer}.picker-footer .picker-action{text-align:center;width:calc(100% / 3)}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-today:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-today:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "ofe-picker-modal", outputs: ["overlayClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "moment": MomentPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DatePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'date-picker',
+                        selector: 'ofe-date-picker',
                         templateUrl: './date-picker.component.html',
                         styleUrls: ['./date-picker.component.css']
                     }]
@@ -10294,9 +10270,9 @@
                     type: i0.Input
                 }], returnObject: [{
                     type: i0.Input
-                }], onDatePickerCancel: [{
+                }], datePickerCancel: [{
                     type: i0.Output
-                }], onSelectDate: [{
+                }], dateSelect: [{
                     type: i0.Output
                 }] } });
 
@@ -10312,8 +10288,8 @@
             this.viewFormat = 'hh:mm A';
             this.use12Hour = false;
             this.returnObject = 'js';
-            this.onSelectTime = new i0.EventEmitter();
-            this.onTimePickerCancel = new i0.EventEmitter();
+            this.timeSelect = new i0.EventEmitter();
+            this.timePickerCancel = new i0.EventEmitter();
             this.hourFormat = 'HH';
         }
         TimePickerComponent.prototype.ngOnInit = function () {
@@ -10354,23 +10330,23 @@
         };
         TimePickerComponent.prototype.selectTime = function () {
             var selectTime = this.parseToReturnObjectType(this.time);
-            this.onSelectTime.emit(selectTime);
+            this.timeSelect.emit(selectTime);
             this.cancelTimePicker();
             return;
         };
         TimePickerComponent.prototype.selectNow = function () {
             var selectTime = this.parseToReturnObjectType(moment__default["default"]());
-            this.onSelectTime.emit(selectTime);
+            this.timeSelect.emit(selectTime);
             this.cancelTimePicker();
             return;
         };
         TimePickerComponent.prototype.clearTime = function () {
-            this.onSelectTime.emit(null);
+            this.timeSelect.emit(null);
             this.cancelTimePicker();
             return;
         };
         TimePickerComponent.prototype.cancelTimePicker = function () {
-            this.onTimePickerCancel.emit(false);
+            this.timePickerCancel.emit(false);
             return;
         };
         TimePickerComponent.prototype.parseToReturnObjectType = function (time) {
@@ -10396,11 +10372,11 @@
         return TimePickerComponent;
     }());
     TimePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "time-picker", inputs: { initTime: "initTime", showSecond: "showSecond", viewFormat: "viewFormat", use12Hour: "use12Hour", returnObject: "returnObject" }, outputs: { onSelectTime: "onSelectTime", onTimePickerCancel: "onTimePickerCancel" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "moment": MomentPipe } });
+    TimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimePickerComponent, selector: "ofe-time-picker", inputs: { initTime: "initTime", showSecond: "showSecond", viewFormat: "viewFormat", use12Hour: "use12Hour", returnObject: "returnObject" }, outputs: { timeSelect: "timeSelect", timePickerCancel: "timePickerCancel" }, ngImport: i0__namespace, template: "<ofe-picker-modal (overlayClick)=\"cancelTimePicker()\">\n  <div class=\"picker-wrap\">\n    <div class=\"picker-box\">\n      <div class=\"picker-header\">Time Picker</div>\n      <div class=\"picker-table\">\n        <ul class=\"picker-table-time\">\n          <li class=\"picker-table-number hour\">\n            <span class=\"arrow up\" (click)=\"increaseHour()\"></span>\n            {{ time | moment: hourFormat }}\n            <span class=\"arrow down\" (click)=\"decreaseHour()\"></span>\n          </li>\n          <li class=\"picker-table-separator\">:</li>\n          <li class=\"picker-table-number minute\">\n            <span class=\"arrow up\" (click)=\"increaseMinute()\"></span>\n            {{ time | moment: 'mm' }}\n            <span class=\"arrow down\" (click)=\"decreaseMinute()\"></span>\n          </li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-separator\">:</li>\n          <li *ngIf=\"showSecond\" class=\"picker-table-number second\">\n            <span class=\"arrow up\" (click)=\"increaseSecond()\"></span>\n            {{ time | moment: 'ss' }}\n            <span class=\"arrow down\" (click)=\"decreaseSecond()\"></span>\n          </li>\n          <li *ngIf=\"use12Hour\" class=\"picker-table-meridiem meridiem\">\n            {{ time | moment: 'A' }}\n          </li>\n        </ul>\n      </div>\n      <div class=\"picker-footer\">\n        <div class=\"picker-action action-now\" (click)=\"selectNow()\">\n          <span class=\"text\">Now</span>\n        </div>\n        <div class=\"picker-action action-confirm\" (click)=\"selectTime()\">\n          <span class=\"text\">Confirm</span>\n        </div>\n        <div class=\"picker-action action-clear\" (click)=\"clearTime()\">\n          <span class=\"text\">Clear</span>\n        </div>\n        <div class=\"picker-action action-close\" (click)=\"cancelTimePicker()\">\n          <span class=\"text\">Close</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ofe-picker-modal>\n", styles: ["*,*:before,*:after{box-sizing:border-box}.picker-wrap{width:95vw;max-width:40rem;font-family:\"Open Sans\"}.picker-box{width:100%;padding:.625rem 1rem;-webkit-user-select:none;user-select:none}.picker-header,.picker-footer{font-size:1.333rem;line-height:2.5rem;height:2.5rem;width:100%}.picker-header{text-align:center}.picker-table{width:100%;margin:2.5rem 0}.picker-table-time{font-size:2.37rem;line-height:2.5rem;list-style:none;margin:0;padding:0;display:flex;justify-content:center;width:100%;-webkit-user-select:none;user-select:none}.picker-table-number,.picker-table-meridiem,.picker-table-separator{text-align:center}.picker-table-number,.picker-table-meridiem{position:relative;width:20%}.arrow{position:absolute;left:50%;border:solid #777;border-width:0 .2rem .2rem 0;display:inline-block;padding:.25rem;cursor:pointer}.arrow.up{top:-1rem;transform:translate(-50%) rotate(-135deg)}.arrow.down{bottom:-1rem;transform:translate(-50%) rotate(45deg)}.arrow:hover{border-color:#1975d2}.picker-table-separator{width:calc(20% / 3)}.picker-footer{display:flex;justify-content:center;width:100%;cursor:pointer}.picker-footer .picker-action{width:25%;text-align:center}.picker-footer .picker-action:hover{background-color:#b1dcfb}.picker-footer .picker-action .text{padding-left:.8rem}.picker-footer .action-now:before,.picker-footer .action-confirm:before,.picker-footer .action-clear:before,.picker-footer .action-close:before{content:\" \";position:relative;display:inline-block;height:0;width:0}.picker-footer .action-now:before{border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker-footer .action-confirm:before{width:1rem;height:1rem;border-radius:100%;background-color:#00b5ad}.picker-footer .action-clear:before{top:-.5rem;width:1rem;border-top:3px solid #e20}.picker-footer .action-close:before{width:1rem;height:1rem;background:linear-gradient(to bottom,transparent 35%,#777 35%,#777 65%,transparent 65%),linear-gradient(to right,transparent 35%,#777 35%,#777 65%,transparent 65%);transform:rotate(45deg)}\n"], components: [{ type: ModalComponent, selector: "ofe-picker-modal", outputs: ["overlayClick"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "moment": MomentPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TimePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'time-picker',
+                        selector: 'ofe-time-picker',
                         templateUrl: './time-picker.component.html',
                         styleUrls: ['./time-picker.component.css']
                     }]
@@ -10414,9 +10390,9 @@
                     type: i0.Input
                 }], returnObject: [{
                     type: i0.Input
-                }], onSelectTime: [{
+                }], timeSelect: [{
                     type: i0.Output
-                }], onTimePickerCancel: [{
+                }], timePickerCancel: [{
                     type: i0.Output
                 }] } });
 
@@ -10426,13 +10402,12 @@
             this.showTime = false;
             this.showWeeks = false;
             this.weeks = [2, 4, 6, 8, 12, 16, 24];
-            this.onDateChange = new i0.EventEmitter();
+            this.dateChange = new i0.EventEmitter();
             this.showDatePicker = false;
             this.showTimePicker = false;
             this.onChange = function () { };
             this.onTouched = function () { };
         }
-        DateTimePickerComponent.prototype.ngOnInit = function () { };
         DateTimePickerComponent.prototype.weeksSelected = function (count) {
             var now = new Date();
             var nextDate = now.setDate(now.getDate() + count * 7);
@@ -10479,7 +10454,7 @@
             },
             set: function (val) {
                 this.modelValue = val;
-                this.onDateChange.emit(val);
+                this.dateChange.emit(val);
                 this.onChange(val);
                 this.onTouched();
             },
@@ -10503,22 +10478,22 @@
         return DateTimePickerComponent;
     }());
     DateTimePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DateTimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "date-time-picker", inputs: { modelValue: "modelValue", showDate: "showDate", showTime: "showTime", showWeeks: "showWeeks", weeks: "weeks" }, outputs: { onDateChange: "onDateChange" }, providers: [
+    DateTimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateTimePickerComponent, selector: "ofe-date-time-picker", inputs: { modelValue: "modelValue", showDate: "showDate", showTime: "showTime", showWeeks: "showWeeks", weeks: "weeks" }, outputs: { dateChange: "dateChange" }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return DateTimePickerComponent; }),
                 multi: true
             }
-        ], ngImport: i0__namespace, template: "<div class=\"row\">\n  <div *ngIf=\"!showTime\" class=\"col-xs-12 col-md-12\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-8 col-md-8\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-4 col-md-4\">\n    <input\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'shortTime'\"\n      (focus)=\"toggleTimePicker(true)\"\n      readonly\n      placeholder=\"Select Time\"\n    />\n  </div>\n</div>\n<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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace.DatePipe } });
+        ], ngImport: i0__namespace, template: "<div class=\"row\">\n  <div *ngIf=\"!showTime\" class=\"col-xs-12 col-md-12\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-8 col-md-8\">\n    <input\n      *ngIf=\"!showWeeks\"\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'mediumDate'\"\n      (focus)=\"toggleDatePicker(true)\"\n      readonly\n      placeholder=\"Select Date\"\n    />\n    <div *ngIf=\"showWeeks\" class=\"input-group\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        class=\"form-control\"\n        [value]=\"value | date: 'mediumDate'\"\n        (focus)=\"toggleDatePicker(true)\"\n        readonly\n        placeholder=\"Select Date\"\n      />\n      <div class=\"input-group-btn\">\n        <button\n          type=\"button\"\n          class=\"btn btn-default dropdown-toggle\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          Weeks <span class=\"caret\"></span>\n        </button>\n        <ul class=\"dropdown-menu up\">\n          <li (click)=\"weeksSelected(count)\" *ngFor=\"let count of weeks\">\n            <span> {{ count }} Weeks</span>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"showTime\" class=\"col-xs-4 col-md-4\">\n    <input\n      type=\"text\"\n      class=\"form-control\"\n      [value]=\"value | date: 'shortTime'\"\n      (focus)=\"toggleTimePicker(true)\"\n      readonly\n      placeholder=\"Select Time\"\n    />\n  </div>\n</div>\n<ofe-date-picker\n  *ngIf=\"showDatePicker\"\n  [initDate]=\"value\"\n  (dateSelect)=\"setDate($event)\"\n  (datePickerCancel)=\"toggleDatePicker($event)\"\n></ofe-date-picker>\n\n<ofe-time-picker\n  *ngIf=\"showTimePicker\"\n  [initTime]=\"value\"\n  [use12Hour]=\"true\"\n  (timeSelect)=\"setTime($event)\"\n  (timePickerCancel)=\"toggleTimePicker($event)\"\n></ofe-time-picker>\n", styles: ["input[readonly]{background-color:#fff}.up{bottom:100%!important;top:auto!important}.glyphicon{top:1px}\n"], components: [{ type: DatePickerComponent, selector: "ofe-date-picker", inputs: ["initDate", "locale", "viewFormat", "returnObject"], outputs: ["datePickerCancel", "dateSelect"] }, { type: TimePickerComponent, selector: "ofe-time-picker", inputs: ["initTime", "showSecond", "viewFormat", "use12Hour", "returnObject"], outputs: ["timeSelect", "timePickerCancel"] }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i1__namespace.DatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'date-time-picker',
+                        selector: 'ofe-date-time-picker',
                         templateUrl: './date-time-picker.component.html',
                         styleUrls: ['./date-time-picker.component.css'],
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return DateTimePickerComponent; }),
                                 multi: true
                             }
@@ -10534,7 +10509,7 @@
                     type: i0.Input
                 }], weeks: [{
                     type: i0.Input
-                }], onDateChange: [{
+                }], dateChange: [{
                     type: i0.Output
                 }] } });
 
@@ -10551,16 +10526,16 @@
             TimePickerComponent,
             ModalComponent,
             MomentPipe,
-            DateTimePickerComponent], imports: [i1.CommonModule, i20.FormsModule], exports: [DatePickerComponent,
+            DateTimePickerComponent], imports: [i1.CommonModule, i19.FormsModule], exports: [DatePickerComponent,
             TimePickerComponent,
             ModalComponent,
             MomentPipe,
             DateTimePickerComponent] });
-    DateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, providers: [], imports: [[i1.CommonModule, i20.FormsModule]] });
+    DateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, providers: [], imports: [[i1.CommonModule, i19.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateTimePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i20.FormsModule],
+                        imports: [i1.CommonModule, i19.FormsModule],
                         declarations: [
                             DatePickerComponent,
                             TimePickerComponent,
@@ -10580,7 +10555,7 @@
             }] });
 
     var OWL_DATETIME_VALUE_ACCESSOR = {
-        provide: i20.NG_VALUE_ACCESSOR,
+        provide: i19.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return OwlDateTimeInlineComponent; }),
         multi: true
     };
@@ -10616,6 +10591,13 @@
             _this.onModelTouched = function () { };
             return _this;
         }
+        Object.defineProperty(OwlDateTimeInlineComponent.prototype, "owlDTInlineClass", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(OwlDateTimeInlineComponent.prototype, "pickerType", {
             get: function () {
                 return this._pickerType;
@@ -10678,10 +10660,14 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlDateTimeInlineComponent.prototype, "dateTimeFilter", {
+        Object.defineProperty(OwlDateTimeInlineComponent.prototype, "owlDateTimeFilter", {
             get: function () {
                 return this._dateTimeFilter;
             },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OwlDateTimeInlineComponent.prototype, "dateTimeFilter", {
             set: function (filter) {
                 this._dateTimeFilter = filter;
             },
@@ -10798,13 +10784,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(OwlDateTimeInlineComponent.prototype, "owlDTInlineClass", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
         OwlDateTimeInlineComponent.prototype.ngOnInit = function () {
             this.container.picker = this;
         };
@@ -10855,18 +10834,14 @@
         return OwlDateTimeInlineComponent;
     }(OwlDateTime));
     OwlDateTimeInlineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeInlineComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    OwlDateTimeInlineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInlineComponent, selector: "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__namespace, template: "<owl-date-time-container></owl-date-time-container>\n", styles: [""], components: [{ type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    OwlDateTimeInlineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: OwlDateTimeInlineComponent, selector: "ofe-owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", owlDateTimeFilter: "owlDateTimeFilter", min: "min", max: "max", value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-inline": "this.owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ofe-owl-date-time-container></ofe-owl-date-time-container>\n", styles: [""], components: [{ type: OwlDateTimeContainerComponent, selector: "ofe-owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OwlDateTimeInlineComponent, decorators: [{
                 type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                        preserveWhitespaces: false,
                         providers: [OWL_DATETIME_VALUE_ACCESSOR]
                     }]
             }], ctorParameters: function () {
@@ -10878,7 +10853,10 @@
                             type: i0.Inject,
                             args: [OWL_DATE_TIME_FORMATS]
                         }] }];
-        }, propDecorators: { container: [{
+        }, propDecorators: { owlDTInlineClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.owl-dt-inline']
+                }], container: [{
                     type: i0.ViewChild,
                     args: [OwlDateTimeContainerComponent, { static: true }]
                 }], pickerType: [{
@@ -10889,15 +10867,12 @@
                     type: i0.Input
                 }], startAt: [{
                     type: i0.Input
-                }], dateTimeFilter: [{
-                    type: i0.Input,
-                    args: ['owlDateTimeFilter']
-                }], minDateTime: [{
-                    type: i0.Input,
-                    args: ['min']
-                }], maxDateTime: [{
-                    type: i0.Input,
-                    args: ['max']
+                }], owlDateTimeFilter: [{
+                    type: i0.Input
+                }], min: [{
+                    type: i0.Input
+                }], max: [{
+                    type: i0.Input
                 }], value: [{
                     type: i0.Input
                 }], values: [{
@@ -11413,22 +11388,21 @@
     }());
     NgxDateTimePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     NgxDateTimePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, declarations: [NgxDatetimeComponent], imports: [i1.CommonModule,
-            i20.FormsModule,
+            i19.FormsModule,
             OwlDateTimeModule,
             OwlNativeDateTimeModule], exports: [NgxDatetimeComponent] });
     NgxDateTimePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, providers: [], imports: [[
                 i1.CommonModule,
-                i20.FormsModule,
+                i19.FormsModule,
                 OwlDateTimeModule,
                 OwlNativeDateTimeModule
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxDateTimePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
                         imports: [
                             i1.CommonModule,
-                            i20.FormsModule,
+                            i19.FormsModule,
                             OwlDateTimeModule,
                             OwlNativeDateTimeModule
                         ],
@@ -11463,7 +11437,6 @@
             this.propagateChange = fn;
         };
         AfeNgSelectComponent.prototype.registerOnTouched = function (fn) { };
-        AfeNgSelectComponent.prototype.ngOnChanges = function (changes) { };
         AfeNgSelectComponent.prototype.ngOnInit = function () {
             var _this = this;
             if (this.extras) {
@@ -11507,21 +11480,21 @@
         return AfeNgSelectComponent;
     }());
     AfeNgSelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AfeNgSelectComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AfeNgSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AfeNgSelectComponent, selector: "afe-ng-select", inputs: { dataSource: "dataSource", multiple: "multiple", extras: "extras" }, providers: [
+    AfeNgSelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AfeNgSelectComponent, selector: "ofe-ng-select", inputs: { dataSource: "dataSource", multiple: "multiple", extras: "extras" }, providers: [
             {
-                provide: i20.NG_VALUE_ACCESSOR,
+                provide: i19.NG_VALUE_ACCESSOR,
                 useExisting: i0.forwardRef(function () { return AfeNgSelectComponent; }),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-select\n    (searchInputText)=\"getChangingText($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [options]=\"question_options\"\n    [multiple]=\"multiple\"\n  >\n  </ng-select> ", isInline: true, components: [{ type: i1__namespace$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"] }] });
+        ], ngImport: i0__namespace, template: "<ng-select\n    (searchInputText)=\"getChangingText($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [options]=\"question_options\"\n    [multiple]=\"multiple\"\n  >\n  </ng-select> ", isInline: true, components: [{ type: i1__namespace$3.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AfeNgSelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'afe-ng-select',
+                        selector: 'ofe-ng-select',
                         template: "<ng-select\n    (searchInputText)=\"getChangingText($event)\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [options]=\"question_options\"\n    [multiple]=\"multiple\"\n  >\n  </ng-select> ",
                         providers: [
                             {
-                                provide: i20.NG_VALUE_ACCESSOR,
+                                provide: i19.NG_VALUE_ACCESSOR,
                                 useExisting: i0.forwardRef(function () { return AfeNgSelectComponent; }),
                                 multi: true
                             }
@@ -11982,7 +11955,6 @@
             var _this = this;
             if (rootNode instanceof GroupNode) {
                 var nodeAsGroup = rootNode;
-                // eslint-disable-next-line guard-for-in
                 for (var o in nodeAsGroup.children) {
                     this.searchNodeByQuestionType(nodeAsGroup.children[o], questionType, found);
                 }
@@ -12009,7 +11981,6 @@
             }
             if (rootNode instanceof GroupNode) {
                 var nodeAsGroup = rootNode;
-                // eslint-disable-next-line guard-for-in
                 for (var o in nodeAsGroup.children) {
                     this.findNodesByQuestionId(nodeAsGroup.children[o], questionId, results);
                 }
@@ -12088,7 +12059,6 @@
             }
             if (rootNode instanceof GroupNode) {
                 var nodeAsGroup = rootNode;
-                // eslint-disable-next-line guard-for-in
                 for (var o in nodeAsGroup.children) {
                     this._updateAlertsForAllControls(nodeAsGroup.children[o]);
                 }
@@ -12112,7 +12082,6 @@
             }
             if (rootNode instanceof GroupNode) {
                 var nodeAsGroup = rootNode;
-                // eslint-disable-next-line guard-for-in
                 for (var o in nodeAsGroup.children) {
                     this._updateHiddenDisabledStateForAllControls(nodeAsGroup.children[o]);
                 }
@@ -13748,7 +13717,6 @@
                                     break;
                                 case 'repeating':
                                     if (formNode.children) {
-                                        // eslint-disable-next-line guard-for-in
                                         for (var node in formNode.children) {
                                             var question = formNode.children[node].question;
                                             if (question.extras &&
@@ -13888,7 +13856,6 @@
                 var dateField = // other member to be manipulated by user
                  void 0; // other member to be manipulated by user
                 var nodeAsGroup = node;
-                // eslint-disable-next-line guard-for-in
                 for (var o in nodeAsGroup.children) {
                     if (nodeAsGroup.children[o].question.extras.questionOptions
                         .obsField === 'value') {
@@ -13911,7 +13878,6 @@
             if (node && obs.length > 0) {
                 var groupNode = node;
                 groupNode.initialValue = obs[0];
-                // eslint-disable-next-line guard-for-in
                 for (var o in groupNode.children) {
                     this.setNodeValue(groupNode.children[o], obs[0].groupMembers);
                 }
@@ -13939,7 +13905,6 @@
                 case 'unknown':
                     if (node instanceof GroupNode) {
                         var groupNode = node;
-                        // eslint-disable-next-line guard-for-in
                         for (var o in groupNode.children) {
                             this.setNodeValue(groupNode.children[o], obs);
                         }
@@ -14071,7 +14036,6 @@
             var valueField; // essential memmber
             var dateField; // other member to be manipulated by user
             var nodeAsGroup = node;
-            // eslint-disable-next-line guard-for-in
             for (var o in nodeAsGroup.children) {
                 if (nodeAsGroup.children[o].question.extras.questionOptions
                     .obsField === 'value') {
@@ -14201,7 +14165,6 @@
                 case 'unknown':
                     if (node instanceof GroupNode) {
                         var groupNode = node;
-                        // eslint-disable-next-line guard-for-in
                         for (var o in groupNode.children) {
                             var groupNodePayoad = this.getObsNodePayload(groupNode.children[o]);
                             if (Array.isArray(groupNodePayoad) && groupNodePayoad.length > 0) {
@@ -14428,7 +14391,6 @@
         ObsValueAdapter.prototype.setComplexObsValue = function (node, payload) {
             var valueField;
             var dateField;
-            // eslint-disable-next-line guard-for-in
             for (var o in node.children) {
                 if (node.children[o].question.extras.questionOptions
                     .obsField === 'value') {
@@ -14741,14 +14703,12 @@
                 for (var payload_1 = __values(payload), payload_1_1 = payload_1.next(); !payload_1_1.done; payload_1_1 = payload_1.next()) {
                     var obs = payload_1_1.value;
                     var groupPayload = [];
-                    /* eslint-disable */
                     for (var key in obs.value) {
                         var concept = key.split(':')[0];
                         var value = key.split(':')[1];
                         groupPayload.push({ concept: concept, value: value });
                     }
                     newPayload.push({ concept: groupConcept, groupMembers: groupPayload });
-                    /* eslint-enable */
                 }
             }
             catch (e_12_1) { e_12 = { error: e_12_1 }; }
@@ -14826,7 +14786,6 @@
         ObsValueAdapter.prototype.processComplexObs = function (node, obsPayload) {
             var valueField;
             var dateField;
-            // eslint-disable-next-line guard-for-in
             for (var o in node.children) {
                 if (node.children[o].question.extras.questionOptions
                     .obsField === 'value') {
@@ -15169,7 +15128,6 @@
             }
             if (rootNode instanceof GroupNode) {
                 var node = rootNode;
-                // eslint-disable-next-line guard-for-in
                 for (var o in node.children) {
                     if (node.children[o] instanceof NodeBase) {
                         this._getEncounterNodes(node.children[o], array);
@@ -15267,7 +15225,6 @@
             }
             if (rootNode instanceof GroupNode) {
                 var node = rootNode;
-                // eslint-disable-next-line guard-for-in
                 for (var o in node.children) {
                     if (node.children[o] instanceof NodeBase) {
                         this._getPersonAttributesNodes(node.children[o], array);
@@ -15295,12 +15252,12 @@
         return NgxRemoteSelectModule;
     }());
     NgxRemoteSelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    NgxRemoteSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [i1.CommonModule, i1$3.NgSelectModule, i20.FormsModule], exports: [RemoteSelectComponent] });
-    NgxRemoteSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, providers: [], imports: [[i1.CommonModule, i1$3.NgSelectModule, i20.FormsModule]] });
+    NgxRemoteSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, declarations: [RemoteSelectComponent], imports: [i1.CommonModule, i1$3.NgSelectModule, i19.FormsModule], exports: [RemoteSelectComponent] });
+    NgxRemoteSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, providers: [], imports: [[i1.CommonModule, i1$3.NgSelectModule, i19.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NgxRemoteSelectModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i1.CommonModule, i1$3.NgSelectModule, i20.FormsModule],
+                        imports: [i1.CommonModule, i1$3.NgSelectModule, i19.FormsModule],
                         exports: [RemoteSelectComponent],
                         declarations: [RemoteSelectComponent],
                         providers: []
@@ -15313,14 +15270,14 @@
         return CheckboxModule;
     }());
     CheckboxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, declarations: [CheckboxControlComponent], imports: [i1.CommonModule, i20.FormsModule], exports: [CheckboxControlComponent] });
-    CheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, imports: [[i1.CommonModule, i20.FormsModule]] });
+    CheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, declarations: [CheckboxControlComponent], imports: [i1.CommonModule, i19.FormsModule], exports: [CheckboxControlComponent] });
+    CheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, imports: [[i1.CommonModule, i19.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [CheckboxControlComponent],
                         exports: [CheckboxControlComponent],
-                        imports: [i1.CommonModule, i20.FormsModule]
+                        imports: [i1.CommonModule, i19.FormsModule]
                     }]
             }] });
 
@@ -15330,14 +15287,14 @@
         return RadioModule;
     }());
     RadioModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    RadioModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, declarations: [RadioButtonControlComponent], imports: [i1.CommonModule, i20.FormsModule], exports: [RadioButtonControlComponent] });
-    RadioModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, imports: [[i1.CommonModule, i20.FormsModule]] });
+    RadioModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, declarations: [RadioButtonControlComponent], imports: [i1.CommonModule, i19.FormsModule], exports: [RadioButtonControlComponent] });
+    RadioModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, imports: [[i1.CommonModule, i19.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RadioModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [RadioButtonControlComponent],
                         exports: [RadioButtonControlComponent],
-                        imports: [i1.CommonModule, i20.FormsModule]
+                        imports: [i1.CommonModule, i19.FormsModule]
                     }]
             }] });
 
@@ -15376,20 +15333,36 @@
                     }]
             }] });
 
-    /* eslint-disable @angular-eslint/component-class-suffix, @angular-eslint/directive-class-suffix */
-    var OptGroup = /** @class */ (function () {
-        function OptGroup() {
+    var OptionDirective = /** @class */ (function () {
+        function OptionDirective() {
+            this.inputClass = 'cds--select-option';
+        }
+        return OptionDirective;
+    }());
+    OptionDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptionDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OptionDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptionDirective, selector: "[ofeOption]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptionDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[ofeOption]'
+                    }]
+            }], propDecorators: { inputClass: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
+
+    var OptGroupDirective = /** @class */ (function () {
+        function OptGroupDirective() {
             this.inputClass = 'cds--select-optgroup';
         }
-        return OptGroup;
+        return OptGroupDirective;
     }());
-    OptGroup.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptGroup, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    OptGroup.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptGroup, selector: "optgroup", host: { properties: { "class": "this.inputClass" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptGroup, decorators: [{
+    OptGroupDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptGroupDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    OptGroupDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: OptGroupDirective, selector: "[ofeOptgroup]", host: { properties: { "class": "this.inputClass" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: OptGroupDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
-                        // eslint-disable-next-line
-                        selector: 'optgroup'
+                        selector: '[ofeOptgroup]'
                     }]
             }], propDecorators: { inputClass: [{
                     type: i0.HostBinding,
@@ -15403,45 +15376,44 @@
         return SelectModule;
     }());
     SelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, declarations: [Select, Option$1, OptGroup], imports: [i1.CommonModule, i20.FormsModule], exports: [Select, Option$1, OptGroup] });
-    SelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, imports: [[i1.CommonModule, i20.FormsModule]] });
+    SelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, declarations: [SelectComponent, OptionDirective, OptGroupDirective], imports: [i1.CommonModule, i19.FormsModule], exports: [SelectComponent, OptionDirective, OptGroupDirective] });
+    SelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, imports: [[i1.CommonModule, i19.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [Select, Option$1, OptGroup],
-                        exports: [Select, Option$1, OptGroup],
-                        imports: [i1.CommonModule, i20.FormsModule]
+                        declarations: [SelectComponent, OptionDirective, OptGroupDirective],
+                        exports: [SelectComponent, OptionDirective, OptGroupDirective],
+                        imports: [i1.CommonModule, i19.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>
      */
-    var Label = /** @class */ (function () {
+    var LabelComponent = /** @class */ (function () {
         /**
-         * Creates an instance of Label.
+         * Creates an instance of LabelComponent.
          */
-        function Label() {
+        function LabelComponent() {
             /**
              * The class of the wrapper
              */
@@ -15450,7 +15422,7 @@
              * 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.
              */
@@ -15468,12 +15440,12 @@
              */
             this.warn = false;
             this.labelClass = true;
-            Label.labelCounter++;
+            LabelComponent.labelCounter++;
         }
         /**
          * Update wrapper class if a textarea is hosted.
          */
-        Label.prototype.ngAfterContentInit = function () {
+        LabelComponent.prototype.ngAfterContentInit = function () {
             if (this.textArea) {
                 this.wrapperClass = 'cds--text-area__wrapper';
             }
@@ -15481,7 +15453,7 @@
         /**
          * Sets the id on the input item associated with the `Label`.
          */
-        Label.prototype.ngAfterViewInit = function () {
+        LabelComponent.prototype.ngAfterViewInit = function () {
             if (this.wrapper) {
                 var inputElement = this.wrapper.nativeElement.querySelector('input,textarea,div');
                 if (inputElement) {
@@ -15489,21 +15461,21 @@
                 }
             }
         };
-        Label.prototype.isTemplate = function (value) {
+        LabelComponent.prototype.isTemplate = function (value) {
             return value instanceof i0.TemplateRef;
         };
-        return Label;
+        return LabelComponent;
     }());
     /**
      * Used to build the id of the input item associated with the `Label`.
      */
-    Label.labelCounter = 0;
-    Label.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Label, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Label.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n    <label\n      [for]=\"labelInputID\"\n      [attr.aria-label]=\"ariaLabel\"\n      class=\"cds--label\"\n      [ngClass]=\"{\n        'cds--skeleton': skeleton\n      }\"\n    >\n      <ng-content></ng-content>\n    </label>\n    <div\n      [class]=\"wrapperClass\"\n      [ngClass]=\"{\n        'cds--text-input__field-wrapper--warning': warn\n      }\"\n      [attr.data-invalid]=\"invalid ? true : null\"\n      #wrapper\n    >\n      <svg\n        *ngIf=\"invalid\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        style=\"will-change: transform;\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"cds--text-input__invalid-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n        ></path>\n        <path\n          d=\"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n          data-icon-path=\"inner-path\"\n          opacity=\"0\"\n        ></path>\n      </svg>\n      <ng-content select=\"input,textarea,div\"></ng-content>\n    </div>\n    <div\n      *ngIf=\"!skeleton && helperText && !invalid && !warn\"\n      class=\"cds--form__helper-text\"\n    >\n      <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n        helperText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(helperText)\"\n        [ngTemplateOutlet]=\"helperText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n        invalidText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(invalidText)\"\n        [ngTemplateOutlet]=\"invalidText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(warnText)\"\n        [ngTemplateOutlet]=\"warnText\"\n      ></ng-template>\n    </div>\n  ", isInline: true, directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Label, decorators: [{
+    LabelComponent.labelCounter = 0;
+    LabelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LabelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LabelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LabelComponent, selector: "ofe-label", inputs: { labelInputID: "labelInputID", labelState: "labelState", skeleton: "skeleton", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextAreaDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0__namespace, template: "\n    <label\n      [for]=\"labelInputID\"\n      [attr.aria-label]=\"ariaLabel\"\n      class=\"cds--label\"\n      [ngClass]=\"{\n        'cds--skeleton': skeleton\n      }\"\n    >\n      <ng-content></ng-content>\n    </label>\n    <div\n      [class]=\"wrapperClass\"\n      [ngClass]=\"{\n        'cds--text-input__field-wrapper--warning': warn\n      }\"\n      [attr.data-invalid]=\"invalid ? true : null\"\n      #wrapper\n    >\n      <svg\n        *ngIf=\"invalid\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        style=\"will-change: transform;\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"cds--text-input__invalid-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n        ></path>\n        <path\n          d=\"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n          data-icon-path=\"inner-path\"\n          opacity=\"0\"\n        ></path>\n      </svg>\n      <ng-content select=\"input,textarea,div\"></ng-content>\n    </div>\n    <div\n      *ngIf=\"!skeleton && helperText && !invalid && !warn\"\n      class=\"cds--form__helper-text\"\n    >\n      <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n        helperText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(helperText)\"\n        [ngTemplateOutlet]=\"helperText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n        invalidText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(invalidText)\"\n        [ngTemplateOutlet]=\"invalidText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(warnText)\"\n        [ngTemplateOutlet]=\"warnText\"\n      ></ng-template>\n    </div>\n  ", isInline: true, directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LabelComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'ibm-label',
+                        selector: 'ofe-label',
                         template: "\n    <label\n      [for]=\"labelInputID\"\n      [attr.aria-label]=\"ariaLabel\"\n      class=\"cds--label\"\n      [ngClass]=\"{\n        'cds--skeleton': skeleton\n      }\"\n    >\n      <ng-content></ng-content>\n    </label>\n    <div\n      [class]=\"wrapperClass\"\n      [ngClass]=\"{\n        'cds--text-input__field-wrapper--warning': warn\n      }\"\n      [attr.data-invalid]=\"invalid ? true : null\"\n      #wrapper\n    >\n      <svg\n        *ngIf=\"invalid\"\n        focusable=\"false\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        style=\"will-change: transform;\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        class=\"cds--text-input__invalid-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2    c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n        ></path>\n        <path\n          d=\"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8    c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z\"\n          data-icon-path=\"inner-path\"\n          opacity=\"0\"\n        ></path>\n      </svg>\n      <ng-content select=\"input,textarea,div\"></ng-content>\n    </div>\n    <div\n      *ngIf=\"!skeleton && helperText && !invalid && !warn\"\n      class=\"cds--form__helper-text\"\n    >\n      <ng-container *ngIf=\"!isTemplate(helperText)\">{{\n        helperText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(helperText)\"\n        [ngTemplateOutlet]=\"helperText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(invalidText)\">{{\n        invalidText\n      }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(invalidText)\"\n        [ngTemplateOutlet]=\"invalidText\"\n      ></ng-template>\n    </div>\n    <div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n      <ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n      <ng-template\n        *ngIf=\"isTemplate(warnText)\"\n        [ngTemplateOutlet]=\"warnText\"\n      ></ng-template>\n    </div>\n  "
                     }]
             }], ctorParameters: function () { return []; }, propDecorators: { labelInputID: [{
@@ -15529,7 +15501,7 @@
                     args: ['wrapper', { static: false }]
                 }], textArea: [{
                     type: i0.ContentChild,
-                    args: [TextArea, { static: false }]
+                    args: [TextAreaDirective, { static: false }]
                 }], labelClass: [{
                     type: i0.HostBinding,
                     args: ['class.cds--form-item']
@@ -15542,14 +15514,14 @@
         return InputModule;
     }());
     InputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    InputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, declarations: [Label, TextInput, TextArea], imports: [i1.CommonModule, i20.FormsModule], exports: [Label, TextInput, TextArea] });
-    InputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, imports: [[i1.CommonModule, i20.FormsModule]] });
+    InputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, declarations: [LabelComponent, TextInputDirective, TextAreaDirective], imports: [i1.CommonModule, i19.FormsModule], exports: [LabelComponent, TextInputDirective, TextAreaDirective] });
+    InputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, imports: [[i1.CommonModule, i19.FormsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: InputModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [Label, TextInput, TextArea],
-                        exports: [Label, TextInput, TextArea],
-                        imports: [i1.CommonModule, i20.FormsModule]
+                        declarations: [LabelComponent, TextInputDirective, TextAreaDirective],
+                        exports: [LabelComponent, TextInputDirective, TextAreaDirective],
+                        imports: [i1.CommonModule, i19.FormsModule]
                     }]
             }] });
 
@@ -15559,13 +15531,13 @@
         return CustomControlWrapperModule;
     }());
     CustomControlWrapperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CustomControlWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [i1.CommonModule, i20.FormsModule, i2.LazyElementsModule], exports: [CustomControlWrapperComponent] });
-    CustomControlWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, providers: [], imports: [[i1.CommonModule, i20.FormsModule, i2.LazyElementsModule]] });
+    CustomControlWrapperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, declarations: [CustomControlWrapperComponent], imports: [i1.CommonModule, i19.FormsModule, i2.LazyElementsModule], exports: [CustomControlWrapperComponent] });
+    CustomControlWrapperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, providers: [], imports: [[i1.CommonModule, i19.FormsModule, i2.LazyElementsModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CustomControlWrapperModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
-                        imports: [i1.CommonModule, i20.FormsModule, i2.LazyElementsModule],
+                        imports: [i1.CommonModule, i19.FormsModule, i2.LazyElementsModule],
                         exports: [CustomControlWrapperComponent],
                         declarations: [CustomControlWrapperComponent],
                         providers: []
@@ -15604,7 +15576,7 @@
             ErrorRendererComponent,
             TimeAgoPipe,
             CollapseDirective], imports: [i1.CommonModule,
-            i20.ReactiveFormsModule,
+            i19.ReactiveFormsModule,
             SelectModule,
             i1$3.NgSelectModule,
             NumberInputModule,
@@ -15624,7 +15596,7 @@
             DateTimePickerModule,
             NgxDateTimePickerModule] });
     FormEntryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FormEntryModule, providers: [
-            i20.FormBuilder,
+            i19.FormBuilder,
             FormControlService,
             FormErrorsService,
             ValidationFactory,
@@ -15646,7 +15618,7 @@
             DebugModeService
         ], imports: [[
                 i1.CommonModule,
-                i20.ReactiveFormsModule,
+                i19.ReactiveFormsModule,
                 SelectModule,
                 i1$3.NgSelectModule,
                 NumberInputModule,
@@ -15670,7 +15642,7 @@
                         schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
                         imports: [
                             i1.CommonModule,
-                            i20.ReactiveFormsModule,
+                            i19.ReactiveFormsModule,
                             SelectModule,
                             i1$3.NgSelectModule,
                             NumberInputModule,
@@ -15697,7 +15669,7 @@
                             CollapseDirective
                         ],
                         providers: [
-                            i20.FormBuilder,
+                            i19.FormBuilder,
                             FormControlService,
                             FormErrorsService,
                             ValidationFactory,