@colijnit/corecomponents_v12 12.0.47 → 12.0.50

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5394,6 +5394,7 @@
              * Where 'text' is showing in the dropdown and 'id' used for the model binding
              */
             _this.fields = {};
+            _this.allowFiltering = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -5410,7 +5411,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      [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  ",
+                    template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [allowFiltering]=\"allowFiltering\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [filterBarPlaceholder]=\"filterBarPlaceholder\"\n      [filterType]=\"filterType\"\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,
                         {
@@ -5436,6 +5437,9 @@
         collection: [{ type: core.Input }],
         fields: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
+        allowFiltering: [{ type: core.Input }],
+        filterBarPlaceholder: [{ type: core.Input }],
+        filterType: [{ type: core.Input }],
         itemTemplate: [{ type: core.Input }],
         headerTemplate: [{ type: core.Input }],
         valueTemplate: [{ type: core.Input }],
@@ -6242,7 +6246,7 @@
     InputComboBoxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-combo-box",
-                    template: "\n    <ejs-combobox #combo [dataSource]=\"collection\"\n                  [fields]=\"fields\"\n                  [placeholder]=\"placeholder\"\n                  [autofill]=\"true\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"modelChange.emit($event)\"\n                  (valueChange)=\"valueChange.emit($event)\"\n                  (focus)=\"onFocus()\"\n                  showClearButton=\"true\"\n                  floatLabelType=\"Auto\"\n    >\n    </ejs-combobox>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-combobox #combo [dataSource]=\"collection\"\n                  [fields]=\"fields\"\n                  [disabled]=\"readonly\"\n                  [placeholder]=\"placeholder\"\n                  [autofill]=\"true\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"modelChange.emit($event)\"\n                  (valueChange)=\"valueChange.emit($event)\"\n                  (focus)=\"onFocus()\"\n                  showClearButton=\"true\"\n                  floatLabelType=\"Auto\"\n    >\n    </ejs-combobox>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputComboBoxComponent; })
@@ -7261,7 +7265,7 @@
     InputTextComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-text",
-                    template: "\n    <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\" [textContent]=\"placeholder\"></label>\n    <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\"></co-icon>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [min]=\"type === 'number' && this.min ? this.min : undefined\"\n           [max]=\"type === 'number' && this.max ? this.max : undefined\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"></co-icon>\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n      [committing]=\"committing\"\n      [commitFinished]=\"commitFinished\"\n      (commitClick)=\"commitClick($event)\"\n      (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\" [textContent]=\"placeholder\"></label>\n    <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\"></co-icon>\n    <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"></co-icon>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [min]=\"type === 'number' && this.min ? this.min : undefined\"\n           [max]=\"type === 'number' && this.max ? this.max : undefined\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n      [committing]=\"committing\"\n      [commitFinished]=\"commitFinished\"\n      (commitClick)=\"commitClick($event)\"\n      (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextComponent; })
@@ -7547,9 +7551,10 @@
         function InputSearchComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.searchIcon = exports.CoreComponentsIcon.Magnifier;
-            _this.iconRight = false;
-            _this.noIcon = false;
             _this.search = new core.EventEmitter();
+            _this.useLeftIcon = false;
+            _this.useRightIcon = false;
+            _this.noIcon = false;
             return _this;
         }
         InputSearchComponent.prototype.showClass = function () {
@@ -7568,18 +7573,25 @@
     InputSearchComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-input-search',
-                    template: "\n    <co-input-text\n      [model]=\"model\"\n      [leftIcon]=\"!iconRight && !noIcon ? searchIcon : undefined\"\n      [rightIcon]=\"iconRight && !noIcon ? searchIcon : undefined\"\n      [placeholder]=\"placeholder\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n    ></co-input-text>\n  ",
+                    template: "\n    <co-input-text\n      [model]=\"model\"\n      [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n      [rightIcon]=\"useRightIcon ? searchIcon : null\"\n      [placeholder]=\"placeholder\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n    ></co-input-text>\n  ",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     InputSearchComponent.propDecorators = {
         placeholder: [{ type: core.Input }],
-        iconRight: [{ type: core.Input }],
-        noIcon: [{ type: core.HostBinding, args: ['class.no-icon',] }, { type: core.Input }],
         search: [{ type: core.Output }],
+        useLeftIcon: [{ type: core.Input }],
+        useRightIcon: [{ type: core.Input }],
+        noIcon: [{ type: core.HostBinding, args: ['class.no-icon',] }, { type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ['class.co-input-search',] }]
-    };
+    };
+    __decorate([
+        InputBoolean()
+    ], InputSearchComponent.prototype, "useLeftIcon", void 0);
+    __decorate([
+        InputBoolean()
+    ], InputSearchComponent.prototype, "useRightIcon", void 0);
 
     var InputSearchModule = /** @class */ (function () {
         function InputSearchModule() {
@@ -9491,10 +9503,12 @@
             _this.showAdd = false;
             _this.showDelete = false;
             _this.rightToolbar = false;
+            _this.rowsPerPage = 1000;
             _this.editing = false;
             _this.editRowIndex = -1;
             _this.editCellIndex = -1;
             _this.selectedRowIndex = -1;
+            _this.currentPage = 1;
             _this._doubleClicked = false;
             _this._newRow = false;
             return _this;
@@ -9761,6 +9775,10 @@
             }
             this._detectChanges();
         };
+        SimpleGridComponent.prototype.pageChange = function (page) {
+            this.currentPage = page;
+            //this.gridBody.nativeElement.scrollTop = 0;
+        };
         SimpleGridComponent.prototype._detectChanges = function () {
             this._changeDetection.detectChanges();
         };
@@ -9769,7 +9787,7 @@
     SimpleGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-simple-grid',
-                    template: "\n    <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n                     [showEdit]=\"inlineEdit\"\n                     [showAdd]=\"showAdd\"\n                     [showDelete]=\"showDelete\"\n                     [deleteEnabled]=\"selectedRowIndex > -1\"\n                     (addClick)=\"addNewRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n                     (deleteClick)=\"removeRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\"\n             [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n             [style.width.px]=\"column.width\"\n             [style.min-width.px]=\"MIN_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               [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  ",
+                    template: "\n    <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n                     [showEdit]=\"inlineEdit\"\n                     [showAdd]=\"showAdd\"\n                     [showDelete]=\"showDelete\"\n                     [deleteEnabled]=\"selectedRowIndex > -1\"\n                     (addClick)=\"addNewRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n                     (deleteClick)=\"removeRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\"\n             [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n             [style.width.px]=\"column.width\"\n             [style.min-width.px]=\"MIN_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               [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 (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; 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    <co-pagination *ngIf=\"data?.length > rowsPerPage\" [autoHide]=\"true\" (pageChange)=\"pageChange($event)\"></co-pagination>\n  ",
                     providers: [
                         FormMasterService
                     ],
@@ -9786,1131 +9804,1130 @@
         showAdd: [{ type: core.Input }],
         showDelete: [{ type: core.Input }],
         rightToolbar: [{ type: core.Input }],
+        rowsPerPage: [{ type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ['class.co-simple-grid',] }],
         handleKeyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }]
     };
 
-    var SimpleGridCellComponent = /** @class */ (function () {
-        function SimpleGridCellComponent(_changeDetector) {
-            this._changeDetector = _changeDetector;
-            this.defaultTextAlign = exports.ColumnAlign.Left;
-            this.editMode = false;
-            this.cellClick = new core.EventEmitter();
-            this._fieldEditMode = false;
-            this._focused = false;
+    var PaginationService = /** @class */ (function () {
+        function PaginationService() {
+            this.change = new rxjs.Subject();
+            this.instances = {};
         }
-        Object.defineProperty(SimpleGridCellComponent.prototype, "editTemplateContent", {
-            set: function (template) {
-                if (template) {
-                    this._editTemplate = template;
-                    this._setFocusComponent();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SimpleGridCellComponent.prototype, "noEditTemplateContent", {
-            set: function (template) {
-                if (template) {
-                    this._template = template;
-                    this._setFocusComponent();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SimpleGridCellComponent.prototype, "noTemplateContent", {
-            set: function (template) {
-                if (template) {
-                    this._inputTemplate = template;
-                    this._setFocusComponent();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SimpleGridCellComponent.prototype, "fieldEditMode", {
+        Object.defineProperty(PaginationService.prototype, "DEFAULT_ID", {
             get: function () {
-                return this._fieldEditMode;
-            },
-            set: function (value) {
-                this._fieldEditMode = value;
-                this._setFocusComponent();
+                return PaginationService.DEFAULT_ID;
             },
             enumerable: false,
             configurable: true
         });
-        SimpleGridCellComponent.prototype.showClass = function () {
-            return true;
-        };
-        SimpleGridCellComponent.prototype.handleClick = function (event) {
-            if (this.column && !this.column.readonly) {
-                this.cellClick.next();
+        PaginationService.prototype.register = function (instance) {
+            if (!instance.id) {
+                instance.id = PaginationService.DEFAULT_ID;
             }
-        };
-        SimpleGridCellComponent.prototype.ngOnChanges = function (changes) {
-            console.log(changes);
-        };
-        SimpleGridCellComponent.prototype._setFocusComponent = function () {
-            if (this.editMode && this.fieldEditMode) {
-                var element = this._getElement();
-                if (element) {
-                    var focusEvent = this._createNewEvent(element, 'focus');
-                    element.focus();
-                    element.dispatchEvent(focusEvent);
-                    this._focused = true;
-                }
+            if (!this.instances[instance.id]) {
+                this.instances[instance.id] = instance;
+                this.change.next(instance.id);
             }
             else {
-                if (this._focused) {
-                    var element = this._getElement();
-                    if (element) {
-                        var blurEvent = this._createNewEvent(element, 'blur');
-                        element.blur();
-                        element.dispatchEvent(blurEvent);
-                    }
-                    this._focused = false;
+                var changed = this.updateInstance(instance);
+                if (changed) {
+                    this.change.next(instance.id);
                 }
             }
-            this._detectChanges();
         };
-        SimpleGridCellComponent.prototype._getFirstFormInput = function (parent) {
-            if (parent) {
-                var collection_1 = Array.from(parent.getElementsByTagName('input'));
-                var otherCollection = Array.from(parent.getElementsByTagName('textarea'));
-                otherCollection.map(function (o) { return collection_1.push(o); });
-                if (collection_1.length > 0) {
-                    return collection_1[0];
-                }
+        // Returns the current page number.
+        PaginationService.prototype.getCurrentPage = function (id) {
+            if (this.instances[id]) {
+                return this.instances[id].currentPage;
             }
         };
-        SimpleGridCellComponent.prototype._createNewEvent = function (element, eventType) {
-            var event;
-            if ("createEvent" in document) {
-                event = document.createEvent("Event");
-                event.initEvent(eventType, true, true);
-            }
-            else if ("Event" in window) {
-                event = new Event(eventType, { bubbles: true, cancelable: true });
+        // Sets the current page number.
+        PaginationService.prototype.setCurrentPage = function (id, page) {
+            if (this.instances[id]) {
+                var instance = this.instances[id];
+                var maxPage = Math.ceil(instance.totalItems / instance.itemsPerPage);
+                if (page <= maxPage && 1 <= page) {
+                    this.instances[id].currentPage = page;
+                    this.change.next(id);
+                }
             }
-            return event;
         };
-        SimpleGridCellComponent.prototype._getElement = function () {
-            var templ;
-            if (this._editTemplate) {
-                templ = this._editTemplate;
+        // Sets the value of instance.totalItems
+        PaginationService.prototype.setTotalItems = function (id, totalItems) {
+            if (this.instances[id] && 0 <= totalItems) {
+                this.instances[id].totalItems = totalItems;
+                this.change.next(id);
             }
-            else if (this._template) {
-                templ = this._template;
+        };
+        // Sets the value of instance.itemsPerPage.
+        PaginationService.prototype.setItemsPerPage = function (id, itemsPerPage) {
+            if (this.instances[id]) {
+                this.instances[id].itemsPerPage = itemsPerPage;
+                this.change.next(id);
             }
-            else {
-                templ = this._inputTemplate;
+        };
+        /**
+         * Returns a clone of the pagination instance object matching the id. If no
+         * id specified, returns the instance corresponding to the default id.
+         */
+        PaginationService.prototype.getInstance = function (id) {
+            if (id === void 0) { id = PaginationService.DEFAULT_ID; }
+            if (this.instances[id]) {
+                return ObjectUtils.GetShallowClone(this.instances[id]);
             }
-            if (templ) {
-                if (templ && templ.elementRef) {
-                    var inputElement = this._getFirstFormInput(templ.elementRef.nativeElement.parentElement);
-                    if (inputElement) {
-                        return inputElement;
-                    }
+            return {};
+        };
+        /**
+         * Check each property of the instance and update any that have changed. Return
+         * true if any changes were made, else return false.
+         */
+        PaginationService.prototype.updateInstance = function (instance) {
+            var changed = false;
+            for (var prop in this.instances[instance.id]) {
+                if (instance[prop] !== this.instances[instance.id][prop]) {
+                    this.instances[instance.id][prop] = instance[prop];
+                    changed = true;
                 }
             }
+            return changed;
         };
-        SimpleGridCellComponent.prototype._detectChanges = function () {
-            this._changeDetector.detectChanges();
-        };
-        return SimpleGridCellComponent;
+        return PaginationService;
     }());
-    SimpleGridCellComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: "co-simple-grid-cell",
-                    template: "\n    <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n      <ng-container *ngIf=\"editMode; else noInlineEdit\">\n        <ng-container #editTemplate *ngIf=\"column.editTemplate; else noEditTemplate\"\n                      [ngTemplateOutlet]=\"column.editTemplate\"\n                      [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        <ng-template #noEditTemplate>\n          <ng-container *ngIf=\"column.template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"column.template\"\n                          [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <co-input-text [(model)]=\"row[column.field]\" [required]=\"column.required\"></co-input-text>\n          </ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template #noInlineEdit>\n        <ng-container *ngIf=\"column.template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n          <span [textContent]=\"column.getFieldValue(row[column.field])\"></span>\n        </ng-template>\n      </ng-template>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
+    PaginationService.DEFAULT_ID = "DEFAULT_PAGINATION_ID";
+    PaginationService.decorators = [
+        { type: core.Injectable }
     ];
-    SimpleGridCellComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef }
-    ]; };
-    SimpleGridCellComponent.propDecorators = {
-        editTemplateContent: [{ type: core.ViewChild, args: ["editTemplate", { read: BaseInputComponent },] }],
-        noEditTemplateContent: [{ type: core.ViewChild, args: ["noEditTemplate",] }],
-        noTemplateContent: [{ type: core.ViewChild, args: ["noTemplate",] }],
-        column: [{ type: core.Input }],
-        row: [{ type: core.Input }],
-        editMode: [{ type: core.Input }],
-        fieldEditMode: [{ type: core.Input }],
-        cellClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid-cell",] }],
-        handleClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
-    };
+    PaginationService.ctorParameters = function () { return []; };
 
-    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();
+    var PaginationComponent = /** @class */ (function () {
+        function PaginationComponent(_paginationService) {
+            var _this = this;
+            this._paginationService = _paginationService;
+            this.maxSize = 7;
+            this.directionLinks = true;
+            this.previousLabel = 'Vorige pagina';
+            this.nextLabel = 'Volgende pagina';
+            this.autoHide = false;
+            // Emits the new page number.
+            this.pageChange = new core.EventEmitter();
+            this.showClass = true;
+            this.pages = [];
+            this.changeSub = this._paginationService.change.subscribe(function (id) {
+                if (_this.id === id) {
+                    _this._updatePageLinks();
+                }
+            });
         }
-        ObserveVisibilityDirective.prototype.ngOnInit = function () {
-            this._createObserver();
+        PaginationComponent.prototype.ngOnInit = function () {
+            if (!this.id) {
+                this.id = this._paginationService.DEFAULT_ID;
+            }
+            this._updatePageLinks();
         };
-        ObserveVisibilityDirective.prototype.ngAfterViewInit = function () {
-            this._startObservingElements();
+        PaginationComponent.prototype.ngOnChanges = function () {
+            this._updatePageLinks();
         };
-        ObserveVisibilityDirective.prototype.ngOnDestroy = function () {
-            if (this._observer) {
-                this._observer.disconnect();
-                this._observer = undefined;
+        PaginationComponent.prototype.ngOnDestroy = function () {
+            this.changeSub.unsubscribe();
+        };
+        PaginationComponent.prototype.goToFirstPage = function () {
+            if (!this.isOnFirstPage()) {
+                this.setCurrentPage(1);
             }
-            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;
+        PaginationComponent.prototype.goToPreviousPage = function () {
+            if (!this.isOnFirstPage()) {
+                this.setCurrentPage(this.getCurrentPage() - 1);
             }
-            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() {
-        }
-        return SimpleGridModule;
-    }());
-    SimpleGridModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        dragDrop.DragDropModule,
-                        GridToolbarModule,
-                        InputTextModule,
-                        FormModule,
-                        ObserveVisibilityModule
-                    ],
-                    declarations: [
-                        SimpleGridComponent,
-                        SimpleGridCellComponent,
-                        SimpleGridColumnDirective
-                    ],
-                    exports: [
-                        SimpleGridComponent,
-                        SimpleGridCellComponent,
-                        SimpleGridColumnDirective
-                    ]
-                },] }
-    ];
-
-    var FilterItemComponent = /** @class */ (function () {
-        function FilterItemComponent(iconService) {
-            this.iconService = iconService;
-            this.icons = exports.CoreComponentsIcon;
-            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.searchPlaceholder = 'Search...';
-            this.showMoreLabel = 'Show more';
-            this.showLessLabel = 'Show less';
-            this.noResultsLabel = "No results";
-            this.collectionChange = new core.EventEmitter();
-            this.filteredCollection = [];
-            this.limitTo = 10;
-            this.filterText = "";
-            this._collection = [];
-        }
-        Object.defineProperty(FilterItemComponent.prototype, "collection", {
-            get: function () {
-                return this._collection;
-            },
-            set: function (value) {
-                var _a;
-                this._collection = value;
-                this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        FilterItemComponent.prototype.showClass = function () {
-            return true;
+        PaginationComponent.prototype.goToNextPage = function () {
+            if (!this.isOnLastPage()) {
+                this.setCurrentPage(this.getCurrentPage() + 1);
+            }
         };
-        FilterItemComponent.prototype.ngOnInit = function () {
-            this.setToInitialLimit();
+        PaginationComponent.prototype.setCurrentPage = function (page) {
+            this.pageChange.emit(page);
         };
-        FilterItemComponent.prototype.setToInitialLimit = function () {
-            this.limitTo = this.initialLimit;
+        PaginationComponent.prototype.isOnFirstPage = function () {
+            return this.getCurrentPage() === 1;
         };
-        FilterItemComponent.prototype.increaseLimit = function () {
-            this.limitTo += 10;
+        PaginationComponent.prototype.isOnLastPage = function () {
+            return this.getLastPage() === this.getCurrentPage();
         };
-        FilterItemComponent.prototype.moreToShow = function () {
-            var _a;
-            if (this.showAllResults) {
+        PaginationComponent.prototype.shouldBeHidden = function () {
+            if (!this.autoHide) {
                 return false;
             }
-            return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) > this.limitTo;
+            else {
+                var instance = this._paginationService.getInstance();
+                return (instance.totalItems <= instance.itemsPerPage);
+            }
         };
-        FilterItemComponent.prototype.lessToShow = function () {
-            var _a, _b;
-            if (this.showAllResults) {
-                return false;
+        /**
+         * Updates the page links and checks that the current page is valid. Should run whenever the
+         * PaginationService.change stream emits a value matching the current ID, or when any of the
+         * input values changes.
+         */
+        PaginationComponent.prototype._updatePageLinks = function () {
+            var paginationInstance = this._paginationService.getInstance(this.id);
+            this.pages = this.createPageArray(paginationInstance.currentPage, paginationInstance.itemsPerPage, paginationInstance.totalItems, this.maxSize);
+            var correctedCurrentPage = this.outOfBoundCorrection(paginationInstance);
+            if (correctedCurrentPage !== paginationInstance.currentPage) {
+                this.setCurrentPage(correctedCurrentPage);
             }
-            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) {
-            if (this.singleSelect) {
-                this.collection.forEach(function (m) {
-                    if (m.code !== model.code && m.description !== model.description) {
-                        m.checked = false;
-                    }
+        PaginationComponent.prototype.getCurrentPage = function () {
+            return this._paginationService.getCurrentPage(this.id);
+        };
+        PaginationComponent.prototype.getLastPage = function () {
+            var instance = this._paginationService.getInstance(this.id);
+            return Math.ceil(instance.totalItems / instance.itemsPerPage);
+        };
+        /**
+         * Checks that the instance.currentPage property is within bounds for the current page range.
+         * If not, return a correct value for currentPage, or the current value if OK.
+         */
+        PaginationComponent.prototype.outOfBoundCorrection = function (instance) {
+            var totalPages = Math.ceil(instance.totalItems / instance.itemsPerPage);
+            if (totalPages < instance.currentPage && 0 < totalPages) {
+                return totalPages;
+            }
+            else if (instance.currentPage < 1) {
+                return 1;
+            }
+            return instance.currentPage;
+        };
+        // Returns an array of IPage objects to use in the pagination controls.
+        PaginationComponent.prototype.createPageArray = function (currentPage, itemsPerPage, totalItems, paginationRange) {
+            // paginationRange could be a string if passed from attribute, so cast to number.
+            paginationRange = +paginationRange;
+            var pages = [];
+            var totalPages = Math.ceil(totalItems / itemsPerPage);
+            var halfWay = Math.ceil(paginationRange / 2);
+            var isStart = currentPage <= halfWay;
+            var isEnd = totalPages - halfWay < currentPage;
+            var isMiddle = !isStart && !isEnd;
+            var ellipsesNeeded = paginationRange < totalPages;
+            var i = 1;
+            while (i <= totalPages && i <= paginationRange) {
+                var label = void 0;
+                var pageNumber = this.calculatePageNumber(i, currentPage, paginationRange, totalPages);
+                var openingEllipsesNeeded = (i === 2 && (isMiddle || isEnd));
+                var closingEllipsesNeeded = (i === paginationRange - 1 && (isMiddle || isStart));
+                if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
+                    label = '...';
+                }
+                else {
+                    label = '' + pageNumber;
+                }
+                pages.push({
+                    label: label,
+                    value: pageNumber
                 });
+                i++;
             }
-            model.checked = !model.checked;
-            this.collectionChange.emit(this.collection);
+            return pages;
         };
-        // Applies filter to the collection.
-        FilterItemComponent.prototype.applyFilter = function (text) {
-            var _a, _b;
-            return __awaiter(this, void 0, void 0, function () {
-                var _c, filterText, filteredItemCount;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            if (!(!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn)) return [3 /*break*/, 3];
-                            if (!(text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length)) return [3 /*break*/, 2];
-                            _c = this;
-                            return [4 /*yield*/, this.collectionLoadFn(text)];
-                        case 1:
-                            _c.collection = _d.sent();
-                            return [3 /*break*/, 3];
-                        case 2:
-                            if (text.length < this.minSearchCharsToLoadCollection) {
-                                this.collection = undefined;
-                            }
-                            _d.label = 3;
-                        case 3:
-                            this.filterText = text;
-                            if (!this.collection) {
-                                return [2 /*return*/, []];
-                            }
-                            filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-                            filteredItemCount = 0;
-                            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
-                                var _a;
-                                var labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-                                var isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
-                                if (isHiddenByFilter) {
-                                    return false;
-                                }
-                                else {
-                                    filteredItemCount++;
-                                    return true;
-                                }
-                            });
-                            return [2 /*return*/];
-                    }
-                });
-            });
+        // Given the position in the sequence of pagination links [i], figure out what page number corresponds to that position.
+        PaginationComponent.prototype.calculatePageNumber = function (i, currentPage, paginationRange, totalPages) {
+            var halfWay = Math.ceil(paginationRange / 2);
+            if (i === paginationRange) {
+                return totalPages;
+            }
+            else if (i === 1) {
+                return i;
+            }
+            else if (paginationRange < totalPages) {
+                if (totalPages - halfWay < currentPage) {
+                    return totalPages - paginationRange + i;
+                }
+                else if (halfWay < currentPage) {
+                    return currentPage - halfWay + i;
+                }
+                else {
+                    return i;
+                }
+            }
+            else {
+                return i;
+            }
         };
-        return FilterItemComponent;
+        return PaginationComponent;
     }());
-    FilterItemComponent.decorators = [
+    PaginationComponent.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 || 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                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [name]=\"'radiogroup'\"\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  ",
+                    selector: 'co-pagination',
+                    template: "\n    <div class=\"pagination-component-main-wrapper\" *ngIf=\"!shouldBeHidden()\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n      <ul class=\"pagination\">\n        <li *ngIf=\"directionLinks\" class=\"pagination-previous\">\n          <a (click)=\"goToPreviousPage()\" [class.disabled]=\"isOnFirstPage()\">{{ previousLabel }}</a>\n        </li>\n        <li *ngFor=\"let page of pages\" [class.current]=\"getCurrentPage() === page.value\" (click)=\"setCurrentPage(page.value)\">\n          <span>{{page.label}}</span>\n        </li>\n        <li *ngIf=\"directionLinks\" class=\"pagination-next\">\n          <a (click)=\"goToNextPage()\" [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n        </li>\n      </ul>\n    </div>\n  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
-    FilterItemComponent.ctorParameters = function () { return [
-        { type: IconCacheService }
+    PaginationComponent.ctorParameters = function () { return [
+        { type: PaginationService }
     ]; };
-    FilterItemComponent.propDecorators = {
-        collection: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        initialLimit: [{ type: core.Input }],
-        expanded: [{ type: core.Input }],
-        minSearchCharsToLoadCollection: [{ type: core.Input }],
-        collectionLoadFn: [{ type: core.Input }],
-        customContent: [{ type: core.Input }],
-        showAllResults: [{ type: core.Input }],
-        singleSelect: [{ type: core.Input }],
-        searchPlaceholder: [{ type: core.Input }],
-        showMoreLabel: [{ type: core.Input }],
-        showLessLabel: [{ type: core.Input }],
-        noResultsLabel: [{ type: core.Input }],
-        collectionChange: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
+    PaginationComponent.propDecorators = {
+        template: [{ type: core.ViewChild, args: ['template',] }],
+        id: [{ type: core.Input }],
+        maxSize: [{ type: core.Input }],
+        directionLinks: [{ type: core.Input }],
+        previousLabel: [{ type: core.Input }],
+        nextLabel: [{ type: core.Input }],
+        autoHide: [{ type: core.Input }],
+        pageChange: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ['class.co-pagination',] }]
     };
 
-    // A pipe for prepending strings to other strings in view templates.
-    var PrependPipe = /** @class */ (function () {
-        function PrependPipe() {
+    var LARGE_NUMBER = 999999999;
+    var PaginatePipe = /** @class */ (function () {
+        function PaginatePipe(paginateService) {
+            this.paginateService = paginateService;
+            // store the values from the last time the pipe
+            this.state = {};
         }
-        PrependPipe.prototype.transform = function (value, prepend) {
-            if (!value) {
-                return "";
+        PaginatePipe.prototype.transform = function (collection, args) {
+            // When an observable is passed through the AsyncPipe, it will output
+            // `null` until the subscription resolves. In this case, we want to
+            // use the cached data from the `state` object to prevent the NgFor
+            // from flashing empty until the real values arrive.
+            if (!(collection instanceof Array)) {
+                var _id = args.id || this.paginateService.DEFAULT_ID;
+                if (this.state[_id]) {
+                    return this.state[_id].slice;
+                }
+                else {
+                    return collection;
+                }
             }
-            if (!prepend) {
-                return value;
+            var serverSideMode = args.totalItems !== undefined;
+            var instance = this._createInstance(collection, args);
+            var id = instance.id;
+            var start;
+            var end;
+            var perPage = instance.itemsPerPage;
+            this.paginateService.register(instance);
+            if (!serverSideMode && collection instanceof Array) {
+                perPage = perPage || LARGE_NUMBER;
+                start = (instance.currentPage - 1) * perPage;
+                end = start + perPage;
+                var isIdentical = this._stateIsIdentical(id, collection, start, end);
+                if (isIdentical) {
+                    return this.state[id].slice;
+                }
+                else {
+                    var slice = collection.slice(start, end);
+                    this._saveState(id, collection, slice, start, end);
+                    this.paginateService.change.next(id);
+                    return slice;
+                }
             }
-            return prepend + value;
+            // save the state for server-side collection to avoid null
+            // flash as new data loads.
+            this._saveState(id, collection, collection, start, end);
+            return collection;
         };
-        return PrependPipe;
-    }());
-    PrependPipe.decorators = [
-        { type: core.Pipe, args: [{ name: "prepend" },] }
-    ];
-
-    var PrependPipeModule = /** @class */ (function () {
-        function PrependPipeModule() {
-        }
-        return PrependPipeModule;
+        // Create an IPaginationInstance object, using defaults for any optional properties not supplied.
+        PaginatePipe.prototype._createInstance = function (collection, args) {
+            var config = args;
+            this._checkConfig(config);
+            return {
+                id: config.id || this.paginateService.DEFAULT_ID,
+                itemsPerPage: config.itemsPerPage || 0,
+                currentPage: config.currentPage || 1,
+                totalItems: config.totalItems || collection.length
+            };
+        };
+        // Ensure the argument passed to the filter contains the required properties.
+        PaginatePipe.prototype._checkConfig = function (config) {
+            var required = ["itemsPerPage", "currentPage"];
+            var missing = required.filter(function (prop) { return !config.hasOwnProperty(prop); });
+            if (0 < missing.length) {
+                throw new Error("PaginatePipe: Argument is missing the following required properties: " + missing.join(", "));
+            }
+        };
+        /**
+         * To avoid returning a brand new array each time the pipe is run, we store the state of the sliced
+         * array for a given id. This means that the next time the pipe is run on this collection & id, we just
+         * need to check that the collection, start and end points are all identical, and if so, return the
+         * last sliced array.
+         */
+        PaginatePipe.prototype._saveState = function (id, collection, slice, start, end) {
+            this.state[id] = {
+                collection: collection,
+                size: collection.length,
+                slice: slice,
+                start: start,
+                end: end
+            };
+        };
+        // For a given id, returns true if the collection, size, start and end values are identical.
+        PaginatePipe.prototype._stateIsIdentical = function (id, collection, start, end) {
+            var state = this.state[id];
+            if (!state) {
+                return false;
+            }
+            return state.collection === collection &&
+                state.size === collection.length &&
+                state.start === start &&
+                state.end === end;
+        };
+        return PaginatePipe;
     }());
-    PrependPipeModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        PrependPipe
-                    ],
-                    exports: [
-                        PrependPipe
-                    ]
+    PaginatePipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'paginate',
+                    pure: false
                 },] }
-    ];
+    ];
+    PaginatePipe.ctorParameters = function () { return [
+        { type: PaginationService }
+    ]; };
 
-    var FilterItemModule = /** @class */ (function () {
-        function FilterItemModule() {
+    var PaginationModule = /** @class */ (function () {
+        function PaginationModule() {
         }
-        return FilterItemModule;
+        return PaginationModule;
     }());
-    FilterItemModule.decorators = [
+    PaginationModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [
-                        common.CommonModule,
-                        CollapsibleModule,
-                        InputTextModule,
-                        InputCheckboxMultiSelectModule,
-                        InputCheckboxModule,
-                        IconModule,
-                        scrolling.ScrollingModule,
-                        AppendPipeModule,
-                        PrependPipeModule,
-                        InputTextModule,
-                        InputRadioButtonModule
+                        common.CommonModule
+                    ],
+                    providers: [
+                        PaginationService
                     ],
                     declarations: [
-                        FilterItemComponent
+                        PaginationComponent,
+                        PaginatePipe
                     ],
                     exports: [
-                        FilterItemComponent
+                        PaginationComponent,
+                        PaginatePipe
                     ]
                 },] }
     ];
 
-    // Human-readable JS keyboard codes, as in KeyboardEvent.key string values.
-    var KeyboardKey;
-    (function (KeyboardKey) {
-        KeyboardKey["Down"] = "ArrowDown";
-        KeyboardKey["Up"] = "ArrowUp";
-        KeyboardKey["Left"] = "ArrowLeft";
-        KeyboardKey["Right"] = "ArrowRight";
-        KeyboardKey["Tab"] = "Tab";
-        KeyboardKey["Escape"] = "Escape";
-        KeyboardKey["Enter"] = "Enter";
-        KeyboardKey["Home"] = "Home";
-        KeyboardKey["End"] = "End";
-        KeyboardKey["Delete"] = "Delete";
-        KeyboardKey["Insert"] = "Insert";
-        KeyboardKey["ShiftLeft"] = "ShiftLeft";
-        KeyboardKey["ShiftRight"] = "ShiftRight";
-        KeyboardKey["Backspace"] = "Backspace";
-        KeyboardKey["SpaceBar"] = "Space";
-        KeyboardKey["Period"] = "Period";
-        KeyboardKey["DecimalPoint"] = "NumpadDecimal";
-        KeyboardKey["SemiColon"] = "Semicolon";
-        KeyboardKey["ControlRight"] = "ControlRight";
-        KeyboardKey["ControlLeft"] = "ControlLeft";
-        KeyboardKey["Comma"] = "Comma";
-        ////Minus,
-        ////MinusFireFox,
-        ////Substract,
-        KeyboardKey["Zero"] = "Digit0";
-        KeyboardKey["One"] = "Digit1";
-        KeyboardKey["Two"] = "Digit2";
-        KeyboardKey["Three"] = "Digit3";
-        KeyboardKey["Four"] = "Digit4";
-        KeyboardKey["Five"] = "Digit5";
-        KeyboardKey["Six"] = "Digit6";
-        KeyboardKey["Seven"] = "Digit7";
-        KeyboardKey["Eight"] = "Digit8";
-        KeyboardKey["Nine"] = "Digit9";
-        KeyboardKey["NumpadZero"] = "Numpad0";
-        KeyboardKey["NumpadOne"] = "Numpad1";
-        KeyboardKey["NumpadTwo"] = "Numpad2";
-        KeyboardKey["NumpadThree"] = "Numpad3";
-        KeyboardKey["NumpadFour"] = "Numpad4";
-        KeyboardKey["NumpadFive"] = "Numpad5";
-        KeyboardKey["NumpadSix"] = "Numpad6";
-        KeyboardKey["NumpadSeven"] = "Numpad7";
-        KeyboardKey["NumpadEight"] = "Numpad8";
-        KeyboardKey["NumpadNine"] = "Numpad9";
-        KeyboardKey["A"] = "KeyA";
-        KeyboardKey["B"] = "KeyB";
-        KeyboardKey["C"] = "KeyC";
-        KeyboardKey["D"] = "KeyD";
-        KeyboardKey["E"] = "KeyE";
-        KeyboardKey["F"] = "KeyF";
-        KeyboardKey["G"] = "KeyG";
-        KeyboardKey["H"] = "KeyH";
-        KeyboardKey["I"] = "KeyI";
-        KeyboardKey["J"] = "KeyJ";
-        KeyboardKey["K"] = "KeyK";
-        KeyboardKey["L"] = "KeyL";
-        KeyboardKey["M"] = "KeyM";
-        KeyboardKey["N"] = "KeyN";
-        KeyboardKey["O"] = "KeyO";
-        KeyboardKey["P"] = "KeyP";
-        KeyboardKey["Q"] = "KeyQ";
-        KeyboardKey["R"] = "KeyR";
-        KeyboardKey["S"] = "KeyS";
-        KeyboardKey["T"] = "KeyT";
-        KeyboardKey["U"] = "KeyU";
-        KeyboardKey["V"] = "KeyV";
-        KeyboardKey["W"] = "KeyW";
-        KeyboardKey["X"] = "KeyX";
-        KeyboardKey["Y"] = "KeyY";
-        KeyboardKey["Z"] = "KeyZ";
-    })(KeyboardKey || (KeyboardKey = {}));
-
-    var ClickOutsideMasterService = /** @class */ (function () {
-        function ClickOutsideMasterService(_ngZone) {
-            var _this = this;
-            this._ngZone = _ngZone;
-            this._clickOutsideRefs = [];
-            this.onClick = function (event) {
-                _this._currentClick = event;
-                var first = _this._clickOutsideRefs[0];
-                var targets = _this._clickOutsideRefs.filter(function (co) { return co.alwaysTrigger; });
-                if (first) {
-                    targets.push(first);
-                }
-                setTimeout(function () {
-                    targets.forEach(function (clickOutside) { return _this.checkEmit(clickOutside, event); });
-                });
-            };
-            this.onKeyDown = function (event) {
-                if (event.key === KeyboardKey.Escape) {
-                    var first = _this._clickOutsideRefs[0];
-                    if (first) {
-                        _this.checkEmit(first, event, true);
-                    }
-                }
-            };
-            document.addEventListener('click', this.onClick, true);
-            window.addEventListener('keydown', this.onKeyDown, EventUtils.passiveBubble);
+    var SimpleGridCellComponent = /** @class */ (function () {
+        function SimpleGridCellComponent(_changeDetector) {
+            this._changeDetector = _changeDetector;
+            this.defaultTextAlign = exports.ColumnAlign.Left;
+            this.editMode = false;
+            this.cellClick = new core.EventEmitter();
+            this._fieldEditMode = false;
+            this._focused = false;
         }
-        Object.defineProperty(ClickOutsideMasterService.prototype, "currentClick", {
-            get: function () {
-                return this._currentClick;
+        Object.defineProperty(SimpleGridCellComponent.prototype, "editTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._editTemplate = template;
+                    this._setFocusComponent();
+                }
             },
             enumerable: false,
             configurable: true
         });
-        ClickOutsideMasterService.prototype.ngOnDestroy = function () {
-            document.removeEventListener('click', this.onClick, true);
-            window.removeEventListener('keydown', this.onKeyDown, EventUtils.passiveBubble);
-        };
-        ClickOutsideMasterService.prototype.checkEmit = function (clickOutside, event, force) {
-            if (clickOutside && (clickOutside.currentClick !== this.currentClick || force) && this._clickOutsideRefs.indexOf(clickOutside) !== -1) {
-                this._ngZone.run(function () { return clickOutside.clickOutside.emit(event); });
-            }
-        };
-        ClickOutsideMasterService.prototype.addClickOutside = function (clickOutside) {
-            this.removeClickOutside(clickOutside);
-            this._clickOutsideRefs.unshift(clickOutside);
-        };
-        ClickOutsideMasterService.prototype.removeClickOutside = function (clickOutside) {
-            ArrayUtils.RemoveElement(clickOutside, this._clickOutsideRefs);
-        };
-        return ClickOutsideMasterService;
-    }());
-    ClickOutsideMasterService.decorators = [
-        { type: core.Injectable }
-    ];
-    ClickOutsideMasterService.ctorParameters = function () { return [
-        { type: core.NgZone }
-    ]; };
-
-    var ClickOutsideDirective = /** @class */ (function () {
-        function ClickOutsideDirective(elementRef, _ngZone, _master) {
-            var _this = this;
-            this.elementRef = elementRef;
-            this._ngZone = _ngZone;
-            this._master = _master;
-            this.clickOutside = new core.EventEmitter();
-            this._enabled = true;
-            this._initialized = false;
-            this.onClick = function (event) {
-                if (_this._enabled) {
-                    _this._currentClick = event;
+        Object.defineProperty(SimpleGridCellComponent.prototype, "noEditTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._template = template;
+                    this._setFocusComponent();
                 }
-            };
-        }
-        Object.defineProperty(ClickOutsideDirective.prototype, "currentClick", {
-            get: function () {
-                return this._currentClick;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ClickOutsideDirective.prototype, "enabled", {
-            set: function (enabled) {
-                enabled = enabled === undefined || enabled;
-                // noinspection SuspiciousTypeOfGuard
-                if (typeof enabled === 'boolean' && this._enabled !== enabled) {
-                    this._enabled = enabled;
-                    if (this._initialized) {
-                        this._enabled ? this._master.addClickOutside(this) : this._master.removeClickOutside(this);
-                    }
+        Object.defineProperty(SimpleGridCellComponent.prototype, "noTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._inputTemplate = template;
+                    this._setFocusComponent();
                 }
             },
             enumerable: false,
             configurable: true
         });
-        ClickOutsideDirective.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            setTimeout(function () {
-                _this._ngZone.runOutsideAngular(function () {
-                    if (_this.elementRef && _this.elementRef.nativeElement) {
-                        _this.elementRef.nativeElement.addEventListener('click', _this.onClick, EventUtils.passiveCapture);
-                        if (_this._enabled) {
-                            _this._master.addClickOutside(_this);
-                        }
-                        _this._initialized = true;
-                    }
-                });
-            });
-        };
-        ClickOutsideDirective.prototype.ngOnDestroy = function () {
-            this._master.removeClickOutside(this);
-            this.elementRef.nativeElement.removeEventListener('click', this.onClick, EventUtils.passiveCapture);
-            this.elementRef = undefined;
-        };
-        return ClickOutsideDirective;
-    }());
-    ClickOutsideDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[clickOutside]",
-                    exportAs: 'clickOutside'
-                },] }
-    ];
-    ClickOutsideDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.NgZone },
-        { type: ClickOutsideMasterService }
-    ]; };
-    ClickOutsideDirective.propDecorators = {
-        enabled: [{ type: core.Input, args: ["clickOutside",] }],
-        alwaysTrigger: [{ type: core.Input }],
-        clickOutside: [{ type: core.Output }]
-    };
-    __decorate([
-        InputBoolean()
-    ], ClickOutsideDirective.prototype, "alwaysTrigger", void 0);
-
-    var ClickoutsideModule = /** @class */ (function () {
-        function ClickoutsideModule() {
-        }
-        return ClickoutsideModule;
-    }());
-    ClickoutsideModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        ClickOutsideDirective
-                    ],
-                    providers: [
-                        ClickOutsideMasterService
-                    ],
-                    exports: [
-                        ClickOutsideDirective
-                    ]
-                },] }
-    ];
-
-    var PaginationService = /** @class */ (function () {
-        function PaginationService() {
-            this.change = new rxjs.Subject();
-            this.instances = {};
-        }
-        Object.defineProperty(PaginationService.prototype, "DEFAULT_ID", {
+        Object.defineProperty(SimpleGridCellComponent.prototype, "fieldEditMode", {
             get: function () {
-                return PaginationService.DEFAULT_ID;
+                return this._fieldEditMode;
+            },
+            set: function (value) {
+                this._fieldEditMode = value;
+                this._setFocusComponent();
             },
             enumerable: false,
             configurable: true
         });
-        PaginationService.prototype.register = function (instance) {
-            if (!instance.id) {
-                instance.id = PaginationService.DEFAULT_ID;
-            }
-            if (!this.instances[instance.id]) {
-                this.instances[instance.id] = instance;
-                this.change.next(instance.id);
+        SimpleGridCellComponent.prototype.showClass = function () {
+            return true;
+        };
+        SimpleGridCellComponent.prototype.handleClick = function (event) {
+            if (this.column && !this.column.readonly) {
+                this.cellClick.next();
             }
-            else {
-                var changed = this.updateInstance(instance);
-                if (changed) {
-                    this.change.next(instance.id);
+        };
+        SimpleGridCellComponent.prototype._setFocusComponent = function () {
+            if (this.editMode && this.fieldEditMode) {
+                var element = this._getElement();
+                if (element) {
+                    var focusEvent = this._createNewEvent(element, 'focus');
+                    element.focus();
+                    element.dispatchEvent(focusEvent);
+                    this._focused = true;
                 }
             }
-        };
-        // Returns the current page number.
-        PaginationService.prototype.getCurrentPage = function (id) {
-            if (this.instances[id]) {
-                return this.instances[id].currentPage;
+            else {
+                if (this._focused) {
+                    var element = this._getElement();
+                    if (element) {
+                        var blurEvent = this._createNewEvent(element, 'blur');
+                        element.blur();
+                        element.dispatchEvent(blurEvent);
+                    }
+                    this._focused = false;
+                }
             }
+            this._detectChanges();
         };
-        // Sets the current page number.
-        PaginationService.prototype.setCurrentPage = function (id, page) {
-            if (this.instances[id]) {
-                var instance = this.instances[id];
-                var maxPage = Math.ceil(instance.totalItems / instance.itemsPerPage);
-                if (page <= maxPage && 1 <= page) {
-                    this.instances[id].currentPage = page;
-                    this.change.next(id);
+        SimpleGridCellComponent.prototype._getFirstFormInput = function (parent) {
+            if (parent) {
+                var collection_1 = Array.from(parent.getElementsByTagName('input'));
+                var otherCollection = Array.from(parent.getElementsByTagName('textarea'));
+                otherCollection.map(function (o) { return collection_1.push(o); });
+                if (collection_1.length > 0) {
+                    return collection_1[0];
                 }
             }
         };
-        // Sets the value of instance.totalItems
-        PaginationService.prototype.setTotalItems = function (id, totalItems) {
-            if (this.instances[id] && 0 <= totalItems) {
-                this.instances[id].totalItems = totalItems;
-                this.change.next(id);
+        SimpleGridCellComponent.prototype._createNewEvent = function (element, eventType) {
+            var event;
+            if ("createEvent" in document) {
+                event = document.createEvent("Event");
+                event.initEvent(eventType, true, true);
             }
-        };
-        // Sets the value of instance.itemsPerPage.
-        PaginationService.prototype.setItemsPerPage = function (id, itemsPerPage) {
-            if (this.instances[id]) {
-                this.instances[id].itemsPerPage = itemsPerPage;
-                this.change.next(id);
+            else if ("Event" in window) {
+                event = new Event(eventType, { bubbles: true, cancelable: true });
             }
+            return event;
         };
-        /**
-         * Returns a clone of the pagination instance object matching the id. If no
-         * id specified, returns the instance corresponding to the default id.
-         */
-        PaginationService.prototype.getInstance = function (id) {
-            if (id === void 0) { id = PaginationService.DEFAULT_ID; }
-            if (this.instances[id]) {
-                return ObjectUtils.GetShallowClone(this.instances[id]);
+        SimpleGridCellComponent.prototype._getElement = function () {
+            var templ;
+            if (this._editTemplate) {
+                templ = this._editTemplate;
             }
-            return {};
-        };
-        /**
-         * Check each property of the instance and update any that have changed. Return
-         * true if any changes were made, else return false.
-         */
-        PaginationService.prototype.updateInstance = function (instance) {
-            var changed = false;
-            for (var prop in this.instances[instance.id]) {
-                if (instance[prop] !== this.instances[instance.id][prop]) {
-                    this.instances[instance.id][prop] = instance[prop];
-                    changed = true;
+            else if (this._template) {
+                templ = this._template;
+            }
+            else {
+                templ = this._inputTemplate;
+            }
+            if (templ) {
+                if (templ && templ.elementRef) {
+                    var inputElement = this._getFirstFormInput(templ.elementRef.nativeElement.parentElement);
+                    if (inputElement) {
+                        return inputElement;
+                    }
                 }
             }
-            return changed;
         };
-        return PaginationService;
+        SimpleGridCellComponent.prototype._detectChanges = function () {
+            this._changeDetector.detectChanges();
+        };
+        return SimpleGridCellComponent;
     }());
-    PaginationService.DEFAULT_ID = "DEFAULT_PAGINATION_ID";
-    PaginationService.decorators = [
-        { type: core.Injectable }
+    SimpleGridCellComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-simple-grid-cell",
+                    template: "\n    <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n      <ng-container *ngIf=\"editMode; else noInlineEdit\">\n        <ng-container #editTemplate *ngIf=\"column.editTemplate; else noEditTemplate\"\n                      [ngTemplateOutlet]=\"column.editTemplate\"\n                      [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        <ng-template #noEditTemplate>\n          <ng-container *ngIf=\"column.template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"column.template\"\n                          [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <co-input-text [(model)]=\"row[column.field]\" [required]=\"column.required\"></co-input-text>\n          </ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template #noInlineEdit>\n        <ng-container *ngIf=\"column.template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n          <span [textContent]=\"column.getFieldValue(row[column.field])\"></span>\n        </ng-template>\n      </ng-template>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
     ];
-    PaginationService.ctorParameters = function () { return []; };
+    SimpleGridCellComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
+    SimpleGridCellComponent.propDecorators = {
+        editTemplateContent: [{ type: core.ViewChild, args: ["editTemplate", { read: BaseInputComponent },] }],
+        noEditTemplateContent: [{ type: core.ViewChild, args: ["noEditTemplate",] }],
+        noTemplateContent: [{ type: core.ViewChild, args: ["noTemplate",] }],
+        column: [{ type: core.Input }],
+        row: [{ type: core.Input }],
+        editMode: [{ type: core.Input }],
+        fieldEditMode: [{ type: core.Input }],
+        cellClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid-cell",] }],
+        handleClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
+    };
 
-    var PaginationComponent = /** @class */ (function () {
-        function PaginationComponent(_paginationService) {
-            var _this = this;
-            this._paginationService = _paginationService;
-            this.maxSize = 7;
-            this.directionLinks = true;
-            this.previousLabel = 'Vorige pagina';
-            this.nextLabel = 'Volgende pagina';
-            this.autoHide = false;
-            // Emits the new page number.
-            this.pageChange = new core.EventEmitter();
-            this.showClass = true;
-            this.pages = [];
-            this.changeSub = this._paginationService.change.subscribe(function (id) {
-                if (_this.id === id) {
-                    _this._updatePageLinks();
-                }
-            });
+    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();
         }
-        PaginationComponent.prototype.ngOnInit = function () {
-            if (!this.id) {
-                this.id = this._paginationService.DEFAULT_ID;
-            }
-            this._updatePageLinks();
-        };
-        PaginationComponent.prototype.ngOnChanges = function () {
-            this._updatePageLinks();
-        };
-        PaginationComponent.prototype.ngOnDestroy = function () {
-            this.changeSub.unsubscribe();
-        };
-        PaginationComponent.prototype.goToFirstPage = function () {
-            if (!this.isOnFirstPage()) {
-                this.setCurrentPage(1);
-            }
+        ObserveVisibilityDirective.prototype.ngOnInit = function () {
+            this._createObserver();
         };
-        PaginationComponent.prototype.goToPreviousPage = function () {
-            if (!this.isOnFirstPage()) {
-                this.setCurrentPage(this.getCurrentPage() - 1);
-            }
+        ObserveVisibilityDirective.prototype.ngAfterViewInit = function () {
+            this._startObservingElements();
         };
-        PaginationComponent.prototype.goToNextPage = function () {
-            if (!this.isOnLastPage()) {
-                this.setCurrentPage(this.getCurrentPage() + 1);
+        ObserveVisibilityDirective.prototype.ngOnDestroy = function () {
+            if (this._observer) {
+                this._observer.disconnect();
+                this._observer = undefined;
             }
+            this._subject.next();
+            this._subject.complete();
         };
-        PaginationComponent.prototype.setCurrentPage = function (page) {
-            this.pageChange.emit(page);
-        };
-        PaginationComponent.prototype.isOnFirstPage = function () {
-            return this.getCurrentPage() === 1;
+        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);
+            });
         };
-        PaginationComponent.prototype.isOnLastPage = function () {
-            return this.getLastPage() === this.getCurrentPage();
+        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);
         };
-        PaginationComponent.prototype.shouldBeHidden = function () {
-            if (!this.autoHide) {
-                return false;
-            }
-            else {
-                var instance = this._paginationService.getInstance();
-                return (instance.totalItems <= instance.itemsPerPage);
+        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*/];
+                        }
+                    });
+                });
+            });
         };
-        /**
-         * Updates the page links and checks that the current page is valid. Should run whenever the
-         * PaginationService.change stream emits a value matching the current ID, or when any of the
-         * input values changes.
-         */
-        PaginationComponent.prototype._updatePageLinks = function () {
-            var paginationInstance = this._paginationService.getInstance(this.id);
-            this.pages = this.createPageArray(paginationInstance.currentPage, paginationInstance.itemsPerPage, paginationInstance.totalItems, this.maxSize);
-            var correctedCurrentPage = this.outOfBoundCorrection(paginationInstance);
-            if (correctedCurrentPage !== paginationInstance.currentPage) {
-                this.setCurrentPage(correctedCurrentPage);
-            }
+        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() {
+        }
+        return SimpleGridModule;
+    }());
+    SimpleGridModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        dragDrop.DragDropModule,
+                        GridToolbarModule,
+                        InputTextModule,
+                        FormModule,
+                        ObserveVisibilityModule,
+                        PaginationModule
+                    ],
+                    declarations: [
+                        SimpleGridComponent,
+                        SimpleGridCellComponent,
+                        SimpleGridColumnDirective
+                    ],
+                    exports: [
+                        SimpleGridComponent,
+                        SimpleGridCellComponent,
+                        SimpleGridColumnDirective
+                    ]
+                },] }
+    ];
+
+    var FilterItemComponent = /** @class */ (function () {
+        function FilterItemComponent(iconService) {
+            this.iconService = iconService;
+            this.icons = exports.CoreComponentsIcon;
+            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.searchPlaceholder = 'Search...';
+            this.showMoreLabel = 'Show more';
+            this.showLessLabel = 'Show less';
+            this.noResultsLabel = "No results";
+            this.collectionChange = new core.EventEmitter();
+            this.filteredCollection = [];
+            this.limitTo = 10;
+            this.filterText = "";
+            this._collection = [];
+        }
+        Object.defineProperty(FilterItemComponent.prototype, "collection", {
+            get: function () {
+                return this._collection;
+            },
+            set: function (value) {
+                var _a;
+                this._collection = value;
+                this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FilterItemComponent.prototype.showClass = function () {
+            return true;
         };
-        PaginationComponent.prototype.getCurrentPage = function () {
-            return this._paginationService.getCurrentPage(this.id);
+        FilterItemComponent.prototype.ngOnInit = function () {
+            this.setToInitialLimit();
         };
-        PaginationComponent.prototype.getLastPage = function () {
-            var instance = this._paginationService.getInstance(this.id);
-            return Math.ceil(instance.totalItems / instance.itemsPerPage);
+        FilterItemComponent.prototype.setToInitialLimit = function () {
+            this.limitTo = this.initialLimit;
         };
-        /**
-         * Checks that the instance.currentPage property is within bounds for the current page range.
-         * If not, return a correct value for currentPage, or the current value if OK.
-         */
-        PaginationComponent.prototype.outOfBoundCorrection = function (instance) {
-            var totalPages = Math.ceil(instance.totalItems / instance.itemsPerPage);
-            if (totalPages < instance.currentPage && 0 < totalPages) {
-                return totalPages;
+        FilterItemComponent.prototype.increaseLimit = function () {
+            this.limitTo += 10;
+        };
+        FilterItemComponent.prototype.moreToShow = function () {
+            var _a;
+            if (this.showAllResults) {
+                return false;
             }
-            else if (instance.currentPage < 1) {
-                return 1;
+            return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) > this.limitTo;
+        };
+        FilterItemComponent.prototype.lessToShow = function () {
+            var _a, _b;
+            if (this.showAllResults) {
+                return false;
             }
-            return instance.currentPage;
+            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;
         };
-        // Returns an array of IPage objects to use in the pagination controls.
-        PaginationComponent.prototype.createPageArray = function (currentPage, itemsPerPage, totalItems, paginationRange) {
-            // paginationRange could be a string if passed from attribute, so cast to number.
-            paginationRange = +paginationRange;
-            var pages = [];
-            var totalPages = Math.ceil(totalItems / itemsPerPage);
-            var halfWay = Math.ceil(paginationRange / 2);
-            var isStart = currentPage <= halfWay;
-            var isEnd = totalPages - halfWay < currentPage;
-            var isMiddle = !isStart && !isEnd;
-            var ellipsesNeeded = paginationRange < totalPages;
-            var i = 1;
-            while (i <= totalPages && i <= paginationRange) {
-                var label = void 0;
-                var pageNumber = this.calculatePageNumber(i, currentPage, paginationRange, totalPages);
-                var openingEllipsesNeeded = (i === 2 && (isMiddle || isEnd));
-                var closingEllipsesNeeded = (i === paginationRange - 1 && (isMiddle || isStart));
-                if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
-                    label = '...';
-                }
-                else {
-                    label = '' + pageNumber;
-                }
-                pages.push({
-                    label: label,
-                    value: pageNumber
+        FilterItemComponent.prototype.handleModelChange = function (model) {
+            if (this.singleSelect) {
+                this.collection.forEach(function (m) {
+                    if (m.code !== model.code && m.description !== model.description) {
+                        m.checked = false;
+                    }
                 });
-                i++;
             }
-            return pages;
+            model.checked = !model.checked;
+            this.collectionChange.emit(this.collection);
         };
-        // Given the position in the sequence of pagination links [i], figure out what page number corresponds to that position.
-        PaginationComponent.prototype.calculatePageNumber = function (i, currentPage, paginationRange, totalPages) {
-            var halfWay = Math.ceil(paginationRange / 2);
-            if (i === paginationRange) {
-                return totalPages;
+        // Applies filter to the collection.
+        FilterItemComponent.prototype.applyFilter = function (text) {
+            var _a, _b;
+            return __awaiter(this, void 0, void 0, function () {
+                var _c, filterText, filteredItemCount;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!(!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn)) return [3 /*break*/, 3];
+                            if (!(text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length)) return [3 /*break*/, 2];
+                            _c = this;
+                            return [4 /*yield*/, this.collectionLoadFn(text)];
+                        case 1:
+                            _c.collection = _d.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            if (text.length < this.minSearchCharsToLoadCollection) {
+                                this.collection = undefined;
+                            }
+                            _d.label = 3;
+                        case 3:
+                            this.filterText = text;
+                            if (!this.collection) {
+                                return [2 /*return*/, []];
+                            }
+                            filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+                            filteredItemCount = 0;
+                            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
+                                var _a;
+                                var labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+                                var isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
+                                if (isHiddenByFilter) {
+                                    return false;
+                                }
+                                else {
+                                    filteredItemCount++;
+                                    return true;
+                                }
+                            });
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return FilterItemComponent;
+    }());
+    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 || 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                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [name]=\"'radiogroup'\"\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  ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    FilterItemComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    FilterItemComponent.propDecorators = {
+        collection: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        initialLimit: [{ type: core.Input }],
+        expanded: [{ type: core.Input }],
+        minSearchCharsToLoadCollection: [{ type: core.Input }],
+        collectionLoadFn: [{ type: core.Input }],
+        customContent: [{ type: core.Input }],
+        showAllResults: [{ type: core.Input }],
+        singleSelect: [{ type: core.Input }],
+        searchPlaceholder: [{ type: core.Input }],
+        showMoreLabel: [{ type: core.Input }],
+        showLessLabel: [{ type: core.Input }],
+        noResultsLabel: [{ type: core.Input }],
+        collectionChange: [{ type: core.Output }],
+        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 "";
             }
-            else if (i === 1) {
-                return i;
+            if (!prepend) {
+                return value;
             }
-            else if (paginationRange < totalPages) {
-                if (totalPages - halfWay < currentPage) {
-                    return totalPages - paginationRange + i;
-                }
-                else if (halfWay < currentPage) {
-                    return currentPage - halfWay + i;
+            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() {
+        }
+        return FilterItemModule;
+    }());
+    FilterItemModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CollapsibleModule,
+                        InputTextModule,
+                        InputCheckboxMultiSelectModule,
+                        InputCheckboxModule,
+                        IconModule,
+                        scrolling.ScrollingModule,
+                        AppendPipeModule,
+                        PrependPipeModule,
+                        InputTextModule,
+                        InputRadioButtonModule
+                    ],
+                    declarations: [
+                        FilterItemComponent
+                    ],
+                    exports: [
+                        FilterItemComponent
+                    ]
+                },] }
+    ];
+
+    // Human-readable JS keyboard codes, as in KeyboardEvent.key string values.
+    var KeyboardKey;
+    (function (KeyboardKey) {
+        KeyboardKey["Down"] = "ArrowDown";
+        KeyboardKey["Up"] = "ArrowUp";
+        KeyboardKey["Left"] = "ArrowLeft";
+        KeyboardKey["Right"] = "ArrowRight";
+        KeyboardKey["Tab"] = "Tab";
+        KeyboardKey["Escape"] = "Escape";
+        KeyboardKey["Enter"] = "Enter";
+        KeyboardKey["Home"] = "Home";
+        KeyboardKey["End"] = "End";
+        KeyboardKey["Delete"] = "Delete";
+        KeyboardKey["Insert"] = "Insert";
+        KeyboardKey["ShiftLeft"] = "ShiftLeft";
+        KeyboardKey["ShiftRight"] = "ShiftRight";
+        KeyboardKey["Backspace"] = "Backspace";
+        KeyboardKey["SpaceBar"] = "Space";
+        KeyboardKey["Period"] = "Period";
+        KeyboardKey["DecimalPoint"] = "NumpadDecimal";
+        KeyboardKey["SemiColon"] = "Semicolon";
+        KeyboardKey["ControlRight"] = "ControlRight";
+        KeyboardKey["ControlLeft"] = "ControlLeft";
+        KeyboardKey["Comma"] = "Comma";
+        ////Minus,
+        ////MinusFireFox,
+        ////Substract,
+        KeyboardKey["Zero"] = "Digit0";
+        KeyboardKey["One"] = "Digit1";
+        KeyboardKey["Two"] = "Digit2";
+        KeyboardKey["Three"] = "Digit3";
+        KeyboardKey["Four"] = "Digit4";
+        KeyboardKey["Five"] = "Digit5";
+        KeyboardKey["Six"] = "Digit6";
+        KeyboardKey["Seven"] = "Digit7";
+        KeyboardKey["Eight"] = "Digit8";
+        KeyboardKey["Nine"] = "Digit9";
+        KeyboardKey["NumpadZero"] = "Numpad0";
+        KeyboardKey["NumpadOne"] = "Numpad1";
+        KeyboardKey["NumpadTwo"] = "Numpad2";
+        KeyboardKey["NumpadThree"] = "Numpad3";
+        KeyboardKey["NumpadFour"] = "Numpad4";
+        KeyboardKey["NumpadFive"] = "Numpad5";
+        KeyboardKey["NumpadSix"] = "Numpad6";
+        KeyboardKey["NumpadSeven"] = "Numpad7";
+        KeyboardKey["NumpadEight"] = "Numpad8";
+        KeyboardKey["NumpadNine"] = "Numpad9";
+        KeyboardKey["A"] = "KeyA";
+        KeyboardKey["B"] = "KeyB";
+        KeyboardKey["C"] = "KeyC";
+        KeyboardKey["D"] = "KeyD";
+        KeyboardKey["E"] = "KeyE";
+        KeyboardKey["F"] = "KeyF";
+        KeyboardKey["G"] = "KeyG";
+        KeyboardKey["H"] = "KeyH";
+        KeyboardKey["I"] = "KeyI";
+        KeyboardKey["J"] = "KeyJ";
+        KeyboardKey["K"] = "KeyK";
+        KeyboardKey["L"] = "KeyL";
+        KeyboardKey["M"] = "KeyM";
+        KeyboardKey["N"] = "KeyN";
+        KeyboardKey["O"] = "KeyO";
+        KeyboardKey["P"] = "KeyP";
+        KeyboardKey["Q"] = "KeyQ";
+        KeyboardKey["R"] = "KeyR";
+        KeyboardKey["S"] = "KeyS";
+        KeyboardKey["T"] = "KeyT";
+        KeyboardKey["U"] = "KeyU";
+        KeyboardKey["V"] = "KeyV";
+        KeyboardKey["W"] = "KeyW";
+        KeyboardKey["X"] = "KeyX";
+        KeyboardKey["Y"] = "KeyY";
+        KeyboardKey["Z"] = "KeyZ";
+    })(KeyboardKey || (KeyboardKey = {}));
+
+    var ClickOutsideMasterService = /** @class */ (function () {
+        function ClickOutsideMasterService(_ngZone) {
+            var _this = this;
+            this._ngZone = _ngZone;
+            this._clickOutsideRefs = [];
+            this.onClick = function (event) {
+                _this._currentClick = event;
+                var first = _this._clickOutsideRefs[0];
+                var targets = _this._clickOutsideRefs.filter(function (co) { return co.alwaysTrigger; });
+                if (first) {
+                    targets.push(first);
                 }
-                else {
-                    return i;
+                setTimeout(function () {
+                    targets.forEach(function (clickOutside) { return _this.checkEmit(clickOutside, event); });
+                });
+            };
+            this.onKeyDown = function (event) {
+                if (event.key === KeyboardKey.Escape) {
+                    var first = _this._clickOutsideRefs[0];
+                    if (first) {
+                        _this.checkEmit(first, event, true);
+                    }
                 }
-            }
-            else {
-                return i;
+            };
+            document.addEventListener('click', this.onClick, true);
+            window.addEventListener('keydown', this.onKeyDown, EventUtils.passiveBubble);
+        }
+        Object.defineProperty(ClickOutsideMasterService.prototype, "currentClick", {
+            get: function () {
+                return this._currentClick;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ClickOutsideMasterService.prototype.ngOnDestroy = function () {
+            document.removeEventListener('click', this.onClick, true);
+            window.removeEventListener('keydown', this.onKeyDown, EventUtils.passiveBubble);
+        };
+        ClickOutsideMasterService.prototype.checkEmit = function (clickOutside, event, force) {
+            if (clickOutside && (clickOutside.currentClick !== this.currentClick || force) && this._clickOutsideRefs.indexOf(clickOutside) !== -1) {
+                this._ngZone.run(function () { return clickOutside.clickOutside.emit(event); });
             }
         };
-        return PaginationComponent;
+        ClickOutsideMasterService.prototype.addClickOutside = function (clickOutside) {
+            this.removeClickOutside(clickOutside);
+            this._clickOutsideRefs.unshift(clickOutside);
+        };
+        ClickOutsideMasterService.prototype.removeClickOutside = function (clickOutside) {
+            ArrayUtils.RemoveElement(clickOutside, this._clickOutsideRefs);
+        };
+        return ClickOutsideMasterService;
     }());
-    PaginationComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'co-pagination',
-                    template: "\n    <div class=\"pagination-component-main-wrapper\" *ngIf=\"!shouldBeHidden()\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n      <ul class=\"pagination\">\n        <li *ngIf=\"directionLinks\" class=\"pagination-previous\">\n          <a (click)=\"goToPreviousPage()\" [class.disabled]=\"isOnFirstPage()\">{{ previousLabel }}</a>\n        </li>\n        <li *ngFor=\"let page of pages\" [class.current]=\"getCurrentPage() === page.value\" (click)=\"setCurrentPage(page.value)\">\n          <span>{{page.label}}</span>\n        </li>\n        <li *ngIf=\"directionLinks\" class=\"pagination-next\">\n          <a (click)=\"goToNextPage()\" [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n        </li>\n      </ul>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
+    ClickOutsideMasterService.decorators = [
+        { type: core.Injectable }
     ];
-    PaginationComponent.ctorParameters = function () { return [
-        { type: PaginationService }
-    ]; };
-    PaginationComponent.propDecorators = {
-        template: [{ type: core.ViewChild, args: ['template',] }],
-        id: [{ type: core.Input }],
-        maxSize: [{ type: core.Input }],
-        directionLinks: [{ type: core.Input }],
-        previousLabel: [{ type: core.Input }],
-        nextLabel: [{ type: core.Input }],
-        autoHide: [{ type: core.Input }],
-        pageChange: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-pagination',] }]
-    };
+    ClickOutsideMasterService.ctorParameters = function () { return [
+        { type: core.NgZone }
+    ]; };
 
-    var LARGE_NUMBER = 999999999;
-    var PaginatePipe = /** @class */ (function () {
-        function PaginatePipe(paginateService) {
-            this.paginateService = paginateService;
-            // store the values from the last time the pipe
-            this.state = {};
-        }
-        PaginatePipe.prototype.transform = function (collection, args) {
-            // When an observable is passed through the AsyncPipe, it will output
-            // `null` until the subscription resolves. In this case, we want to
-            // use the cached data from the `state` object to prevent the NgFor
-            // from flashing empty until the real values arrive.
-            if (!(collection instanceof Array)) {
-                var _id = args.id || this.paginateService.DEFAULT_ID;
-                if (this.state[_id]) {
-                    return this.state[_id].slice;
-                }
-                else {
-                    return collection;
-                }
-            }
-            var serverSideMode = args.totalItems !== undefined;
-            var instance = this._createInstance(collection, args);
-            var id = instance.id;
-            var start;
-            var end;
-            var perPage = instance.itemsPerPage;
-            this.paginateService.register(instance);
-            if (!serverSideMode && collection instanceof Array) {
-                perPage = perPage || LARGE_NUMBER;
-                start = (instance.currentPage - 1) * perPage;
-                end = start + perPage;
-                var isIdentical = this._stateIsIdentical(id, collection, start, end);
-                if (isIdentical) {
-                    return this.state[id].slice;
-                }
-                else {
-                    var slice = collection.slice(start, end);
-                    this._saveState(id, collection, slice, start, end);
-                    this.paginateService.change.next(id);
-                    return slice;
+    var ClickOutsideDirective = /** @class */ (function () {
+        function ClickOutsideDirective(elementRef, _ngZone, _master) {
+            var _this = this;
+            this.elementRef = elementRef;
+            this._ngZone = _ngZone;
+            this._master = _master;
+            this.clickOutside = new core.EventEmitter();
+            this._enabled = true;
+            this._initialized = false;
+            this.onClick = function (event) {
+                if (_this._enabled) {
+                    _this._currentClick = event;
                 }
-            }
-            // save the state for server-side collection to avoid null
-            // flash as new data loads.
-            this._saveState(id, collection, collection, start, end);
-            return collection;
-        };
-        // Create an IPaginationInstance object, using defaults for any optional properties not supplied.
-        PaginatePipe.prototype._createInstance = function (collection, args) {
-            var config = args;
-            this._checkConfig(config);
-            return {
-                id: config.id || this.paginateService.DEFAULT_ID,
-                itemsPerPage: config.itemsPerPage || 0,
-                currentPage: config.currentPage || 1,
-                totalItems: config.totalItems || collection.length
-            };
-        };
-        // Ensure the argument passed to the filter contains the required properties.
-        PaginatePipe.prototype._checkConfig = function (config) {
-            var required = ["itemsPerPage", "currentPage"];
-            var missing = required.filter(function (prop) { return !config.hasOwnProperty(prop); });
-            if (0 < missing.length) {
-                throw new Error("PaginatePipe: Argument is missing the following required properties: " + missing.join(", "));
-            }
-        };
-        /**
-         * To avoid returning a brand new array each time the pipe is run, we store the state of the sliced
-         * array for a given id. This means that the next time the pipe is run on this collection & id, we just
-         * need to check that the collection, start and end points are all identical, and if so, return the
-         * last sliced array.
-         */
-        PaginatePipe.prototype._saveState = function (id, collection, slice, start, end) {
-            this.state[id] = {
-                collection: collection,
-                size: collection.length,
-                slice: slice,
-                start: start,
-                end: end
             };
+        }
+        Object.defineProperty(ClickOutsideDirective.prototype, "currentClick", {
+            get: function () {
+                return this._currentClick;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ClickOutsideDirective.prototype, "enabled", {
+            set: function (enabled) {
+                enabled = enabled === undefined || enabled;
+                // noinspection SuspiciousTypeOfGuard
+                if (typeof enabled === 'boolean' && this._enabled !== enabled) {
+                    this._enabled = enabled;
+                    if (this._initialized) {
+                        this._enabled ? this._master.addClickOutside(this) : this._master.removeClickOutside(this);
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ClickOutsideDirective.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this._ngZone.runOutsideAngular(function () {
+                    if (_this.elementRef && _this.elementRef.nativeElement) {
+                        _this.elementRef.nativeElement.addEventListener('click', _this.onClick, EventUtils.passiveCapture);
+                        if (_this._enabled) {
+                            _this._master.addClickOutside(_this);
+                        }
+                        _this._initialized = true;
+                    }
+                });
+            });
         };
-        // For a given id, returns true if the collection, size, start and end values are identical.
-        PaginatePipe.prototype._stateIsIdentical = function (id, collection, start, end) {
-            var state = this.state[id];
-            if (!state) {
-                return false;
-            }
-            return state.collection === collection &&
-                state.size === collection.length &&
-                state.start === start &&
-                state.end === end;
+        ClickOutsideDirective.prototype.ngOnDestroy = function () {
+            this._master.removeClickOutside(this);
+            this.elementRef.nativeElement.removeEventListener('click', this.onClick, EventUtils.passiveCapture);
+            this.elementRef = undefined;
         };
-        return PaginatePipe;
+        return ClickOutsideDirective;
     }());
-    PaginatePipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'paginate',
-                    pure: false
+    ClickOutsideDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: "[clickOutside]",
+                    exportAs: 'clickOutside'
                 },] }
     ];
-    PaginatePipe.ctorParameters = function () { return [
-        { type: PaginationService }
-    ]; };
+    ClickOutsideDirective.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: core.NgZone },
+        { type: ClickOutsideMasterService }
+    ]; };
+    ClickOutsideDirective.propDecorators = {
+        enabled: [{ type: core.Input, args: ["clickOutside",] }],
+        alwaysTrigger: [{ type: core.Input }],
+        clickOutside: [{ type: core.Output }]
+    };
+    __decorate([
+        InputBoolean()
+    ], ClickOutsideDirective.prototype, "alwaysTrigger", void 0);
 
-    var PaginationModule = /** @class */ (function () {
-        function PaginationModule() {
+    var ClickoutsideModule = /** @class */ (function () {
+        function ClickoutsideModule() {
         }
-        return PaginationModule;
+        return ClickoutsideModule;
     }());
-    PaginationModule.decorators = [
+    ClickoutsideModule.decorators = [
         { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule
+                    declarations: [
+                        ClickOutsideDirective
                     ],
                     providers: [
-                        PaginationService
-                    ],
-                    declarations: [
-                        PaginationComponent,
-                        PaginatePipe
+                        ClickOutsideMasterService
                     ],
                     exports: [
-                        PaginationComponent,
-                        PaginatePipe
+                        ClickOutsideDirective
                     ]
                 },] }
     ];
@@ -11017,13 +11034,13 @@
     exports.TileModule = TileModule;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;
-    exports["ɵba"] = SimpleGridCellComponent;
-    exports["ɵbb"] = PrependPipeModule;
-    exports["ɵbc"] = PrependPipe;
-    exports["ɵbd"] = ClickOutsideDirective;
-    exports["ɵbe"] = ClickOutsideMasterService;
-    exports["ɵbf"] = PaginationService;
-    exports["ɵbg"] = PaginatePipe;
+    exports["ɵba"] = PaginationService;
+    exports["ɵbb"] = PaginatePipe;
+    exports["ɵbc"] = SimpleGridCellComponent;
+    exports["ɵbd"] = PrependPipeModule;
+    exports["ɵbe"] = PrependPipe;
+    exports["ɵbf"] = ClickOutsideDirective;
+    exports["ɵbg"] = ClickOutsideMasterService;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;