@colijnit/corecomponents_v12 12.0.66 → 12.0.68

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4432,6 +4432,7 @@
             this.focused = false;
             this.formInput = true;
             this.customWidth = false;
+            this.customHeight = false;
             this.noTriangleGraphic = false;
             this.halfWidth = false;
             this.fullWidth = false;
@@ -4728,6 +4729,7 @@
             if (this.showSaveCancel && this.canSaveOrCancel) {
                 this._handleKeyDown(event);
             }
+            this._positionValidationError();
         };
         Object.defineProperty(BaseInputComponent.prototype, "canChange", {
             get: function () {
@@ -5252,6 +5254,7 @@
         focused: [{ type: core.HostBinding, args: ["class.cc-input-focused",] }],
         formInput: [{ type: core.HostBinding, args: ["class.form-input",] }],
         customWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.custom-width",] }],
+        customHeight: [{ type: core.Input }, { type: core.HostBinding, args: ['class.custom-height',] }],
         noTriangleGraphic: [{ type: core.Input }],
         halfWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.half-width",] }],
         fullWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.full-width-important",] }],
@@ -5288,6 +5291,9 @@
     __decorate([
         InputBoolean()
     ], BaseInputComponent.prototype, "customWidth", void 0);
+    __decorate([
+        InputBoolean()
+    ], BaseInputComponent.prototype, "customHeight", void 0);
     __decorate([
         InputBoolean()
     ], BaseInputComponent.prototype, "noTriangleGraphic", void 0);
@@ -5622,17 +5628,12 @@
         DropDownListComponent.prototype.showClass = function () {
             return true;
         };
-        DropDownListComponent.prototype.handleValueChanged = function (value) {
-            if (value !== this.model) {
-                this.modelChange.next(value);
-            }
-        };
         return DropDownListComponent;
     }(BaseInputComponent));
     DropDownListComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-drop-down-list",
-                    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  ",
+                    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      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,
                         {
@@ -6669,6 +6670,7 @@
             _this.iconHeight = "24px";
             _this.placeholder = "";
             _this.blur = new core.EventEmitter();
+            _this.isMinimal = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -6735,7 +6737,8 @@
         placeholder: [{ type: core.Input }],
         width: [{ type: core.Input }],
         blur: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-date",] }]
+        showClass: [{ type: core.HostBinding, args: ["class.co-input-date",] }],
+        isMinimal: [{ type: core.HostBinding, args: ['class.is-minimal',] }, { type: core.Input }]
     };
 
     var CommitButtonsComponent = /** @class */ (function () {
@@ -7914,6 +7917,7 @@
             _this.search = new core.EventEmitter();
             _this.useLeftIcon = false;
             _this.useRightIcon = false;
+            _this.customHeight = false;
             _this.noIcon = false;
             _this.isSmall = false;
             return _this;
@@ -7935,7 +7939,7 @@
     InputSearchComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-input-search',
-                    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  ",
+                    template: "\n    <co-input-text\n      [model]=\"model\"\n      [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n      [rightIcon]=\"useRightIcon ? searchIcon : null\"\n      [placeholder]=\"placeholder\"\n      [customHeight]=\"customHeight\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n    ></co-input-text>\n  ",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -7945,6 +7949,7 @@
         search: [{ type: core.Output }],
         useLeftIcon: [{ type: core.Input }],
         useRightIcon: [{ type: core.Input }],
+        customHeight: [{ type: core.Input }],
         noIcon: [{ type: core.HostBinding, args: ['class.no-icon',] }, { type: core.Input }],
         isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ['class.co-input-search',] }]
@@ -7954,7 +7959,10 @@
     ], InputSearchComponent.prototype, "useLeftIcon", void 0);
     __decorate([
         InputBoolean()
-    ], InputSearchComponent.prototype, "useRightIcon", void 0);
+    ], InputSearchComponent.prototype, "useRightIcon", void 0);
+    __decorate([
+        InputBoolean()
+    ], InputSearchComponent.prototype, "customHeight", void 0);
 
     var InputSearchModule = /** @class */ (function () {
         function InputSearchModule() {
@@ -9695,6 +9703,7 @@
     var BaseSimpleGridComponent = /** @class */ (function () {
         function BaseSimpleGridComponent() {
             this.MIN_COLUMN_WIDTH = 50;
+            this.dataChanged = new rxjs.Subject();
             this.dragDropEnabled = false;
             this.resizable = false;
             this.inlineEdit = false;
@@ -9732,6 +9741,7 @@
             set: function (value) {
                 this._data = value;
                 this._prepareData();
+                this.dataChanged.next();
             },
             enumerable: false,
             configurable: true
@@ -9875,6 +9885,9 @@
             _this.currentPage = 1;
             _this._doubleClicked = false;
             _this._newRow = false;
+            _this.dataChanged.subscribe(function () {
+                _this.currentPage = 1;
+            });
             return _this;
         }
         Object.defineProperty(SimpleGridComponent.prototype, "headerCells", {
@@ -10156,7 +10169,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 (!!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-bar *ngIf=\"data?.length > rowsPerPage\"\n                       [itemsPerPage]=\"rowsPerPage\"\n                       [currentPage]=\"currentPage\"\n                       [totalItems]=\"data.length\"\n                       [autoHide]=\"true\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n                        ></co-pagination-bar>\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-bar *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n                       [itemsPerPage]=\"rowsPerPage\"\n                       [currentPage]=\"currentPage\"\n                       [totalItems]=\"data.length\"\n                       [autoHide]=\"true\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n                        ></co-pagination-bar>\n  ",
                     providers: [
                         FormMasterService
                     ],
@@ -10300,7 +10313,7 @@
     PaginationBarComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-pagination-bar",
-                    template: "\n    <ul class=\"pagination\" *ngIf=\"!shouldBeHidden()\">\n      <li *ngIf=\"directionLinks\" class=\"pagination-previous\" [class.disabled]=\"isOnFirstPage()\">\n        <a (click)=\"onPreviousClick()\" [class.disabled]=\"isOnFirstPage()\">{{ previousLabel }}</a>\n      </li>\n      <li *ngFor=\"let page of pages\" [class.current]=\"currentPage === page.value\" (click)=\"onPageClick(page.value)\">\n        <span>{{page.label}}</span>\n      </li>\n      <li *ngIf=\"directionLinks\" class=\"pagination-next\" [class.disabled]=\"isOnLastPage()\">\n        <a (click)=\"onNextClick()\" [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n      </li>\n    </ul>\n    ",
+                    template: "\n    <ul class=\"pagination\" *ngIf=\"!shouldBeHidden()\">\n      <li *ngIf=\"directionLinks\" class=\"pagination-previous\" [class.disabled]=\"isOnFirstPage()\" (click)=\"onPreviousClick()\">\n        <a [class.disabled]=\"isOnFirstPage()\">{{ previousLabel }}</a>\n      </li>\n      <li *ngFor=\"let page of pages\" [class.current]=\"currentPage === page.value\" (click)=\"onPageClick(page.value)\">\n        <span>{{page.label}}</span>\n      </li>\n      <li *ngIf=\"directionLinks\" class=\"pagination-next\" [class.disabled]=\"isOnLastPage()\" (click)=\"onNextClick()\" >\n        <a [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n      </li>\n    </ul>\n    ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -10338,101 +10351,9 @@
                 },] }
     ];
 
-    var PaginationService = /** @class */ (function () {
-        function PaginationService() {
-            this.change = new rxjs.Subject();
-            this.instances = {};
-        }
-        Object.defineProperty(PaginationService.prototype, "DEFAULT_ID", {
-            get: function () {
-                return PaginationService.DEFAULT_ID;
-            },
-            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);
-            }
-            else {
-                var changed = this.updateInstance(instance);
-                if (changed) {
-                    this.change.next(instance.id);
-                }
-            }
-        };
-        // Returns the current page number.
-        PaginationService.prototype.getCurrentPage = function (id) {
-            if (this.instances[id]) {
-                return this.instances[id].currentPage;
-            }
-        };
-        // 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);
-                }
-            }
-        };
-        // 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);
-            }
-        };
-        // 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);
-            }
-        };
-        /**
-         * 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]);
-            }
-            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;
-        };
-        return PaginationService;
-    }());
-    PaginationService.DEFAULT_ID = "DEFAULT_PAGINATION_ID";
-    PaginationService.decorators = [
-        { type: core.Injectable }
-    ];
-    PaginationService.ctorParameters = function () { return []; };
-
     var LARGE_NUMBER = 999999999;
     var PaginatePipe = /** @class */ (function () {
-        function PaginatePipe(paginateService) {
-            this.paginateService = paginateService;
+        function PaginatePipe() {
             // store the values from the last time the pipe
             this.state = {};
         }
@@ -10442,7 +10363,7 @@
             // 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;
+                var _id = args.id;
                 if (this.state[_id]) {
                     return this.state[_id].slice;
                 }
@@ -10456,7 +10377,6 @@
             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;
@@ -10468,7 +10388,6 @@
                 else {
                     var slice = collection.slice(start, end);
                     this._saveState(id, collection, slice, start, end);
-                    this.paginateService.change.next(id);
                     return slice;
                 }
             }
@@ -10482,7 +10401,7 @@
             var config = args;
             this._checkConfig(config);
             return {
-                id: config.id || this.paginateService.DEFAULT_ID,
+                id: config.id,
                 itemsPerPage: config.itemsPerPage || 0,
                 currentPage: config.currentPage || 1,
                 totalItems: config.totalItems || collection.length
@@ -10529,10 +10448,98 @@
                     name: 'paginate',
                     pure: false
                 },] }
+    ];
+
+    var PaginationService = /** @class */ (function () {
+        function PaginationService() {
+            this.change = new rxjs.Subject();
+            this.instances = {};
+        }
+        Object.defineProperty(PaginationService.prototype, "DEFAULT_ID", {
+            get: function () {
+                return PaginationService.DEFAULT_ID;
+            },
+            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);
+            }
+            else {
+                var changed = this.updateInstance(instance);
+                if (changed) {
+                    this.change.next(instance.id);
+                }
+            }
+        };
+        // Returns the current page number.
+        PaginationService.prototype.getCurrentPage = function (id) {
+            if (this.instances[id]) {
+                return this.instances[id].currentPage;
+            }
+        };
+        // 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);
+                }
+            }
+        };
+        // 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);
+            }
+        };
+        // 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);
+            }
+        };
+        /**
+         * 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]);
+            }
+            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;
+        };
+        return PaginationService;
+    }());
+    PaginationService.DEFAULT_ID = "DEFAULT_PAGINATION_ID";
+    PaginationService.decorators = [
+        { type: core.Injectable }
     ];
-    PaginatePipe.ctorParameters = function () { return [
-        { type: PaginationService }
-    ]; };
+    PaginationService.ctorParameters = function () { return []; };
 
     var PaginationComponent = /** @class */ (function () {
         function PaginationComponent(_paginationService) {