angular-slickgrid 3.1.0 → 3.3.2

package/bundles/angular-slickgrid.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@slickgrid-universal/common'), require('@angular/core'), require('@ngx-translate/core'), require('slickgrid/plugins/slick.rowdetailview'), require('slickgrid/plugins/slick.rowselectionmodel'), require('@slickgrid-universal/event-pub-sub'), require('rxjs'), require('dompurify'), require('jquery-ui/ui/widgets/draggable'), require('jquery-ui/ui/widgets/droppable'), require('jquery-ui/ui/widgets/sortable'), require('slickgrid/lib/jquery.event.drag-2.3.0'), require('slickgrid/lib/jquery.mousewheel'), require('slickgrid/slick.core'), require('slickgrid/slick.grid'), require('slickgrid/slick.dataview'), require('slickgrid/slick.groupitemmetadataprovider'), require('@slickgrid-universal/custom-footer-component'), require('@slickgrid-universal/empty-warning-component'), require('@slickgrid-universal/rxjs-observable'), require('dequal/lite'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('angular-slickgrid', ['exports', '@slickgrid-universal/common', '@angular/core', '@ngx-translate/core', 'slickgrid/plugins/slick.rowdetailview', 'slickgrid/plugins/slick.rowselectionmodel', '@slickgrid-universal/event-pub-sub', 'rxjs', 'dompurify', 'jquery-ui/ui/widgets/draggable', 'jquery-ui/ui/widgets/droppable', 'jquery-ui/ui/widgets/sortable', 'slickgrid/lib/jquery.event.drag-2.3.0', 'slickgrid/lib/jquery.mousewheel', 'slickgrid/slick.core', 'slickgrid/slick.grid', 'slickgrid/slick.dataview', 'slickgrid/slick.groupitemmetadataprovider', '@slickgrid-universal/custom-footer-component', '@slickgrid-universal/empty-warning-component', '@slickgrid-universal/rxjs-observable', 'dequal/lite', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['angular-slickgrid'] = {}, global.common, global.ng.core, global['ngx-translate-core'], null, null, global.eventPubSub, global.rxjs, global.dompurify, null, null, null, null, null, null, null, null, null, global.customFooterComponent, global.emptyWarningComponent, global.rxjsObservable, global.lite, global.ng.common));
-}(this, (function (exports, common, core, core$1, slick_rowdetailview, slick_rowselectionmodel, eventPubSub, rxjs, DOMPurify_, draggable, droppable, sortable, jquery_event_drag2_3_0, jquery_mousewheel, slick_core, slick_grid, slick_dataview, slick_groupitemmetadataprovider, customFooterComponent, emptyWarningComponent, rxjsObservable, lite, common$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@slickgrid-universal/common'), require('@angular/core'), require('@ngx-translate/core'), require('slickgrid/plugins/slick.rowdetailview'), require('slickgrid/plugins/slick.rowselectionmodel'), require('@slickgrid-universal/event-pub-sub'), require('rxjs'), require('dompurify'), require('jquery-ui/ui/widgets/draggable'), require('jquery-ui/ui/widgets/droppable'), require('jquery-ui/ui/widgets/sortable'), require('slickgrid/lib/jquery.event.drag-2.3.0'), require('slickgrid/lib/jquery.mousewheel'), require('slickgrid/slick.core'), require('slickgrid/slick.grid'), require('slickgrid/slick.dataview'), require('slickgrid/slick.groupitemmetadataprovider'), require('@slickgrid-universal/empty-warning-component'), require('@slickgrid-universal/custom-footer-component'), require('@slickgrid-universal/pagination-component'), require('@slickgrid-universal/rxjs-observable'), require('dequal/lite'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('angular-slickgrid', ['exports', '@slickgrid-universal/common', '@angular/core', '@ngx-translate/core', 'slickgrid/plugins/slick.rowdetailview', 'slickgrid/plugins/slick.rowselectionmodel', '@slickgrid-universal/event-pub-sub', 'rxjs', 'dompurify', 'jquery-ui/ui/widgets/draggable', 'jquery-ui/ui/widgets/droppable', 'jquery-ui/ui/widgets/sortable', 'slickgrid/lib/jquery.event.drag-2.3.0', 'slickgrid/lib/jquery.mousewheel', 'slickgrid/slick.core', 'slickgrid/slick.grid', 'slickgrid/slick.dataview', 'slickgrid/slick.groupitemmetadataprovider', '@slickgrid-universal/empty-warning-component', '@slickgrid-universal/custom-footer-component', '@slickgrid-universal/pagination-component', '@slickgrid-universal/rxjs-observable', 'dequal/lite', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['angular-slickgrid'] = {}, global.common, global.ng.core, global['ngx-translate-core'], null, null, global.eventPubSub, global.rxjs, global.dompurify, null, null, null, null, null, null, null, null, null, global.emptyWarningComponent, global.customFooterComponent, global.paginationComponent, global.rxjsObservable, global.lite, global.ng.common));
+}(this, (function (exports, common, core, core$1, slick_rowdetailview, slick_rowselectionmodel, eventPubSub, rxjs, DOMPurify_, draggable, droppable, sortable, jquery_event_drag2_3_0, jquery_mousewheel, slick_core, slick_grid, slick_dataview, slick_groupitemmetadataprovider, emptyWarningComponent, customFooterComponent, paginationComponent, rxjsObservable, lite, common$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -596,7 +596,7 @@
         return subscriptions;
     }
 
-    var DOMPurify = DOMPurify___namespace; // patch to fix rollup to work
+    var DOMPurify = DOMPurify___namespace['default'] || DOMPurify___namespace; // patch to fix rollup to work
     var ROW_DETAIL_CONTAINER_PREFIX = 'container_';
     var PRELOAD_CONTAINER_PREFIX = 'container_loading';
     var RowDetailViewExtension = /** @class */ (function () {
@@ -1310,176 +1310,6 @@
     Constants.VALIDATION_EDITOR_TEXT_MIN_LENGTH = 'Please make sure your text is more than {{minLength}} character(s)';
     Constants.VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = 'Please make sure your text is at least {{minLength}} character(s)';
 
-    var SlickPaginationComponent = /** @class */ (function () {
-        /** Constructor */
-        function SlickPaginationComponent(translate) {
-            this.translate = translate;
-            this.subscriptions = [];
-            this._enableTranslate = false;
-            // text translations (handled by ngx-translate or by custom locale)
-            this.textItemsPerPage = 'items per page';
-            this.textItems = 'items';
-            this.textOf = 'of';
-            this.textPage = 'Page';
-        }
-        Object.defineProperty(SlickPaginationComponent.prototype, "availablePageSizes", {
-            get: function () {
-                return this.paginationService.availablePageSizes;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SlickPaginationComponent.prototype, "dataFrom", {
-            get: function () {
-                return this.paginationService.dataFrom;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SlickPaginationComponent.prototype, "dataTo", {
-            get: function () {
-                return this.paginationService.dataTo;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SlickPaginationComponent.prototype, "isLeftPaginationDisabled", {
-            /** is the left side pagination disabled? */
-            get: function () {
-                return this.pageNumber === 1 || this.totalItems === 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SlickPaginationComponent.prototype, "isRightPaginationDisabled", {
-            /** is the right side pagination disabled? */
-            get: function () {
-                return this.pageNumber === this.pageCount || this.totalItems === 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SlickPaginationComponent.prototype, "itemsPerPage", {
-            get: function () {
-                return this.paginationService.itemsPerPage;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SlickPaginationComponent.prototype, "pageCount", {
-            get: function () {
-                return this.paginationService.pageCount;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SlickPaginationComponent.prototype, "pageNumber", {
-            get: function () {
-                return this.paginationService.pageNumber;
-            },
-            set: function (page) {
-                // the setter has to be declared but we won't use it, instead we will use the "changeToCurrentPage()" to only update the value after ENTER keydown event
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SlickPaginationComponent.prototype, "totalItems", {
-            get: function () {
-                return this.paginationService.totalItems;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SlickPaginationComponent.prototype.ngOnDestroy = function () {
-            this.dispose();
-        };
-        SlickPaginationComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._gridOptions = this.gridOptions || {};
-            this._enableTranslate = this._gridOptions && this._gridOptions.enableTranslate || false;
-            this._locales = this._gridOptions && this._gridOptions.locales || Constants.locales;
-            if (this._enableTranslate && !this.translate) {
-                throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
-            }
-            this.translateAllUiTexts(this._locales);
-            // translate all the text using ngx-translate or custom locales
-            if (this._enableTranslate && this.translate && this.translate.onLangChange) {
-                this.subscriptions.push(this.translate.onLangChange.subscribe(function () { return _this.translateAllUiTexts(_this._locales); }));
-            }
-        };
-        SlickPaginationComponent.prototype.changeToFirstPage = function (event) {
-            if (!this.isLeftPaginationDisabled) {
-                this.paginationService.goToFirstPage(event);
-            }
-        };
-        SlickPaginationComponent.prototype.changeToLastPage = function (event) {
-            if (!this.isRightPaginationDisabled) {
-                this.paginationService.goToLastPage(event);
-            }
-        };
-        SlickPaginationComponent.prototype.changeToNextPage = function (event) {
-            if (!this.isRightPaginationDisabled) {
-                this.paginationService.goToNextPage(event);
-            }
-        };
-        SlickPaginationComponent.prototype.changeToPreviousPage = function (event) {
-            if (!this.isLeftPaginationDisabled) {
-                this.paginationService.goToPreviousPage(event);
-            }
-        };
-        SlickPaginationComponent.prototype.changeToCurrentPage = function (event) {
-            var pageNumber = 1;
-            if (event && event.currentTarget && event.currentTarget.value) {
-                pageNumber = +(event.currentTarget.value);
-            }
-            this.paginationService.goToPageNumber(pageNumber, event);
-        };
-        SlickPaginationComponent.prototype.changeItemPerPage = function (event) {
-            var itemsPerPage = 1;
-            if (event && event.currentTarget && event.currentTarget.value) {
-                itemsPerPage = +(event.currentTarget.value);
-            }
-            this.paginationService.changeItemPerPage(itemsPerPage, event);
-        };
-        SlickPaginationComponent.prototype.dispose = function () {
-            // also unsubscribe all Angular Subscriptions
-            this.subscriptions = unsubscribeAllObservables(this.subscriptions);
-        };
-        // --
-        // private functions
-        // --------------------
-        /** Translate all the texts shown in the UI, use ngx-translate service when available or custom locales when service is null */
-        SlickPaginationComponent.prototype.translateAllUiTexts = function (locales) {
-            if (this._enableTranslate && this.translate && this.translate.instant && this.translate.currentLang) {
-                var translationPrefix = common.getTranslationPrefix(this._gridOptions);
-                this.textItemsPerPage = this.translate.instant(translationPrefix + "ITEMS_PER_PAGE");
-                this.textItems = this.translate.instant(translationPrefix + "ITEMS");
-                this.textOf = this.translate.instant(translationPrefix + "OF");
-                this.textPage = this.translate.instant(translationPrefix + "PAGE");
-            }
-            else if (locales) {
-                this.textItemsPerPage = locales.TEXT_ITEMS_PER_PAGE || 'TEXT_ITEMS_PER_PAGE';
-                this.textItems = locales.TEXT_ITEMS || 'TEXT_ITEMS';
-                this.textOf = locales.TEXT_OF || 'TEXT_OF';
-                this.textPage = locales.TEXT_PAGE || 'TEXT_PAGE';
-            }
-        };
-        return SlickPaginationComponent;
-    }());
-    SlickPaginationComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'slick-pagination',
-                    template: "<div class=\"slick-pagination\">\r\n  <div class=\"slick-pagination-nav\">\r\n    <nav aria-label=\"Page navigation\">\r\n      <ul class=\"pagination\">\r\n        <li class=\"page-item\" [ngClass]=\"isLeftPaginationDisabled ? 'disabled' : ''\">\r\n          <a class=\"page-link icon-seek-first fa fa-angle-double-left\" aria-label=\"First\"\r\n             (click)=\"changeToFirstPage($event)\">\r\n          </a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"isLeftPaginationDisabled ? 'disabled' : ''\">\r\n          <a class=\"page-link icon-seek-prev fa fa-angle-left\" aria-label=\"Previous\"\r\n             (click)=\"changeToPreviousPage($event)\">\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n\r\n    <div class=\"slick-page-number\">\r\n      <span>{{textPage}}</span>\r\n      <input type=\"text\" class=\"form-control\" data-test=\"page-number-input\" [value]=\"pageNumber\" size=\"1\"\r\n             [readOnly]=\"totalItems === 0\" (change)=\"changeToCurrentPage($event)\">\r\n      <span>{{textOf}}</span><span data-test=\"page-count\"> {{pageCount}}</span>\r\n    </div>\r\n\r\n    <nav aria-label=\"Page navigation\">\r\n      <ul class=\"pagination\">\r\n        <li class=\"page-item\" [ngClass]=\"isRightPaginationDisabled ? 'disabled' : ''\">\r\n          <a class=\"page-link icon-seek-next text-center fa fa-lg fa-angle-right\" aria-label=\"Next\"\r\n             (click)=\"changeToNextPage($event)\">\r\n          </a>\r\n        </li>\r\n        <li class=\"page-item\" [ngClass]=\"isRightPaginationDisabled ? 'disabled' : ''\">\r\n          <a class=\"page-link icon-seek-end fa fa-lg fa-angle-double-right\" aria-label=\"Last\"\r\n             (click)=\"changeToLastPage($event)\">\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n  <span class=\"slick-pagination-settings\">\r\n    <select id=\"items-per-page-label\" (change)=\"changeItemPerPage($event)\">\r\n      <option value=\"{{pageSize}}\" [selected]=\"pageSize === itemsPerPage\" *ngFor=\"let pageSize of availablePageSizes\">{{pageSize}}</option>\r\n    </select>\r\n    <span>{{textItemsPerPage}}</span>,\r\n    <span class=\"slick-pagination-count\">\r\n      <span *ngIf=\"totalItems\">\r\n        <span class=\"page-info-from-to\">\r\n          <span data-test=\"item-from\">{{dataFrom}}</span>-<span data-test=\"item-to\">{{dataTo}}</span>\r\n          {{textOf}}\r\n        </span>\r\n      </span>\r\n      <span class=\"page-info-total-items\">\r\n        <span data-test=\"total-items\">{{totalItems}}</span> {{textItems}}\r\n      </span>\r\n    </span>\r\n  </span>\r\n</div>\r\n"
-                },] }
-    ];
-    SlickPaginationComponent.ctorParameters = function () { return [
-        { type: core$1.TranslateService, decorators: [{ type: core.Optional }] }
-    ]; };
-    SlickPaginationComponent.propDecorators = {
-        gridOptions: [{ type: core.Input }],
-        paginationService: [{ type: core.Input }]
-    };
-
     var AngularSlickgridComponent = /** @class */ (function () {
         function AngularSlickgridComponent(angularUtilService, appRef, cd, containerService, elm, translate, translaterService, forRootConfig, externalServices) {
             var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
@@ -1529,7 +1359,7 @@
             var columnPickerExtension = new common.ColumnPickerExtension(this.extensionUtility, this.sharedService);
             var checkboxExtension = new common.CheckboxSelectorExtension(this.sharedService);
             var draggableGroupingExtension = new common.DraggableGroupingExtension(this.extensionUtility, this._eventPubSubService, this.sharedService);
-            var gridMenuExtension = new common.GridMenuExtension(this.extensionUtility, this.filterService, this.sharedService, this.sortService, this.backendUtilityService, this.translaterService);
+            var gridMenuExtension = new common.GridMenuExtension(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.backendUtilityService, this.translaterService);
             var groupItemMetaProviderExtension = new common.GroupItemMetaProviderExtension(this.sharedService);
             var headerButtonExtension = new common.HeaderButtonExtension(this.extensionUtility, this.sharedService);
             var headerMenuExtension = new common.HeaderMenuExtension(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.translaterService);
@@ -1637,7 +1467,7 @@
             },
             set: function (newHierarchicalDataset) {
                 var _this = this;
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _f;
                 var isDatasetEqual = lite.dequal(newHierarchicalDataset, (_b = (_a = this.sharedService) === null || _a === void 0 ? void 0 : _a.hierarchicalDataset) !== null && _b !== void 0 ? _b : []);
                 var prevFlatDatasetLn = this._currentDatasetLength;
                 this.sharedService.hierarchicalDataset = newHierarchicalDataset;
@@ -1646,9 +1476,8 @@
                 }
                 // when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
                 if (newHierarchicalDataset && this.slickGrid && ((_d = this.sortService) === null || _d === void 0 ? void 0 : _d.processTreeDataInitialSort)) {
-                    this.dataView.setItems([], this.gridOptions.datasetIdPropertyName);
+                    this.dataView.setItems([], (_f = this.gridOptions.datasetIdPropertyName) !== null && _f !== void 0 ? _f : 'id');
                     this.sortService.processTreeDataInitialSort();
-                    this.sortTreeDataset([]);
                     // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
                     // however we need 1 cpu cycle before having the DataView refreshed, so we need to wrap this check in a setTimeout
                     setTimeout(function () {
@@ -1657,8 +1486,8 @@
                             _this.filterService.refreshTreeDataFilters();
                         }
                     });
+                    this._isDatasetHierarchicalInitialized = true;
                 }
-                this._isDatasetHierarchicalInitialized = true;
             },
             enumerable: false,
             configurable: true
@@ -1696,6 +1525,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(AngularSlickgridComponent.prototype, "isDatasetHierarchicalInitialized", {
+            set: function (isInitialized) {
+                this._isDatasetHierarchicalInitialized = isInitialized;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(AngularSlickgridComponent.prototype, "registeredResources", {
             get: function () {
                 return this._registeredResources;
@@ -1720,7 +1556,7 @@
         AngularSlickgridComponent.prototype.destroy = function (shouldEmptyDomElementContainer) {
             var e_1, _s, e_2, _t, e_3, _u;
             if (shouldEmptyDomElementContainer === void 0) { shouldEmptyDomElementContainer = false; }
-            var _a, _b, _c, _d, _f, _g;
+            var _a, _b, _c, _d, _f, _g, _h;
             // dispose of all Services
             this.serviceList.forEach(function (service) {
                 if (service && service.dispose) {
@@ -1739,21 +1575,22 @@
                 this._registeredResources = [];
             }
             // dispose the Components
-            (_a = this.slickFooter) === null || _a === void 0 ? void 0 : _a.dispose();
-            (_b = this.slickEmptyWarning) === null || _b === void 0 ? void 0 : _b.dispose();
-            if ((_c = this._eventHandler) === null || _c === void 0 ? void 0 : _c.unsubscribeAll) {
+            (_a = this.slickEmptyWarning) === null || _a === void 0 ? void 0 : _a.dispose();
+            (_b = this.slickFooter) === null || _b === void 0 ? void 0 : _b.dispose();
+            (_c = this.slickPagination) === null || _c === void 0 ? void 0 : _c.dispose();
+            if ((_d = this._eventHandler) === null || _d === void 0 ? void 0 : _d.unsubscribeAll) {
                 this._eventHandler.unsubscribeAll();
             }
-            (_d = this._eventPubSubService) === null || _d === void 0 ? void 0 : _d.unsubscribeAll();
+            (_f = this._eventPubSubService) === null || _f === void 0 ? void 0 : _f.unsubscribeAll();
             if (this.dataView) {
-                if ((_f = this.dataView) === null || _f === void 0 ? void 0 : _f.setItems) {
+                if ((_g = this.dataView) === null || _g === void 0 ? void 0 : _g.setItems) {
                     this.dataView.setItems([]);
                 }
                 if (this.dataView.destroy) {
                     this.dataView.destroy();
                 }
             }
-            if ((_g = this.slickGrid) === null || _g === void 0 ? void 0 : _g.destroy) {
+            if ((_h = this.slickGrid) === null || _h === void 0 ? void 0 : _h.destroy) {
                 this.slickGrid.destroy(shouldEmptyDomElementContainer);
             }
             if (this.backendServiceApi) {
@@ -1838,7 +1675,7 @@
             }
         };
         AngularSlickgridComponent.prototype.initialization = function (eventHandler) {
-            var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             this.gridOptions.translater = this.translaterService;
             this._eventHandler = eventHandler;
             // when detecting a frozen grid, we'll automatically enable the mousewheel scroll handler so that we can scroll from both left/right frozen containers
@@ -1908,13 +1745,14 @@
             }
             // user could show a custom footer with the data metrics (dataset length and last updated timestamp)
             if (!this.gridOptions.enablePagination && this.gridOptions.showCustomFooter && this.gridOptions.customFooterOptions && this.gridContainerElement) {
-                this.slickFooter = new customFooterComponent.SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this.translaterService);
+                this.slickFooter = new customFooterComponent.SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this._eventPubSubService, this.translaterService);
                 this.slickFooter.renderFooter(this.gridContainerElement);
             }
             if (!this.customDataView && this.dataView) {
+                // load the data in the DataView (unless it's a hierarchical dataset, if so it will be loaded after the initial tree sort)
                 var initialDataset = ((_j = this.gridOptions) === null || _j === void 0 ? void 0 : _j.enableTreeData) ? this.sortTreeDataset(this._dataset) : this._dataset;
                 this.dataView.beginUpdate();
-                this.dataView.setItems(initialDataset || [], this.gridOptions.datasetIdPropertyName);
+                this.dataView.setItems(initialDataset || [], (_k = this.gridOptions.datasetIdPropertyName) !== null && _k !== void 0 ? _k : 'id');
                 this.dataView.endUpdate();
                 // if you don't want the items that are not visible (due to being filtered out or being on a different page)
                 // to stay selected, pass 'false' to the second arg
@@ -1964,13 +1802,13 @@
             this.bindResizeHook(this.slickGrid, this.gridOptions);
             // bind the Backend Service API callback functions only after the grid is initialized
             // because the preProcess() and onInit() might get triggered
-            if ((_k = this.gridOptions) === null || _k === void 0 ? void 0 : _k.backendServiceApi) {
+            if ((_l = this.gridOptions) === null || _l === void 0 ? void 0 : _l.backendServiceApi) {
                 this.bindBackendCallbackFunctions(this.gridOptions);
             }
             // local grid, check if we need to show the Pagination
             // if so then also check if there's any presets and finally initialize the PaginationService
             // a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total
-            if (((_l = this.gridOptions) === null || _l === void 0 ? void 0 : _l.enablePagination) && this._isLocalGrid) {
+            if (((_m = this.gridOptions) === null || _m === void 0 ? void 0 : _m.enablePagination) && this._isLocalGrid) {
                 this.showPagination = true;
                 this.loadLocalGridPagination(this.dataset);
             }
@@ -1978,11 +1816,11 @@
                 // Slick Grid & DataView objects
                 dataView: this.dataView,
                 slickGrid: this.slickGrid,
-                extensions: (_m = this.extensionService) === null || _m === void 0 ? void 0 : _m.extensionList,
+                extensions: (_o = this.extensionService) === null || _o === void 0 ? void 0 : _o.extensionList,
                 // public methods
                 destroy: this.destroy.bind(this),
                 // return all available Services (non-singleton)
-                backendService: (_p = (_o = this.gridOptions) === null || _o === void 0 ? void 0 : _o.backendServiceApi) === null || _p === void 0 ? void 0 : _p.service,
+                backendService: (_q = (_p = this.gridOptions) === null || _p === void 0 ? void 0 : _p.backendServiceApi) === null || _q === void 0 ? void 0 : _q.service,
                 filterService: this.filterService,
                 gridEventService: this.gridEventService,
                 gridStateService: this.gridStateService,
@@ -2024,13 +1862,13 @@
          * @param dataset
          */
         AngularSlickgridComponent.prototype.refreshGridData = function (dataset, totalCount) {
-            var _a, _b, _c, _d, _f;
+            var _a, _b, _c, _d, _f, _g;
             if (this.gridOptions && this.gridOptions.enableEmptyDataWarningMessage && Array.isArray(dataset)) {
                 var finalTotalCount = totalCount || dataset.length;
                 this.displayEmptyDataWarning(finalTotalCount < 1);
             }
             if (Array.isArray(dataset) && this.slickGrid && ((_a = this.dataView) === null || _a === void 0 ? void 0 : _a.setItems)) {
-                this.dataView.setItems(dataset, this.gridOptions.datasetIdPropertyName);
+                this.dataView.setItems(dataset, (_b = this.gridOptions.datasetIdPropertyName) !== null && _b !== void 0 ? _b : 'id');
                 if (!this.gridOptions.backendServiceApi && !this.gridOptions.enableTreeData) {
                     this.dataView.reSort();
                 }
@@ -2048,11 +1886,11 @@
                 }
                 // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly
                 this.showPagination = (this.gridOptions && (this.gridOptions.enablePagination || (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined))) ? true : false;
-                if (this._paginationOptions && ((_b = this.gridOptions) === null || _b === void 0 ? void 0 : _b.pagination) && ((_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.backendServiceApi)) {
+                if (this._paginationOptions && ((_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.pagination) && ((_d = this.gridOptions) === null || _d === void 0 ? void 0 : _d.backendServiceApi)) {
                     var paginationOptions = this.setPaginationOptionsWhenPresetDefined(this.gridOptions, this._paginationOptions);
                     // when we have a totalCount use it, else we'll take it from the pagination object
                     // only update the total items if it's different to avoid refreshing the UI
-                    var totalRecords = (totalCount !== undefined) ? totalCount : ((_f = (_d = this.gridOptions) === null || _d === void 0 ? void 0 : _d.pagination) === null || _f === void 0 ? void 0 : _f.totalItems);
+                    var totalRecords = (totalCount !== undefined) ? totalCount : ((_g = (_f = this.gridOptions) === null || _f === void 0 ? void 0 : _f.pagination) === null || _g === void 0 ? void 0 : _g.totalItems);
                     if (totalRecords !== undefined && totalRecords !== this.totalItems) {
                         this.totalItems = +totalRecords;
                     }
@@ -2142,9 +1980,10 @@
                 if (gridOptions.enableTranslate) {
                     this.translateColumnHeaderTitleKeys();
                     this.translateColumnGroupKeys();
-                    this.translateCustomFooterTexts();
                 }
                 this.subscriptions.push(this.translate.onLangChange.subscribe(function () {
+                    // publish event of the same name that Slickgrid-Universal uses on a language change event
+                    _this._eventPubSubService.publish('onLanguageChange');
                     if (gridOptions.enableTranslate) {
                         _this.extensionService.translateCellMenu();
                         _this.extensionService.translateColumnHeaders();
@@ -2152,7 +1991,6 @@
                         _this.extensionService.translateContextMenu();
                         _this.extensionService.translateGridMenu();
                         _this.extensionService.translateHeaderMenu();
-                        _this.translateCustomFooterTexts();
                         _this.translateColumnHeaderTitleKeys();
                         _this.translateColumnGroupKeys();
                         if (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping) {
@@ -2347,7 +2185,6 @@
                 this.resizerService.resizeGrid();
             }
             if (options.enableAutoResize) {
-                this.resizerService.bindAutoResizeDataGrid();
                 if (grid && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns) {
                     grid.autosizeColumns();
                 }
@@ -2399,7 +2236,10 @@
                     if ((_b = _this.gridOptions) === null || _b === void 0 ? void 0 : _b.backendServiceApi) {
                         (_c = _this.backendUtilityService) === null || _c === void 0 ? void 0 : _c.refreshBackendDataset(_this.gridOptions);
                     }
+                    _this.renderPagination(_this.showPagination);
                 }));
+                // also initialize (render) the pagination component
+                this.renderPagination();
                 this._isPaginationInitialized = true;
             }
             this.cd.detectChanges();
@@ -2595,6 +2435,27 @@
             this.paginationService.addRxJsResource(this.rxjs);
             this.containerService.registerInstance('RxJsResource', this.rxjs);
         };
+        /**
+         * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
+         * also while disposing we can choose to omit the disposable of the Pagination Service (if we are simply toggling the Pagination, we want to keep the Service alive)
+         * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
+         * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
+         */
+        AngularSlickgridComponent.prototype.renderPagination = function (showPagination) {
+            if (showPagination === void 0) { showPagination = true; }
+            var _a;
+            if (((_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && !this._isPaginationInitialized && showPagination) {
+                this.slickPagination = new paginationComponent.SlickPaginationComponent(this.paginationService, this._eventPubSubService, this.sharedService, this.translaterService);
+                this.slickPagination.renderPagination(this.gridContainerElement);
+                this._isPaginationInitialized = true;
+            }
+            else if (!showPagination) {
+                if (this.slickPagination) {
+                    this.slickPagination.dispose();
+                }
+                this._isPaginationInitialized = false;
+            }
+        };
         /**
          * Takes a flat dataset with parent/child relationship, sort it (via its tree structure) and return the sorted flat array
          * @param {Array<Object>} flatDatasetInput - flat dataset input
@@ -2651,13 +2512,6 @@
                 return Object.assign(Object.assign({}, column), { editor: column.editor && column.editor.model, internalColumnEditor: Object.assign({}, column.editor) });
             });
         };
-        /** Translate all Custom Footer Texts (footer with metrics) */
-        AngularSlickgridComponent.prototype.translateCustomFooterTexts = function () {
-            var _a, _b;
-            if (this.slickFooter && ((_a = this.translaterService) === null || _a === void 0 ? void 0 : _a.translate)) {
-                (_b = this.slickFooter) === null || _b === void 0 ? void 0 : _b.translateCustomFooterTexts();
-            }
-        };
         AngularSlickgridComponent.prototype.translateColumnHeaderTitleKeys = function () {
             // translate all columns (including hidden columns)
             this.extensionUtility.translateItems(this.sharedService.allColumns, 'nameKey', 'name');
@@ -2695,7 +2549,7 @@
     AngularSlickgridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'angular-slickgrid',
-                    template: "<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\r\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\" style=\"width: 100%\">\r\n  </div>\r\n\r\n  <!-- Pagination section under the grid -->\r\n  <slick-pagination id=\"slickPagingContainer-{{gridId}}\" *ngIf=\"showPagination\"\r\n                    [gridOptions]=\"gridOptions\"\r\n                    [paginationService]=\"paginationService\">\r\n  </slick-pagination>\r\n</div>",
+                    template: "<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\r\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\" style=\"width: 100%\">\r\n  </div>\r\n</div>",
                     providers: [
                         // make everything transient (non-singleton)
                         AngularUtilService,
@@ -2752,11 +2606,9 @@
                     ],
                     declarations: [
                         AngularSlickgridComponent,
-                        SlickPaginationComponent
                     ],
                     exports: [
                         AngularSlickgridComponent,
-                        SlickPaginationComponent
                     ],
                     entryComponents: [AngularSlickgridComponent]
                 },] }
@@ -2771,7 +2623,6 @@
     exports.AngularUtilService = AngularUtilService;
     exports.BsDropDownService = BsDropDownService;
     exports.RowDetailViewExtension = RowDetailViewExtension;
-    exports.SlickPaginationComponent = SlickPaginationComponent;
     exports.SlickgridConfig = SlickgridConfig;
     exports.unsubscribeAllObservables = unsubscribeAllObservables;
     exports.ɵb = ContainerService;