@colijnit/corecomponents_v12 12.1.7 → 12.1.9

package/fesm2015/colijnit-corecomponents_v12.js

@@ -5131,10 +5131,20 @@ IconCollapseHandleModule.decorators = [
 
 var FilterItemMode;
 (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.
@@ -5155,7 +5165,7 @@ var FilterItemMode;
     // 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";
 })(FilterItemMode || (FilterItemMode = {}));
 
@@ -5409,6 +5419,11 @@ InputDatePickerComponent.propDecorators = {
 
 class OverlayDirective {
     constructor(elementRef) {
+        /**
+         * 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;
@@ -5469,12 +5484,25 @@ class OverlayDirective {
         if (this._elementRef && this._elementRef.nativeElement && this._parent && this._parent.nativeElement) {
             const elementRect = this._elementRef.nativeElement.getBoundingClientRect();
             const parentBoundingRect = this._parent.nativeElement.getBoundingClientRect();
-            const 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
-            };
+            let 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);
         }
     }
@@ -5527,6 +5555,7 @@ OverlayDirective.ctorParameters = () => [
 OverlayDirective.propDecorators = {
     parent: [{ type: Input, args: ["overlay",] }],
     view: [{ type: Input }],
+    inline: [{ type: Input }],
     keepInView: [{ type: Input }],
     inheritWidth: [{ type: Input }],
     rightAlign: [{ type: Input }],
@@ -10957,19 +10986,17 @@ function emailValidator(control) {
 }
 
 class FilterItemComponent {
-    constructor(iconService) {
+    constructor(iconService, _changeDetector) {
         this.iconService = iconService;
+        this._changeDetector = _changeDetector;
         this.icons = CoreComponentsIcon;
         this.modes = 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';
@@ -10985,46 +11012,27 @@ class FilterItemComponent {
         this.filterText = "";
         this.showButton = false;
         this._collection = [];
+        this._mode = this.modes.Filterlist;
+    }
+    set mode(value) {
+        this._mode = value;
+        this.readModelForMode(this._model);
+    }
+    get mode() {
+        return this._mode;
     }
     set collection(value) {
         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;
     }
     get collection() {
         return this._collection;
     }
-    set model(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 model(newModel) {
+        this.readModelForMode(newModel);
     }
     get model() {
         return this._model;
@@ -11032,8 +11040,6 @@ class FilterItemComponent {
     ngOnInit() {
         this.setToInitialLimit();
         this.showButton = this.valueSelected();
-        this.sliderMin = this.sliderDefaultMin;
-        this.sliderMax = this.sliderDefaultMax;
         this.checkBoxToTextModel = false;
     }
     setToInitialLimit() {
@@ -11057,46 +11063,90 @@ class FilterItemComponent {
         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;
     }
     handleModelChange(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);
+    }
+    valueSelected() {
+        if (this.collection) {
+            return !!this.collection.find(c => c.checked);
+        }
+        return false;
+    }
+    // Applies filter to the collection.
+    applyFilter(text) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn) {
+                if (text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length) {
+                    this.collection = yield this.collectionLoadFn(text);
+                }
+                else if (text.length < this.minSearchCharsToLoadCollection) {
+                    this.collection = undefined;
+                }
+            }
+            this.filterText = text;
+            if (!this.collection) {
+                return [];
+            }
+            const filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+            let filteredItemCount = 0;
+            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter((item) => {
+                var _a;
+                const labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+                const isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
+                if (isHiddenByFilter) {
+                    return false;
+                }
+                else {
+                    filteredItemCount++;
+                    return true;
+                }
+            });
+        });
+    }
+    onButtonClicked() {
+        this.filterButtonClicked.emit();
     }
     uncheckForSingleSelect(model) {
         this.collection.forEach(m => {
@@ -11105,7 +11155,42 @@ class FilterItemComponent {
             }
         });
     }
-    createModelForFilterList() {
+    readModelForMode(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//
+    /////////////////////////////////////////////////////////////
+    _createModelForFilterList() {
         let filterRange = [];
         if (this.collection !== null && this.collection !== undefined) {
             this.collection.forEach((viewModel) => {
@@ -11113,28 +11198,43 @@ class FilterItemComponent {
                     filterRange.push(`?='${viewModel.code}'`);
                 }
             });
-            this._model = filterRange.join(',');
+            if (filterRange.length > 0) {
+                this._model = filterRange.join(',');
+            }
+            else {
+                this._model = undefined;
+            }
         }
     }
-    createModelForStringCollectionList() {
+    _createModelForStringCollectionList() {
         let filterRange = [];
         this.collection.forEach((viewModel) => {
             if (viewModel.checked) {
                 filterRange.push(viewModel.code.toString());
             }
         });
-        this._model = filterRange;
+        if (filterRange.length > 0) {
+            this._model = filterRange;
+        }
+        else {
+            this._model = undefined;
+        }
     }
-    createModelForSingleSelectList() {
+    _createModelForSingleSelectList() {
         let filterString = "";
         this.collection.forEach((viewModel) => {
             if (viewModel.checked) {
                 filterString = viewModel.code.toString();
             }
         });
-        this._model = filterString;
+        if (filterString.length > 0) {
+            this._model = filterString;
+        }
+        else {
+            this._model = undefined;
+        }
     }
-    createModelForSelectListWithNumberOutput() {
+    _createModelForSelectListWithNumberOutput() {
         let filterNumber = null;
         this.collection.forEach((viewModel) => {
             if (viewModel.checked) {
@@ -11146,14 +11246,14 @@ class FilterItemComponent {
         });
         this._model = filterNumber;
     }
-    createModelForSliderMode() {
+    _createModelForSliderMode() {
         this.sliderMin = !!this.sliderMin ? this.sliderMin : this.sliderDefaultMin;
         this.sliderMax = !!this.sliderMax ? this.sliderMax : this.sliderDefaultMax;
         let trueLowerBound = Math.min(this.sliderMin, this.sliderMax);
         let trueUpperBound = Math.max(this.sliderMin, this.sliderMax);
         this._model = `${trueLowerBound} - ${trueUpperBound}`;
     }
-    createModelForCheckboxToText() {
+    _createModelForCheckboxToText() {
         if (this.checkBoxToTextModel) {
             this._model = "?='J'";
         }
@@ -11161,7 +11261,7 @@ class FilterItemComponent {
             this._model = "?='N'";
         }
     }
-    createModelForCheckboxToSimpleText() {
+    _createModelForCheckboxToSimpleText() {
         if (this.checkBoxToTextModel) {
             this._model = "J";
         }
@@ -11169,7 +11269,7 @@ class FilterItemComponent {
             this._model = "N";
         }
     }
-    createModelForCheckboxToBinary() {
+    _createModelForCheckboxToBinary() {
         if (this.checkBoxToTextModel) {
             this._model = 1;
         }
@@ -11177,14 +11277,13 @@ class FilterItemComponent {
             this._model = 0;
         }
     }
-    createModelForDateRange(dates) {
+    _createModelForDateRange(dates) {
         if (dates) {
             let startDate = dates[0];
             let endDate = dates[1];
             const startDateRequest = startDate ? this._formatDateToString(startDate) : '';
             const endDateRequest = endDate ? this._formatDateToString(endDate) : '';
-            const filter = `?>=\'${startDateRequest}\'& ?<=\'${endDateRequest}\'`;
-            this._model = filter;
+            this._model = `?>=\'${startDateRequest}\'& ?<=\'${endDateRequest}\'`;
         }
     }
     _formatDateToString(date) {
@@ -11193,45 +11292,44 @@ class FilterItemComponent {
         let year = date.getFullYear();
         return `${day}-${month}-${year}`;
     }
-    readModelForFilterList(filterModel) {
+    ////////////////////////////////////////////////////////////
+    //Model reading for all of the different options available//
+    ////////////////////////////////////////////////////////////
+    _readModelForFilterList(filterModel) {
         let filterList = [];
         let 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((filter) => {
                 itemsToCheck.push(filter.substr(3, filter.length - 4));
             });
             for (const item of itemsToCheck) {
                 let filter = this.collection.find(element => element.code.toString() === item);
-                if (filter) {
+                if (filter !== null && filter !== undefined) {
                     filter.checked = true;
                 }
-                else {
-                    filter.checked = false;
-                }
             }
             this._model = filterModel;
         }
-        else {
-            this._model = undefined;
-        }
     }
-    readModelForSingleSelectList(singleSelectModel) {
-        this.uncheckAll();
-        if (singleSelectModel !== null && singleSelectModel !== undefined) {
-            let filter = this.collection.find(element => element.code === singleSelectModel);
-            if (filter) {
+    _readModelForSingleSelectList(singleSelectModel) {
+        this._uncheckAll();
+        this._model = singleSelectModel;
+        if (singleSelectModel !== null && singleSelectModel !== undefined && this.collection !== null && this.collection !== undefined) {
+            let filter = this.collection.find(element => element.code.toString() === singleSelectModel);
+            if (filter !== null && filter !== undefined) {
                 filter.checked = true;
             }
-            this.createModelForSingleSelectList();
         }
     }
-    readModelForStringCollectionList(collectionModel) {
-        this.uncheckAll();
+    _readModelForStringCollectionList(collectionModel) {
+        this._uncheckAll();
+        this._model = collectionModel;
         if (collectionModel !== null && collectionModel !== undefined && this.collection !== null && this.collection !== undefined) {
             this.collection.forEach((viewModel) => {
-                if (collectionModel.indexOf(viewModel.code) > -1) {
+                if (collectionModel.indexOf(viewModel.code.toString()) > -1) {
                     viewModel.checked = true;
                 }
                 else {
@@ -11240,9 +11338,10 @@ class FilterItemComponent {
             });
         }
     }
-    readModelForSelectListWithNumberOutput(numberModel) {
-        this.uncheckAll();
-        if (numberModel !== null && numberModel !== undefined) {
+    _readModelForSelectListWithNumberOutput(numberModel) {
+        this._uncheckAll();
+        this._model = numberModel;
+        if (numberModel !== null && numberModel !== undefined && this.collection !== null && this.collection !== undefined) {
             for (const item of this.collection) {
                 const itemCode = item.code;
                 const modValue = (numberModel % (2 * itemCode));
@@ -11250,14 +11349,15 @@ class FilterItemComponent {
             }
         }
     }
-    uncheckAll() {
+    _uncheckAll() {
         if (this.collection !== null && this.collection !== undefined) {
             this.collection.forEach(m => {
                 m.checked = false;
             });
         }
     }
-    readModelForSliderMode(sliderModel) {
+    _readModelForSliderMode(sliderModel) {
+        this._model = sliderModel;
         if (sliderModel !== undefined && sliderModel !== null) {
             let sliderInputCollection = sliderModel.split(' - ');
             this.sliderMin = parseInt(sliderInputCollection[0]);
@@ -11268,7 +11368,8 @@ class FilterItemComponent {
             this.sliderMax = this.sliderDefaultMax;
         }
     }
-    readModelForCheckboxToText(checkboxToTextModel) {
+    _readModelForCheckboxToText(checkboxToTextModel) {
+        this._model = checkboxToTextModel;
         if (checkboxToTextModel !== undefined && checkboxToTextModel !== null) {
             this.checkBoxToTextModel = (checkboxToTextModel.indexOf('J') > -1);
         }
@@ -11276,7 +11377,8 @@ class FilterItemComponent {
             this.checkBoxToTextModel = false;
         }
     }
-    readModelForCheckboxToBinary(checkboxToBinary) {
+    _readModelForCheckboxToBinary(checkboxToBinary) {
+        this._model = checkboxToBinary;
         if (checkboxToBinary !== undefined && checkboxToBinary !== null) {
             this.checkBoxToTextModel = (checkboxToBinary >= 1);
         }
@@ -11284,7 +11386,8 @@ class FilterItemComponent {
             this.checkBoxToTextModel = false;
         }
     }
-    readModelForDateField(dateFieldModel) {
+    _readModelForDateField(dateFieldModel) {
+        this._model = dateFieldModel;
         if (dateFieldModel !== undefined && dateFieldModel !== null) {
             this._model = new Date(dateFieldModel);
         }
@@ -11292,7 +11395,8 @@ class FilterItemComponent {
             this._model = undefined;
         }
     }
-    readModelForDateRangeField(dateRangeFieldModel) {
+    _readModelForDateRangeField(dateRangeFieldModel) {
+        this._model = dateRangeFieldModel;
         if (dateRangeFieldModel !== undefined && dateRangeFieldModel !== null) {
             let dateCollection = dateRangeFieldModel.split('&');
             let startString = dateCollection[0].trim().substr(4, dateCollection[0].length - 5);
@@ -11302,47 +11406,10 @@ class FilterItemComponent {
             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]));
         }
-    }
-    valueSelected() {
-        if (this.collection) {
-            return !!this.collection.find(c => c.checked);
+        else {
+            this.dateRangeStart = undefined;
+            this.dateRangeEnd = undefined;
         }
-        return false;
-    }
-    // Applies filter to the collection.
-    applyFilter(text) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn) {
-                if (text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length) {
-                    this.collection = yield this.collectionLoadFn(text);
-                }
-                else if (text.length < this.minSearchCharsToLoadCollection) {
-                    this.collection = undefined;
-                }
-            }
-            this.filterText = text;
-            if (!this.collection) {
-                return [];
-            }
-            const filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-            let filteredItemCount = 0;
-            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter((item) => {
-                var _a;
-                const labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-                const isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
-                if (isHiddenByFilter) {
-                    return false;
-                }
-                else {
-                    filteredItemCount++;
-                    return true;
-                }
-            });
-        });
-    }
-    onButtonClicked() {
-        this.filterButtonClicked.emit();
     }
 }
 FilterItemComponent.decorators = [
@@ -11364,8 +11431,8 @@ FilterItemComponent.decorators = [
                (keydown)="showButton=true" (mousedown)="showButton=true">
             <ng-content></ng-content>
           </div>
-          <ng-template #collectionContent >
-            <div class="co-filter-item-collection-content" *ngIf="mode === modes.FilterList || mode === modes.SingleSelectList
+          <ng-template #collectionContent>
+            <div class="co-filter-item-collection-content" *ngIf="mode === modes.Filterlist || mode === modes.SingleSelectList
                                                                    || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput">
               <co-input-text
                 *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
@@ -11437,14 +11504,14 @@ FilterItemComponent.decorators = [
                 [(model)]="sliderMax"
                 (modelChange)="handleModelChange($event)"
               ></co-input-text>
-               <!-- <co-icon [iconData]="iconService.getIcon(icons.Check)" (click)="filterOnPrice()"></co-icon>-->
             </div>
             <div class="co-filter-item-checkbox-content" *ngIf="mode === modes.Checkbox ">
               <co-input-checkbox
                 [(model)]="model"
                 (modelChange)="handleModelChange($event)"></co-input-checkbox>
             </div>
-            <div class="co-filter-item-checkbox-content" *ngIf="mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary">
+            <div class="co-filter-item-checkbox-content"
+                 *ngIf="mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary">
               <co-input-checkbox
                 [(model)]="checkBoxToTextModel"
                 (modelChange)="handleModelChange($event)"></co-input-checkbox>
@@ -11478,7 +11545,8 @@ FilterItemComponent.decorators = [
             },] }
 ];
 FilterItemComponent.ctorParameters = () => [
-    { type: IconCacheService }
+    { type: IconCacheService },
+    { type: ChangeDetectorRef }
 ];
 FilterItemComponent.propDecorators = {
     mode: [{ type: Input }],