@colijnit/corecomponents_v12 12.0.102 → 12.0.104

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,78 @@
     ]; };
     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, events) {
+            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];
+                    }
+                }
+            }
+            if (events) {
+                var _loop_1 = function (event) {
+                    if (events.hasOwnProperty(event)) {
+                        this_1._componentRef.instance[event].subscribe(function (value) { return events[event](value); });
+                    }
+                };
+                var this_1 = this;
+                for (var event in events) {
+                    _loop_1(event);
+                }
+            }
+            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 +4411,7 @@
             this.canSaveOrCancel = false;
             this.committing = false;
             this.commitFinished = false;
+            this.validationError = "";
             this._markedAsUserTouched = false;
             this._destroyed = false;
             this._hasOnPushCdStrategy = false;
@@ -4630,17 +4689,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 +4816,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 +5006,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 +5190,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 +5250,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 +5584,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 +5609,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 +5628,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 +5644,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 +6366,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 +6398,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 +6417,7 @@
         { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: IconCacheService },
         { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
         { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
@@ -6357,7 +6427,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 +6486,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 +6505,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 +6523,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 +6535,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 +6560,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 +6589,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 +6626,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 +6651,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 +6712,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 +6729,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 +6856,169 @@
                 },] }
     ];
 
+    var OverlayDirective = /** @class */ (function () {
+        function OverlayDirective(elementRef) {
+            var _this = this;
+            this.keepInView = false;
+            this.inheritWidth = 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";
+            }
+            if (this.inheritWidth) {
+                this._elementRef.nativeElement.style.width = parentRect.width + "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 }],
+        inheritWidth: [{ 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 +7033,9 @@
                         IconModule,
                         AppendPipeModule,
                         ej2AngularCalendars.DatePickerModule,
-                        CommitButtonsModule
+                        CommitButtonsModule,
+                        ValidationErrorModule,
+                        OverlayModule
                     ],
                     schemas: [
                         i0.NO_ERRORS_SCHEMA
@@ -6802,8 +7049,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 +7075,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 +7101,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 +7114,9 @@
                     imports: [
                         BaseModule,
                         ej2AngularCalendars.DateRangePickerModule,
-                        forms.FormsModule
+                        forms.FormsModule,
+                        ValidationErrorModule,
+                        OverlayModule
                     ],
                     declarations: [
                         InputDateRangePickerComponent
@@ -6878,10 +7130,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 +7182,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 +7580,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 +7825,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 +7841,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 +7859,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 +7869,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 +7948,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 +7989,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 +8011,8 @@
                         ej2AngularInputs.TextBoxAllModule,
                         ej2AngularInputs.NumericTextBoxModule,
                         ValidationErrorModule,
-                        CommitButtonsModule
+                        CommitButtonsModule,
+                        OverlayModule
                     ],
                     declarations: [
                         InputTextComponent
@@ -7798,10 +8043,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 +8077,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 +8100,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 +8162,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 +8208,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 +8229,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 +8254,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 +8282,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 +8297,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 +8325,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 +8344,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 +8360,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 () {
@@ -10970,266 +11229,222 @@
                 },] }
     ];
 
-    var FilterPipe = /** @class */ (function () {
-        function FilterPipe() {
+    var ListOfValuesPopupComponent = /** @class */ (function (_super) {
+        __extends(ListOfValuesPopupComponent, _super);
+        function ListOfValuesPopupComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.chosenOption = new i0.EventEmitter();
+            _this.closePopup = new i0.EventEmitter();
+            _this.displayField = 'description';
+            _this.searchDisabled = false;
+            _this.filteredOptions = _this.collection;
+            _this.searchTerm = '';
+            _this._collection = [];
+            return _this;
         }
-        FilterPipe.prototype.transform = function (items, field, value) {
-            if (!items || !field) {
-                return items;
+        ListOfValuesPopupComponent.prototype.showClass = function () {
+            return true;
+        };
+        Object.defineProperty(ListOfValuesPopupComponent.prototype, "collection", {
+            get: function () {
+                return this._collection;
+            },
+            set: function (value) {
+                this._collection = value || [];
+                this.filterOptions();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ListOfValuesPopupComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            if (this.model) {
+                this.selectedModel = this.model[this.displayField];
             }
-            return items.filter(function (item) { return item[field] === value; });
         };
-        return FilterPipe;
-    }());
-    FilterPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: "filter",
-                    pure: false
-                },] }
-    ];
-
-    var FilterPipeModule = /** @class */ (function () {
-        function FilterPipeModule() {
-        }
-        return FilterPipeModule;
-    }());
-    FilterPipeModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        FilterPipe
+        ListOfValuesPopupComponent.prototype.filterOptions = function () {
+            var _this = this;
+            this.filteredOptions = this.collection.filter(function (option) { return option[_this.displayField].toLowerCase().includes(_this.searchTerm.toLowerCase()); });
+        };
+        ListOfValuesPopupComponent.prototype.onOptionClick = function (option) {
+            this.model = option;
+            this.selectedModel = this.model[this.displayField];
+            this.modelChange.emit(this.model);
+            this.searchTerm = option.label;
+            this.searchTerm = "";
+            this.filterOptions();
+            this.chosenOption.emit(option);
+        };
+        ListOfValuesPopupComponent.prototype.optionClicked = function () {
+            this.overlayService.removeComponent();
+            this.closePopup.emit();
+        };
+        return ListOfValuesPopupComponent;
+    }(BaseInputComponent));
+    ListOfValuesPopupComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-list-of-values-popup",
+                    template: "\n          <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\" (clickOutside)=\"optionClicked()\">\n            <co-input-text *ngIf=\"!searchDisabled\" [(model)]=\"searchTerm\" [placeholder]=\"searchPlaceholder\" (modelChange)=\"filterOptions()\"></co-input-text>\n            <ul>\n              <li *ngFor=\"let option of filteredOptions\" [class.selected]=\"option === model\" (click)=\"onOptionClick(option)\">\n                <span [textContent]=\"option[displayField]\"></span>\n              </li>\n            </ul>\n          </div>\n\n    ",
+                    providers: [
+                        OverlayService
                     ],
-                    exports: [
-                        FilterPipe
-                    ]
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
-    ];
+    ];
+    ListOfValuesPopupComponent.propDecorators = {
+        showClass: [{ type: i0.HostBinding, args: ["class.co-list-of-values-popup",] }],
+        chosenOption: [{ type: i0.Output }],
+        closePopup: [{ type: i0.Output }],
+        displayField: [{ type: i0.Input }],
+        searchPlaceholder: [{ type: i0.Input }],
+        customCssClass: [{ type: i0.Input }],
+        searchDisabled: [{ type: i0.Input }],
+        parentForOverlay: [{ type: i0.Input }],
+        collection: [{ type: i0.Input }]
+    };
 
-    var FilterItemComponent = /** @class */ (function () {
-        function FilterItemComponent(iconService) {
-            this.iconService = iconService;
-            this.icons = exports.CoreComponentsIcon;
-            this.initialLimit = 10;
-            this.expanded = false;
-            // Set to false to use filter item with a multi selectable collection. Set to true to specify custom content
-            this.customContent = false;
-            // Set to true to show all results. Set to false to get 'show more' and 'show less' buttons to expand and contract.
-            this.showAllResults = false;
-            this.singleSelect = false;
-            this.filterButtonLabel = "Search";
-            this.searchPlaceholder = 'Search...';
-            this.showMoreLabel = 'Show more';
-            this.showLessLabel = 'Show less';
-            this.noResultsLabel = "No results";
-            this.collectionChange = new i0.EventEmitter();
-            this.filterButtonClicked = new i0.EventEmitter();
-            this.filteredCollection = [];
-            this.limitTo = 10;
-            this.filterText = "";
-            this.showButton = false;
-            this._collection = [];
+    var ListOfValuesComponent = /** @class */ (function (_super) {
+        __extends(ListOfValuesComponent, _super);
+        function ListOfValuesComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.icons = exports.CoreComponentsIcon;
+            _this.multiselect = false;
+            _this.displayField = 'description';
+            _this.searchDisabled = false;
+            _this.selectedOptions = [];
+            _this.filteredOptions = _this.collection;
+            _this.searchTerm = '';
+            _this.isSelectOpen = false;
+            _this.state = 'default';
+            _this.searchClicked = false;
+            _this.multiselectTags = [];
+            _this._collection = [];
+            return _this;
         }
-        Object.defineProperty(FilterItemComponent.prototype, "collection", {
+        ListOfValuesComponent.prototype.showClass = function () {
+            return true;
+        };
+        Object.defineProperty(ListOfValuesComponent.prototype, "collection", {
             get: function () {
                 return this._collection;
             },
             set: function (value) {
-                var _a;
-                this._collection = value;
-                this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
+                this._collection = value || [];
+                this.filterOptions();
             },
             enumerable: false,
             configurable: true
         });
-        FilterItemComponent.prototype.showClass = function () {
-            return true;
-        };
-        FilterItemComponent.prototype.ngOnInit = function () {
-            this.setToInitialLimit();
-            this.showButton = this.valueSelected();
-        };
-        FilterItemComponent.prototype.setToInitialLimit = function () {
-            this.limitTo = this.initialLimit;
-        };
-        FilterItemComponent.prototype.increaseLimit = function () {
-            this.limitTo += 10;
-        };
-        FilterItemComponent.prototype.moreToShow = function () {
-            var _a;
-            if (this.showAllResults) {
-                return false;
+        ListOfValuesComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            if (this.model) {
+                this.selectedModel = this.model[this.displayField];
             }
-            return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) > this.limitTo;
         };
-        FilterItemComponent.prototype.lessToShow = function () {
-            var _a, _b;
-            if (this.showAllResults) {
-                return false;
+        ListOfValuesComponent.prototype.filterOptions = function () {
+            var _this = this;
+            if (!this.multiselect) {
+                this.filteredOptions = this.collection.filter(function (option) { return option[_this.displayField].toLowerCase().includes(_this.searchTerm.toLowerCase()); });
             }
-            return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) <= this.limitTo && ((_b = this.filteredCollection) === null || _b === void 0 ? void 0 : _b.length) > this.initialLimit;
-        };
-        FilterItemComponent.prototype.handleModelChange = function (model) {
-            this.showButton = true;
-            if (this.singleSelect) {
-                this.collection.forEach(function (m) {
-                    if (m.code !== model.code && m.description !== model.description) {
-                        m.checked = false;
+            else {
+                this.selectedOptions = this.selectedOptions.filter(function (option) {
+                    if (_this.collection) {
+                        return _this.searchTerm.includes(option.label);
+                    }
+                    else {
+                        return _this.searchTerm.includes(option.value);
                     }
                 });
             }
-            model.checked = !model.checked;
-            this.collectionChange.emit(this.collection);
         };
-        FilterItemComponent.prototype.valueSelected = function () {
-            if (this.collection) {
-                return !!this.collection.find(function (c) { return c.checked; });
+        ListOfValuesComponent.prototype.onOptionClick = function (option) {
+            if (!this.multiselect) {
+                this.model = option;
+                this.selectedModel = this.model[this.displayField];
+                this.modelChange.emit(this.model);
+                this.searchTerm = option.label;
+                this.isSelectOpen = false;
+                this.searchTerm = "";
+                this.filterOptions();
+            }
+            if (this.multiselect) {
+                if (this.selectedOptions.includes(option)) {
+                    this.selectedOptions.splice(this.selectedOptions.indexOf(option), 1);
+                }
+                else {
+                    this.selectedOptions.push(option);
+                }
+                this.modelChange.emit(this.selectedOptions);
             }
-            return false;
         };
-        // Applies filter to the collection.
-        FilterItemComponent.prototype.applyFilter = function (text) {
-            var _a, _b;
-            return __awaiter(this, void 0, void 0, function () {
-                var _c, filterText, filteredItemCount;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            if (!(!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn)) return [3 /*break*/, 3];
-                            if (!(text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length)) return [3 /*break*/, 2];
-                            _c = this;
-                            return [4 /*yield*/, this.collectionLoadFn(text)];
-                        case 1:
-                            _c.collection = _d.sent();
-                            return [3 /*break*/, 3];
-                        case 2:
-                            if (text.length < this.minSearchCharsToLoadCollection) {
-                                this.collection = undefined;
-                            }
-                            _d.label = 3;
-                        case 3:
-                            this.filterText = text;
-                            if (!this.collection) {
-                                return [2 /*return*/, []];
-                            }
-                            filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-                            filteredItemCount = 0;
-                            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
-                                var _a;
-                                var labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-                                var isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
-                                if (isHiddenByFilter) {
-                                    return false;
-                                }
-                                else {
-                                    filteredItemCount++;
-                                    return true;
-                                }
-                            });
-                            return [2 /*return*/];
-                    }
+        ListOfValuesComponent.prototype.toggleSelect = function () {
+            var _this = this;
+            this.isSelectOpen = !this.isSelectOpen;
+            if (this.isSelectOpen) {
+                this.overlayService.createComponent(ListOfValuesPopupComponent, {
+                    parentForOverlay: this.parentForOverlay,
+                    customCssClass: this.customCssClass,
+                    searchDisabled: this.searchDisabled,
+                    searchPlaceholder: this.searchPlaceholder,
+                    displayField: this.displayField,
+                    collection: this.collection
+                }, {
+                    chosenOption: function (value) { return _this.optionChosen(value); },
+                    closePopup: function () { return _this.closePopup(); }
                 });
-            });
+            }
+            else {
+                this.overlayService.removeComponent();
+            }
+            this.state = (this.state === 'default' ? 'rotated' : 'default');
         };
-        FilterItemComponent.prototype.onButtonClicked = function () {
-            this.filterButtonClicked.emit();
+        ListOfValuesComponent.prototype.multiselectOkClick = function () {
+            this.searchClicked = false;
         };
-        return FilterItemComponent;
-    }());
-    FilterItemComponent.decorators = [
+        ListOfValuesComponent.prototype.createMultiSelectTags = function (tags) {
+            this.multiselectTags = tags;
+        };
+        ListOfValuesComponent.prototype.openMultiselectSearch = function () {
+            this.searchClicked = true;
+        };
+        ListOfValuesComponent.prototype.optionChosen = function (option) {
+            this.selectedModel = option[this.displayField];
+        };
+        ListOfValuesComponent.prototype.closePopup = function () {
+            this.overlayService.removeComponent();
+        };
+        return ListOfValuesComponent;
+    }(BaseInputComponent));
+    ListOfValuesComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-filter-item",
-                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       [clickableLabel]=\"false\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush
+                    selector: "co-list-of-values",
+                    template: "\n      <div class=\"lov-container\">\n        <div class=\"lov-container-child\" *ngIf=\"!multiselect\">\n          <div class=\"search-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n            <co-input-text class=\"lov-search no-focus-line\"\n                           type=\"text\"\n                           [model]=\"selectedModel\"\n                           [placeholder]=\"label\"\n                           [readonly]=\"readonly\"\n                           [disabled]=\"disabled\"\n                           [required]=\"required\"\n                           [rightIcon]=\"icons.ArrowPointDown\"\n                           (click)=\"toggleSelect()\"\n                           (rightIconClick)=\"toggleSelect()\"\n            ></co-input-text>\n          </div>\n\n\n\n        </div>\n        <div *ngIf=\"multiselect\">\n          <div class=\"search-wrapper-multiselect\" (click)=\"openMultiselectSearch()\" *ngIf=\"!searchClicked\">\n            <div class=\"tag-wrapper\">\n              <ul class=\"tag-ul-wrapper\">\n                <li class=\"tag\" *ngFor=\"let tags of multiselectTags\">\n                  <span [textContent]=\"tags.label\"></span>\n                </li>\n              </ul>\n            </div>\n          </div>\n          <div *ngIf=\"searchClicked\">\n            <co-list-of-values-multiselect-search [collection]=\"filteredOptions\" [returnChosenCollection]=\"multiselectTags\" (okButtonClicked)=\"multiselectOkClick()\" (chosenCollection)=\"createMultiSelectTags($event)\"></co-list-of-values-multiselect-search>\n          </div>\n        </div>\n      </div>\n    ",
+                    providers: [
+                        OverlayService
+                    ],
+                    animations: [
+                        animations.trigger('rotatedState', [
+                            animations.state('default', animations.style({ transform: 'rotate(0)' })),
+                            animations.state('rotated', animations.style({ transform: 'rotate(-180deg)' })),
+                            animations.transition('rotated => default', animations.animate('300ms ease-out')),
+                            animations.transition('default => rotated', animations.animate('300ms ease-out'))
+                        ])
+                    ],
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
-    FilterItemComponent.ctorParameters = function () { return [
-        { type: IconCacheService }
-    ]; };
-    FilterItemComponent.propDecorators = {
+    ListOfValuesComponent.propDecorators = {
+        parentForOverlay: [{ type: i0.ViewChild, args: ["parentForOverlay", { read: i0.ElementRef },] }],
+        multiselect: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-list-of-values",] }],
+        displayField: [{ type: i0.Input }],
         collection: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        initialLimit: [{ type: i0.Input }],
-        expanded: [{ type: i0.Input }],
-        minSearchCharsToLoadCollection: [{ type: i0.Input }],
-        collectionLoadFn: [{ type: i0.Input }],
-        customContent: [{ type: i0.Input }],
-        showAllResults: [{ type: i0.Input }],
-        singleSelect: [{ type: i0.Input }],
-        filterButtonLabel: [{ type: i0.Input }],
         searchPlaceholder: [{ type: i0.Input }],
-        showMoreLabel: [{ type: i0.Input }],
-        showLessLabel: [{ type: i0.Input }],
-        noResultsLabel: [{ type: i0.Input }],
-        collectionChange: [{ type: i0.Output }],
-        filterButtonClicked: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-filter-item",] }]
+        label: [{ type: i0.Input }],
+        customCssClass: [{ type: i0.Input }],
+        searchDisabled: [{ type: i0.Input }]
     };
 
-    // A pipe for prepending strings to other strings in view templates.
-    var PrependPipe = /** @class */ (function () {
-        function PrependPipe() {
-        }
-        PrependPipe.prototype.transform = function (value, prepend) {
-            if (!value) {
-                return "";
-            }
-            if (!prepend) {
-                return value;
-            }
-            return prepend + value;
-        };
-        return PrependPipe;
-    }());
-    PrependPipe.decorators = [
-        { type: i0.Pipe, args: [{ name: "prepend" },] }
-    ];
-
-    var PrependPipeModule = /** @class */ (function () {
-        function PrependPipeModule() {
-        }
-        return PrependPipeModule;
-    }());
-    PrependPipeModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        PrependPipe
-                    ],
-                    exports: [
-                        PrependPipe
-                    ]
-                },] }
-    ];
-
-    var FilterItemModule = /** @class */ (function () {
-        function FilterItemModule() {
-        }
-        return FilterItemModule;
-    }());
-    FilterItemModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        CollapsibleModule,
-                        InputTextModule,
-                        InputCheckboxMultiSelectModule,
-                        InputCheckboxModule,
-                        IconModule,
-                        scrolling.ScrollingModule,
-                        AppendPipeModule,
-                        PrependPipeModule,
-                        InputTextModule,
-                        InputRadioButtonModule,
-                        InputTextModule
-                    ],
-                    declarations: [
-                        FilterItemComponent
-                    ],
-                    exports: [
-                        FilterItemComponent
-                    ]
-                },] }
-    ];
-
     // Human-readable JS keyboard codes, as in KeyboardEvent.key string values.
     var KeyboardKey;
     (function (KeyboardKey) {
@@ -11414,163 +11629,439 @@
                 });
             });
         };
-        ClickOutsideDirective.prototype.ngOnDestroy = function () {
-            this._master.removeClickOutside(this);
-            this.elementRef.nativeElement.removeEventListener('click', this.onClick, EventUtils.passiveCapture);
-            this.elementRef = undefined;
+        ClickOutsideDirective.prototype.ngOnDestroy = function () {
+            this._master.removeClickOutside(this);
+            this.elementRef.nativeElement.removeEventListener('click', this.onClick, EventUtils.passiveCapture);
+            this.elementRef = undefined;
+        };
+        return ClickOutsideDirective;
+    }());
+    ClickOutsideDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[clickOutside]",
+                    exportAs: 'clickOutside'
+                },] }
+    ];
+    ClickOutsideDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.NgZone },
+        { type: ClickOutsideMasterService }
+    ]; };
+    ClickOutsideDirective.propDecorators = {
+        enabled: [{ type: i0.Input, args: ["clickOutside",] }],
+        alwaysTrigger: [{ type: i0.Input }],
+        clickOutside: [{ type: i0.Output }]
+    };
+    __decorate([
+        InputBoolean()
+    ], ClickOutsideDirective.prototype, "alwaysTrigger", void 0);
+
+    var ClickoutsideModule = /** @class */ (function () {
+        function ClickoutsideModule() {
+        }
+        return ClickoutsideModule;
+    }());
+    ClickoutsideModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        ClickOutsideDirective
+                    ],
+                    providers: [
+                        ClickOutsideMasterService
+                    ],
+                    exports: [
+                        ClickOutsideDirective
+                    ]
+                },] }
+    ];
+
+    var ListOfValuesMultiselectSearch = /** @class */ (function (_super) {
+        __extends(ListOfValuesMultiselectSearch, _super);
+        function ListOfValuesMultiselectSearch() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.icons = exports.CoreComponentsIcon;
+            _this.chosenCollection = new i0.EventEmitter();
+            _this.okButtonClicked = new i0.EventEmitter();
+            _this.selectedCollection = [];
+            _this.selectedOptions = [];
+            _this.allOptionsSelected = false;
+            _this.searchTerm = '';
+            return _this;
+        }
+        ListOfValuesMultiselectSearch.prototype.showClass = function () {
+            return true;
+        };
+        Object.defineProperty(ListOfValuesMultiselectSearch.prototype, "filteredCollection", {
+            get: function () {
+                var _this = this;
+                if (this.searchTerm.trim() === '') {
+                    return this.collection;
+                }
+                return this.collection.filter(function (option) { return option.label.toLowerCase().includes(_this.searchTerm.toLowerCase()); });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ListOfValuesMultiselectSearch.prototype.ngOnInit = function () {
+            if (this.returnChosenCollection) {
+                this.selectedCollection = this.returnChosenCollection;
+            }
+        };
+        ListOfValuesMultiselectSearch.prototype.onOptionClick = function (option) {
+            var index = this.selectedCollection.findIndex(function (selectedOption) { return selectedOption.value === option.value; });
+            if (index !== -1) {
+                this.selectedCollection.splice(index, 1);
+            }
+            else {
+                this.selectedCollection.push(option);
+            }
+        };
+        ListOfValuesMultiselectSearch.prototype.okClicked = function () {
+            this.chosenCollection.emit(this.selectedCollection);
+            this.okButtonClicked.emit();
+        };
+        ListOfValuesMultiselectSearch.prototype.onToggleSelectAll = function () {
+            if (this.allOptionsSelected) {
+                this.selectedCollection = [];
+                this.allOptionsSelected = false;
+            }
+            else {
+                this.selectedCollection = __spreadArray([], __read(this.collection));
+                this.allOptionsSelected = true;
+            }
+        };
+        ListOfValuesMultiselectSearch.prototype.searchCollection = function () {
+            var _this = this;
+            this.selectedOptions = this.selectedOptions.filter(function (option) {
+                if (_this.collection) {
+                    return _this.searchTerm.includes(option.label);
+                }
+                else {
+                    return _this.searchTerm.includes(option.value);
+                }
+            });
+        };
+        return ListOfValuesMultiselectSearch;
+    }(BaseInputComponent));
+    ListOfValuesMultiselectSearch.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-list-of-values-multiselect-search",
+                    template: "\n        <div class=\"co-list-of-values-multiselect-search\">\n          <div class=\"list-of-values-multiselect-search-input-text\">\n            <co-input-text [placeholder]=\"'Zoeken...'\" [(model)]=\"searchTerm\" (input)=\"searchCollection()\"></co-input-text>\n          </div>\n          <div class=\"list-of-values-multiselect-options\">\n            <div class=\"list-of-values-multiselect-search-deselect\" (click)=\"onToggleSelectAll()\">\n              <span [textContent]=\"'(De)selecteer alles'\"></span>\n              <co-icon [icon]=\"icons.CheckRound\"></co-icon>\n            </div>\n            <div class=\"list-of-values-multiselect-list\">\n              <ul>\n                <li *ngFor=\"let option of filteredCollection\" (click)=\"onOptionClick(option)\">\n                  <co-input-checkbox class=\"lov-options-checkbox\" (modelChange)=\"onOptionClick(option)\" [model]=\"selectedCollection.includes(option)\"></co-input-checkbox>\n                  <span>{{ option.label }}</span>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-of-values-multiselect-ok-button\" (click)=\"okClicked()\">\n              <span [textContent]=\"'Ok'\"></span>\n              <co-icon [icon]=\"icons.Check\"></co-icon>\n            </div>\n          </div>\n        </div>\n    ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    ListOfValuesMultiselectSearch.propDecorators = {
+        showClass: [{ type: i0.HostBinding, args: ["class.co-list-of-values-multiselect-search",] }],
+        collection: [{ type: i0.Input }],
+        returnChosenCollection: [{ type: i0.Input }],
+        chosenCollection: [{ type: i0.Output }],
+        okButtonClicked: [{ type: i0.Output }]
+    };
+
+    var ListOfValuesMultiselectSearchModule = /** @class */ (function () {
+        function ListOfValuesMultiselectSearchModule() {
+        }
+        return ListOfValuesMultiselectSearchModule;
+    }());
+    ListOfValuesMultiselectSearchModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        InputTextModule,
+                        IconModule,
+                        InputCheckboxModule,
+                    ],
+                    declarations: [
+                        ListOfValuesMultiselectSearch
+                    ],
+                    exports: [
+                        ListOfValuesMultiselectSearch
+                    ]
+                },] }
+    ];
+
+    var ListOfValuesModule = /** @class */ (function () {
+        function ListOfValuesModule() {
+        }
+        return ListOfValuesModule;
+    }());
+    ListOfValuesModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        InputTextModule,
+                        InputCheckboxModule,
+                        OverlayModule,
+                        ClickoutsideModule,
+                        ListOfValuesMultiselectSearchModule
+                    ],
+                    declarations: [
+                        ListOfValuesComponent,
+                        ListOfValuesPopupComponent
+                    ],
+                    exports: [
+                        ListOfValuesComponent
+                    ]
+                },] }
+    ];
+
+    var FilterPipe = /** @class */ (function () {
+        function FilterPipe() {
+        }
+        FilterPipe.prototype.transform = function (items, field, value) {
+            if (!items || !field) {
+                return items;
+            }
+            return items.filter(function (item) { return item[field] === value; });
+        };
+        return FilterPipe;
+    }());
+    FilterPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: "filter",
+                    pure: false
+                },] }
+    ];
+
+    var FilterPipeModule = /** @class */ (function () {
+        function FilterPipeModule() {
+        }
+        return FilterPipeModule;
+    }());
+    FilterPipeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        FilterPipe
+                    ],
+                    exports: [
+                        FilterPipe
+                    ]
+                },] }
+    ];
+
+    var FilterItemComponent = /** @class */ (function () {
+        function FilterItemComponent(iconService) {
+            this.iconService = iconService;
+            this.icons = exports.CoreComponentsIcon;
+            this.initialLimit = 10;
+            this.expanded = false;
+            // Set to false to use filter item with a multi selectable collection. Set to true to specify custom content
+            this.customContent = false;
+            // Set to true to show all results. Set to false to get 'show more' and 'show less' buttons to expand and contract.
+            this.showAllResults = false;
+            this.singleSelect = false;
+            this.filterButtonLabel = "Search";
+            this.searchPlaceholder = 'Search...';
+            this.showMoreLabel = 'Show more';
+            this.showLessLabel = 'Show less';
+            this.noResultsLabel = "No results";
+            this.collectionChange = new i0.EventEmitter();
+            this.filterButtonClicked = new i0.EventEmitter();
+            this.filteredCollection = [];
+            this.limitTo = 10;
+            this.filterText = "";
+            this.showButton = false;
+            this._collection = [];
+        }
+        Object.defineProperty(FilterItemComponent.prototype, "collection", {
+            get: function () {
+                return this._collection;
+            },
+            set: function (value) {
+                var _a;
+                this._collection = value;
+                this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FilterItemComponent.prototype.showClass = function () {
+            return true;
+        };
+        FilterItemComponent.prototype.ngOnInit = function () {
+            this.setToInitialLimit();
+            this.showButton = this.valueSelected();
+        };
+        FilterItemComponent.prototype.setToInitialLimit = function () {
+            this.limitTo = this.initialLimit;
+        };
+        FilterItemComponent.prototype.increaseLimit = function () {
+            this.limitTo += 10;
+        };
+        FilterItemComponent.prototype.moreToShow = function () {
+            var _a;
+            if (this.showAllResults) {
+                return false;
+            }
+            return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) > this.limitTo;
+        };
+        FilterItemComponent.prototype.lessToShow = function () {
+            var _a, _b;
+            if (this.showAllResults) {
+                return false;
+            }
+            return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) <= this.limitTo && ((_b = this.filteredCollection) === null || _b === void 0 ? void 0 : _b.length) > this.initialLimit;
+        };
+        FilterItemComponent.prototype.handleModelChange = function (model) {
+            this.showButton = true;
+            if (this.singleSelect) {
+                this.collection.forEach(function (m) {
+                    if (m.code !== model.code && m.description !== model.description) {
+                        m.checked = false;
+                    }
+                });
+            }
+            model.checked = !model.checked;
+            this.collectionChange.emit(this.collection);
+        };
+        FilterItemComponent.prototype.valueSelected = function () {
+            if (this.collection) {
+                return !!this.collection.find(function (c) { return c.checked; });
+            }
+            return false;
+        };
+        // Applies filter to the collection.
+        FilterItemComponent.prototype.applyFilter = function (text) {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                var _c, filterText, filteredItemCount;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!(!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn)) return [3 /*break*/, 3];
+                            if (!(text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length)) return [3 /*break*/, 2];
+                            _c = this;
+                            return [4 /*yield*/, this.collectionLoadFn(text)];
+                        case 1:
+                            _c.collection = _d.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            if (text.length < this.minSearchCharsToLoadCollection) {
+                                this.collection = undefined;
+                            }
+                            _d.label = 3;
+                        case 3:
+                            this.filterText = text;
+                            if (!this.collection) {
+                                return [2 /*return*/, []];
+                            }
+                            filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+                            filteredItemCount = 0;
+                            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
+                                var _a;
+                                var labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+                                var isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
+                                if (isHiddenByFilter) {
+                                    return false;
+                                }
+                                else {
+                                    filteredItemCount++;
+                                    return true;
+                                }
+                            });
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        FilterItemComponent.prototype.onButtonClicked = function () {
+            this.filterButtonClicked.emit();
         };
-        return ClickOutsideDirective;
+        return FilterItemComponent;
     }());
-    ClickOutsideDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: "[clickOutside]",
-                    exportAs: 'clickOutside'
+    FilterItemComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-filter-item",
+                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       [clickableLabel]=\"false\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    ClickOutsideDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.NgZone },
-        { type: ClickOutsideMasterService }
+    FilterItemComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
     ]; };
-    ClickOutsideDirective.propDecorators = {
-        enabled: [{ type: i0.Input, args: ["clickOutside",] }],
-        alwaysTrigger: [{ type: i0.Input }],
-        clickOutside: [{ type: i0.Output }]
-    };
-    __decorate([
-        InputBoolean()
-    ], ClickOutsideDirective.prototype, "alwaysTrigger", void 0);
-
-    var ClickoutsideModule = /** @class */ (function () {
-        function ClickoutsideModule() {
-        }
-        return ClickoutsideModule;
-    }());
-    ClickoutsideModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [
-                        ClickOutsideDirective
-                    ],
-                    providers: [
-                        ClickOutsideMasterService
-                    ],
-                    exports: [
-                        ClickOutsideDirective
-                    ]
-                },] }
-    ];
+    FilterItemComponent.propDecorators = {
+        collection: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        initialLimit: [{ type: i0.Input }],
+        expanded: [{ type: i0.Input }],
+        minSearchCharsToLoadCollection: [{ type: i0.Input }],
+        collectionLoadFn: [{ type: i0.Input }],
+        customContent: [{ type: i0.Input }],
+        showAllResults: [{ type: i0.Input }],
+        singleSelect: [{ type: i0.Input }],
+        filterButtonLabel: [{ type: i0.Input }],
+        searchPlaceholder: [{ type: i0.Input }],
+        showMoreLabel: [{ type: i0.Input }],
+        showLessLabel: [{ type: i0.Input }],
+        noResultsLabel: [{ type: i0.Input }],
+        collectionChange: [{ type: i0.Output }],
+        filterButtonClicked: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-filter-item",] }]
+    };
 
-    var OverlayDirective = /** @class */ (function () {
-        function OverlayDirective(elementRef) {
-            this.keepInView = false;
-            this._elementRef = elementRef;
+    // A pipe for prepending strings to other strings in view templates.
+    var PrependPipe = /** @class */ (function () {
+        function PrependPipe() {
         }
-        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";
+        PrependPipe.prototype.transform = function (value, prepend) {
+            if (!value) {
+                return "";
             }
-            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;
-                    }
-                }
+            if (!prepend) {
+                return value;
             }
+            return prepend + value;
         };
-        return OverlayDirective;
+        return PrependPipe;
     }());
-    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"],] }]
-    };
+    PrependPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: "prepend" },] }
+    ];
 
-    var OverlayParentDirective = /** @class */ (function () {
-        function OverlayParentDirective(elementRef) {
-            this.elementRef = elementRef;
+    var PrependPipeModule = /** @class */ (function () {
+        function PrependPipeModule() {
         }
-        OverlayParentDirective.prototype.ngOnDestroy = function () {
-            this.elementRef = undefined;
-        };
-        return OverlayParentDirective;
+        return PrependPipeModule;
     }());
-    OverlayParentDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[overlayParent]',
-                    exportAs: 'overlayParent'
+    PrependPipeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        PrependPipe
+                    ],
+                    exports: [
+                        PrependPipe
+                    ]
                 },] }
-    ];
-    OverlayParentDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
+    ];
 
-    var OverlayModule = /** @class */ (function () {
-        function OverlayModule() {
+    var FilterItemModule = /** @class */ (function () {
+        function FilterItemModule() {
         }
-        return OverlayModule;
+        return FilterItemModule;
     }());
-    OverlayModule.decorators = [
+    FilterItemModule.decorators = [
         { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CollapsibleModule,
+                        InputTextModule,
+                        InputCheckboxMultiSelectModule,
+                        InputCheckboxModule,
+                        IconModule,
+                        scrolling.ScrollingModule,
+                        AppendPipeModule,
+                        PrependPipeModule,
+                        InputTextModule,
+                        InputRadioButtonModule,
+                        InputTextModule
+                    ],
                     declarations: [
-                        OverlayDirective,
-                        OverlayParentDirective
+                        FilterItemComponent
                     ],
                     exports: [
-                        OverlayDirective,
-                        OverlayParentDirective
+                        FilterItemComponent
                     ]
                 },] }
     ];
@@ -11992,28 +12483,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 +12507,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
      */
@@ -12126,11 +12617,16 @@
     exports.InputTextareaModule = InputTextareaModule;
     exports.LevelIndicatorComponent = LevelIndicatorComponent;
     exports.LevelIndicatorModule = LevelIndicatorModule;
+    exports.ListOfValuesComponent = ListOfValuesComponent;
+    exports.ListOfValuesModule = ListOfValuesModule;
+    exports.ListOfValuesMultiselectSearch = ListOfValuesMultiselectSearch;
+    exports.ListOfValuesMultiselectSearchModule = ListOfValuesMultiselectSearchModule;
     exports.MultiSelectListComponent = MultiSelectListComponent;
     exports.MultiSelectListModule = MultiSelectListModule;
     exports.ObserveVisibilityModule = ObserveVisibilityModule;
     exports.OrientationOfDirection = OrientationOfDirection;
     exports.OverlayModule = OverlayModule;
+    exports.OverlayService = OverlayService;
     exports.PaginationBarComponent = PaginationBarComponent;
     exports.PaginationBarModule = PaginationBarModule;
     exports.PaginationComponent = PaginationComponent;
@@ -12156,21 +12652,22 @@
     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["ɵba"] = BaseSimpleGridComponent;
+    exports["ɵbb"] = ObserveVisibilityDirective;
+    exports["ɵbc"] = PaginationService;
+    exports["ɵbd"] = PaginatePipe;
+    exports["ɵbe"] = SimpleGridCellComponent;
     exports["ɵbf"] = ClickOutsideDirective;
     exports["ɵbg"] = ClickOutsideMasterService;
-    exports["ɵbh"] = OverlayDirective;
-    exports["ɵbi"] = OverlayParentDirective;
-    exports["ɵbj"] = TooltipModule;
-    exports["ɵbk"] = TooltipComponent;
-    exports["ɵbl"] = TooltipDirective;
-    exports["ɵbm"] = CheckmarkOverlayComponent;
-    exports["ɵbn"] = ScreenConfigurationDirective;
-    exports["ɵbo"] = ScreenConfigComponentWrapper;
+    exports["ɵbh"] = ListOfValuesPopupComponent;
+    exports["ɵbi"] = PrependPipeModule;
+    exports["ɵbj"] = PrependPipe;
+    exports["ɵbk"] = TooltipModule;
+    exports["ɵbl"] = TooltipComponent;
+    exports["ɵbm"] = TooltipDirective;
+    exports["ɵbn"] = CheckmarkOverlayComponent;
+    exports["ɵbo"] = ScreenConfigurationDirective;
+    exports["ɵbp"] = ScreenConfigComponentWrapper;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;
@@ -12191,10 +12688,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 });