@colijnit/corecomponents_v12 12.1.6 → 12.1.8

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5656,6 +5656,46 @@
                 },] }
     ];
 
+    exports.FilterItemMode = void 0;
+    (function (FilterItemMode) {
+        //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.
+        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 1 or and 0.
+        FilterItemMode["CheckboxToBinary"] = "checkboxToBinary";
+    })(exports.FilterItemMode || (exports.FilterItemMode = {}));
+
     var BaseModule = /** @class */ (function () {
         function BaseModule() {
         }
@@ -5895,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;
@@ -5960,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);
             }
         };
@@ -6019,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 }],
@@ -11493,21 +11552,26 @@
     }
 
     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;
-            this.singleSelect = 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 = [];
@@ -11524,16 +11588,55 @@
                 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
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "model", {
+            get: function () {
+                return this._model;
+            },
+            set: function (filterString) {
+                switch (this.mode) {
+                    case this.modes.Filterlist:
+                        this._readModelForFilterList(filterString);
+                        break;
+                    case this.modes.SingleSelectList:
+                        this._readModelForSingleSelectList(filterString);
+                        break;
+                    case this.modes.SelectListWithStringCollectionOutput:
+                        this._readModelForStringCollectionList(filterString);
+                        break;
+                    case this.modes.SelectListWithNumberOutput:
+                        this._readModelForSelectListWithNumberOutput(filterString);
+                        break;
+                    case this.modes.Slider:
+                        this._readModelForSliderMode(filterString);
+                        break;
+                    case this.modes.CheckboxToText:
+                    case this.modes.CheckboxToSimpleText:
+                        this._readModelForCheckboxToText(filterString);
+                        break;
+                    case this.modes.CheckboxToBinary:
+                        this._readModelForCheckboxToBinary(filterString);
+                        break;
+                    case this.modes.DateField:
+                        this._readModelForDateField(filterString);
+                        break;
+                    case this.modes.DateRangeField:
+                        this._readModelForDateRangeField(filterString);
+                        break;
+                }
             },
             enumerable: false,
             configurable: true
         });
-        FilterItemComponent.prototype.showClass = function () {
-            return true;
-        };
         FilterItemComponent.prototype.ngOnInit = function () {
             this.setToInitialLimit();
             this.showButton = this.valueSelected();
+            this.checkBoxToTextModel = false;
         };
         FilterItemComponent.prototype.setToInitialLimit = function () {
             this.limitTo = this.initialLimit;
@@ -11556,17 +11659,57 @@
             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;
-                    }
-                });
+            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;
             }
-            model.checked = !model.checked;
+            this.modelChange.emit(this._model);
             this.collectionChange.emit(this.collection);
         };
+        FilterItemComponent.prototype.uncheckForSingleSelect = function (model) {
+            this.collection.forEach(function (m) {
+                if (m.code !== model.code && m.description !== model.description) {
+                    m.checked = false;
+                }
+            });
+        };
         FilterItemComponent.prototype.valueSelected = function () {
             if (this.collection) {
                 return !!this.collection.find(function (c) { return c.checked; });
@@ -11620,20 +11763,268 @@
         FilterItemComponent.prototype.onButtonClicked = function () {
             this.filterButtonClicked.emit();
         };
+        /////////////////////////////////////////////////////////////
+        //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) {
+                    if (viewModel.checked) {
+                        filterRange.push("?='" + viewModel.code + "'");
+                    }
+                });
+                if (filterRange.length > 0) {
+                    this._model = filterRange.join(',');
+                }
+                else {
+                    this._model = undefined;
+                }
+            }
+        };
+        FilterItemComponent.prototype._createModelForStringCollectionList = function () {
+            var filterRange = [];
+            this.collection.forEach(function (viewModel) {
+                if (viewModel.checked) {
+                    filterRange.push(viewModel.code.toString());
+                }
+            });
+            if (filterRange.length > 0) {
+                this._model = filterRange;
+            }
+            else {
+                this._model = undefined;
+            }
+        };
+        FilterItemComponent.prototype._createModelForSingleSelectList = function () {
+            var filterString = "";
+            this.collection.forEach(function (viewModel) {
+                if (viewModel.checked) {
+                    filterString = viewModel.code.toString();
+                }
+            });
+            if (filterString.length > 0) {
+                this._model = filterString;
+            }
+            else {
+                this._model = undefined;
+            }
+        };
+        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) : '';
+                this._model = "?>='" + startDateRequest + "'& ?<='" + endDateRequest + "'";
+            }
+        };
+        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;
+        };
+        ////////////////////////////////////////////////////////////
+        //Model reading for all of the different options available//
+        ////////////////////////////////////////////////////////////
+        FilterItemComponent.prototype._readModelForFilterList = function (filterModel) {
+            var e_1, _c;
+            var filterList = [];
+            var itemsToCheck = [];
+            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 !== null && filter !== undefined) {
+                        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;
+            }
+        };
+        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) {
+                    filter.checked = true;
+                }
+            }
+        };
+        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.toString()) > -1) {
+                        viewModel.checked = true;
+                    }
+                    else {
+                        viewModel.checked = false;
+                    }
+                });
+            }
+        };
+        FilterItemComponent.prototype._readModelForSelectListWithNumberOutput = function (numberModel) {
+            var e_2, _c;
+            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;
+                        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) {
+            this._model = 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) {
+            this._model = checkboxToTextModel;
+            if (checkboxToTextModel !== undefined && checkboxToTextModel !== null) {
+                this.checkBoxToTextModel = (checkboxToTextModel.indexOf('J') > -1);
+            }
+            else {
+                this.checkBoxToTextModel = false;
+            }
+        };
+        FilterItemComponent.prototype._readModelForCheckboxToBinary = function (checkboxToBinary) {
+            this._model = checkboxToBinary;
+            if (checkboxToBinary !== undefined && checkboxToBinary !== null) {
+                this.checkBoxToTextModel = (checkboxToBinary >= 1);
+            }
+            else {
+                this.checkBoxToTextModel = false;
+            }
+        };
+        FilterItemComponent.prototype._readModelForDateField = function (dateFieldModel) {
+            this._model = dateFieldModel;
+            if (dateFieldModel !== undefined && dateFieldModel !== null) {
+                this._model = new Date(dateFieldModel);
+            }
+        };
+        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);
+                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]));
+            }
+        };
         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  ",
+                    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 }],
         collection: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         initialLimit: [{ type: i0.Input }],
@@ -11642,15 +12033,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 +12100,10 @@
                         PrependPipeModule,
                         InputTextModule,
                         InputRadioButtonModule,
-                        InputTextModule
+                        InputTextModule,
+                        CoreComponentsTranslationModule,
+                        InputDatePickerModule,
+                        InputDateRangePickerModule
                     ],
                     declarations: [
                         FilterItemComponent