@colijnit/corecomponents_v12 12.0.32 → 12.0.33

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('@angular/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/forms'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/drag-drop')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@syncfusion/ej2-angular-splitbuttons', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', '@angular/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-richtexteditor', '@angular/forms', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/drag-drop'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.common, global.ng.common.http, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ej2AngularSplitbuttons, global.three, global.CSS3DRenderer, global.TWEEN, global.ng.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularRichtexteditor, global.ng.forms, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop));
-})(this, (function (exports, core, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, three, CSS3DRenderer, TWEEN, animations, ej2AngularPopups, ej2AngularKanban, ej2AngularRichtexteditor, forms, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, dragDrop) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('@angular/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/forms'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/drag-drop'), require('@angular/cdk/scrolling')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@syncfusion/ej2-angular-splitbuttons', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', '@angular/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-richtexteditor', '@angular/forms', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/drag-drop', '@angular/cdk/scrolling'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.common, global.ng.common.http, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ej2AngularSplitbuttons, global.three, global.CSS3DRenderer, global.TWEEN, global.ng.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularRichtexteditor, global.ng.forms, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop, global.ng.cdk.scrolling));
+})(this, (function (exports, core, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, three, CSS3DRenderer, TWEEN, animations, ej2AngularPopups, ej2AngularKanban, ej2AngularRichtexteditor, forms, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, dragDrop, scrolling) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -4541,6 +4541,7 @@
         };
         BaseInputComponent.prototype.ngOnDestroy = function () {
             var _this = this;
+            this._removeSelfFromForm();
             if (this.input) {
                 this.input.removeEventListener('blur', function (event) { return _this.doBlur(event); });
                 this.input.removeEventListener('focus', function (event) { return _this.doFocus(event); });
@@ -6956,7 +6957,6 @@
             _super.prototype.handleKeyDown.call(this, event);
         };
         InputNumberPickerComponent.prototype.handleChangeModel = function (value) {
-            console.log(value);
             this.numberLogic.setValue(value);
         };
         // Note: recursive through setTimeout().
@@ -9177,6 +9177,7 @@
             this.resizable = false;
             this.inlineEdit = false;
             this.showToolbar = false;
+            this.autoAddRow = false;
             /**
              * Should component emit drag and drop actions instead of handle
              * (update collection) by itself
@@ -9310,6 +9311,7 @@
         resizable: [{ type: core.Input }],
         inlineEdit: [{ type: core.Input }],
         showToolbar: [{ type: core.Input }],
+        autoAddRow: [{ type: core.Input }],
         emitDragDrop: [{ type: core.Input }],
         extraColumns: [{ type: core.Input }],
         onDrop: [{ type: core.Output }],
@@ -9327,7 +9329,7 @@
             _this._changeDetection = _changeDetection;
             _this._formMaster = _formMaster;
             _this.defaultTextAlign = exports.ColumnAlign.Left;
-            _this.editting = false;
+            _this.editing = false;
             _this.editRowIndex = -1;
             _this.editCellIndex = -1;
             _this.selectedRowIndex = -1;
@@ -9382,42 +9384,43 @@
             var valid = this.validateAndSave();
             this._detectChanges();
             if (valid) {
-                this.data.unshift({});
+                this.data.push({});
                 this._newRow = true;
-                this.editRowIndex = 0;
+                this.editRowIndex = this.data.length - 1;
                 this._nextAvailableCellToEdit(true).then(function (index) {
                     _this.editCellIndex = index;
                     _this._detectChanges();
                 });
-                this.editting = true;
-                this.rowToEdit = this.data[0];
+                this.editing = true;
+                this.rowToEdit = this.data[this.data.length - 1];
                 this._detectChanges();
             }
         };
-        SimpleGridComponent.prototype.validateAndSave = function (stopEditting) {
-            if (stopEditting === void 0) { stopEditting = true; }
-            if (!this.editting) {
+        SimpleGridComponent.prototype.validateAndSave = function (stopediting) {
+            if (stopediting === void 0) { stopediting = true; }
+            if (!this.editing) {
                 return true;
             }
             var valid = this._formMaster.submitSlaves();
             this._detectChanges();
             if (valid) {
-                this._saveRow(stopEditting);
+                this._saveRow(stopediting);
                 return true;
             }
+            return false;
         };
         SimpleGridComponent.prototype.cancelEditRow = function () {
-            if (!this.editting) {
+            if (!this.editing) {
                 return;
             }
             if (this._newRow) {
-                this.data.shift();
+                this.data.splice(this.data.length - 1, 1);
             }
             else {
                 this.data[this.editRowIndex] = this.rowToEdit;
             }
             this._newRow = false;
-            this.editting = false;
+            this.editing = false;
             this._detectChanges();
         };
         SimpleGridComponent.prototype.handleClickRow = function (event, index) {
@@ -9431,7 +9434,7 @@
         };
         SimpleGridComponent.prototype.selectTheRow = function (index, emit) {
             if (emit === void 0) { emit = true; }
-            if (this.selectedRowIndex !== index && ((this.editting && this.validateAndSave()) || !this.editting)) {
+            if (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing)) {
                 this.selectedRowIndex = index;
                 if (emit) {
                     this.selectRow.next(this.data[this.selectedRowIndex]);
@@ -9452,7 +9455,7 @@
             var _this = this;
             this.editRowIndex = this.selectedRowIndex;
             this.rowToEdit = this.data[this.editRowIndex];
-            this.editting = true;
+            this.editing = true;
             this._nextAvailableCellToEdit(true).then(function (index) {
                 _this.editCellIndex = index;
             });
@@ -9524,7 +9527,13 @@
             return new Promise(function (resolve, reject) {
                 var newRowIndex = 0;
                 if (_this.editRowIndex + 1 >= _this.data.length) {
-                    newRowIndex = 0;
+                    if (_this.autoAddRow) {
+                        _this.addRow();
+                        newRowIndex = _this.editRowIndex;
+                    }
+                    else {
+                        newRowIndex = 0;
+                    }
                 }
                 else {
                     newRowIndex = _this.editRowIndex + 1;
@@ -9567,17 +9576,17 @@
                 }
             });
         };
-        SimpleGridComponent.prototype._saveRow = function (stopEditting) {
-            if (stopEditting === void 0) { stopEditting = true; }
+        SimpleGridComponent.prototype._saveRow = function (stopediting) {
+            if (stopediting === void 0) { stopediting = true; }
             // emit saveEvent
             if (this.rowToEdit) {
                 this.saveRow.next(this.rowToEdit);
             }
             this._newRow = false;
-            if (stopEditting) {
+            if (stopediting) {
                 this.editRowIndex = -1;
                 this.editCellIndex = -1;
-                this.editting = false;
+                this.editing = false;
                 this.rowToEdit = undefined;
             }
             this._detectChanges();
@@ -9590,7 +9599,7 @@
     SimpleGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-simple-grid",
-                    template: "\n    <co-grid-toolbar *ngIf=\"inlineEdit && showToolbar\"\n                     (addClick)=\"addRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\" [attr.width]=\"column.width\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\">\n            <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                 [textContent]=\"column.headerText\"\n            ></div>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex\"\n          [class.editting]=\"rowIndex === editRowIndex\" *ngFor=\"let row of data; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\">\n          <co-form class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.length\">\n                <co-simple-grid-cell\n                  [column]=\"columns[singleColumnIndex(row)]\"\n                  [row]=\"row\"\n                  [editMode]=\"false\"\n                ></co-simple-grid-cell>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n              <ng-container *ngFor=\"let column of headerColumns; let columnIndex = index\">\n                <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                  <co-simple-grid-cell\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [editMode]=\"inlineEdit && editting && rowIndex === editRowIndex\"\n                    [fieldEditMode]=\"editCellIndex === columnIndex\"\n                    (cellClick)=\"handleCellClick(columnIndex)\"\n                  ></co-simple-grid-cell>\n                  <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                </td>\n              </ng-container>\n            </ng-container>\n          </co-form>\n        </tr>\n      </tbody>\n    </table>\n  ",
+                    template: "\n    <co-grid-toolbar *ngIf=\"inlineEdit && showToolbar\"\n                     (addClick)=\"addRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\" [attr.width]=\"column.width\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\">\n            <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                 [textContent]=\"column.headerText\"\n            ></div>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\"\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of data; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\">\n          <co-form class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.length\">\n                <co-simple-grid-cell\n                  [column]=\"columns[singleColumnIndex(row)]\"\n                  [row]=\"row\"\n                  [editMode]=\"false\"\n                ></co-simple-grid-cell>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n              <ng-container *ngFor=\"let column of headerColumns; let columnIndex = index\">\n                <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                  <co-simple-grid-cell\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                    [fieldEditMode]=\"editCellIndex === columnIndex\"\n                    (cellClick)=\"handleCellClick(columnIndex)\"\n                  ></co-simple-grid-cell>\n                  <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                </td>\n              </ng-container>\n            </ng-container>\n          </co-form>\n        </tr>\n      </tbody>\n    </table>\n  ",
                     providers: [
                         FormMasterService
                     ],
@@ -9823,6 +9832,7 @@
         };
         FilterItemComponent.prototype.ngOnInit = function () {
             this.setToInitialLimit();
+            this.maxItems = Math.min(this.limitTo, this.collection.length);
         };
         FilterItemComponent.prototype.setToInitialLimit = function () {
             this.limitTo = this.initialLimit;
@@ -9853,7 +9863,6 @@
             if (!this.collection) {
                 return [];
             }
-            console.log('filteren');
             var filterText = this.filterText.toLowerCase();
             var filteredItemCount = 0;
             this.filteredCollection = (_a = this.collection) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
@@ -9873,8 +9882,9 @@
     FilterItemComponent.decorators = [
         { type: core.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      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\">\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=\"searchable\"\n                [placeholder]=\"searchPlaceholder\"\n                [(model)]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"co-filter-item-collection-results\">\n                <div class=\"co-filter-item-collection-result-items\"\n                     *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || !showMore\">\n                    <co-input-checkbox [label]=\"option[fields.text]\"\n                                       [(model)]=\"option['checked']\"\n                                       (modelChange)=\"updateSelection()\"\n                    ></co-input-checkbox>\n                  </div>\n                </div>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"showMore\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    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      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\">\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=\"searchable\"\n                [placeholder]=\"searchPlaceholder\"\n                [(model)]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <cdk-virtual-scroll-viewport [itemSize]=\"25\" [style.height.px]=\"maxItems * 25\" class=\"co-filter-item-collection-results\">\n                <div class=\"co-filter-item-collection-result-items\"\n                     *cdkVirtualFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || !showMore\">\n                    <co-input-checkbox [label]=\"option[fields.text]\"\n                                       [(model)]=\"option['checked']\"\n                                       (modelChange)=\"updateSelection()\"\n                    ></co-input-checkbox>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"fields.count\"\n                         [textContent]=\"option[fields.count] | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n                </div>\n              </cdk-virtual-scroll-viewport>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"showMore\">\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  ",
+                    encapsulation: core.ViewEncapsulation.None,
+                    changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     FilterItemComponent.ctorParameters = function () { return [
@@ -9896,6 +9906,41 @@
         showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
     };
 
+    // A pipe for prepending strings to other strings in view templates.
+    var PrependPipe = /** @class */ (function () {
+        function PrependPipe() {
+        }
+        PrependPipe.prototype.transform = function (value, prepend) {
+            if (!value) {
+                return "";
+            }
+            if (!prepend) {
+                return value;
+            }
+            return prepend + value;
+        };
+        return PrependPipe;
+    }());
+    PrependPipe.decorators = [
+        { type: core.Pipe, args: [{ name: "prepend" },] }
+    ];
+
+    var PrependPipeModule = /** @class */ (function () {
+        function PrependPipeModule() {
+        }
+        return PrependPipeModule;
+    }());
+    PrependPipeModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        PrependPipe
+                    ],
+                    exports: [
+                        PrependPipe
+                    ]
+                },] }
+    ];
+
     var FilterItemModule = /** @class */ (function () {
         function FilterItemModule() {
         }
@@ -9910,6 +9955,9 @@
                         InputCheckboxMultiSelectModule,
                         InputCheckboxModule,
                         IconModule,
+                        scrolling.ScrollingModule,
+                        AppendPipeModule,
+                        PrependPipeModule
                     ],
                     declarations: [
                         FilterItemComponent
@@ -10016,6 +10064,8 @@
     exports.TileModule = TileModule;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;
+    exports["ɵba"] = PrependPipeModule;
+    exports["ɵbb"] = PrependPipe;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;