@colijnit/corecomponents_v12 12.0.103 → 12.0.104

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4318,7 +4318,7 @@
             this._appRef = _appRef;
             this._injector = _injector;
         }
-        OverlayService.prototype.createComponent = function (compClass, inputs) {
+        OverlayService.prototype.createComponent = function (compClass, inputs, events) {
             var _this = this;
             if (this._componentRef) {
                 this.removeComponent();
@@ -4333,6 +4333,17 @@
                     }
                 }
             }
+            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];
@@ -6849,6 +6860,7 @@
         function OverlayDirective(elementRef) {
             var _this = this;
             this.keepInView = false;
+            this.inheritWidth = false;
             this.handleScroll = function (event) {
                 _this._checkAndPlaceElement();
             };
@@ -6916,6 +6928,9 @@
                 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) {
@@ -6942,7 +6957,8 @@
     ]; };
     OverlayDirective.propDecorators = {
         parent: [{ type: i0.Input, args: ["overlay",] }],
-        keepInView: [{ type: i0.Input }]
+        keepInView: [{ type: i0.Input }],
+        inheritWidth: [{ type: i0.Input }]
     };
 
     var OverlayParentDirective = /** @class */ (function () {
@@ -11213,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) {
@@ -11703,6 +11675,397 @@
                 },] }
     ];
 
+    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 FilterItemComponent;
+    }());
+    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
+                },] }
+    ];
+    FilterItemComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    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",] }]
+    };
+
+    // 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
+                    ]
+                },] }
+    ];
+
     var TooltipComponent = /** @class */ (function () {
         function TooltipComponent(_elementRef, _changeDetector) {
             this._elementRef = _elementRef;
@@ -12254,6 +12617,10 @@
     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;
@@ -12290,16 +12657,17 @@
     exports["ɵbc"] = PaginationService;
     exports["ɵbd"] = PaginatePipe;
     exports["ɵbe"] = SimpleGridCellComponent;
-    exports["ɵbf"] = PrependPipeModule;
-    exports["ɵbg"] = PrependPipe;
-    exports["ɵbh"] = ClickOutsideDirective;
-    exports["ɵbi"] = ClickOutsideMasterService;
-    exports["ɵbj"] = TooltipModule;
-    exports["ɵbk"] = TooltipComponent;
-    exports["ɵbl"] = TooltipDirective;
-    exports["ɵbm"] = CheckmarkOverlayComponent;
-    exports["ɵbn"] = ScreenConfigurationDirective;
-    exports["ɵbo"] = ScreenConfigComponentWrapper;
+    exports["ɵbf"] = ClickOutsideDirective;
+    exports["ɵbg"] = ClickOutsideMasterService;
+    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;