@colijnit/corecomponents_v12 12.0.67 → 12.0.69

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -3723,7 +3723,7 @@
     CoDialogComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-dialog',
-                    template: "\n    <div class=\"co-dialog-overlay\" *ngIf=\"show\" (click)=\"handleOverlayClick($event)\" @showHideOverlay></div>\n    <div class=\"co-dialog-wrapper\" *ngIf=\"show\" @showHideDialog>\n      <div class=\"dialog-header\" *ngIf=\"!borderless\">\n        <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n          <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n        </div>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"co-dialog-overlay\" *ngIf=\"show\" (click)=\"handleOverlayClick($event)\" @showHideOverlay></div>\n    <div class=\"co-dialog-wrapper\" *ngIf=\"show\" @showHideDialog>\n      <div class=\"dialog-header\" *ngIf=\"!borderless\">\n        <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n          <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n        </div>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n      <div class=\"dialog-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger('showHideOverlay', [
                             animations.state('*', animations.style({ opacity: 1 })),
@@ -3737,6 +3737,7 @@
                 },] }
     ];
     CoDialogComponent.propDecorators = {
+        customCssClass: [{ type: core.Input }],
         headerTemplate: [{ type: core.Input }],
         footerTemplate: [{ type: core.Input }],
         showCloseIcon: [{ type: core.Input }],
@@ -4432,6 +4433,7 @@
             this.focused = false;
             this.formInput = true;
             this.customWidth = false;
+            this.customHeight = false;
             this.noTriangleGraphic = false;
             this.halfWidth = false;
             this.fullWidth = false;
@@ -4728,6 +4730,7 @@
             if (this.showSaveCancel && this.canSaveOrCancel) {
                 this._handleKeyDown(event);
             }
+            this._positionValidationError();
         };
         Object.defineProperty(BaseInputComponent.prototype, "canChange", {
             get: function () {
@@ -5252,6 +5255,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 +5292,9 @@
     __decorate([
         InputBoolean()
     ], BaseInputComponent.prototype, "customWidth", void 0);
+    __decorate([
+        InputBoolean()
+    ], BaseInputComponent.prototype, "customHeight", void 0);
     __decorate([
         InputBoolean()
     ], BaseInputComponent.prototype, "noTriangleGraphic", void 0);
@@ -5622,17 +5629,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,
                         {
@@ -6995,7 +6997,7 @@
     InputListboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-input-listbox',
-                    template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [disabled]=\"readonly\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [disabled]=\"readonly\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputListboxComponent; })
                         }, {
@@ -7014,6 +7016,7 @@
         { type: core.ElementRef }
     ]; };
     InputListboxComponent.propDecorators = {
+        customCssClass: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         value: [{ type: core.Input }],
         collection: [{ type: core.Input }],
@@ -7916,6 +7919,7 @@
             _this.search = new core.EventEmitter();
             _this.useLeftIcon = false;
             _this.useRightIcon = false;
+            _this.customHeight = false;
             _this.noIcon = false;
             _this.isSmall = false;
             return _this;
@@ -7937,7 +7941,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
                 },] }
@@ -7947,6 +7951,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',] }]
@@ -7956,7 +7961,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() {
@@ -9697,6 +9705,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;
@@ -9734,6 +9743,7 @@
             set: function (value) {
                 this._data = value;
                 this._prepareData();
+                this.dataChanged.next();
             },
             enumerable: false,
             configurable: true
@@ -9877,6 +9887,9 @@
             _this.currentPage = 1;
             _this._doubleClicked = false;
             _this._newRow = false;
+            _this.dataChanged.subscribe(function () {
+                _this.currentPage = 1;
+            });
             return _this;
         }
         Object.defineProperty(SimpleGridComponent.prototype, "headerCells", {
@@ -10158,7 +10171,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
                     ],
@@ -10302,7 +10315,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
                 },] }
     ];
@@ -10340,101 +10353,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 = {};
         }
@@ -10444,7 +10365,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;
                 }
@@ -10458,7 +10379,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;
@@ -10470,7 +10390,6 @@
                 else {
                     var slice = collection.slice(start, end);
                     this._saveState(id, collection, slice, start, end);
-                    this.paginateService.change.next(id);
                     return slice;
                 }
             }
@@ -10484,7 +10403,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
@@ -10531,10 +10450,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) {