@colijnit/corecomponents_v12 12.1.7 → 12.1.9

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5658,10 +5658,20 @@
 
     exports.FilterItemMode = void 0;
     (function (FilterItemMode) {
-        FilterItemMode["FilterList"] = "filterList";
+        //This mode makes the Filter display a multi select list
+        // Input will be passed along directly as a string with the following syntax: "?>='choice 1', ?<='choice2'"
+        FilterItemMode["Filterlist"] = "filterlist";
+        //This mode makes the Filter display a single select list
+        // Input will be passed along directly as a simple string.
         FilterItemMode["SingleSelectList"] = "singleSelectList";
+        //This mode makes the Filter display a multi select list
+        // Input will be passed along directly as a simple string.
         FilterItemMode["SelectListWithStringCollectionOutput"] = "selectListWithStringCollectionOutput";
+        //This mode makes the Filter display a multi select list
+        // Available choices will need to have their identifying value be a number. The summation of all these numbers will be passed along.
         FilterItemMode["SelectListWithNumberOutput"] = "selectListWithNumberOutput";
+        //This mode makes the Filter display a min and max field. This should eventually be a slider.
+        // input is passed along as "min - max"
         FilterItemMode["Slider"] = "slider";
         //This mode makes the Filter display a simple textfield.
         // The value typed into the field will be passed along directly as a string.
@@ -5682,7 +5692,7 @@
         // It's value will be passed along as either a "?='T'" or and "?='F'".
         FilterItemMode["CheckboxToText"] = "checkboxToText";
         //This mode makes the Filter display a simple checkBox.
-        // It's value will be passed along as either a 'T' or and 'F'.
+        // It's value will be passed along as either a 1 or and 0.
         FilterItemMode["CheckboxToBinary"] = "checkboxToBinary";
     })(exports.FilterItemMode || (exports.FilterItemMode = {}));
 
@@ -5925,6 +5935,11 @@
     var OverlayDirective = /** @class */ (function () {
         function OverlayDirective(elementRef) {
             var _this = this;
+            /**
+             * true; Element is added to the parent template
+             * false; Element is added to the bottom of the DOM
+             */
+            this.inline = false;
             this.keepInView = false;
             this.inheritWidth = false;
             this.rightAlign = false;
@@ -5990,12 +6005,25 @@
             if (this._elementRef && this._elementRef.nativeElement && this._parent && this._parent.nativeElement) {
                 var elementRect = this._elementRef.nativeElement.getBoundingClientRect();
                 var parentBoundingRect = this._parent.nativeElement.getBoundingClientRect();
-                var parentRect = {
-                    bottom: this._parent.nativeElement.offsetTop + parentBoundingRect.height,
-                    right: this._parent.nativeElement.offsetLeft + parentBoundingRect.width,
-                    left: this._parent.nativeElement.offsetLeft,
-                    top: this._parent.nativeElement.offsetTop
-                };
+                var parentRect = {};
+                if (!this.inline) {
+                    parentRect = {
+                        bottom: parentBoundingRect.bottom,
+                        right: parentBoundingRect.right,
+                        left: parentBoundingRect.left,
+                        top: parentBoundingRect.top,
+                        width: parentBoundingRect.width
+                    };
+                }
+                else {
+                    parentRect = {
+                        bottom: this._parent.nativeElement.offsetTop + parentBoundingRect.height,
+                        right: this._parent.nativeElement.offsetLeft + parentBoundingRect.width,
+                        left: this._parent.nativeElement.offsetLeft,
+                        top: this._parent.nativeElement.offsetTop,
+                        width: parentBoundingRect.width
+                    };
+                }
                 this._placeElement(window.innerHeight, window.innerWidth, parentRect, elementRect);
             }
         };
@@ -6049,6 +6077,7 @@
     OverlayDirective.propDecorators = {
         parent: [{ type: i0.Input, args: ["overlay",] }],
         view: [{ type: i0.Input }],
+        inline: [{ type: i0.Input }],
         keepInView: [{ type: i0.Input }],
         inheritWidth: [{ type: i0.Input }],
         rightAlign: [{ type: i0.Input }],
@@ -11523,19 +11552,17 @@
     }
 
     var FilterItemComponent = /** @class */ (function () {
-        function FilterItemComponent(iconService) {
+        function FilterItemComponent(iconService, _changeDetector) {
             this.iconService = iconService;
+            this._changeDetector = _changeDetector;
             this.icons = exports.CoreComponentsIcon;
             this.modes = exports.FilterItemMode;
-            this.mode = this.modes.FilterList;
             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;
-            //@Input()
-            //public singleSelect: boolean = false;
             this.filterButtonLabel = "Search";
             this.searchPlaceholder = 'Search...';
             this.showMoreLabel = 'Show more';
@@ -11551,7 +11578,19 @@
             this.filterText = "";
             this.showButton = false;
             this._collection = [];
+            this._mode = this.modes.Filterlist;
         }
+        Object.defineProperty(FilterItemComponent.prototype, "mode", {
+            get: function () {
+                return this._mode;
+            },
+            set: function (value) {
+                this._mode = value;
+                this.readModelForMode(this._model);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(FilterItemComponent.prototype, "collection", {
             get: function () {
                 return this._collection;
@@ -11560,6 +11599,8 @@
                 var _a;
                 this._collection = value;
                 this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
+                //reset the model in case there was no collection to set its values on when it was set.
+                this.model = this._model;
             },
             enumerable: false,
             configurable: true
@@ -11568,37 +11609,8 @@
             get: function () {
                 return this._model;
             },
-            set: function (filterString) {
-                if (this.mode === this.modes.FilterList) {
-                    this.readModelForFilterList(filterString);
-                }
-                else if (this.mode === this.modes.SingleSelectList) {
-                    this.readModelForSingleSelectList(filterString);
-                }
-                else if (this.mode === this.modes.SelectListWithStringCollectionOutput) {
-                    this.readModelForStringCollectionList(filterString);
-                }
-                else if (this.mode === this.modes.SelectListWithNumberOutput) {
-                    this.readModelForSelectListWithNumberOutput(filterString);
-                }
-                else if (this.mode === this.modes.Slider) {
-                    this.readModelForSliderMode(filterString);
-                }
-                else if (this.mode === this.modes.CheckboxToText || this.mode === this.modes.CheckboxToSimpleText) {
-                    this.readModelForCheckboxToText(filterString);
-                }
-                else if (this.mode === this.modes.CheckboxToBinary) {
-                    this.readModelForCheckboxToBinary(filterString);
-                }
-                else if (this.mode === this.modes.DateField) {
-                    this.readModelForDateField(filterString);
-                }
-                else if (this.mode === this.modes.DateRangeField) {
-                    this.readModelForDateRangeField(filterString);
-                }
-                else if (this.mode === this.modes.Checkbox || this.mode === this.modes.TextField) {
-                    this._model = filterString;
-                }
+            set: function (newModel) {
+                this.readModelForMode(newModel);
             },
             enumerable: false,
             configurable: true
@@ -11606,8 +11618,6 @@
         FilterItemComponent.prototype.ngOnInit = function () {
             this.setToInitialLimit();
             this.showButton = this.valueSelected();
-            this.sliderMin = this.sliderDefaultMin;
-            this.sliderMax = this.sliderDefaultMax;
             this.checkBoxToTextModel = false;
         };
         FilterItemComponent.prototype.setToInitialLimit = function () {
@@ -11631,46 +11641,102 @@
             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) {
-            if (this.mode === this.modes.FilterList) {
-                this.showButton = true;
-                model.checked = !model.checked;
-                this.createModelForFilterList();
-            }
-            else if (this.mode === this.modes.SelectListWithStringCollectionOutput) {
-                this.showButton = true;
-                model.checked = !model.checked;
-                this.createModelForStringCollectionList();
-            }
-            else if (this.mode === this.modes.SingleSelectList) {
-                this.showButton = true;
-                this.uncheckForSingleSelect(model);
-                model.checked = !model.checked;
-                this.createModelForSingleSelectList();
-            }
-            else if (this.mode === this.modes.SelectListWithNumberOutput) {
-                this.showButton = true;
-                model.checked = !model.checked;
-                this.createModelForSelectListWithNumberOutput();
-            }
-            else if (this.mode === this.modes.Slider) {
-                this.createModelForSliderMode();
-            }
-            else if (this.mode === this.modes.CheckboxToText) {
-                this.createModelForCheckboxToText();
-            }
-            else if (this.mode === this.modes.CheckboxToSimpleText) {
-                this.createModelForCheckboxToSimpleText();
-            }
-            else if (this.mode === this.modes.CheckboxToBinary) {
-                this.createModelForCheckboxToBinary();
-            }
-            else if (this.mode === this.modes.DateRangeField) {
-                this.createModelForDateRange(model);
-            }
-            else if (this.mode === this.modes.TextField) {
-                this._model = (typeof this._model === 'string' && this._model.length === 0) ? undefined : this._model;
+            switch (this.mode) {
+                case this.modes.Filterlist:
+                    this.showButton = true;
+                    model.checked = !model.checked;
+                    this._createModelForFilterList();
+                    break;
+                case this.modes.SelectListWithStringCollectionOutput:
+                    this.showButton = true;
+                    model.checked = !model.checked;
+                    this._createModelForStringCollectionList();
+                    break;
+                case this.modes.SingleSelectList:
+                    this.showButton = true;
+                    this.uncheckForSingleSelect(model);
+                    model.checked = !model.checked;
+                    this._createModelForSingleSelectList();
+                    break;
+                case this.modes.SelectListWithNumberOutput:
+                    this.showButton = true;
+                    model.checked = !model.checked;
+                    this._createModelForSelectListWithNumberOutput();
+                    break;
+                case this.modes.Slider:
+                    this._createModelForSliderMode();
+                    break;
+                case this.modes.CheckboxToText:
+                    this._createModelForCheckboxToText();
+                    break;
+                case this.modes.CheckboxToSimpleText:
+                    this._createModelForCheckboxToSimpleText();
+                    break;
+                case this.modes.CheckboxToBinary:
+                    this._createModelForCheckboxToBinary();
+                    break;
+                case this.modes.DateRangeField:
+                    this._createModelForDateRange(model);
+                    break;
+                case this.modes.TextField:
+                    this._model = (typeof this._model === 'string' && this._model.length === 0) ? undefined : this._model;
+                    break;
             }
             this.modelChange.emit(this._model);
+            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();
         };
         FilterItemComponent.prototype.uncheckForSingleSelect = function (model) {
             this.collection.forEach(function (m) {
@@ -11679,7 +11745,42 @@
                 }
             });
         };
-        FilterItemComponent.prototype.createModelForFilterList = function () {
+        FilterItemComponent.prototype.readModelForMode = function (newModel) {
+            switch (this.mode) {
+                case this.modes.Filterlist:
+                    this._readModelForFilterList(newModel);
+                    break;
+                case this.modes.SingleSelectList:
+                    this._readModelForSingleSelectList(newModel);
+                    break;
+                case this.modes.SelectListWithStringCollectionOutput:
+                    this._readModelForStringCollectionList(newModel);
+                    break;
+                case this.modes.SelectListWithNumberOutput:
+                    this._readModelForSelectListWithNumberOutput(newModel);
+                    break;
+                case this.modes.Slider:
+                    this._readModelForSliderMode(newModel);
+                    break;
+                case this.modes.CheckboxToText:
+                case this.modes.CheckboxToSimpleText:
+                    this._readModelForCheckboxToText(newModel);
+                    break;
+                case this.modes.CheckboxToBinary:
+                    this._readModelForCheckboxToBinary(newModel);
+                    break;
+                case this.modes.DateField:
+                    this._readModelForDateField(newModel);
+                    break;
+                case this.modes.DateRangeField:
+                    this._readModelForDateRangeField(newModel);
+                    break;
+            }
+        };
+        /////////////////////////////////////////////////////////////
+        //Model creation for all of the different options available//
+        /////////////////////////////////////////////////////////////
+        FilterItemComponent.prototype._createModelForFilterList = function () {
             var filterRange = [];
             if (this.collection !== null && this.collection !== undefined) {
                 this.collection.forEach(function (viewModel) {
@@ -11687,28 +11788,43 @@
                         filterRange.push("?='" + viewModel.code + "'");
                     }
                 });
-                this._model = filterRange.join(',');
+                if (filterRange.length > 0) {
+                    this._model = filterRange.join(',');
+                }
+                else {
+                    this._model = undefined;
+                }
             }
         };
-        FilterItemComponent.prototype.createModelForStringCollectionList = function () {
+        FilterItemComponent.prototype._createModelForStringCollectionList = function () {
             var filterRange = [];
             this.collection.forEach(function (viewModel) {
                 if (viewModel.checked) {
                     filterRange.push(viewModel.code.toString());
                 }
             });
-            this._model = filterRange;
+            if (filterRange.length > 0) {
+                this._model = filterRange;
+            }
+            else {
+                this._model = undefined;
+            }
         };
-        FilterItemComponent.prototype.createModelForSingleSelectList = function () {
+        FilterItemComponent.prototype._createModelForSingleSelectList = function () {
             var filterString = "";
             this.collection.forEach(function (viewModel) {
                 if (viewModel.checked) {
                     filterString = viewModel.code.toString();
                 }
             });
-            this._model = filterString;
+            if (filterString.length > 0) {
+                this._model = filterString;
+            }
+            else {
+                this._model = undefined;
+            }
         };
-        FilterItemComponent.prototype.createModelForSelectListWithNumberOutput = function () {
+        FilterItemComponent.prototype._createModelForSelectListWithNumberOutput = function () {
             var filterNumber = null;
             this.collection.forEach(function (viewModel) {
                 if (viewModel.checked) {
@@ -11720,14 +11836,14 @@
             });
             this._model = filterNumber;
         };
-        FilterItemComponent.prototype.createModelForSliderMode = function () {
+        FilterItemComponent.prototype._createModelForSliderMode = function () {
             this.sliderMin = !!this.sliderMin ? this.sliderMin : this.sliderDefaultMin;
             this.sliderMax = !!this.sliderMax ? this.sliderMax : this.sliderDefaultMax;
             var trueLowerBound = Math.min(this.sliderMin, this.sliderMax);
             var trueUpperBound = Math.max(this.sliderMin, this.sliderMax);
             this._model = trueLowerBound + " - " + trueUpperBound;
         };
-        FilterItemComponent.prototype.createModelForCheckboxToText = function () {
+        FilterItemComponent.prototype._createModelForCheckboxToText = function () {
             if (this.checkBoxToTextModel) {
                 this._model = "?='J'";
             }
@@ -11735,7 +11851,7 @@
                 this._model = "?='N'";
             }
         };
-        FilterItemComponent.prototype.createModelForCheckboxToSimpleText = function () {
+        FilterItemComponent.prototype._createModelForCheckboxToSimpleText = function () {
             if (this.checkBoxToTextModel) {
                 this._model = "J";
             }
@@ -11743,7 +11859,7 @@
                 this._model = "N";
             }
         };
-        FilterItemComponent.prototype.createModelForCheckboxToBinary = function () {
+        FilterItemComponent.prototype._createModelForCheckboxToBinary = function () {
             if (this.checkBoxToTextModel) {
                 this._model = 1;
             }
@@ -11751,14 +11867,13 @@
                 this._model = 0;
             }
         };
-        FilterItemComponent.prototype.createModelForDateRange = function (dates) {
+        FilterItemComponent.prototype._createModelForDateRange = function (dates) {
             if (dates) {
                 var startDate = dates[0];
                 var endDate = dates[1];
                 var startDateRequest = startDate ? this._formatDateToString(startDate) : '';
                 var endDateRequest = endDate ? this._formatDateToString(endDate) : '';
-                var filter = "?>='" + startDateRequest + "'& ?<='" + endDateRequest + "'";
-                this._model = filter;
+                this._model = "?>='" + startDateRequest + "'& ?<='" + endDateRequest + "'";
             }
         };
         FilterItemComponent.prototype._formatDateToString = function (date) {
@@ -11767,24 +11882,25 @@
             var year = date.getFullYear();
             return day + "-" + month + "-" + year;
         };
-        FilterItemComponent.prototype.readModelForFilterList = function (filterModel) {
+        ////////////////////////////////////////////////////////////
+        //Model reading for all of the different options available//
+        ////////////////////////////////////////////////////////////
+        FilterItemComponent.prototype._readModelForFilterList = function (filterModel) {
             var e_1, _c;
             var filterList = [];
             var itemsToCheck = [];
-            this.uncheckAll();
-            if (filterModel !== null && filterModel !== undefined && typeof filterModel === 'string' && filterModel.length != 0) {
+            this._uncheckAll();
+            this._model = filterModel;
+            if (filterModel !== null && filterModel !== undefined && typeof filterModel === 'string' && filterModel.length != 0 && this.collection !== null && this.collection !== undefined) {
                 filterList = filterModel.split(",");
                 filterList.forEach(function (filter) {
                     itemsToCheck.push(filter.substr(3, filter.length - 4));
                 });
                 var _loop_1 = function (item) {
                     var filter = this_1.collection.find(function (element) { return element.code.toString() === item; });
-                    if (filter) {
+                    if (filter !== null && filter !== undefined) {
                         filter.checked = true;
                     }
-                    else {
-                        filter.checked = false;
-                    }
                 };
                 var this_1 = this;
                 try {
@@ -11802,25 +11918,23 @@
                 }
                 this._model = filterModel;
             }
-            else {
-                this._model = undefined;
-            }
         };
-        FilterItemComponent.prototype.readModelForSingleSelectList = function (singleSelectModel) {
-            this.uncheckAll();
-            if (singleSelectModel !== null && singleSelectModel !== undefined) {
-                var filter = this.collection.find(function (element) { return element.code === singleSelectModel; });
-                if (filter) {
+        FilterItemComponent.prototype._readModelForSingleSelectList = function (singleSelectModel) {
+            this._uncheckAll();
+            this._model = singleSelectModel;
+            if (singleSelectModel !== null && singleSelectModel !== undefined && this.collection !== null && this.collection !== undefined) {
+                var filter = this.collection.find(function (element) { return element.code.toString() === singleSelectModel; });
+                if (filter !== null && filter !== undefined) {
                     filter.checked = true;
                 }
-                this.createModelForSingleSelectList();
             }
         };
-        FilterItemComponent.prototype.readModelForStringCollectionList = function (collectionModel) {
-            this.uncheckAll();
+        FilterItemComponent.prototype._readModelForStringCollectionList = function (collectionModel) {
+            this._uncheckAll();
+            this._model = collectionModel;
             if (collectionModel !== null && collectionModel !== undefined && this.collection !== null && this.collection !== undefined) {
                 this.collection.forEach(function (viewModel) {
-                    if (collectionModel.indexOf(viewModel.code) > -1) {
+                    if (collectionModel.indexOf(viewModel.code.toString()) > -1) {
                         viewModel.checked = true;
                     }
                     else {
@@ -11829,10 +11943,11 @@
                 });
             }
         };
-        FilterItemComponent.prototype.readModelForSelectListWithNumberOutput = function (numberModel) {
+        FilterItemComponent.prototype._readModelForSelectListWithNumberOutput = function (numberModel) {
             var e_2, _c;
-            this.uncheckAll();
-            if (numberModel !== null && numberModel !== undefined) {
+            this._uncheckAll();
+            this._model = numberModel;
+            if (numberModel !== null && numberModel !== undefined && this.collection !== null && this.collection !== undefined) {
                 try {
                     for (var _d = __values(this.collection), _e = _d.next(); !_e.done; _e = _d.next()) {
                         var item = _e.value;
@@ -11850,14 +11965,15 @@
                 }
             }
         };
-        FilterItemComponent.prototype.uncheckAll = function () {
+        FilterItemComponent.prototype._uncheckAll = function () {
             if (this.collection !== null && this.collection !== undefined) {
                 this.collection.forEach(function (m) {
                     m.checked = false;
                 });
             }
         };
-        FilterItemComponent.prototype.readModelForSliderMode = function (sliderModel) {
+        FilterItemComponent.prototype._readModelForSliderMode = function (sliderModel) {
+            this._model = sliderModel;
             if (sliderModel !== undefined && sliderModel !== null) {
                 var sliderInputCollection = sliderModel.split(' - ');
                 this.sliderMin = parseInt(sliderInputCollection[0]);
@@ -11868,7 +11984,8 @@
                 this.sliderMax = this.sliderDefaultMax;
             }
         };
-        FilterItemComponent.prototype.readModelForCheckboxToText = function (checkboxToTextModel) {
+        FilterItemComponent.prototype._readModelForCheckboxToText = function (checkboxToTextModel) {
+            this._model = checkboxToTextModel;
             if (checkboxToTextModel !== undefined && checkboxToTextModel !== null) {
                 this.checkBoxToTextModel = (checkboxToTextModel.indexOf('J') > -1);
             }
@@ -11876,7 +11993,8 @@
                 this.checkBoxToTextModel = false;
             }
         };
-        FilterItemComponent.prototype.readModelForCheckboxToBinary = function (checkboxToBinary) {
+        FilterItemComponent.prototype._readModelForCheckboxToBinary = function (checkboxToBinary) {
+            this._model = checkboxToBinary;
             if (checkboxToBinary !== undefined && checkboxToBinary !== null) {
                 this.checkBoxToTextModel = (checkboxToBinary >= 1);
             }
@@ -11884,7 +12002,8 @@
                 this.checkBoxToTextModel = false;
             }
         };
-        FilterItemComponent.prototype.readModelForDateField = function (dateFieldModel) {
+        FilterItemComponent.prototype._readModelForDateField = function (dateFieldModel) {
+            this._model = dateFieldModel;
             if (dateFieldModel !== undefined && dateFieldModel !== null) {
                 this._model = new Date(dateFieldModel);
             }
@@ -11892,7 +12011,8 @@
                 this._model = undefined;
             }
         };
-        FilterItemComponent.prototype.readModelForDateRangeField = function (dateRangeFieldModel) {
+        FilterItemComponent.prototype._readModelForDateRangeField = function (dateRangeFieldModel) {
+            this._model = dateRangeFieldModel;
             if (dateRangeFieldModel !== undefined && dateRangeFieldModel !== null) {
                 var dateCollection = dateRangeFieldModel.split('&');
                 var startString = dateCollection[0].trim().substr(4, dateCollection[0].length - 5);
@@ -11902,72 +12022,24 @@
                 this.dateRangeStart = new Date(parseInt(startDateComponents[2]), parseInt(startDateComponents[1]) - 1, parseInt(startDateComponents[0]));
                 this.dateRangeEnd = new Date(parseInt(endDateComponents[2]), parseInt(endDateComponents[1]) - 1, parseInt(endDateComponents[0]));
             }
-        };
-        FilterItemComponent.prototype.valueSelected = function () {
-            if (this.collection) {
-                return !!this.collection.find(function (c) { return c.checked; });
+            else {
+                this.dateRangeStart = undefined;
+                this.dateRangeEnd = undefined;
             }
-            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\" *ngIf=\"mode === modes.FilterList || mode === modes.SingleSelectList\n                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\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=\"mode !== modes.SingleSelectList\"\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=\"mode === modes.SingleSelectList\"\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            <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n              <co-input-text\n                class=\"slider-from\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'FROM' | localize\"\n                [(model)]=\"sliderMin\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-text>\n              <co-input-text\n                class=\"slider-to\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'TO' | localize\"\n                [(model)]=\"sliderMax\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-text>\n               <!-- <co-icon [iconData]=\"iconService.getIcon(icons.Check)\" (click)=\"filterOnPrice()\"></co-icon>-->\n            </div>\n            <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n              <co-input-checkbox\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n              <co-input-checkbox\n                [(model)]=\"checkBoxToTextModel\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n              <co-input-text\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-text>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n              <co-input-date\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-date>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n              <co-input-date-range\n                [model]=\"[dateRangeStart, dateRangeEnd]\"\n                (modelChange)=\"handleModelChange($event)\"\n                [placeholder]=\"'SELECT_DATE' | localize\">\n              </co-input-date-range>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
+                    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\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\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=\"mode !== modes.SingleSelectList\"\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=\"mode === modes.SingleSelectList\"\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            <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n              <co-input-text\n                class=\"slider-from\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'FROM' | localize\"\n                [(model)]=\"sliderMin\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-text>\n              <co-input-text\n                class=\"slider-to\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'TO' | localize\"\n                [(model)]=\"sliderMax\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-text>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n              <co-input-checkbox\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\"\n                 *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n              <co-input-checkbox\n                [(model)]=\"checkBoxToTextModel\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n              <co-input-text\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-text>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n              <co-input-date\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-date>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n              <co-input-date-range\n                [model]=\"[dateRangeStart, dateRangeEnd]\"\n                (modelChange)=\"handleModelChange($event)\"\n                [placeholder]=\"'SELECT_DATE' | localize\">\n              </co-input-date-range>\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 }
+        { type: IconCacheService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     FilterItemComponent.propDecorators = {
         mode: [{ type: i0.Input }],