@colijnit/corecomponents_v12 12.1.6 → 12.1.7

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5656,6 +5656,36 @@
                 },] }
     ];
 
+    exports.FilterItemMode = void 0;
+    (function (FilterItemMode) {
+        FilterItemMode["FilterList"] = "filterList";
+        FilterItemMode["SingleSelectList"] = "singleSelectList";
+        FilterItemMode["SelectListWithStringCollectionOutput"] = "selectListWithStringCollectionOutput";
+        FilterItemMode["SelectListWithNumberOutput"] = "selectListWithNumberOutput";
+        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.
+        FilterItemMode["TextField"] = "textField";
+        //This mode makes the Filter display a simple dateField.
+        // Field input will be passed along directly as a date object.
+        FilterItemMode["DateField"] = "dateField";
+        //This mode makes the Filter display a dateRange field.
+        // Field input will be passed along directly as a string with the following syntax: "?>='01-08-2022'& ?<='31-08-2022'"
+        FilterItemMode["DateRangeField"] = "dateRangeField";
+        //This mode makes the Filter display a simple checkBox.
+        // It's value will be passed along directly as a boolean.
+        FilterItemMode["Checkbox"] = "checkbox";
+        //This mode makes the Filter display a simple checkBox.
+        // It's value will be passed along as either a 'T' or and 'F'.
+        FilterItemMode["CheckboxToSimpleText"] = "checkboxToSimpleText";
+        //This mode makes the Filter display a simple checkBox.
+        // 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'.
+        FilterItemMode["CheckboxToBinary"] = "checkboxToBinary";
+    })(exports.FilterItemMode || (exports.FilterItemMode = {}));
+
     var BaseModule = /** @class */ (function () {
         function BaseModule() {
         }
@@ -11496,18 +11526,24 @@
         function FilterItemComponent(iconService) {
             this.iconService = iconService;
             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;
-            this.singleSelect = false;
+            //@Input()
+            //public singleSelect: boolean = false;
             this.filterButtonLabel = "Search";
             this.searchPlaceholder = 'Search...';
             this.showMoreLabel = 'Show more';
             this.showLessLabel = 'Show less';
             this.noResultsLabel = "No results";
+            this.sliderDefaultMin = 0;
+            this.sliderDefaultMax = 100000;
+            this.modelChange = new i0.EventEmitter();
             this.collectionChange = new i0.EventEmitter();
             this.filterButtonClicked = new i0.EventEmitter();
             this.filteredCollection = [];
@@ -11528,12 +11564,51 @@
             enumerable: false,
             configurable: true
         });
-        FilterItemComponent.prototype.showClass = function () {
-            return true;
-        };
+        Object.defineProperty(FilterItemComponent.prototype, "model", {
+            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;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         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 () {
             this.limitTo = this.initialLimit;
@@ -11556,16 +11631,277 @@
             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;
+            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;
+            }
+            this.modelChange.emit(this._model);
+        };
+        FilterItemComponent.prototype.uncheckForSingleSelect = function (model) {
+            this.collection.forEach(function (m) {
+                if (m.code !== model.code && m.description !== model.description) {
+                    m.checked = false;
+                }
+            });
+        };
+        FilterItemComponent.prototype.createModelForFilterList = function () {
+            var filterRange = [];
+            if (this.collection !== null && this.collection !== undefined) {
+                this.collection.forEach(function (viewModel) {
+                    if (viewModel.checked) {
+                        filterRange.push("?='" + viewModel.code + "'");
                     }
                 });
+                this._model = filterRange.join(',');
+            }
+        };
+        FilterItemComponent.prototype.createModelForStringCollectionList = function () {
+            var filterRange = [];
+            this.collection.forEach(function (viewModel) {
+                if (viewModel.checked) {
+                    filterRange.push(viewModel.code.toString());
+                }
+            });
+            this._model = filterRange;
+        };
+        FilterItemComponent.prototype.createModelForSingleSelectList = function () {
+            var filterString = "";
+            this.collection.forEach(function (viewModel) {
+                if (viewModel.checked) {
+                    filterString = viewModel.code.toString();
+                }
+            });
+            this._model = filterString;
+        };
+        FilterItemComponent.prototype.createModelForSelectListWithNumberOutput = function () {
+            var filterNumber = null;
+            this.collection.forEach(function (viewModel) {
+                if (viewModel.checked) {
+                    if (filterNumber == null) {
+                        filterNumber = 0;
+                    }
+                    filterNumber += Number(viewModel.code);
+                }
+            });
+            this._model = filterNumber;
+        };
+        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 () {
+            if (this.checkBoxToTextModel) {
+                this._model = "?='J'";
+            }
+            else {
+                this._model = "?='N'";
+            }
+        };
+        FilterItemComponent.prototype.createModelForCheckboxToSimpleText = function () {
+            if (this.checkBoxToTextModel) {
+                this._model = "J";
+            }
+            else {
+                this._model = "N";
+            }
+        };
+        FilterItemComponent.prototype.createModelForCheckboxToBinary = function () {
+            if (this.checkBoxToTextModel) {
+                this._model = 1;
+            }
+            else {
+                this._model = 0;
+            }
+        };
+        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;
+            }
+        };
+        FilterItemComponent.prototype._formatDateToString = function (date) {
+            var day = date.getDate().toString().padStart(2, '0');
+            var month = (date.getMonth() + 1).toString().padStart(2, '0');
+            var year = date.getFullYear();
+            return day + "-" + month + "-" + year;
+        };
+        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) {
+                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) {
+                        filter.checked = true;
+                    }
+                    else {
+                        filter.checked = false;
+                    }
+                };
+                var this_1 = this;
+                try {
+                    for (var itemsToCheck_1 = __values(itemsToCheck), itemsToCheck_1_1 = itemsToCheck_1.next(); !itemsToCheck_1_1.done; itemsToCheck_1_1 = itemsToCheck_1.next()) {
+                        var item = itemsToCheck_1_1.value;
+                        _loop_1(item);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (itemsToCheck_1_1 && !itemsToCheck_1_1.done && (_c = itemsToCheck_1.return)) _c.call(itemsToCheck_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                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) {
+                    filter.checked = true;
+                }
+                this.createModelForSingleSelectList();
+            }
+        };
+        FilterItemComponent.prototype.readModelForStringCollectionList = function (collectionModel) {
+            this.uncheckAll();
+            if (collectionModel !== null && collectionModel !== undefined && this.collection !== null && this.collection !== undefined) {
+                this.collection.forEach(function (viewModel) {
+                    if (collectionModel.indexOf(viewModel.code) > -1) {
+                        viewModel.checked = true;
+                    }
+                    else {
+                        viewModel.checked = false;
+                    }
+                });
+            }
+        };
+        FilterItemComponent.prototype.readModelForSelectListWithNumberOutput = function (numberModel) {
+            var e_2, _c;
+            this.uncheckAll();
+            if (numberModel !== null && numberModel !== undefined) {
+                try {
+                    for (var _d = __values(this.collection), _e = _d.next(); !_e.done; _e = _d.next()) {
+                        var item = _e.value;
+                        var itemCode = item.code;
+                        var modValue = (numberModel % (2 * itemCode));
+                        item.checked = (modValue >= itemCode);
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            }
+        };
+        FilterItemComponent.prototype.uncheckAll = function () {
+            if (this.collection !== null && this.collection !== undefined) {
+                this.collection.forEach(function (m) {
+                    m.checked = false;
+                });
+            }
+        };
+        FilterItemComponent.prototype.readModelForSliderMode = function (sliderModel) {
+            if (sliderModel !== undefined && sliderModel !== null) {
+                var sliderInputCollection = sliderModel.split(' - ');
+                this.sliderMin = parseInt(sliderInputCollection[0]);
+                this.sliderMax = parseInt(sliderInputCollection[1]);
+            }
+            else {
+                this.sliderMin = this.sliderDefaultMin;
+                this.sliderMax = this.sliderDefaultMax;
+            }
+        };
+        FilterItemComponent.prototype.readModelForCheckboxToText = function (checkboxToTextModel) {
+            if (checkboxToTextModel !== undefined && checkboxToTextModel !== null) {
+                this.checkBoxToTextModel = (checkboxToTextModel.indexOf('J') > -1);
+            }
+            else {
+                this.checkBoxToTextModel = false;
+            }
+        };
+        FilterItemComponent.prototype.readModelForCheckboxToBinary = function (checkboxToBinary) {
+            if (checkboxToBinary !== undefined && checkboxToBinary !== null) {
+                this.checkBoxToTextModel = (checkboxToBinary >= 1);
+            }
+            else {
+                this.checkBoxToTextModel = false;
+            }
+        };
+        FilterItemComponent.prototype.readModelForDateField = function (dateFieldModel) {
+            if (dateFieldModel !== undefined && dateFieldModel !== null) {
+                this._model = new Date(dateFieldModel);
+            }
+            else {
+                this._model = undefined;
+            }
+        };
+        FilterItemComponent.prototype.readModelForDateRangeField = function (dateRangeFieldModel) {
+            if (dateRangeFieldModel !== undefined && dateRangeFieldModel !== null) {
+                var dateCollection = dateRangeFieldModel.split('&');
+                var startString = dateCollection[0].trim().substr(4, dateCollection[0].length - 5);
+                var endString = dateCollection[1].trim().substr(4, dateCollection[1].length - 5);
+                var startDateComponents = startString.split('-');
+                var endDateComponents = endString.split('-');
+                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]));
             }
-            model.checked = !model.checked;
-            this.collectionChange.emit(this.collection);
         };
         FilterItemComponent.prototype.valueSelected = function () {
             if (this.collection) {
@@ -11625,7 +11961,7 @@
     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  ",
+                    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  ",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
@@ -11634,6 +11970,7 @@
         { type: IconCacheService }
     ]; };
     FilterItemComponent.propDecorators = {
+        mode: [{ type: i0.Input }],
         collection: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         initialLimit: [{ type: i0.Input }],
@@ -11642,15 +11979,18 @@
         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 }],
+        sliderDefaultMin: [{ type: i0.Input }],
+        sliderDefaultMax: [{ type: i0.Input }],
+        model: [{ type: i0.Input }],
+        modelChange: [{ type: i0.Output }],
         collectionChange: [{ type: i0.Output }],
         filterButtonClicked: [{ type: i0.Output }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-filter-item",] }]
+        filteredCollection: [{ type: i0.HostBinding, args: ["class.co-filter-item",] }]
     };
 
     // A pipe for prepending strings to other strings in view templates.
@@ -11706,7 +12046,10 @@
                         PrependPipeModule,
                         InputTextModule,
                         InputRadioButtonModule,
-                        InputTextModule
+                        InputTextModule,
+                        CoreComponentsTranslationModule,
+                        InputDatePickerModule,
+                        InputDateRangePickerModule
                     ],
                     declarations: [
                         FilterItemComponent