@colijnit/corecomponents_v12 12.0.102 → 12.0.103

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4296,7 +4296,7 @@
     ValidationErrorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-validation-error",
-                    template: "\n    <div class=\"validation-error-content\">\n      <co-icon [iconData]=\"icons.getIcon(Icons.InformationRoundOpen)\"></co-icon>\n        <div class=\"validation-error-message\" [textContent]=\"error\"></div>\n    </div>\n  ",
+                    template: "\n    <div class=\"validation-error-wrapper\" [overlay]=\"parentForOverlay\">\n      <div class=\"validation-error-content\">\n        <co-icon [iconData]=\"icons.getIcon(Icons.InformationRoundOpen)\"></co-icon>\n          <div class=\"validation-error-message\" [textContent]=\"error\"></div>\n      </div>\n    </div>\n  ",
                     animations: [],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -4306,20 +4306,67 @@
     ]; };
     ValidationErrorComponent.propDecorators = {
         error: [{ type: i0.Input }],
+        parentForOverlay: [{ type: i0.Input }],
         top: [{ type: i0.HostBinding, args: ['style.top.px',] }, { type: i0.Input }],
         left: [{ type: i0.HostBinding, args: ['style.left.px',] }, { type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-validation-error',] }]
     };
 
+    var OverlayService = /** @class */ (function () {
+        function OverlayService(_componentFactoryResolver, _appRef, _injector) {
+            this._componentFactoryResolver = _componentFactoryResolver;
+            this._appRef = _appRef;
+            this._injector = _injector;
+        }
+        OverlayService.prototype.createComponent = function (compClass, inputs) {
+            var _this = this;
+            if (this._componentRef) {
+                this.removeComponent();
+            }
+            this._componentRef = this._componentFactoryResolver
+                .resolveComponentFactory(compClass)
+                .create(this._injector);
+            if (inputs) {
+                for (var property in inputs) {
+                    if (inputs.hasOwnProperty(property)) {
+                        this._componentRef.instance[property] = inputs[property];
+                    }
+                }
+            }
+            this._appRef.attachView(this._componentRef.hostView);
+            var domElem = this._componentRef.hostView
+                .rootNodes[0];
+            document.body.appendChild(domElem);
+            this._componentRef.onDestroy(function () {
+                _this._appRef.detachView(_this._componentRef.hostView);
+            });
+        };
+        OverlayService.prototype.removeComponent = function () {
+            if (this._componentRef) {
+                this._componentRef.destroy();
+            }
+        };
+        return OverlayService;
+    }());
+    OverlayService.decorators = [
+        { type: i0.Injectable }
+    ];
+    OverlayService.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ApplicationRef },
+        { type: i0.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.
      */
     var BaseInputComponent = /** @class */ (function () {
-        function BaseInputComponent(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        function BaseInputComponent(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) {
             var _this = this;
             this.changeDetector = changeDetector;
             this.componentFactoryResolver = componentFactoryResolver;
+            this.overlayService = overlayService;
             this.formUserChangeListener = formUserChangeListener;
             this.ngZoneWrapper = ngZoneWrapper;
             this.elementRef = elementRef;
@@ -4353,6 +4400,7 @@
             this.canSaveOrCancel = false;
             this.committing = false;
             this.commitFinished = false;
+            this.validationError = "";
             this._markedAsUserTouched = false;
             this._destroyed = false;
             this._hasOnPushCdStrategy = false;
@@ -4630,17 +4678,19 @@
                 this.markAsUserTouched();
             }
         };
-        BaseInputComponent.prototype.handleDocumentScroll = function () {
-            this._positionValidationError();
-        };
-        BaseInputComponent.prototype.handleWindowResize = function () {
-            this._positionValidationError();
-        };
+        // @HostListener("document:scroll")
+        // public handleDocumentScroll(): void {
+        //   this._positionValidationError();
+        // }
+        // @HostListener("window:resize")
+        // public handleWindowResize(): void {
+        //   this._positionValidationError();
+        // }
         BaseInputComponent.prototype.handleKeyDown = function (event) {
             if (this.showSaveCancel && this.canSaveOrCancel) {
                 this._handleKeyDown(event);
             }
-            this._positionValidationError();
+            // this._positionValidationError();
         };
         Object.defineProperty(BaseInputComponent.prototype, "canChange", {
             get: function () {
@@ -4755,18 +4805,20 @@
             this.keepFocus = false;
         };
         BaseInputComponent.prototype.showValidationError = function (error) {
-            if (this.validationErrorContainer) {
-                if (this._errorValidationComponent) {
-                    this._clearErrorComponent();
-                }
-                var 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
@@ -4943,13 +4995,14 @@
             });
         };
         BaseInputComponent.prototype._clearErrorComponent = function () {
-            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
         BaseInputComponent.prototype._controlExists = function () {
@@ -5126,6 +5179,7 @@
     BaseInputComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
         { type: i0.ComponentFactoryResolver },
+        { type: OverlayService },
         { type: FormInputUserModelChangeListenerService, decorators: [{ type: i0.Optional }] },
         { type: NgZoneWrapperService, decorators: [{ type: i0.Optional }] },
         { type: i0.ElementRef, decorators: [{ type: i0.Optional }] }
@@ -5185,8 +5239,6 @@
         validationDisabled: [{ type: i0.HostBinding, args: ["class.no-validation",] }],
         onClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }],
         onFocusIn: [{ type: i0.HostListener, args: ["focusin",] }],
-        handleDocumentScroll: [{ type: i0.HostListener, args: ["document:scroll",] }],
-        handleWindowResize: [{ type: i0.HostListener, args: ["window:resize",] }],
         handleKeyDown: [{ type: i0.HostListener, args: ["keydown", ["$event"],] }]
     };
     __decorate([
@@ -5521,10 +5573,11 @@
 
     var DropDownListComponent = /** @class */ (function (_super) {
         __extends(DropDownListComponent, _super);
-        function DropDownListComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function DropDownListComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
@@ -5545,9 +5598,10 @@
     }(BaseInputComponent));
     DropDownListComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-drop-down-list",
-                    template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [allowFiltering]=\"allowFiltering\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [filterBarPlaceholder]=\"filterBarPlaceholder\"\n      [filterType]=\"filterType\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n      showClearButton=\"true\"\n      floatLabelType=\"Auto\"\n    >\n    </ejs-dropdownlist>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    selector: 'co-drop-down-list',
+                    template: "\n        <ejs-dropdownlist\n                [dataSource]=\"collection\"\n                [allowFiltering]=\"allowFiltering\"\n                [value]=\"model\"\n                [fields]=\"fields\"\n                [filterBarPlaceholder]=\"filterBarPlaceholder\"\n                [filterType]=\"filterType\"\n                [placeholder]=\"placeholder\"\n                [readonly]=\"readonly\"\n                [itemTemplate]=\"itemTemplate\"\n                [headerTemplate]=\"headerTemplate\"\n                [valueTemplate]=\"valueTemplate\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"model\"\n                (ngModelChange)=\"modelChange.emit($event)\"\n                showClearButton=\"true\"\n                floatLabelType=\"Auto\"\n        >\n        </ejs-dropdownlist>\n        <div class=\"required-indicator\"></div>\n    ",
                     providers: [
+                        OverlayService,
                         ej2AngularDropdowns.CheckBoxSelectionService,
                         {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -5563,6 +5617,7 @@
     DropDownListComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
@@ -5578,7 +5633,7 @@
         itemTemplate: [{ type: i0.Input }],
         headerTemplate: [{ type: i0.Input }],
         valueTemplate: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-drop-down-list",] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-drop-down-list',] }]
     };
 
     var DropDownModule = /** @class */ (function () {
@@ -6300,11 +6355,12 @@
 
     var InputCheckboxComponent = /** @class */ (function (_super) {
         __extends(InputCheckboxComponent, _super);
-        function InputCheckboxComponent(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputCheckboxComponent(formComponent, iconCacheService, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.iconCacheService = iconCacheService;
             _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
@@ -6331,15 +6387,17 @@
     }(BaseInputComponent));
     InputCheckboxComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-input-checkbox",
-                    template: "\n    <div class=\"checkbox\" (click)=\"handleModelChange($event)\" [class.checked]=\"model\">\n      <div class=\"checkmark\" [class.show]=\"model\"></div>\n    </div>\n    <div class=\"label\" [class.clickable]=\"clickableLabel\" *ngIf=\"label\" [textContent]=\"label\"\n         (click)=\"clickableLabel ? handleModelChange($event) : true\"></div>\n  ",
-                    providers: [{
+                    selector: 'co-input-checkbox',
+                    template: "\n        <div class=\"checkbox\" (click)=\"handleModelChange($event)\" [class.checked]=\"model\">\n            <div class=\"checkmark\" [class.show]=\"model\"></div>\n        </div>\n        <div class=\"label\" [class.clickable]=\"clickableLabel\" *ngIf=\"label\" [textContent]=\"label\"\n             (click)=\"clickableLabel ? handleModelChange($event) : true\"></div>\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputCheckboxComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputCheckboxComponent
-                        }],
+                        }
+                    ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -6348,6 +6406,7 @@
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: IconCacheService },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
@@ -6357,7 +6416,7 @@
         cssClass: [{ type: i0.Input }],
         clickableLabel: [{ type: i0.Input }],
         modelChange: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-input-checkbox",] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-checkbox',] }]
     };
 
     ej2Base.enableRipple(true);
@@ -6416,10 +6475,11 @@
 
     var InputCheckboxMultiSelectComponent = /** @class */ (function (_super) {
         __extends(InputCheckboxMultiSelectComponent, _super);
-        function InputCheckboxMultiSelectComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputCheckboxMultiSelectComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
@@ -6434,15 +6494,17 @@
     }(BaseInputComponent));
     InputCheckboxMultiSelectComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-input-checkbox-multi-select",
-                    template: "\n    <ejs-multiselect\n       [placeholder]=\"placeholder\"\n       [dataSource]=\"source\"\n       [fields]=\"fields\"\n       mode=\"CheckBox\"\n       showDropDownIcon=\"true\"\n       [showSelectAll]=\"false\"\n       [filterBarPlaceholder]=\"filterPlaceholder\"\n    ></ejs-multiselect>\n  ",
-                    providers: [{
+                    selector: 'co-input-checkbox-multi-select',
+                    template: "\n        <ejs-multiselect\n                [placeholder]=\"placeholder\"\n                [dataSource]=\"source\"\n                [fields]=\"fields\"\n                mode=\"CheckBox\"\n                showDropDownIcon=\"true\"\n                [showSelectAll]=\"false\"\n                [filterBarPlaceholder]=\"filterPlaceholder\"\n        ></ejs-multiselect>\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputCheckboxMultiSelectComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputCheckboxMultiSelectComponent
-                        }],
+                        }
+                    ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -6450,6 +6512,7 @@
     InputCheckboxMultiSelectComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
@@ -6461,7 +6524,7 @@
         selected: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         filterPlaceholder: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-input-checkbox-multi-select",] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-checkbox-multi-select',] }]
     };
 
     var InputCheckboxMultiSelectModule = /** @class */ (function () {
@@ -6486,10 +6549,11 @@
 
     var InputComboBoxComponent = /** @class */ (function (_super) {
         __extends(InputComboBoxComponent, _super);
-        function InputComboBoxComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputComboBoxComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
@@ -6514,28 +6578,31 @@
     }(BaseInputComponent));
     InputComboBoxComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-input-combo-box",
-                    template: "\n    <ejs-combobox #combo [dataSource]=\"collection\"\n                  [fields]=\"fields\"\n                  [disabled]=\"readonly\"\n                  [placeholder]=\"placeholder\"\n                  [autofill]=\"autofill\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"modelChange.emit($event)\"\n                  (valueChange)=\"valueChange.emit($event)\"\n                  (focus)=\"onFocus()\"\n                  [popupWidth]=\"popupWidth\"\n                  [popupHeight]=\"popupHeight\"\n                  [filterType]=\"filterType\"\n                  [allowFiltering]=\"allowFiltering\"\n                  showClearButton=\"true\"\n                  floatLabelType=\"Auto\"\n    >\n    </ejs-combobox>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
+                    selector: 'co-input-combo-box',
+                    template: "\n        <ejs-combobox #combo [dataSource]=\"collection\"\n                      [fields]=\"fields\"\n                      [disabled]=\"readonly\"\n                      [placeholder]=\"placeholder\"\n                      [autofill]=\"autofill\"\n                      [ngModel]=\"model\"\n                      (ngModelChange)=\"modelChange.emit($event)\"\n                      (valueChange)=\"valueChange.emit($event)\"\n                      (focus)=\"onFocus()\"\n                      [popupWidth]=\"popupWidth\"\n                      [popupHeight]=\"popupHeight\"\n                      [filterType]=\"filterType\"\n                      [allowFiltering]=\"allowFiltering\"\n                      showClearButton=\"true\"\n                      floatLabelType=\"Auto\"\n        >\n        </ejs-combobox>\n        <div class=\"required-indicator\"></div>\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputComboBoxComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputComboBoxComponent
-                        }],
+                        }
+                    ],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputComboBoxComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
         { type: i0.ElementRef }
     ]; };
     InputComboBoxComponent.propDecorators = {
-        combo: [{ type: i0.ViewChild, args: ["combo",] }],
+        combo: [{ type: i0.ViewChild, args: ['combo',] }],
         autofill: [{ type: i0.Input }],
         allowFiltering: [{ type: i0.Input }],
         filterType: [{ type: i0.Input }],
@@ -6548,7 +6615,7 @@
         popupWidth: [{ type: i0.Input }],
         valueChange: [{ type: i0.Output }],
         isSmall: [{ type: i0.HostBinding, args: ['class.is-small',] }, { type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-input-combo-box",] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-combo-box',] }]
     };
 
     var InputComboBoxModule = /** @class */ (function () {
@@ -6573,20 +6640,21 @@
 
     var InputDatePickerComponent = /** @class */ (function (_super) {
         __extends(InputDatePickerComponent, _super);
-        function InputDatePickerComponent(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputDatePickerComponent(formComponent, iconCacheService, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _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 = exports.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 i0.EventEmitter();
             _this.isMinimal = false;
             _super.prototype._markAsOnPush.call(_this);
@@ -6633,14 +6701,16 @@
     }(BaseInputComponent));
     InputDatePickerComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-input-date",
-                    template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    [readonly]=\"readonly\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                       [committing]=\"committing\"\n                       [commitFinished]=\"commitFinished\"\n                       (commitClick)=\"commitClick($event)\"\n                       (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
+                    selector: 'co-input-date',
+                    template: "\n        <ejs-datepicker #ejsDatePicker\n                        floatLabelType=\"Auto\"\n                        [format]=\"dateFormat\"\n                        [placeholder]=\"placeholder\"\n                        [ngModel]=\"model\"\n                        [readonly]=\"readonly\"\n                        (ngModelChange)=\"modelChange.emit($event)\"\n        ></ejs-datepicker>\n        <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                           [committing]=\"committing\"\n                           [commitFinished]=\"commitFinished\"\n                           (commitClick)=\"commitClick($event)\"\n                           (cancelClick)=\"cancelClick($event)\"\n        >\n        </co-commit-buttons>\n        <div class=\"required-indicator\"></div>\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputDatePickerComponent
-                        }],
+                        }
+                    ],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -6648,20 +6718,21 @@
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: IconCacheService },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
         { type: i0.ElementRef }
     ]; };
     InputDatePickerComponent.propDecorators = {
-        ejsDatePicker: [{ type: i0.ViewChild, args: ["ejsDatePicker",] }],
+        ejsDatePicker: [{ type: i0.ViewChild, args: ['ejsDatePicker',] }],
         dateFormat: [{ type: i0.Input }],
         calendarIconName: [{ type: i0.Input }],
         iconHeight: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         width: [{ type: i0.Input }],
         blur: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-input-date",] }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-date',] }],
         isMinimal: [{ type: i0.HostBinding, args: ['class.is-minimal',] }, { type: i0.Input }]
     };
 
@@ -6774,6 +6845,164 @@
                 },] }
     ];
 
+    var OverlayDirective = /** @class */ (function () {
+        function OverlayDirective(elementRef) {
+            var _this = this;
+            this.keepInView = false;
+            this.handleScroll = function (event) {
+                _this._checkAndPlaceElement();
+            };
+            this._elementRef = elementRef;
+        }
+        Object.defineProperty(OverlayDirective.prototype, "parent", {
+            set: function (value) {
+                if (value) {
+                    this._parent = value instanceof i0.ElementRef ? value : value.elementRef;
+                }
+                else {
+                    if (this._parent) {
+                        this._resizeObserver.disconnect();
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OverlayDirective.prototype.ngOnDestroy = function () {
+            document.removeEventListener("scroll", this.handleScroll, true);
+            this._intersectionObserver.disconnect();
+            this._resizeObserver.disconnect();
+            this._elementRef = undefined;
+            this._parent = undefined;
+        };
+        OverlayDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            if (!this._elementRef || !this._elementRef.nativeElement) {
+                return;
+            }
+            document.addEventListener("scroll", this.handleScroll, true);
+            this._checkAndPlaceElement();
+            this._resizeObserver = new ResizeObserver(function (entries) {
+                _this._checkAndPlaceElement();
+            });
+            this._intersectionObserver = new IntersectionObserver(function (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);
+        };
+        OverlayDirective.prototype._checkAndPlaceElement = function () {
+            if (this._elementRef && this._elementRef.nativeElement && this._parent && this._parent.nativeElement) {
+                var elementRect = this._elementRef.nativeElement.getBoundingClientRect();
+                var parentRect = this._parent.nativeElement.getBoundingClientRect();
+                this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
+            }
+        };
+        OverlayDirective.prototype._placeElement = function (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;
+                    }
+                }
+            }
+        };
+        return OverlayDirective;
+    }());
+    OverlayDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[overlay]"
+                },] }
+    ];
+    OverlayDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    OverlayDirective.propDecorators = {
+        parent: [{ type: i0.Input, args: ["overlay",] }],
+        keepInView: [{ type: i0.Input }]
+    };
+
+    var OverlayParentDirective = /** @class */ (function () {
+        function OverlayParentDirective(elementRef) {
+            this.elementRef = elementRef;
+        }
+        OverlayParentDirective.prototype.ngOnDestroy = function () {
+            this.elementRef = undefined;
+        };
+        return OverlayParentDirective;
+    }());
+    OverlayParentDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[overlayParent]',
+                    exportAs: 'overlayParent'
+                },] }
+    ];
+    OverlayParentDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
+    var OverlayModule = /** @class */ (function () {
+        function OverlayModule() {
+        }
+        return OverlayModule;
+    }());
+    OverlayModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        OverlayDirective,
+                        OverlayParentDirective
+                    ],
+                    exports: [
+                        OverlayDirective,
+                        OverlayParentDirective
+                    ]
+                },] }
+    ];
+
+    var ValidationErrorModule = /** @class */ (function () {
+        function ValidationErrorModule() {
+        }
+        return ValidationErrorModule;
+    }());
+    ValidationErrorModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        IconModule,
+                        OverlayModule
+                    ],
+                    declarations: [
+                        ValidationErrorComponent
+                    ],
+                    exports: [
+                        ValidationErrorComponent
+                    ]
+                },] }
+    ];
+
     var InputDatePickerModule = /** @class */ (function () {
         function InputDatePickerModule() {
         }
@@ -6788,7 +7017,9 @@
                         IconModule,
                         AppendPipeModule,
                         ej2AngularCalendars.DatePickerModule,
-                        CommitButtonsModule
+                        CommitButtonsModule,
+                        ValidationErrorModule,
+                        OverlayModule
                     ],
                     schemas: [
                         i0.NO_ERRORS_SCHEMA
@@ -6802,8 +7033,8 @@
         __extends(InputDateRangePickerComponent, _super);
         function InputDateRangePickerComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.dateFormat = "dd-MM-yyyy";
-            _this.placeholder = "";
+            _this.dateFormat = 'dd-MM-yyyy';
+            _this.placeholder = '';
             _this.startDateChange = new i0.EventEmitter();
             _this.endDateChange = new i0.EventEmitter();
             _this.dateRangeChange = new i0.EventEmitter();
@@ -6828,15 +7059,18 @@
     }(BaseInputComponent));
     InputDateRangePickerComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-input-date-range",
-                    template: "\n    <ejs-daterangepicker #ejsDateRangePicker\n      [format]=\"dateFormat\"\n      floatLabelType=\"Auto\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n      [readonly]=\"readonly\"\n      (ngModelChange)=\"rangeChange()\"\n      (close)=\"close.next($event)\"\n      (select)=\"select.next($event)\"\n      (cleared)=\"cleared.next($event)\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
+                    selector: 'co-input-date-range',
+                    template: "\n        <ejs-daterangepicker #ejsDateRangePicker\n                             [format]=\"dateFormat\"\n                             floatLabelType=\"Auto\"\n                             [placeholder]=\"placeholder\"\n                             [ngModel]=\"model\"\n                             [(startDate)]=\"startDate\"\n                             [(endDate)]=\"endDate\"\n                             [readonly]=\"readonly\"\n                             (ngModelChange)=\"rangeChange()\"\n                             (close)=\"close.next($event)\"\n                             (select)=\"select.next($event)\"\n                             (cleared)=\"cleared.next($event)\"\n        ></ejs-daterangepicker>\n        <div class=\"required-indicator\"></div>\n    ",
+                    providers: [
+                        OverlayService,
+                        {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputDateRangePickerComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputDateRangePickerComponent
-                        }],
+                        }
+                    ],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -6851,7 +7085,7 @@
         close: [{ type: i0.Output }],
         select: [{ type: i0.Output }],
         cleared: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-input-date-range-picker",] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-date-range-picker',] }]
     };
 
     var InputDateRangePickerModule = /** @class */ (function () {
@@ -6864,7 +7098,9 @@
                     imports: [
                         BaseModule,
                         ej2AngularCalendars.DateRangePickerModule,
-                        forms.FormsModule
+                        forms.FormsModule,
+                        ValidationErrorModule,
+                        OverlayModule
                     ],
                     declarations: [
                         InputDateRangePickerComponent
@@ -6878,10 +7114,11 @@
     ej2AngularDropdowns.ListBoxComponent.Inject(ej2AngularDropdowns.CheckBoxSelection);
     var InputListboxComponent = /** @class */ (function (_super) {
         __extends(InputListboxComponent, _super);
-        function InputListboxComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputListboxComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
@@ -6929,19 +7166,22 @@
     InputListboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-listbox',
-                    template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [disabled]=\"readonly\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
+                    template: "\n        <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n        <div class=\"co-input-listbox-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n            <ejs-listbox\n                    [ngModel]=\"value\"\n                    [dataSource]=\"collection\"\n                    [fields]=\"fields\"\n                    [disabled]=\"readonly\"\n                    [selectionSettings]=\"selectionSettings\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n            ></ejs-listbox>\n        </div>\n        <div class=\"required-indicator\"></div>\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputListboxComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputListboxComponent
-                        }],
+                        }
+                    ],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputListboxComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
@@ -7324,10 +7564,11 @@
     // A component that lets users pick a number by increasing and decreasing it with buttons, or by typing.
     var InputNumberPickerComponent = /** @class */ (function (_super) {
         __extends(InputNumberPickerComponent, _super);
-        function InputNumberPickerComponent(formComponent, iconCacheService, _ngZone, componentFactoryResolver, changeDetector, formUserChangeListener) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener) || this;
+        function InputNumberPickerComponent(formComponent, iconCacheService, overlayService, _ngZone, componentFactoryResolver, changeDetector, formUserChangeListener) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener) || this;
             _this.formComponent = formComponent;
             _this.iconCacheService = iconCacheService;
+            _this.overlayService = overlayService;
             _this._ngZone = _ngZone;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.minusIcon = exports.CoreComponentsIcon.MinusSimple;
@@ -7568,13 +7809,15 @@
     InputNumberPickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-number-picker',
-                    template: "\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"minus-operator circle\" [class.select]=\"minSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                 (mousedown)=\"onMinusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n    <input type=\"text\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           (ngModelChange)=\"handleChangeModel($event)\"\n           (keydown)=\"handleKeyDown($event)\"/>\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"plus-operator circle\"  [class.select]=\"plusSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                 (mousedown)=\"onPlusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n  ",
-                    providers: [{
+                    template: "\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"minus-operator circle\" [class.select]=\"minSelected\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                       (mousedown)=\"onMinusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n        <input type=\"text\"\n               [ngModel]=\"model\"\n               [readonly]=\"readonly\"\n               [disabled]=\"disabled\"\n               [required]=\"required\"\n               (ngModelChange)=\"handleChangeModel($event)\"\n               (keydown)=\"handleKeyDown($event)\"/>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"plus-operator circle\" [class.select]=\"plusSelected\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                       (mousedown)=\"onPlusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputNumberPickerComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputNumberPickerComponent
-                        }],
+                        }
+                    ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -7582,6 +7825,7 @@
     InputNumberPickerComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: IconCacheService, decorators: [{ type: i0.Inject, args: [IconCacheService,] }] },
+        { type: OverlayService },
         { type: i0.NgZone },
         { type: i0.ComponentFactoryResolver },
         { type: i0.ChangeDetectorRef },
@@ -7599,8 +7843,8 @@
         noValidation: [{ type: i0.Input }],
         decimals: [{ type: i0.Input }],
         modelChange: [{ type: i0.Output }],
-        showButtonsOnFocusOnly: [{ type: i0.HostBinding, args: ["class.show-buttons-on-focus-only",] }],
-        hasLabel: [{ type: i0.HostBinding, args: ["class.has-label",] }],
+        showButtonsOnFocusOnly: [{ type: i0.HostBinding, args: ['class.show-buttons-on-focus-only',] }],
+        hasLabel: [{ type: i0.HostBinding, args: ['class.has-label',] }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-input-number-picker',] }]
     };
     __decorate([
@@ -7609,16 +7853,17 @@
 
     var InputTextComponent = /** @class */ (function (_super) {
         __extends(InputTextComponent, _super);
-        function InputTextComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputTextComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _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;
@@ -7687,21 +7932,24 @@
     }(BaseInputComponent));
     InputTextComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-input-text",
-                    template: "\n    <div class=\"input-text-wrapper\">\n      <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\" (click)=\"handleLeftIconClick($event)\"></co-icon>\n      <div *ngIf=\"leftIcon\" class=\"spacer\"></div>\n      <div class=\"input-wrapper\">\n        <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n               [textContent]=\"placeholder\"></label>\n        <input #input\n               [type]=\"digitsOnly ? 'number' : type\"\n               [ngModel]=\"model\"\n               [min]=\"type === 'number' && this.min ? this.min : undefined\"\n               [max]=\"type === 'number' && this.max ? this.max : undefined\"\n               [readonly]=\"readonly\"\n               [required]=\"required\"\n               (ngModelChange)=\"modelChange.emit($event)\"\n               (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n        >\n      </div>\n      <div *ngIf=\"rightIcon\" class=\"spacer\"></div>\n      <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\" (click)=\"handleRightIconClick($event)\"></co-icon>\n    </div>\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                       [committing]=\"committing\"\n                       [commitFinished]=\"commitFinished\"\n                       (commitClick)=\"commitClick($event)\"\n                       (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
+                    selector: 'co-input-text',
+                    template: "\n        <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n            <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n                     (click)=\"handleLeftIconClick($event)\"></co-icon>\n            <div *ngIf=\"leftIcon\" class=\"spacer\"></div>\n            <div class=\"input-wrapper\">\n                <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n                       [textContent]=\"placeholder\"></label>\n                <input #input\n                       [type]=\"digitsOnly ? 'number' : type\"\n                       [ngModel]=\"model\"\n                       [min]=\"type === 'number' && this.min ? this.min : undefined\"\n                       [max]=\"type === 'number' && this.max ? this.max : undefined\"\n                       [readonly]=\"readonly\"\n                       [required]=\"required\"\n                       (ngModelChange)=\"modelChange.emit($event)\"\n                       (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n                >\n            </div>\n            <div *ngIf=\"rightIcon\" class=\"spacer\"></div>\n            <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\"\n                     (click)=\"handleRightIconClick($event)\"></co-icon>\n        </div>\n        <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                           [committing]=\"committing\"\n                           [commitFinished]=\"commitFinished\"\n                           (commitClick)=\"commitClick($event)\"\n                           (cancelClick)=\"cancelClick($event)\"\n        >\n        </co-commit-buttons>\n        <div class=\"required-indicator\"></div>\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputTextComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputTextComponent
-                        }],
+                        }
+                    ],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputTextComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
@@ -7725,32 +7973,12 @@
         hideArrowButtons: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hide-arrows',] }],
         leftIconClick: [{ type: i0.Output }],
         rightIconClick: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-input-text",] }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-text',] }],
         hasLeftIcon: [{ type: i0.HostBinding, args: ['class.has-left-icon',] }],
         hasRightIcon: [{ type: i0.HostBinding, args: ['class.has-right-icon',] }],
-        hasOwnLabel: [{ type: i0.HostBinding, args: ["class.has-own-label",] }]
+        hasOwnLabel: [{ type: i0.HostBinding, args: ['class.has-own-label',] }]
     };
 
-    var ValidationErrorModule = /** @class */ (function () {
-        function ValidationErrorModule() {
-        }
-        return ValidationErrorModule;
-    }());
-    ValidationErrorModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        IconModule
-                    ],
-                    declarations: [
-                        ValidationErrorComponent
-                    ],
-                    exports: [
-                        ValidationErrorComponent
-                    ]
-                },] }
-    ];
-
     var InputTextModule = /** @class */ (function () {
         function InputTextModule() {
         }
@@ -7767,7 +7995,8 @@
                         ej2AngularInputs.TextBoxAllModule,
                         ej2AngularInputs.NumericTextBoxModule,
                         ValidationErrorModule,
-                        CommitButtonsModule
+                        CommitButtonsModule,
+                        OverlayModule
                     ],
                     declarations: [
                         InputTextComponent
@@ -7798,10 +8027,11 @@
 
     var InputRadioButtonComponent = /** @class */ (function (_super) {
         __extends(InputRadioButtonComponent, _super);
-        function InputRadioButtonComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputRadioButtonComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
@@ -7831,19 +8061,21 @@
     }(BaseInputComponent));
     InputRadioButtonComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-input-radio-button",
-                    template: "\n    <div class=\"outer-circle\" [class.selected]=\"model\">\n      <div class=\"inner-circle\" *ngIf=\"model\" @showSelected></div>\n    </div>\n    <div class=\"label\" *ngIf=\"label\" [textContent]=\"label\"></div>\n    <input #input [ngModel]=\"model\" type=\"hidden\">\n  ",
-                    providers: [{
+                    selector: 'co-input-radio-button',
+                    template: "\n        <div class=\"outer-circle\" [class.selected]=\"model\">\n            <div class=\"inner-circle\" *ngIf=\"model\" @showSelected></div>\n        </div>\n        <div class=\"label\" *ngIf=\"label\" [textContent]=\"label\"></div>\n        <input #input [ngModel]=\"model\" type=\"hidden\">\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputRadioButtonComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputRadioButtonComponent
-                        }],
+                        }
+                    ],
                     animations: [
-                        animations.trigger("showSelected", [
-                            animations.state("void", animations.style({ transform: "scale(0)" })),
-                            animations.state("*", animations.style({ transform: "scale(1)" })),
-                            animations.transition("void <=> *", animations.animate("200ms ease-in-out")),
+                        animations.trigger('showSelected', [
+                            animations.state('void', animations.style({ transform: 'scale(0)' })),
+                            animations.state('*', animations.style({ transform: 'scale(1)' })),
+                            animations.transition('void <=> *', animations.animate('200ms ease-in-out')),
                         ])
                     ],
                     encapsulation: i0.ViewEncapsulation.None
@@ -7852,15 +8084,16 @@
     InputRadioButtonComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
         { type: i0.ElementRef }
     ]; };
     InputRadioButtonComponent.propDecorators = {
-        isModelSelected: [{ type: i0.HostBinding, args: ["class.selected",] }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-radio-button",] }],
-        handleClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }]
+        isModelSelected: [{ type: i0.HostBinding, args: ['class.selected',] }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-radio-button',] }],
+        handleClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
     };
 
     var InputRadioButtonModule = /** @class */ (function () {
@@ -7913,6 +8146,9 @@
         { type: i0.Component, args: [{
                     selector: 'co-input-search',
                     template: "\n    <co-input-text\n      [ngClass]=\"customCssClass\"\n      [model]=\"model\"\n      [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n      [rightIcon]=\"useRightIcon ? searchIcon : null\"\n      [leftIconData]=\"useLeftIcon && leftIconData ? leftIconData : undefined\"\n      [rightIconData]=\"useRightIcon && rightIconData ? rightIconData : undefined\"\n      [placeholder]=\"placeholder\"\n      [customHeight]=\"true\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n      (leftIconClick)=\"leftIconClick.emit($event)\"\n      (rightIconClick)=\"rightIconClick.emit($event)\"\n    ></co-input-text>\n  ",
+                    providers: [
+                        OverlayService
+                    ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -7956,15 +8192,16 @@
 
     var InputTextareaComponent = /** @class */ (function (_super) {
         __extends(InputTextareaComponent, _super);
-        function InputTextareaComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputTextareaComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _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.prototype._markAsOnPush.call(_this);
             return _this;
@@ -7976,21 +8213,24 @@
     }(BaseInputComponent));
     InputTextareaComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-input-textarea",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea\n      #input\n      type=\"textarea\"\n      [ngModel]=\"model\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n    ></textarea>\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                       [committing]=\"committing\"\n                       [commitFinished]=\"commitFinished\"\n                       (commitClick)=\"commitClick($event)\"\n                       (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
+                    selector: 'co-input-textarea',
+                    template: "\n        <label [textContent]=\"placeholder\"></label>\n        <textarea\n                #input\n                type=\"textarea\"\n                [ngModel]=\"model\"\n                [readonly]=\"readonly\"\n                [required]=\"required\"\n                (ngModelChange)=\"modelChange.emit($event)\"\n        ></textarea>\n        <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                           [committing]=\"committing\"\n                           [commitFinished]=\"commitFinished\"\n                           (commitClick)=\"commitClick($event)\"\n                           (cancelClick)=\"cancelClick($event)\"\n        >\n        </co-commit-buttons>\n        <div class=\"required-indicator\"></div>\n    ",
+                    providers: [
+                        OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputTextareaComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputTextareaComponent
-                        }],
+                        }
+                    ],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputTextareaComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
@@ -7998,8 +8238,8 @@
     ]; };
     InputTextareaComponent.propDecorators = {
         placeholder: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-input-textarea",] }],
-        hasOwnLabel: [{ type: i0.HostBinding, args: ["class.has-own-label",] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-textarea',] }],
+        hasOwnLabel: [{ type: i0.HostBinding, args: ['class.has-own-label',] }]
     };
 
     var InputTextareaModule = /** @class */ (function () {
@@ -8026,10 +8266,11 @@
 
     var MultiSelectListComponent = /** @class */ (function (_super) {
         __extends(MultiSelectListComponent, _super);
-        function MultiSelectListComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function MultiSelectListComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
@@ -8040,14 +8281,14 @@
              */
             _this.fields = {};
             _this.showSelectAll = true;
-            _this.mode = "Default";
+            _this.mode = 'Default';
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
         Object.defineProperty(MultiSelectListComponent.prototype, "showCheckbox", {
             set: function (value) {
                 if (value) {
-                    this.mode = "CheckBox";
+                    this.mode = 'CheckBox';
                 }
             },
             enumerable: false,
@@ -8068,9 +8309,10 @@
     }(BaseInputComponent));
     MultiSelectListComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-multi-select-list",
-                    template: "\n    <ejs-multiselect\n      [dataSource]=\"collection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"model\"\n      [mode]=\"mode\"\n      [fields]=\"fields\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [footerTemplate]=\"footerTemplate\"\n      [selectAllText]=\"'Select All'\"\n      [showSelectAll]=showSelectAll\n      [ngModel]=\"model\"\n      (ngModelChange)=\"handleModelChange($event)\"\n      (valueChange)=\"handleModelChange($event)\"\n    ></ejs-multiselect>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    selector: 'co-multi-select-list',
+                    template: "\n        <ejs-multiselect\n                [dataSource]=\"collection\"\n                [placeholder]=\"placeholder\"\n                [value]=\"model\"\n                [mode]=\"mode\"\n                [fields]=\"fields\"\n                [readonly]=\"readonly\"\n                [itemTemplate]=\"itemTemplate\"\n                [headerTemplate]=\"headerTemplate\"\n                [valueTemplate]=\"valueTemplate\"\n                [footerTemplate]=\"footerTemplate\"\n                [selectAllText]=\"'Select All'\"\n                [showSelectAll]=showSelectAll\n                [ngModel]=\"model\"\n                (ngModelChange)=\"handleModelChange($event)\"\n                (valueChange)=\"handleModelChange($event)\"\n        ></ejs-multiselect>\n        <div class=\"required-indicator\"></div>\n    ",
                     providers: [
+                        OverlayService,
                         ej2AngularDropdowns.CheckBoxSelectionService,
                         {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -8086,6 +8328,7 @@
     MultiSelectListComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
@@ -8101,7 +8344,7 @@
         footerTemplate: [{ type: i0.Input }],
         showSelectAll: [{ type: i0.Input }],
         showCheckbox: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-multi-select-list",] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-multi-select-list',] }]
     };
 
     var MultiSelectListModule = /** @class */ (function () {
@@ -11460,121 +11703,6 @@
                 },] }
     ];
 
-    var OverlayDirective = /** @class */ (function () {
-        function OverlayDirective(elementRef) {
-            this.keepInView = false;
-            this._elementRef = elementRef;
-        }
-        Object.defineProperty(OverlayDirective.prototype, "parent", {
-            set: function (value) {
-                if (value && value.elementRef) {
-                    this._parent = value.elementRef;
-                }
-                else {
-                    if (this._parent) {
-                        this._observer.disconnect();
-                    }
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        OverlayDirective.prototype.handleScroll = function (event) {
-            this._checkAndPlaceElement();
-        };
-        OverlayDirective.prototype.ngOnDestroy = function () {
-            // document.removeEventListener("scroll", (event) => this._handleScroll(event), false);
-            this._observer.disconnect();
-            this._elementRef = undefined;
-            this._parent = undefined;
-        };
-        OverlayDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            // document.addEventListener("scroll", (event) => this._handleScroll(event), false);
-            this._checkAndPlaceElement();
-            this._observer = new ResizeObserver(function (entries) {
-                _this._checkAndPlaceElement();
-            });
-            this._observer.observe(document.body);
-        };
-        OverlayDirective.prototype._checkAndPlaceElement = function () {
-            var elementRect = this._elementRef.nativeElement.getBoundingClientRect();
-            var parentRect = this._parent.nativeElement.getBoundingClientRect();
-            this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
-        };
-        OverlayDirective.prototype._placeElement = function (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 (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;
-                    }
-                }
-            }
-        };
-        return OverlayDirective;
-    }());
-    OverlayDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: "[overlay]"
-                },] }
-    ];
-    OverlayDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    OverlayDirective.propDecorators = {
-        parent: [{ type: i0.Input, args: ["overlay",] }],
-        keepInView: [{ type: i0.Input }],
-        handleScroll: [{ type: i0.HostListener, args: ["document:scroll", ["$event"],] }]
-    };
-
-    var OverlayParentDirective = /** @class */ (function () {
-        function OverlayParentDirective(elementRef) {
-            this.elementRef = elementRef;
-        }
-        OverlayParentDirective.prototype.ngOnDestroy = function () {
-            this.elementRef = undefined;
-        };
-        return OverlayParentDirective;
-    }());
-    OverlayParentDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[overlayParent]',
-                    exportAs: 'overlayParent'
-                },] }
-    ];
-    OverlayParentDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var OverlayModule = /** @class */ (function () {
-        function OverlayModule() {
-        }
-        return OverlayModule;
-    }());
-    OverlayModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        OverlayDirective,
-                        OverlayParentDirective
-                    ],
-                    exports: [
-                        OverlayDirective,
-                        OverlayParentDirective
-                    ]
-                },] }
-    ];
-
     var TooltipComponent = /** @class */ (function () {
         function TooltipComponent(_elementRef, _changeDetector) {
             this._elementRef = _elementRef;
@@ -11992,28 +12120,6 @@
                 },] }
     ];
 
-    var ColorSequenceService = /** @class */ (function () {
-        function ColorSequenceService() {
-            this.colors = new Map();
-        }
-        ColorSequenceService.prototype.getRandomColor = function (id) {
-            if (this.colors.has(id)) {
-                return this.colors.get(id);
-            }
-            var randomColor = Math.floor(Math.random() * 16777215).toString(16);
-            var result = '#' + randomColor;
-            this.colors.set(id, result);
-            return result;
-        };
-        return ColorSequenceService;
-    }());
-    ColorSequenceService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ColorSequenceService_Factory() { return new ColorSequenceService(); }, token: ColorSequenceService, providedIn: "root" });
-    ColorSequenceService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-
     var FilterItemViewmodel = /** @class */ (function () {
         function FilterItemViewmodel(code, description, checked, count, valueName) {
             this.checked = false;
@@ -12038,6 +12144,28 @@
         return FilterViewmodel;
     }());
 
+    var ColorSequenceService = /** @class */ (function () {
+        function ColorSequenceService() {
+            this.colors = new Map();
+        }
+        ColorSequenceService.prototype.getRandomColor = function (id) {
+            if (this.colors.has(id)) {
+                return this.colors.get(id);
+            }
+            var randomColor = Math.floor(Math.random() * 16777215).toString(16);
+            var result = '#' + randomColor;
+            this.colors.set(id, result);
+            return result;
+        };
+        return ColorSequenceService;
+    }());
+    ColorSequenceService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ColorSequenceService_Factory() { return new ColorSequenceService(); }, token: ColorSequenceService, providedIn: "root" });
+    ColorSequenceService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     /*
      * Public API Surface of corecomponents
      */
@@ -12131,6 +12259,7 @@
     exports.ObserveVisibilityModule = ObserveVisibilityModule;
     exports.OrientationOfDirection = OrientationOfDirection;
     exports.OverlayModule = OverlayModule;
+    exports.OverlayService = OverlayService;
     exports.PaginationBarComponent = PaginationBarComponent;
     exports.PaginationBarModule = PaginationBarModule;
     exports.PaginationComponent = PaginationComponent;
@@ -12156,15 +12285,15 @@
     exports.showHideDialogAnimation = showHideDialogAnimation;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;
-    exports["ɵba"] = PaginationService;
-    exports["ɵbb"] = PaginatePipe;
-    exports["ɵbc"] = SimpleGridCellComponent;
-    exports["ɵbd"] = PrependPipeModule;
-    exports["ɵbe"] = PrependPipe;
-    exports["ɵbf"] = ClickOutsideDirective;
-    exports["ɵbg"] = ClickOutsideMasterService;
-    exports["ɵbh"] = OverlayDirective;
-    exports["ɵbi"] = OverlayParentDirective;
+    exports["ɵba"] = BaseSimpleGridComponent;
+    exports["ɵbb"] = ObserveVisibilityDirective;
+    exports["ɵbc"] = PaginationService;
+    exports["ɵbd"] = PaginatePipe;
+    exports["ɵbe"] = SimpleGridCellComponent;
+    exports["ɵbf"] = PrependPipeModule;
+    exports["ɵbg"] = PrependPipe;
+    exports["ɵbh"] = ClickOutsideDirective;
+    exports["ɵbi"] = ClickOutsideMasterService;
     exports["ɵbj"] = TooltipModule;
     exports["ɵbk"] = TooltipComponent;
     exports["ɵbl"] = TooltipDirective;
@@ -12191,10 +12320,10 @@
     exports["ɵt"] = CommitButtonsModule;
     exports["ɵu"] = CommitButtonsComponent;
     exports["ɵv"] = ValidationErrorModule;
-    exports["ɵw"] = ValidationErrorComponent;
-    exports["ɵx"] = PopupShowerService;
-    exports["ɵy"] = BaseSimpleGridComponent;
-    exports["ɵz"] = ObserveVisibilityDirective;
+    exports["ɵw"] = OverlayDirective;
+    exports["ɵx"] = OverlayParentDirective;
+    exports["ɵy"] = ValidationErrorComponent;
+    exports["ɵz"] = PopupShowerService;
 
     Object.defineProperty(exports, '__esModule', { value: true });