@colijnit/corecomponents_v12 12.0.101 → 12.0.103

package/fesm2015/colijnit-corecomponents_v12.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, Input, HostBinding, NgModule, Optional, SkipSelf, InjectionToken, Directive, ElementRef, NgZone, Inject, EventEmitter, ChangeDetectionStrategy, Output, HostListener, Pipe, ChangeDetectorRef, ViewChild, ContentChildren, ComponentFactoryResolver, ViewContainerRef, forwardRef, Renderer2, ViewChildren, NO_ERRORS_SCHEMA, Injector, ApplicationRef, ContentChild } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, Input, HostBinding, NgModule, Optional, SkipSelf, InjectionToken, Directive, ElementRef, NgZone, Inject, EventEmitter, ChangeDetectionStrategy, Output, HostListener, Pipe, ChangeDetectorRef, ViewChild, ContentChildren, ComponentFactoryResolver, ApplicationRef, Injector, ViewContainerRef, forwardRef, Renderer2, ViewChildren, NO_ERRORS_SCHEMA, ContentChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { DomSanitizer, HammerGestureConfig, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
@@ -3980,9 +3980,11 @@ ValidationErrorComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-validation-error",
                 template: `
-    <div class="validation-error-content">
-      <co-icon [iconData]="icons.getIcon(Icons.InformationRoundOpen)"></co-icon>
-        <div class="validation-error-message" [textContent]="error"></div>
+    <div class="validation-error-wrapper" [overlay]="parentForOverlay">
+      <div class="validation-error-content">
+        <co-icon [iconData]="icons.getIcon(Icons.InformationRoundOpen)"></co-icon>
+          <div class="validation-error-message" [textContent]="error"></div>
+      </div>
     </div>
   `,
                 animations: [],
@@ -3994,19 +3996,64 @@ ValidationErrorComponent.ctorParameters = () => [
 ];
 ValidationErrorComponent.propDecorators = {
     error: [{ type: Input }],
+    parentForOverlay: [{ type: Input }],
     top: [{ type: HostBinding, args: ['style.top.px',] }, { type: Input }],
     left: [{ type: HostBinding, args: ['style.left.px',] }, { type: Input }],
     showClass: [{ type: HostBinding, args: ['class.co-validation-error',] }]
 };
 
+class OverlayService {
+    constructor(_componentFactoryResolver, _appRef, _injector) {
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._appRef = _appRef;
+        this._injector = _injector;
+    }
+    createComponent(compClass, inputs) {
+        if (this._componentRef) {
+            this.removeComponent();
+        }
+        this._componentRef = this._componentFactoryResolver
+            .resolveComponentFactory(compClass)
+            .create(this._injector);
+        if (inputs) {
+            for (let property in inputs) {
+                if (inputs.hasOwnProperty(property)) {
+                    this._componentRef.instance[property] = inputs[property];
+                }
+            }
+        }
+        this._appRef.attachView(this._componentRef.hostView);
+        const domElem = this._componentRef.hostView
+            .rootNodes[0];
+        document.body.appendChild(domElem);
+        this._componentRef.onDestroy(() => {
+            this._appRef.detachView(this._componentRef.hostView);
+        });
+    }
+    removeComponent() {
+        if (this._componentRef) {
+            this._componentRef.destroy();
+        }
+    }
+}
+OverlayService.decorators = [
+    { type: Injectable }
+];
+OverlayService.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: ApplicationRef },
+    { type: Injector }
+];
+
 /**
  * Abstract base class for all concrete form input components that contain a native <input> element. Provides common data and functionality, such as
  * adding self as a control to the parent form.
  */
 class BaseInputComponent {
-    constructor(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+    constructor(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) {
         this.changeDetector = changeDetector;
         this.componentFactoryResolver = componentFactoryResolver;
+        this.overlayService = overlayService;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
@@ -4040,6 +4087,7 @@ class BaseInputComponent {
         this.canSaveOrCancel = false;
         this.committing = false;
         this.commitFinished = false;
+        this.validationError = "";
         this._markedAsUserTouched = false;
         this._destroyed = false;
         this._hasOnPushCdStrategy = false;
@@ -4227,17 +4275,19 @@ class BaseInputComponent {
             this.markAsUserTouched();
         }
     }
-    handleDocumentScroll() {
-        this._positionValidationError();
-    }
-    handleWindowResize() {
-        this._positionValidationError();
-    }
+    // @HostListener("document:scroll")
+    // public handleDocumentScroll(): void {
+    //   this._positionValidationError();
+    // }
+    // @HostListener("window:resize")
+    // public handleWindowResize(): void {
+    //   this._positionValidationError();
+    // }
     handleKeyDown(event) {
         if (this.showSaveCancel && this.canSaveOrCancel) {
             this._handleKeyDown(event);
         }
-        this._positionValidationError();
+        // this._positionValidationError();
     }
     get canChange() {
         return !this.readonly && !this.disabled;
@@ -4323,18 +4373,20 @@ class BaseInputComponent {
         this.keepFocus = false;
     }
     showValidationError(error) {
-        if (this.validationErrorContainer) {
-            if (this._errorValidationComponent) {
-                this._clearErrorComponent();
-            }
-            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
-            this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
-            this._errorValidationComponent.instance.error = error;
-            if (this._hasOnPushCdStrategy) {
-                this.changeDetector.markForCheck();
-            }
-            this._positionValidationError();
-        }
+        this.validationError = error;
+        this.overlayService.createComponent(ValidationErrorComponent, { parentForOverlay: this.elementRef, error: error });
+        // if (this.validationErrorContainer) {
+        //   if (this._errorValidationComponent) {
+        //     this._clearErrorComponent();
+        //   }
+        //   const componentFactory: ComponentFactory<ValidationErrorComponent> = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
+        //   this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
+        //   this._errorValidationComponent.instance.error = error;
+        //   if (this._hasOnPushCdStrategy) {
+        //     this.changeDetector.markForCheck();
+        //   }
+        //   this._positionValidationError();
+        // }
     }
     /**
      * Emits a modelChange event with given value, indicating that the model of this form input
@@ -4507,13 +4559,14 @@ class BaseInputComponent {
         });
     }
     _clearErrorComponent() {
-        if (this.validationErrorContainer) {
-            this.validationErrorContainer.clear();
-            if (this._errorValidationComponent) {
-                this._errorValidationComponent.destroy();
-                this._errorValidationComponent = undefined;
-            }
-        }
+        this.overlayService.removeComponent();
+        // if (this.validationErrorContainer) {
+        //   this.validationErrorContainer.clear();
+        //   if (this._errorValidationComponent) {
+        //     this._errorValidationComponent.destroy();
+        //     this._errorValidationComponent = undefined;
+        //   }
+        // }
     }
     // whether this.ngModel.control has safe access
     _controlExists() {
@@ -4673,6 +4726,7 @@ BaseInputComponent.decorators = [
 BaseInputComponent.ctorParameters = () => [
     { type: ChangeDetectorRef },
     { type: ComponentFactoryResolver },
+    { type: OverlayService },
     { type: FormInputUserModelChangeListenerService, decorators: [{ type: Optional }] },
     { type: NgZoneWrapperService, decorators: [{ type: Optional }] },
     { type: ElementRef, decorators: [{ type: Optional }] }
@@ -4732,8 +4786,6 @@ BaseInputComponent.propDecorators = {
     validationDisabled: [{ type: HostBinding, args: ["class.no-validation",] }],
     onClick: [{ type: HostListener, args: ["click", ["$event"],] }],
     onFocusIn: [{ type: HostListener, args: ["focusin",] }],
-    handleDocumentScroll: [{ type: HostListener, args: ["document:scroll",] }],
-    handleWindowResize: [{ type: HostListener, args: ["window:resize",] }],
     handleKeyDown: [{ type: HostListener, args: ["keydown", ["$event"],] }]
 };
 __decorate([
@@ -5059,10 +5111,11 @@ FormComponent.propDecorators = {
 };
 
 class DropDownListComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
@@ -5081,31 +5134,31 @@ class DropDownListComponent extends BaseInputComponent {
 }
 DropDownListComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-drop-down-list",
+                selector: 'co-drop-down-list',
                 template: `
-    <ejs-dropdownlist
-      [dataSource]="collection"
-      [allowFiltering]="allowFiltering"
-      [value]="model"
-      [fields]="fields"
-      [filterBarPlaceholder]="filterBarPlaceholder"
-      [filterType]="filterType"
-      [placeholder]="placeholder"
-      [readonly]="readonly"
-      [itemTemplate]="itemTemplate"
-      [headerTemplate]="headerTemplate"
-      [valueTemplate]="valueTemplate"
-      [disabled]="disabled"
-      [ngModel]="model"
-      (ngModelChange)="modelChange.emit($event)"
-      showClearButton="true"
-      floatLabelType="Auto"
-    >
-    </ejs-dropdownlist>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
+        <ejs-dropdownlist
+                [dataSource]="collection"
+                [allowFiltering]="allowFiltering"
+                [value]="model"
+                [fields]="fields"
+                [filterBarPlaceholder]="filterBarPlaceholder"
+                [filterType]="filterType"
+                [placeholder]="placeholder"
+                [readonly]="readonly"
+                [itemTemplate]="itemTemplate"
+                [headerTemplate]="headerTemplate"
+                [valueTemplate]="valueTemplate"
+                [disabled]="disabled"
+                [ngModel]="model"
+                (ngModelChange)="modelChange.emit($event)"
+                showClearButton="true"
+                floatLabelType="Auto"
+        >
+        </ejs-dropdownlist>
+        <div class="required-indicator"></div>
+    `,
                 providers: [
+                    OverlayService,
                     CheckBoxSelectionService,
                     {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -5121,6 +5174,7 @@ DropDownListComponent.decorators = [
 DropDownListComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
@@ -5136,7 +5190,7 @@ DropDownListComponent.propDecorators = {
     itemTemplate: [{ type: Input }],
     headerTemplate: [{ type: Input }],
     valueTemplate: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-drop-down-list",] }]
+    showClass: [{ type: HostBinding, args: ['class.co-drop-down-list',] }]
 };
 
 class DropDownModule {
@@ -5817,11 +5871,12 @@ IconCollapseHandleModule.decorators = [
 ];
 
 class InputCheckboxComponent extends BaseInputComponent {
-    constructor(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, iconCacheService, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.iconCacheService = iconCacheService;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
@@ -5846,21 +5901,23 @@ class InputCheckboxComponent extends BaseInputComponent {
 }
 InputCheckboxComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-checkbox",
+                selector: 'co-input-checkbox',
                 template: `
-    <div class="checkbox" (click)="handleModelChange($event)" [class.checked]="model">
-      <div class="checkmark" [class.show]="model"></div>
-    </div>
-    <div class="label" [class.clickable]="clickableLabel" *ngIf="label" [textContent]="label"
-         (click)="clickableLabel ? handleModelChange($event) : true"></div>
-  `,
-                providers: [{
+        <div class="checkbox" (click)="handleModelChange($event)" [class.checked]="model">
+            <div class="checkmark" [class.show]="model"></div>
+        </div>
+        <div class="label" [class.clickable]="clickableLabel" *ngIf="label" [textContent]="label"
+             (click)="clickableLabel ? handleModelChange($event) : true"></div>
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputCheckboxComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputCheckboxComponent
-                    }],
+                    }
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -5869,6 +5926,7 @@ InputCheckboxComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: IconCacheService },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
@@ -5878,7 +5936,7 @@ InputCheckboxComponent.propDecorators = {
     cssClass: [{ type: Input }],
     clickableLabel: [{ type: Input }],
     modelChange: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-checkbox",] }]
+    showClass: [{ type: HostBinding, args: ['class.co-input-checkbox',] }]
 };
 
 enableRipple(true);
@@ -5927,10 +5985,11 @@ AppendPipeModule.decorators = [
 ];
 
 class InputCheckboxMultiSelectComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
@@ -5943,25 +6002,27 @@ class InputCheckboxMultiSelectComponent extends BaseInputComponent {
 }
 InputCheckboxMultiSelectComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-checkbox-multi-select",
+                selector: 'co-input-checkbox-multi-select',
                 template: `
-    <ejs-multiselect
-       [placeholder]="placeholder"
-       [dataSource]="source"
-       [fields]="fields"
-       mode="CheckBox"
-       showDropDownIcon="true"
-       [showSelectAll]="false"
-       [filterBarPlaceholder]="filterPlaceholder"
-    ></ejs-multiselect>
-  `,
-                providers: [{
+        <ejs-multiselect
+                [placeholder]="placeholder"
+                [dataSource]="source"
+                [fields]="fields"
+                mode="CheckBox"
+                showDropDownIcon="true"
+                [showSelectAll]="false"
+                [filterBarPlaceholder]="filterPlaceholder"
+        ></ejs-multiselect>
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputCheckboxMultiSelectComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputCheckboxMultiSelectComponent
-                    }],
+                    }
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -5969,6 +6030,7 @@ InputCheckboxMultiSelectComponent.decorators = [
 InputCheckboxMultiSelectComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
@@ -5980,7 +6042,7 @@ InputCheckboxMultiSelectComponent.propDecorators = {
     selected: [{ type: Input }],
     placeholder: [{ type: Input }],
     filterPlaceholder: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-checkbox-multi-select",] }]
+    showClass: [{ type: HostBinding, args: ['class.co-input-checkbox-multi-select',] }]
 };
 
 class InputCheckboxMultiSelectModule {
@@ -6001,10 +6063,11 @@ InputCheckboxMultiSelectModule.decorators = [
 ];
 
 class InputComboBoxComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
@@ -6027,48 +6090,50 @@ class InputComboBoxComponent extends BaseInputComponent {
 }
 InputComboBoxComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-combo-box",
+                selector: 'co-input-combo-box',
                 template: `
-    <ejs-combobox #combo [dataSource]="collection"
-                  [fields]="fields"
-                  [disabled]="readonly"
-                  [placeholder]="placeholder"
-                  [autofill]="autofill"
-                  [ngModel]="model"
-                  (ngModelChange)="modelChange.emit($event)"
-                  (valueChange)="valueChange.emit($event)"
-                  (focus)="onFocus()"
-                  [popupWidth]="popupWidth"
-                  [popupHeight]="popupHeight"
-                  [filterType]="filterType"
-                  [allowFiltering]="allowFiltering"
-                  showClearButton="true"
-                  floatLabelType="Auto"
-    >
-    </ejs-combobox>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
-                providers: [{
+        <ejs-combobox #combo [dataSource]="collection"
+                      [fields]="fields"
+                      [disabled]="readonly"
+                      [placeholder]="placeholder"
+                      [autofill]="autofill"
+                      [ngModel]="model"
+                      (ngModelChange)="modelChange.emit($event)"
+                      (valueChange)="valueChange.emit($event)"
+                      (focus)="onFocus()"
+                      [popupWidth]="popupWidth"
+                      [popupHeight]="popupHeight"
+                      [filterType]="filterType"
+                      [allowFiltering]="allowFiltering"
+                      showClearButton="true"
+                      floatLabelType="Auto"
+        >
+        </ejs-combobox>
+        <div class="required-indicator"></div>
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputComboBoxComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputComboBoxComponent
-                    }],
+                    }
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 InputComboBoxComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
     { type: ElementRef }
 ];
 InputComboBoxComponent.propDecorators = {
-    combo: [{ type: ViewChild, args: ["combo",] }],
+    combo: [{ type: ViewChild, args: ['combo',] }],
     autofill: [{ type: Input }],
     allowFiltering: [{ type: Input }],
     filterType: [{ type: Input }],
@@ -6081,7 +6146,7 @@ InputComboBoxComponent.propDecorators = {
     popupWidth: [{ type: Input }],
     valueChange: [{ type: Output }],
     isSmall: [{ type: HostBinding, args: ['class.is-small',] }, { type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-combo-box",] }]
+    showClass: [{ type: HostBinding, args: ['class.co-input-combo-box',] }]
 };
 
 class InputComboBoxModule {
@@ -6102,20 +6167,21 @@ InputComboBoxModule.decorators = [
 ];
 
 class InputDatePickerComponent extends BaseInputComponent {
-    constructor(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, iconCacheService, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.iconCacheService = iconCacheService;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
         this.icons = CoreComponentsIcon;
-        this.dateFormat = "dd-MM-yyyy";
+        this.dateFormat = 'dd-MM-yyyy';
         this.calendarIconName = this.icons.CalendarEmpty;
-        this.iconHeight = "24px";
-        this.placeholder = "";
+        this.iconHeight = '24px';
+        this.placeholder = '';
         this.blur = new EventEmitter();
         this.isMinimal = false;
         super._markAsOnPush();
@@ -6160,32 +6226,33 @@ class InputDatePickerComponent extends BaseInputComponent {
 }
 InputDatePickerComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-date",
+                selector: 'co-input-date',
                 template: `
-    <ejs-datepicker #ejsDatePicker
-                    floatLabelType="Auto"
-                    [format]="dateFormat"
-                    [placeholder]="placeholder"
-                    [ngModel]="model"
-                    [readonly]="readonly"
-                    (ngModelChange)="modelChange.emit($event)"
-    ></ejs-datepicker>
-    <co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
-                       [committing]="committing"
-                       [commitFinished]="commitFinished"
-                       (commitClick)="commitClick($event)"
-                       (cancelClick)="cancelClick($event)"
-    >
-    </co-commit-buttons>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
-                providers: [{
+        <ejs-datepicker #ejsDatePicker
+                        floatLabelType="Auto"
+                        [format]="dateFormat"
+                        [placeholder]="placeholder"
+                        [ngModel]="model"
+                        [readonly]="readonly"
+                        (ngModelChange)="modelChange.emit($event)"
+        ></ejs-datepicker>
+        <co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
+                           [committing]="committing"
+                           [commitFinished]="commitFinished"
+                           (commitClick)="commitClick($event)"
+                           (cancelClick)="cancelClick($event)"
+        >
+        </co-commit-buttons>
+        <div class="required-indicator"></div>
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputDatePickerComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputDatePickerComponent
-                    }],
+                    }
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -6193,20 +6260,21 @@ InputDatePickerComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: IconCacheService },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
     { type: ElementRef }
 ];
 InputDatePickerComponent.propDecorators = {
-    ejsDatePicker: [{ type: ViewChild, args: ["ejsDatePicker",] }],
+    ejsDatePicker: [{ type: ViewChild, args: ['ejsDatePicker',] }],
     dateFormat: [{ type: Input }],
     calendarIconName: [{ type: Input }],
     iconHeight: [{ type: Input }],
     placeholder: [{ type: Input }],
     width: [{ type: Input }],
     blur: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-date",] }],
+    showClass: [{ type: HostBinding, args: ['class.co-input-date',] }],
     isMinimal: [{ type: HostBinding, args: ['class.is-minimal',] }, { type: Input }]
 };
 
@@ -6316,6 +6384,150 @@ CommitButtonsModule.decorators = [
             },] }
 ];
 
+class OverlayDirective {
+    constructor(elementRef) {
+        this.keepInView = false;
+        this.handleScroll = (event) => {
+            this._checkAndPlaceElement();
+        };
+        this._elementRef = elementRef;
+    }
+    set parent(value) {
+        if (value) {
+            this._parent = value instanceof ElementRef ? value : value.elementRef;
+        }
+        else {
+            if (this._parent) {
+                this._resizeObserver.disconnect();
+            }
+        }
+    }
+    ngOnDestroy() {
+        document.removeEventListener("scroll", this.handleScroll, true);
+        this._intersectionObserver.disconnect();
+        this._resizeObserver.disconnect();
+        this._elementRef = undefined;
+        this._parent = undefined;
+    }
+    ngOnInit() {
+        if (!this._elementRef || !this._elementRef.nativeElement) {
+            return;
+        }
+        document.addEventListener("scroll", this.handleScroll, true);
+        this._checkAndPlaceElement();
+        this._resizeObserver = new ResizeObserver((entries) => {
+            this._checkAndPlaceElement();
+        });
+        this._intersectionObserver = new IntersectionObserver((entries) => {
+            if (entries && entries.length > 0) {
+                if (entries[0].isIntersecting === false) {
+                    this._elementRef.nativeElement.style.opacity = 0; // hide cause parent is not visible
+                }
+                else {
+                    this._elementRef.nativeElement.style.opacity = 1;
+                }
+            }
+        }, {
+            root: null
+        });
+        this._intersectionObserver.observe(this._parent.nativeElement); // observe parent for visibility
+        this._resizeObserver.observe(document.body);
+    }
+    _checkAndPlaceElement() {
+        if (this._elementRef && this._elementRef.nativeElement && this._parent && this._parent.nativeElement) {
+            const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
+            const parentRect = this._parent.nativeElement.getBoundingClientRect();
+            this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
+        }
+    }
+    _placeElement(bottom, right, parentRect, elementRect) {
+        if (bottom < parentRect.bottom + elementRect.height) { // make sure it fits at the bottom
+            this._elementRef.nativeElement.style.top = (parentRect.top - elementRect.height) + "px";
+            this._elementRef.nativeElement.classList.add('top');
+        }
+        else {
+            this._elementRef.nativeElement.classList.remove('top');
+            this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
+        }
+        this._elementRef.nativeElement.style.left = parentRect.left + "px";
+        if (this.keepInView) {
+            if (elementRect.right > window.innerWidth) {
+                //see if we can move it to the left
+                if ((window.innerWidth - elementRect.width) > 0) {
+                    this._elementRef.nativeElement.style.left = (window.innerWidth - elementRect.width) + "px";
+                }
+                else { //resize so it fits into view
+                    this._elementRef.nativeElement.style.width = window.innerWidth + "px";
+                    this._elementRef.nativeElement.style.left = 0;
+                }
+            }
+        }
+    }
+}
+OverlayDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[overlay]"
+            },] }
+];
+OverlayDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+OverlayDirective.propDecorators = {
+    parent: [{ type: Input, args: ["overlay",] }],
+    keepInView: [{ type: Input }]
+};
+
+class OverlayParentDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnDestroy() {
+        this.elementRef = undefined;
+    }
+}
+OverlayParentDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[overlayParent]',
+                exportAs: 'overlayParent'
+            },] }
+];
+OverlayParentDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
+class OverlayModule {
+}
+OverlayModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    OverlayDirective,
+                    OverlayParentDirective
+                ],
+                exports: [
+                    OverlayDirective,
+                    OverlayParentDirective
+                ]
+            },] }
+];
+
+class ValidationErrorModule {
+}
+ValidationErrorModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule,
+                    OverlayModule
+                ],
+                declarations: [
+                    ValidationErrorComponent
+                ],
+                exports: [
+                    ValidationErrorComponent
+                ]
+            },] }
+];
+
 class InputDatePickerModule {
 }
 InputDatePickerModule.decorators = [
@@ -6327,7 +6539,9 @@ InputDatePickerModule.decorators = [
                     IconModule,
                     AppendPipeModule,
                     DatePickerModule,
-                    CommitButtonsModule
+                    CommitButtonsModule,
+                    ValidationErrorModule,
+                    OverlayModule
                 ],
                 schemas: [
                     NO_ERRORS_SCHEMA
@@ -6340,8 +6554,8 @@ InputDatePickerModule.decorators = [
 class InputDateRangePickerComponent extends BaseInputComponent {
     constructor() {
         super(...arguments);
-        this.dateFormat = "dd-MM-yyyy";
-        this.placeholder = "";
+        this.dateFormat = 'dd-MM-yyyy';
+        this.placeholder = '';
         this.startDateChange = new EventEmitter();
         this.endDateChange = new EventEmitter();
         this.dateRangeChange = new EventEmitter();
@@ -6364,31 +6578,33 @@ class InputDateRangePickerComponent extends BaseInputComponent {
 }
 InputDateRangePickerComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-date-range",
+                selector: 'co-input-date-range',
                 template: `
-    <ejs-daterangepicker #ejsDateRangePicker
-      [format]="dateFormat"
-      floatLabelType="Auto"
-      [placeholder]="placeholder"
-      [ngModel]="model"
-      [(startDate)]="startDate"
-      [(endDate)]="endDate"
-      [readonly]="readonly"
-      (ngModelChange)="rangeChange()"
-      (close)="close.next($event)"
-      (select)="select.next($event)"
-      (cleared)="cleared.next($event)"
-    ></ejs-daterangepicker>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
-                providers: [{
+        <ejs-daterangepicker #ejsDateRangePicker
+                             [format]="dateFormat"
+                             floatLabelType="Auto"
+                             [placeholder]="placeholder"
+                             [ngModel]="model"
+                             [(startDate)]="startDate"
+                             [(endDate)]="endDate"
+                             [readonly]="readonly"
+                             (ngModelChange)="rangeChange()"
+                             (close)="close.next($event)"
+                             (select)="select.next($event)"
+                             (cleared)="cleared.next($event)"
+        ></ejs-daterangepicker>
+        <div class="required-indicator"></div>
+    `,
+                providers: [
+                    OverlayService,
+                    {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputDateRangePickerComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputDateRangePickerComponent
-                    }],
+                    }
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -6403,7 +6619,7 @@ InputDateRangePickerComponent.propDecorators = {
     close: [{ type: Output }],
     select: [{ type: Output }],
     cleared: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-date-range-picker",] }]
+    showClass: [{ type: HostBinding, args: ['class.co-input-date-range-picker',] }]
 };
 
 class InputDateRangePickerModule {
@@ -6413,7 +6629,9 @@ InputDateRangePickerModule.decorators = [
                 imports: [
                     BaseModule,
                     DateRangePickerModule,
-                    FormsModule
+                    FormsModule,
+                    ValidationErrorModule,
+                    OverlayModule
                 ],
                 declarations: [
                     InputDateRangePickerComponent
@@ -6426,10 +6644,11 @@ InputDateRangePickerModule.decorators = [
 
 ListBoxComponent.Inject(CheckBoxSelection);
 class InputListboxComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
@@ -6464,32 +6683,34 @@ InputListboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-input-listbox',
                 template: `
-    <div class="co-input-listbox-header" [textContent]="placeholder"></div>
-    <div class="co-input-listbox-content" [ngClass]="customCssClass ? customCssClass : undefined">
-      <ejs-listbox
-        [ngModel]="value"
-        [dataSource]="collection"
-        [fields]="fields"
-        [disabled]="readonly"
-        [selectionSettings]="selectionSettings"
-        (ngModelChange)="modelChange.emit($event)"
-      ></ejs-listbox>
-    </div>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
-                providers: [{
+        <div class="co-input-listbox-header" [textContent]="placeholder"></div>
+        <div class="co-input-listbox-content" [ngClass]="customCssClass ? customCssClass : undefined">
+            <ejs-listbox
+                    [ngModel]="value"
+                    [dataSource]="collection"
+                    [fields]="fields"
+                    [disabled]="readonly"
+                    [selectionSettings]="selectionSettings"
+                    (ngModelChange)="modelChange.emit($event)"
+            ></ejs-listbox>
+        </div>
+        <div class="required-indicator"></div>
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputListboxComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputListboxComponent
-                    }],
+                    }
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 InputListboxComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
@@ -6826,10 +7047,11 @@ var InputNumberPickerButtonShowMode;
 
 // A component that lets users pick a number by increasing and decreasing it with buttons, or by typing.
 class InputNumberPickerComponent extends BaseInputComponent {
-    constructor(formComponent, iconCacheService, _ngZone, componentFactoryResolver, changeDetector, formUserChangeListener) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener);
+    constructor(formComponent, iconCacheService, overlayService, _ngZone, componentFactoryResolver, changeDetector, formUserChangeListener) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener);
         this.formComponent = formComponent;
         this.iconCacheService = iconCacheService;
+        this.overlayService = overlayService;
         this._ngZone = _ngZone;
         this.componentFactoryResolver = componentFactoryResolver;
         this.minusIcon = CoreComponentsIcon.MinusSimple;
@@ -7033,34 +7255,36 @@ InputNumberPickerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-input-number-picker',
                 template: `
-    <div class="button-wrapper">
-      <co-button *ngIf="showButtons" class="minus-operator circle" [class.select]="minSelected"
-                 [disabled]="readonly"
-                 [iconData]="iconCacheService.getIcon(minusIcon)"
-                 (mousedown)="onMinusMouseDown($event)"
-                 (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
-    </div>
-    <input type="text"
-           [ngModel]="model"
-           [readonly]="readonly"
-           [disabled]="disabled"
-           [required]="required"
-           (ngModelChange)="handleChangeModel($event)"
-           (keydown)="handleKeyDown($event)"/>
-    <div class="button-wrapper">
-      <co-button *ngIf="showButtons" class="plus-operator circle"  [class.select]="plusSelected"
-                 [disabled]="readonly"
-                 [iconData]="iconCacheService.getIcon(plusIcon)"
-                 (mousedown)="onPlusMouseDown($event)"
-                 (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
-    </div>
-  `,
-                providers: [{
+        <div class="button-wrapper">
+            <co-button *ngIf="showButtons" class="minus-operator circle" [class.select]="minSelected"
+                       [disabled]="readonly"
+                       [iconData]="iconCacheService.getIcon(minusIcon)"
+                       (mousedown)="onMinusMouseDown($event)"
+                       (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
+        </div>
+        <input type="text"
+               [ngModel]="model"
+               [readonly]="readonly"
+               [disabled]="disabled"
+               [required]="required"
+               (ngModelChange)="handleChangeModel($event)"
+               (keydown)="handleKeyDown($event)"/>
+        <div class="button-wrapper">
+            <co-button *ngIf="showButtons" class="plus-operator circle" [class.select]="plusSelected"
+                       [disabled]="readonly"
+                       [iconData]="iconCacheService.getIcon(plusIcon)"
+                       (mousedown)="onPlusMouseDown($event)"
+                       (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
+        </div>
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputNumberPickerComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputNumberPickerComponent
-                    }],
+                    }
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -7068,6 +7292,7 @@ InputNumberPickerComponent.decorators = [
 InputNumberPickerComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: IconCacheService, decorators: [{ type: Inject, args: [IconCacheService,] }] },
+    { type: OverlayService },
     { type: NgZone },
     { type: ComponentFactoryResolver },
     { type: ChangeDetectorRef },
@@ -7085,8 +7310,8 @@ InputNumberPickerComponent.propDecorators = {
     noValidation: [{ type: Input }],
     decimals: [{ type: Input }],
     modelChange: [{ type: Output }],
-    showButtonsOnFocusOnly: [{ type: HostBinding, args: ["class.show-buttons-on-focus-only",] }],
-    hasLabel: [{ type: HostBinding, args: ["class.has-label",] }],
+    showButtonsOnFocusOnly: [{ type: HostBinding, args: ['class.show-buttons-on-focus-only',] }],
+    hasLabel: [{ type: HostBinding, args: ['class.has-label',] }],
     showClass: [{ type: HostBinding, args: ['class.co-input-number-picker',] }]
 };
 __decorate([
@@ -7094,16 +7319,17 @@ __decorate([
 ], InputNumberPickerComponent.prototype, "noValidation", void 0);
 
 class InputTextComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
-        this.placeholder = "";
-        this.type = "text";
+        this.placeholder = '';
+        this.type = 'text';
         this.digitsOnly = false;
         this.excludePlusMinus = true;
         this.showClearButton = undefined;
@@ -7158,51 +7384,55 @@ class InputTextComponent extends BaseInputComponent {
 }
 InputTextComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-text",
+                selector: 'co-input-text',
                 template: `
-    <div class="input-text-wrapper">
-      <co-icon *ngIf="leftIcon" class="input-text-left-icon" [icon]="leftIcon" [iconData]="leftIconData" (click)="handleLeftIconClick($event)"></co-icon>
-      <div *ngIf="leftIcon" class="spacer"></div>
-      <div class="input-wrapper">
-        <label *ngIf="showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)"
-               [textContent]="placeholder"></label>
-        <input #input
-               [type]="digitsOnly ? 'number' : type"
-               [ngModel]="model"
-               [min]="type === 'number' && this.min ? this.min : undefined"
-               [max]="type === 'number' && this.max ? this.max : undefined"
-               [readonly]="readonly"
-               [required]="required"
-               (ngModelChange)="modelChange.emit($event)"
-               (keydown)="digitsOnly ? excludeNonDigitChars($event) : true"
+        <div class="input-text-wrapper" overlayParent #parentForOverlay="overlayParent">
+            <co-icon *ngIf="leftIcon" class="input-text-left-icon" [icon]="leftIcon" [iconData]="leftIconData"
+                     (click)="handleLeftIconClick($event)"></co-icon>
+            <div *ngIf="leftIcon" class="spacer"></div>
+            <div class="input-wrapper">
+                <label *ngIf="showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)"
+                       [textContent]="placeholder"></label>
+                <input #input
+                       [type]="digitsOnly ? 'number' : type"
+                       [ngModel]="model"
+                       [min]="type === 'number' && this.min ? this.min : undefined"
+                       [max]="type === 'number' && this.max ? this.max : undefined"
+                       [readonly]="readonly"
+                       [required]="required"
+                       (ngModelChange)="modelChange.emit($event)"
+                       (keydown)="digitsOnly ? excludeNonDigitChars($event) : true"
+                >
+            </div>
+            <div *ngIf="rightIcon" class="spacer"></div>
+            <co-icon *ngIf="rightIcon" class="input-text-right-icon" [icon]="rightIcon" [iconData]="rightIconData"
+                     (click)="handleRightIconClick($event)"></co-icon>
+        </div>
+        <co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
+                           [committing]="committing"
+                           [commitFinished]="commitFinished"
+                           (commitClick)="commitClick($event)"
+                           (cancelClick)="cancelClick($event)"
         >
-      </div>
-      <div *ngIf="rightIcon" class="spacer"></div>
-      <co-icon *ngIf="rightIcon" class="input-text-right-icon" [icon]="rightIcon" [iconData]="rightIconData" (click)="handleRightIconClick($event)"></co-icon>
-    </div>
-    <co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
-                       [committing]="committing"
-                       [commitFinished]="commitFinished"
-                       (commitClick)="commitClick($event)"
-                       (cancelClick)="cancelClick($event)"
-    >
-    </co-commit-buttons>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
-                providers: [{
+        </co-commit-buttons>
+        <div class="required-indicator"></div>
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputTextComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputTextComponent
-                    }],
+                    }
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 InputTextComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
@@ -7226,29 +7456,12 @@ InputTextComponent.propDecorators = {
     hideArrowButtons: [{ type: Input }, { type: HostBinding, args: ['class.hide-arrows',] }],
     leftIconClick: [{ type: Output }],
     rightIconClick: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-text",] }],
+    showClass: [{ type: HostBinding, args: ['class.co-input-text',] }],
     hasLeftIcon: [{ type: HostBinding, args: ['class.has-left-icon',] }],
     hasRightIcon: [{ type: HostBinding, args: ['class.has-right-icon',] }],
-    hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }]
+    hasOwnLabel: [{ type: HostBinding, args: ['class.has-own-label',] }]
 };
 
-class ValidationErrorModule {
-}
-ValidationErrorModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    IconModule
-                ],
-                declarations: [
-                    ValidationErrorComponent
-                ],
-                exports: [
-                    ValidationErrorComponent
-                ]
-            },] }
-];
-
 class InputTextModule {
 }
 InputTextModule.decorators = [
@@ -7262,7 +7475,8 @@ InputTextModule.decorators = [
                     TextBoxAllModule,
                     NumericTextBoxModule,
                     ValidationErrorModule,
-                    CommitButtonsModule
+                    CommitButtonsModule,
+                    OverlayModule
                 ],
                 declarations: [
                     InputTextComponent
@@ -7289,10 +7503,11 @@ InputNumberPickerModule.decorators = [
 ];
 
 class InputRadioButtonComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
@@ -7316,25 +7531,27 @@ class InputRadioButtonComponent extends BaseInputComponent {
 }
 InputRadioButtonComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-radio-button",
+                selector: 'co-input-radio-button',
                 template: `
-    <div class="outer-circle" [class.selected]="model">
-      <div class="inner-circle" *ngIf="model" @showSelected></div>
-    </div>
-    <div class="label" *ngIf="label" [textContent]="label"></div>
-    <input #input [ngModel]="model" type="hidden">
-  `,
-                providers: [{
+        <div class="outer-circle" [class.selected]="model">
+            <div class="inner-circle" *ngIf="model" @showSelected></div>
+        </div>
+        <div class="label" *ngIf="label" [textContent]="label"></div>
+        <input #input [ngModel]="model" type="hidden">
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputRadioButtonComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputRadioButtonComponent
-                    }],
+                    }
+                ],
                 animations: [
-                    trigger("showSelected", [
-                        state("void", style({ transform: "scale(0)" })),
-                        state("*", style({ transform: "scale(1)" })),
-                        transition("void <=> *", animate("200ms ease-in-out")),
+                    trigger('showSelected', [
+                        state('void', style({ transform: 'scale(0)' })),
+                        state('*', style({ transform: 'scale(1)' })),
+                        transition('void <=> *', animate('200ms ease-in-out')),
                     ])
                 ],
                 encapsulation: ViewEncapsulation.None
@@ -7343,15 +7560,16 @@ InputRadioButtonComponent.decorators = [
 InputRadioButtonComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
     { type: ElementRef }
 ];
 InputRadioButtonComponent.propDecorators = {
-    isModelSelected: [{ type: HostBinding, args: ["class.selected",] }],
-    showClass: [{ type: HostBinding, args: ["class.co-radio-button",] }],
-    handleClick: [{ type: HostListener, args: ["click", ["$event"],] }]
+    isModelSelected: [{ type: HostBinding, args: ['class.selected',] }],
+    showClass: [{ type: HostBinding, args: ['class.co-radio-button',] }],
+    handleClick: [{ type: HostListener, args: ['click', ['$event'],] }]
 };
 
 class InputRadioButtonModule {
@@ -7413,6 +7631,9 @@ InputSearchComponent.decorators = [
       (rightIconClick)="rightIconClick.emit($event)"
     ></co-input-text>
   `,
+                providers: [
+                    OverlayService
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -7452,15 +7673,16 @@ InputSearchModule.decorators = [
 ];
 
 class InputTextareaComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
-        this.placeholder = "";
+        this.placeholder = '';
         this.hasOwnLabel = true;
         super._markAsOnPush();
     }
@@ -7470,40 +7692,42 @@ class InputTextareaComponent extends BaseInputComponent {
 }
 InputTextareaComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-textarea",
+                selector: 'co-input-textarea',
                 template: `
-    <label [textContent]="placeholder"></label>
-    <textarea
-      #input
-      type="textarea"
-      [ngModel]="model"
-      [readonly]="readonly"
-      [required]="required"
-      (ngModelChange)="modelChange.emit($event)"
-    ></textarea>
-    <co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
-                       [committing]="committing"
-                       [commitFinished]="commitFinished"
-                       (commitClick)="commitClick($event)"
-                       (cancelClick)="cancelClick($event)"
-    >
-    </co-commit-buttons>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
-                providers: [{
+        <label [textContent]="placeholder"></label>
+        <textarea
+                #input
+                type="textarea"
+                [ngModel]="model"
+                [readonly]="readonly"
+                [required]="required"
+                (ngModelChange)="modelChange.emit($event)"
+        ></textarea>
+        <co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
+                           [committing]="committing"
+                           [commitFinished]="commitFinished"
+                           (commitClick)="commitClick($event)"
+                           (cancelClick)="cancelClick($event)"
+        >
+        </co-commit-buttons>
+        <div class="required-indicator"></div>
+    `,
+                providers: [
+                    OverlayService, {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputTextareaComponent)
                     }, {
                         provide: BaseInputComponent,
                         useExisting: InputTextareaComponent
-                    }],
+                    }
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 InputTextareaComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
@@ -7511,8 +7735,8 @@ InputTextareaComponent.ctorParameters = () => [
 ];
 InputTextareaComponent.propDecorators = {
     placeholder: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-textarea",] }],
-    hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }]
+    showClass: [{ type: HostBinding, args: ['class.co-input-textarea',] }],
+    hasOwnLabel: [{ type: HostBinding, args: ['class.has-own-label',] }]
 };
 
 class InputTextareaModule {
@@ -7535,10 +7759,11 @@ InputTextareaModule.decorators = [
 ];
 
 class MultiSelectListComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
@@ -7549,12 +7774,12 @@ class MultiSelectListComponent extends BaseInputComponent {
          */
         this.fields = {};
         this.showSelectAll = true;
-        this.mode = "Default";
+        this.mode = 'Default';
         super._markAsOnPush();
     }
     set showCheckbox(value) {
         if (value) {
-            this.mode = "CheckBox";
+            this.mode = 'CheckBox';
         }
     }
     showClass() {
@@ -7571,29 +7796,29 @@ class MultiSelectListComponent extends BaseInputComponent {
 }
 MultiSelectListComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-multi-select-list",
+                selector: 'co-multi-select-list',
                 template: `
-    <ejs-multiselect
-      [dataSource]="collection"
-      [placeholder]="placeholder"
-      [value]="model"
-      [mode]="mode"
-      [fields]="fields"
-      [readonly]="readonly"
-      [itemTemplate]="itemTemplate"
-      [headerTemplate]="headerTemplate"
-      [valueTemplate]="valueTemplate"
-      [footerTemplate]="footerTemplate"
-      [selectAllText]="'Select All'"
-      [showSelectAll]=showSelectAll
-      [ngModel]="model"
-      (ngModelChange)="handleModelChange($event)"
-      (valueChange)="handleModelChange($event)"
-    ></ejs-multiselect>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
+        <ejs-multiselect
+                [dataSource]="collection"
+                [placeholder]="placeholder"
+                [value]="model"
+                [mode]="mode"
+                [fields]="fields"
+                [readonly]="readonly"
+                [itemTemplate]="itemTemplate"
+                [headerTemplate]="headerTemplate"
+                [valueTemplate]="valueTemplate"
+                [footerTemplate]="footerTemplate"
+                [selectAllText]="'Select All'"
+                [showSelectAll]=showSelectAll
+                [ngModel]="model"
+                (ngModelChange)="handleModelChange($event)"
+                (valueChange)="handleModelChange($event)"
+        ></ejs-multiselect>
+        <div class="required-indicator"></div>
+    `,
                 providers: [
+                    OverlayService,
                     CheckBoxSelectionService,
                     {
                         provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -7609,6 +7834,7 @@ MultiSelectListComponent.decorators = [
 MultiSelectListComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: OverlayService },
     { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
@@ -7624,7 +7850,7 @@ MultiSelectListComponent.propDecorators = {
     footerTemplate: [{ type: Input }],
     showSelectAll: [{ type: Input }],
     showCheckbox: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-multi-select-list",] }]
+    showClass: [{ type: HostBinding, args: ['class.co-multi-select-list',] }]
 };
 
 class MultiSelectListModule {
@@ -10981,105 +11207,6 @@ ClickoutsideModule.decorators = [
             },] }
 ];
 
-class OverlayDirective {
-    constructor(elementRef) {
-        this._elementRef = elementRef;
-    }
-    set parent(value) {
-        if (value && value.elementRef) {
-            this._parent = value.elementRef;
-        }
-        else {
-            if (this._parent) {
-                this._observer.disconnect();
-            }
-        }
-    }
-    ngOnDestroy() {
-        window.removeEventListener("scroll", (event) => this._handleScroll);
-        this._observer.disconnect();
-        this._elementRef = undefined;
-        this._parent = undefined;
-    }
-    ngOnInit() {
-        window.addEventListener("scroll", (event) => this._handleScroll);
-        this._initiallyPlaceElement();
-        this._observer = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
-            const parentRect = this._parent.nativeElement.getBoundingClientRect();
-            this._placeElement(entry.contentRect.bottom, entry.contentRect.right, parentRect, elementRect);
-        });
-        this._observer.observe(document.body);
-    }
-    _initiallyPlaceElement() {
-        const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
-        const parentRect = this._parent.nativeElement.getBoundingClientRect();
-        this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
-    }
-    _placeElement(bottom, right, parentRect, elementRect) {
-        if (bottom < parentRect.bottom + elementRect.height) { // make sure it fits at the bottom
-            this._elementRef.nativeElement.style.top = (parentRect.top - elementRect.height) + "px";
-        }
-        else {
-            this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
-        }
-        if (right < parentRect.left + elementRect.width) { // make sure it fits at the right
-            this._elementRef.nativeElement.style.left = (parentRect.right - elementRect.width) + "px";
-        }
-        else {
-            this._elementRef.nativeElement.style.left = parentRect.left + "px";
-        }
-    }
-    _handleScroll(event) {
-        console.log("scroll");
-    }
-}
-OverlayDirective.decorators = [
-    { type: Directive, args: [{
-                selector: "[overlay]"
-            },] }
-];
-OverlayDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-OverlayDirective.propDecorators = {
-    parent: [{ type: Input, args: ["overlay",] }]
-};
-
-class OverlayParentDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngOnDestroy() {
-        this.elementRef = undefined;
-    }
-}
-OverlayParentDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[overlayParent]',
-                exportAs: 'overlayParent'
-            },] }
-];
-OverlayParentDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-
-class OverlayModule {
-}
-OverlayModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    OverlayDirective,
-                    OverlayParentDirective
-                ],
-                exports: [
-                    OverlayDirective,
-                    OverlayParentDirective
-                ]
-            },] }
-];
-
 class TooltipComponent {
     constructor(_elementRef, _changeDetector) {
         this._elementRef = _elementRef;
@@ -11467,27 +11594,6 @@ ScreenConfigurationModule.decorators = [
             },] }
 ];
 
-class ColorSequenceService {
-    constructor() {
-        this.colors = new Map();
-    }
-    getRandomColor(id) {
-        if (this.colors.has(id)) {
-            return this.colors.get(id);
-        }
-        const randomColor = Math.floor(Math.random() * 16777215).toString(16);
-        const result = '#' + randomColor;
-        this.colors.set(id, result);
-        return result;
-    }
-}
-ColorSequenceService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ColorSequenceService_Factory() { return new ColorSequenceService(); }, token: ColorSequenceService, providedIn: "root" });
-ColorSequenceService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-
 class FilterItemViewmodel {
     constructor(code, description, checked, count, valueName) {
         this.checked = false;
@@ -11509,6 +11615,27 @@ class FilterViewmodel {
     }
 }
 
+class ColorSequenceService {
+    constructor() {
+        this.colors = new Map();
+    }
+    getRandomColor(id) {
+        if (this.colors.has(id)) {
+            return this.colors.get(id);
+        }
+        const randomColor = Math.floor(Math.random() * 16777215).toString(16);
+        const result = '#' + randomColor;
+        this.colors.set(id, result);
+        return result;
+    }
+}
+ColorSequenceService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ColorSequenceService_Factory() { return new ColorSequenceService(); }, token: ColorSequenceService, providedIn: "root" });
+ColorSequenceService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
 /*
  * Public API Surface of corecomponents
  */
@@ -11517,5 +11644,5 @@ class FilterViewmodel {
  * Generated bundle index. Do not edit.
  */
 
-export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoOrientation, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, DropDownListComponent, DropDownModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, showHideDialogAnimation, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, PaginationService as ɵba, PaginatePipe as ɵbb, SimpleGridCellComponent as ɵbc, PrependPipeModule as ɵbd, PrependPipe as ɵbe, ClickOutsideDirective as ɵbf, ClickOutsideMasterService as ɵbg, OverlayDirective as ɵbh, OverlayParentDirective as ɵbi, TooltipModule as ɵbj, TooltipComponent as ɵbk, TooltipDirective as ɵbl, CheckmarkOverlayComponent as ɵbm, ScreenConfigurationDirective as ɵbn, ScreenConfigComponentWrapper as ɵbo, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, CommitButtonsModule as ɵt, CommitButtonsComponent as ɵu, ValidationErrorModule as ɵv, ValidationErrorComponent as ɵw, PopupShowerService as ɵx, BaseSimpleGridComponent as ɵy, ObserveVisibilityDirective as ɵz };
+export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoOrientation, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, DropDownListComponent, DropDownModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, OverlayService, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, showHideDialogAnimation, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, BaseSimpleGridComponent as ɵba, ObserveVisibilityDirective as ɵbb, PaginationService as ɵbc, PaginatePipe as ɵbd, SimpleGridCellComponent as ɵbe, PrependPipeModule as ɵbf, PrependPipe as ɵbg, ClickOutsideDirective as ɵbh, ClickOutsideMasterService as ɵbi, TooltipModule as ɵbj, TooltipComponent as ɵbk, TooltipDirective as ɵbl, CheckmarkOverlayComponent as ɵbm, ScreenConfigurationDirective as ɵbn, ScreenConfigComponentWrapper as ɵbo, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, CommitButtonsModule as ɵt, CommitButtonsComponent as ɵu, ValidationErrorModule as ɵv, OverlayDirective as ɵw, OverlayParentDirective as ɵx, ValidationErrorComponent as ɵy, PopupShowerService as ɵz };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map