@colijnit/corecomponents_v12 12.0.36 → 12.0.39

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -3475,6 +3475,7 @@
             this.icons = exports.CoreComponentsIcon;
             this.showCloseIcon = true;
             this.modal = false;
+            this.borderless = false;
             this.animation = true;
             this.closeClick = new core.EventEmitter();
             this.overlayClick = new core.EventEmitter();
@@ -3482,9 +3483,12 @@
         CoDialogComponent.prototype.showClass = function () {
             return true;
         };
+        CoDialogComponent.prototype.handleCloseDialog = function (event) {
+            this.closeClick.emit(event);
+        };
         CoDialogComponent.prototype.handleOverlayClick = function (event) {
             if (!this.modal) {
-                this.overlayClick.next(event);
+                this.overlayClick.emit(event);
             }
         };
         return CoDialogComponent;
@@ -3492,7 +3496,7 @@
     CoDialogComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-dialog',
-                    template: "\n    <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\" [@showHideOverlay]=\"animation\"></div>\n    <div class=\"co-dialog-wrapper\" [@showHideDialog]=\"animation\">\n      <div class=\"dialog-header\">\n        <ng-content select=\"[header]\"></ng-content>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"closeClick.emit($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"dialog-footer\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\" [@showHideOverlay]=\"animation\"></div>\n    <div class=\"co-dialog-wrapper\" [@showHideDialog]=\"animation\">\n      <div class=\"dialog-header\" *ngIf=\"!borderless\">\n        <div class=\"dialog-header-caption\">\n            <ng-content select=\"[header]\"></ng-content>\n        </div>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"dialog-footer\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger('showHideOverlay', [
                             animations.state('*', animations.style({ opacity: 1 })),
@@ -3513,6 +3517,7 @@
     CoDialogComponent.propDecorators = {
         showCloseIcon: [{ type: core.Input }],
         modal: [{ type: core.Input }],
+        borderless: [{ type: core.HostBinding, args: ['class.borderless',] }, { type: core.Input }],
         animation: [{ type: core.Input }],
         closeClick: [{ type: core.Output }],
         overlayClick: [{ type: core.Output }],
@@ -4870,7 +4875,7 @@
             var _this = this;
             if (this.elementRef && this.elementRef.nativeElement) {
                 //try to find input element
-                this.input = this._findInputNode(this.elementRef.nativeElement.children);
+                this._findInputNode(this.elementRef.nativeElement.children);
                 if (this.input) {
                     this.input.addEventListener('blur', function (event) { return _this.doBlur(event); });
                     this.input.addEventListener('focus', function (event) { return _this.doFocus(event); });
@@ -4881,7 +4886,8 @@
             for (var i = 0; i < nodes.length; i++) {
                 var node = nodes[i];
                 if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
-                    return node;
+                    this.input = node;
+                    break;
                 }
                 else if (node.children.length > 0) {
                     this._findInputNode(node.children);
@@ -5394,7 +5400,7 @@
     DropDownListComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-drop-down-list",
-                    template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n      (valueChange)=\"handleValueChanged($event)\"\n      showClearButton=\"true\"\n      floatLabelType=\"Auto\"\n    >\n    </ejs-dropdownlist>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n      (valueChange)=\"handleValueChanged($event)\"\n      showClearButton=\"true\"\n      floatLabelType=\"Auto\"\n    >\n    </ejs-dropdownlist>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [
                         ej2AngularDropdowns.CheckBoxSelectionService,
                         {
@@ -5959,6 +5965,50 @@
                 },] }
     ];
 
+    var GridToolbarButtonComponent = /** @class */ (function () {
+        function GridToolbarButtonComponent() {
+            this.disabled = false;
+            this.buttonClick = new core.EventEmitter();
+        }
+        GridToolbarButtonComponent.prototype.showClass = function () {
+            return true;
+        };
+        return GridToolbarButtonComponent;
+    }());
+    GridToolbarButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-grid-toolbar-button",
+                    template: "\n    <div class=\"grid-toolbar-button-wrapper\" [class.disabled]=\"disabled\" (click)=\"buttonClick.next()\">\n      <co-icon [iconData]=\"iconData\"></co-icon>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    GridToolbarButtonComponent.propDecorators = {
+        iconData: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        buttonClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-grid-toolbar-button",] }]
+    };
+
+    ej2Base.enableRipple(true);
+    var GridToolbarButtonModule = /** @class */ (function () {
+        function GridToolbarButtonModule() {
+        }
+        return GridToolbarButtonModule;
+    }());
+    GridToolbarButtonModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        IconModule,
+                    ],
+                    declarations: [
+                        GridToolbarButtonComponent
+                    ],
+                    exports: [
+                        GridToolbarButtonComponent
+                    ]
+                },] }
+    ];
+
     var InputCheckboxComponent = /** @class */ (function (_super) {
         __extends(InputCheckboxComponent, _super);
         function InputCheckboxComponent(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
@@ -5990,7 +6040,7 @@
     InputCheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-checkbox",
-                    template: "\n    <ejs-checkbox [label]=\"label\"\n                  [name]=\"name\"\n                  [cssClass]=\"cssClass\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"handleModelChange($event)\"\n    ></ejs-checkbox>\n  ",
+                    template: "\n    <ejs-checkbox [label]=\"label\"\n                  [name]=\"name\"\n                  [cssClass]=\"cssClass\"\n                  [ngModel]=\"model\"\n                  [disabled]=\"disabled\"\n                  (ngModelChange)=\"handleModelChange($event)\"\n    ></ejs-checkbox>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputCheckboxComponent; })
@@ -6883,17 +6933,19 @@
             });
             return _this;
         }
-        Object.defineProperty(InputNumberPickerComponent.prototype, "min", {
+        Object.defineProperty(InputNumberPickerComponent.prototype, "model", {
+            get: function () {
+                return _super.prototype.model;
+            },
             // @override
-            // @Input()
-            // public set model(model: number) {
-            //   super.model = model;
-            //   this.numberLogic.value = model;
-            // }
-            //
-            // public get model(): number {
-            //   return this.numberLogic.value;
-            // }
+            set: function (model) {
+                this.setValue(model, true);
+                _super.prototype.model = model;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(InputNumberPickerComponent.prototype, "min", {
             set: function (min) {
                 this.numberLogic.min = min;
             },
@@ -7102,6 +7154,7 @@
         { type: FormInputUserModelChangeListenerService }
     ]; };
     InputNumberPickerComponent.propDecorators = {
+        model: [{ type: core.Input }],
         min: [{ type: core.Input }],
         step: [{ type: core.Input }],
         max: [{ type: core.Input }],
@@ -9231,6 +9284,7 @@
             this.selectRow = new core.EventEmitter();
             this.dblClickRow = new core.EventEmitter();
             this.saveRow = new core.EventEmitter();
+            this.rowVisible = new core.EventEmitter();
             this.columns = [];
             this.headerColumns = [];
             this._data = [];
@@ -9362,6 +9416,7 @@
         selectRow: [{ type: core.Output }],
         dblClickRow: [{ type: core.Output }],
         saveRow: [{ type: core.Output }],
+        rowVisible: [{ type: core.Output }],
         handleMouseMove: [{ type: core.HostListener, args: ['document:mousemove', ['$event'],] }],
         handleMouseUp: [{ type: core.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
@@ -9643,7 +9698,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\"  [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\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  ",
+                    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\"  [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\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\" observeVisibility\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of data; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\" (visible)=\"rowVisible.next(row)\">\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
                     ],
@@ -9812,6 +9867,115 @@
         handleClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
     };
 
+    var ObserveVisibilityDirective = /** @class */ (function () {
+        function ObserveVisibilityDirective(_element) {
+            this._element = _element;
+            this.debounceTime = 0;
+            this.threshold = 0;
+            this.visible = new core.EventEmitter();
+            this._subject = new rxjs.Subject();
+        }
+        ObserveVisibilityDirective.prototype.ngOnInit = function () {
+            this._createObserver();
+        };
+        ObserveVisibilityDirective.prototype.ngAfterViewInit = function () {
+            this._startObservingElements();
+        };
+        ObserveVisibilityDirective.prototype.ngOnDestroy = function () {
+            if (this._observer) {
+                this._observer.disconnect();
+                this._observer = undefined;
+            }
+            this._subject.next();
+            this._subject.complete();
+        };
+        ObserveVisibilityDirective.prototype._isVisible = function (element) {
+            var _this = this;
+            return new Promise(function (resolve) {
+                var observer = new IntersectionObserver(function (_a) {
+                    var _b = __read(_a, 1), entry = _b[0];
+                    resolve(entry.isIntersecting && entry.intersectionRatio >= _this.threshold);
+                    observer.disconnect();
+                });
+                observer.observe(element);
+            });
+        };
+        ObserveVisibilityDirective.prototype._createObserver = function () {
+            var _this = this;
+            var options = {
+                rootMargin: '0px',
+                threshold: this.threshold,
+            };
+            var isIntersecting = function (entry) { return entry.isIntersecting || entry.intersectionRatio > 0; };
+            this._observer = new IntersectionObserver(function (entries, observer) {
+                entries.forEach(function (entry) {
+                    if (isIntersecting(entry)) {
+                        _this._subject.next({ entry: entry, observer: observer });
+                    }
+                });
+            }, options);
+        };
+        ObserveVisibilityDirective.prototype._startObservingElements = function () {
+            var _this = this;
+            if (!this._observer) {
+                return;
+            }
+            this._observer.observe(this._element.nativeElement);
+            this._subject
+                .pipe(operators.delay(this.debounceTime), operators.filter(Boolean))
+                .subscribe(function (_a) {
+                var entry = _a.entry, observer = _a.observer;
+                return __awaiter(_this, void 0, void 0, function () {
+                    var target, isStillVisible;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                target = entry.target;
+                                return [4 /*yield*/, this._isVisible(target)];
+                            case 1:
+                                isStillVisible = _a.sent();
+                                if (isStillVisible) {
+                                    this.visible.emit(target);
+                                    observer.unobserve(target);
+                                }
+                                return [2 /*return*/];
+                        }
+                    });
+                });
+            });
+        };
+        return ObserveVisibilityDirective;
+    }());
+    ObserveVisibilityDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[observeVisibility]',
+                },] }
+    ];
+    ObserveVisibilityDirective.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
+    ObserveVisibilityDirective.propDecorators = {
+        debounceTime: [{ type: core.Input }],
+        threshold: [{ type: core.Input }],
+        visible: [{ type: core.Output }]
+    };
+
+    var ObserveVisibilityModule = /** @class */ (function () {
+        function ObserveVisibilityModule() {
+        }
+        return ObserveVisibilityModule;
+    }());
+    ObserveVisibilityModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        ObserveVisibilityDirective
+                    ],
+                    exports: [
+                        ObserveVisibilityDirective
+                    ]
+                },] }
+    ];
+
     var SimpleGridModule = /** @class */ (function () {
         function SimpleGridModule() {
         }
@@ -9824,7 +9988,8 @@
                         dragDrop.DragDropModule,
                         GridToolbarModule,
                         InputTextModule,
-                        FormModule
+                        FormModule,
+                        ObserveVisibilityModule
                     ],
                     declarations: [
                         SimpleGridComponent,
@@ -9854,6 +10019,7 @@
             this.showLessLabel = 'Show less';
             this.noResultsLabel = "No results";
             this.collectionChange = new core.EventEmitter();
+            this.filterTextChange = new core.EventEmitter();
             this.filteredCollection = [];
             this.limitTo = 10;
             this.filterText = "";
@@ -9900,6 +10066,7 @@
         // Applies filter to the collection.
         FilterItemComponent.prototype.applyFilter = function (text) {
             var _a, _b;
+            this.filterTextChange.emit(text);
             if (!this.collection) {
                 return [];
             }
@@ -9923,7 +10090,7 @@
     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=\"collection?.length > 10\"\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                <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 || showAllResults\">\n                    <co-input-checkbox [label]=\"option.description\"\n                                       [(model)]=\"option.checked\"\n                                       (modelChange)=\"collectionChange.emit(collection)\"\n                    ></co-input-checkbox>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </div>\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      >\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=\"collection?.length > 10\"\n                [placeholder]=\"searchPlaceholder\"\n                [(model)]=\"filterText\"\n                (modelChange)=\"applyFilter(filterText)\"\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                <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 || showAllResults\">\n                    <co-input-checkbox [label]=\"option.description\"\n                                       [(model)]=\"option.checked\"\n                                       (modelChange)=\"collectionChange.emit(collection)\"\n                    ></co-input-checkbox>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </div>\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  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -9942,6 +10109,7 @@
         showLessLabel: [{ type: core.Input }],
         noResultsLabel: [{ type: core.Input }],
         collectionChange: [{ type: core.Output }],
+        filterTextChange: [{ type: core.Output }],
         showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
     };
 
@@ -10055,6 +10223,8 @@
     exports.FormComponent = FormComponent;
     exports.FormMasterService = FormMasterService;
     exports.FormModule = FormModule;
+    exports.GridToolbarButtonComponent = GridToolbarButtonComponent;
+    exports.GridToolbarButtonModule = GridToolbarButtonModule;
     exports.GridToolbarComponent = GridToolbarComponent;
     exports.GridToolbarModule = GridToolbarModule;
     exports.IconCacheService = IconCacheService;
@@ -10103,8 +10273,10 @@
     exports.TileModule = TileModule;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;
-    exports["ɵba"] = PrependPipeModule;
-    exports["ɵbb"] = PrependPipe;
+    exports["ɵba"] = ObserveVisibilityDirective;
+    exports["ɵbb"] = SimpleGridCellComponent;
+    exports["ɵbc"] = PrependPipeModule;
+    exports["ɵbd"] = PrependPipe;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;
@@ -10128,7 +10300,7 @@
     exports["ɵw"] = CommitButtonsComponent;
     exports["ɵx"] = PopupShowerService;
     exports["ɵy"] = BaseSimpleGridComponent;
-    exports["ɵz"] = SimpleGridCellComponent;
+    exports["ɵz"] = ObserveVisibilityModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });