angular-slickgrid 3.1.0 → 3.3.2

package/fesm2015/angular-slickgrid.js

@@ -1,6 +1,6 @@
-import { castObservableToPromise, addToArrayWhenNotExists, SharedService, RxJsFacade, Filters, OperatorType, EventNamingStyle, FileType, DelimiterType, getTranslationPrefix, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, AutoTooltipExtension, CellExternalCopyManagerExtension, CellMenuExtension, ContextMenuExtension, ColumnPickerExtension, CheckboxSelectorExtension, DraggableGroupingExtension, GridMenuExtension, GroupItemMetaProviderExtension, HeaderButtonExtension, HeaderMenuExtension, RowMoveManagerExtension, RowSelectionExtension, ExtensionService, GridStateService, GridService, GroupingAndColspanService, emptyElement, autoAddEditorFormatterToColumnsWithEditor, GridStateType } from '@slickgrid-universal/common';
+import { castObservableToPromise, addToArrayWhenNotExists, SharedService, RxJsFacade, Filters, OperatorType, EventNamingStyle, FileType, DelimiterType, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, AutoTooltipExtension, CellExternalCopyManagerExtension, CellMenuExtension, ContextMenuExtension, ColumnPickerExtension, CheckboxSelectorExtension, DraggableGroupingExtension, GridMenuExtension, GroupItemMetaProviderExtension, HeaderButtonExtension, HeaderMenuExtension, RowMoveManagerExtension, RowSelectionExtension, ExtensionService, GridStateService, GridService, GroupingAndColspanService, emptyElement, autoAddEditorFormatterToColumnsWithEditor, GridStateType } from '@slickgrid-universal/common';
 export * from '@slickgrid-universal/common';
-import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Optional, Component, Input, ChangeDetectorRef, ElementRef, Inject, NgModule } from '@angular/core';
+import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Optional, Component, ChangeDetectorRef, ElementRef, Inject, Input, NgModule } from '@angular/core';
 import { __awaiter } from 'tslib';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import 'slickgrid/plugins/slick.rowdetailview';
@@ -17,8 +17,9 @@ import 'slickgrid/slick.core';
 import 'slickgrid/slick.grid';
 import 'slickgrid/slick.dataview';
 import 'slickgrid/slick.groupitemmetadataprovider';
-import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
+import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
+import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
 import { RxJsResource } from '@slickgrid-universal/rxjs-observable';
 import { dequal } from 'dequal/lite';
 import { CommonModule } from '@angular/common';
@@ -255,7 +256,7 @@ function unsubscribeAllObservables(subscriptions) {
     return subscriptions;
 }
 
-const DOMPurify = DOMPurify_; // patch to fix rollup to work
+const DOMPurify = DOMPurify_['default'] || DOMPurify_; // patch to fix rollup to work
 const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
 const PRELOAD_CONTAINER_PREFIX = 'container_loading';
 class RowDetailViewExtension {
@@ -929,138 +930,6 @@ Constants.VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE = 'Please make sure your t
 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)';
 
-class SlickPaginationComponent {
-    /** Constructor */
-    constructor(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';
-    }
-    get availablePageSizes() {
-        return this.paginationService.availablePageSizes;
-    }
-    get dataFrom() {
-        return this.paginationService.dataFrom;
-    }
-    get dataTo() {
-        return this.paginationService.dataTo;
-    }
-    /** is the left side pagination disabled? */
-    get isLeftPaginationDisabled() {
-        return this.pageNumber === 1 || this.totalItems === 0;
-    }
-    /** is the right side pagination disabled? */
-    get isRightPaginationDisabled() {
-        return this.pageNumber === this.pageCount || this.totalItems === 0;
-    }
-    get itemsPerPage() {
-        return this.paginationService.itemsPerPage;
-    }
-    get pageCount() {
-        return this.paginationService.pageCount;
-    }
-    get pageNumber() {
-        return this.paginationService.pageNumber;
-    }
-    set pageNumber(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
-    }
-    get totalItems() {
-        return this.paginationService.totalItems;
-    }
-    ngOnDestroy() {
-        this.dispose();
-    }
-    ngOnInit() {
-        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(() => this.translateAllUiTexts(this._locales)));
-        }
-    }
-    changeToFirstPage(event) {
-        if (!this.isLeftPaginationDisabled) {
-            this.paginationService.goToFirstPage(event);
-        }
-    }
-    changeToLastPage(event) {
-        if (!this.isRightPaginationDisabled) {
-            this.paginationService.goToLastPage(event);
-        }
-    }
-    changeToNextPage(event) {
-        if (!this.isRightPaginationDisabled) {
-            this.paginationService.goToNextPage(event);
-        }
-    }
-    changeToPreviousPage(event) {
-        if (!this.isLeftPaginationDisabled) {
-            this.paginationService.goToPreviousPage(event);
-        }
-    }
-    changeToCurrentPage(event) {
-        let pageNumber = 1;
-        if (event && event.currentTarget && event.currentTarget.value) {
-            pageNumber = +(event.currentTarget.value);
-        }
-        this.paginationService.goToPageNumber(pageNumber, event);
-    }
-    changeItemPerPage(event) {
-        let itemsPerPage = 1;
-        if (event && event.currentTarget && event.currentTarget.value) {
-            itemsPerPage = +(event.currentTarget.value);
-        }
-        this.paginationService.changeItemPerPage(itemsPerPage, event);
-    }
-    dispose() {
-        // 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 */
-    translateAllUiTexts(locales) {
-        if (this._enableTranslate && this.translate && this.translate.instant && this.translate.currentLang) {
-            const translationPrefix = 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';
-        }
-    }
-}
-SlickPaginationComponent.decorators = [
-    { type: 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 = () => [
-    { type: TranslateService, decorators: [{ type: Optional }] }
-];
-SlickPaginationComponent.propDecorators = {
-    gridOptions: [{ type: Input }],
-    paginationService: [{ type: Input }]
-};
-
 // import 3rd party vendor libs
 class AngularSlickgridComponent {
     constructor(angularUtilService, appRef, cd, containerService, elm, translate, translaterService, forRootConfig, externalServices) {
@@ -1111,7 +980,7 @@ class AngularSlickgridComponent {
         const columnPickerExtension = new ColumnPickerExtension(this.extensionUtility, this.sharedService);
         const checkboxExtension = new CheckboxSelectorExtension(this.sharedService);
         const draggableGroupingExtension = new DraggableGroupingExtension(this.extensionUtility, this._eventPubSubService, this.sharedService);
-        const gridMenuExtension = new GridMenuExtension(this.extensionUtility, this.filterService, this.sharedService, this.sortService, this.backendUtilityService, this.translaterService);
+        const gridMenuExtension = new GridMenuExtension(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.backendUtilityService, this.translaterService);
         const groupItemMetaProviderExtension = new GroupItemMetaProviderExtension(this.sharedService);
         const headerButtonExtension = new HeaderButtonExtension(this.extensionUtility, this.sharedService);
         const headerMenuExtension = new HeaderMenuExtension(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.translaterService);
@@ -1205,7 +1074,7 @@ class AngularSlickgridComponent {
         return this.sharedService.hierarchicalDataset;
     }
     set datasetHierarchical(newHierarchicalDataset) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _f;
         const isDatasetEqual = dequal(newHierarchicalDataset, (_b = (_a = this.sharedService) === null || _a === void 0 ? void 0 : _a.hierarchicalDataset) !== null && _b !== void 0 ? _b : []);
         const prevFlatDatasetLn = this._currentDatasetLength;
         this.sharedService.hierarchicalDataset = newHierarchicalDataset;
@@ -1214,9 +1083,8 @@ class AngularSlickgridComponent {
         }
         // 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(() => {
@@ -1225,8 +1093,8 @@ class AngularSlickgridComponent {
                     this.filterService.refreshTreeDataFilters();
                 }
             });
+            this._isDatasetHierarchicalInitialized = true;
         }
-        this._isDatasetHierarchicalInitialized = true;
     }
     get elementRef() {
         return this.elm;
@@ -1245,6 +1113,9 @@ class AngularSlickgridComponent {
     set isDatasetInitialized(isInitialized) {
         this._isDatasetInitialized = isInitialized;
     }
+    set isDatasetHierarchicalInitialized(isInitialized) {
+        this._isDatasetHierarchicalInitialized = isInitialized;
+    }
     get registeredResources() {
         return this._registeredResources;
     }
@@ -1263,7 +1134,7 @@ class AngularSlickgridComponent {
         this._eventPubSubService.publish('onAfterGridDestroyed', true);
     }
     destroy(shouldEmptyDomElementContainer = false) {
-        var _a, _b, _c, _d, _f, _g;
+        var _a, _b, _c, _d, _f, _g, _h;
         // dispose of all Services
         this.serviceList.forEach((service) => {
             if (service && service.dispose) {
@@ -1282,21 +1153,22 @@ class AngularSlickgridComponent {
             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) {
@@ -1350,7 +1222,7 @@ class AngularSlickgridComponent {
         }
     }
     initialization(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
@@ -1420,13 +1292,14 @@ class AngularSlickgridComponent {
         }
         // 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 SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this.translaterService);
+            this.slickFooter = new 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)
             const 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
@@ -1476,13 +1349,13 @@ class AngularSlickgridComponent {
         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);
         }
@@ -1490,11 +1363,11 @@ class AngularSlickgridComponent {
             // 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,
@@ -1536,13 +1409,13 @@ class AngularSlickgridComponent {
      * @param dataset
      */
     refreshGridData(dataset, totalCount) {
-        var _a, _b, _c, _d, _f;
+        var _a, _b, _c, _d, _f, _g;
         if (this.gridOptions && this.gridOptions.enableEmptyDataWarningMessage && Array.isArray(dataset)) {
             const 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();
             }
@@ -1560,11 +1433,11 @@ class AngularSlickgridComponent {
             }
             // 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)) {
                 const 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
-                const totalRecords = (totalCount !== undefined) ? totalCount : ((_f = (_d = this.gridOptions) === null || _d === void 0 ? void 0 : _d.pagination) === null || _f === void 0 ? void 0 : _f.totalItems);
+                const 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;
                 }
@@ -1651,9 +1524,10 @@ class AngularSlickgridComponent {
             if (gridOptions.enableTranslate) {
                 this.translateColumnHeaderTitleKeys();
                 this.translateColumnGroupKeys();
-                this.translateCustomFooterTexts();
             }
             this.subscriptions.push(this.translate.onLangChange.subscribe(() => {
+                // 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();
@@ -1661,7 +1535,6 @@ class AngularSlickgridComponent {
                     this.extensionService.translateContextMenu();
                     this.extensionService.translateGridMenu();
                     this.extensionService.translateHeaderMenu();
-                    this.translateCustomFooterTexts();
                     this.translateColumnHeaderTitleKeys();
                     this.translateColumnGroupKeys();
                     if (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping) {
@@ -1847,7 +1720,6 @@ class AngularSlickgridComponent {
             this.resizerService.resizeGrid();
         }
         if (options.enableAutoResize) {
-            this.resizerService.bindAutoResizeDataGrid();
             if (grid && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns) {
                 grid.autosizeColumns();
             }
@@ -1898,7 +1770,10 @@ class AngularSlickgridComponent {
                 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();
@@ -2081,6 +1956,26 @@ class AngularSlickgridComponent {
         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)
+     */
+    renderPagination(showPagination = true) {
+        var _a;
+        if (((_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.enablePagination) && !this._isPaginationInitialized && showPagination) {
+            this.slickPagination = new 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
@@ -2135,13 +2030,6 @@ class AngularSlickgridComponent {
             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) */
-    translateCustomFooterTexts() {
-        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();
-        }
-    }
     translateColumnHeaderTitleKeys() {
         // translate all columns (including hidden columns)
         this.extensionUtility.translateItems(this.sharedService.allColumns, 'nameKey', 'name');
@@ -2178,7 +2066,7 @@ class AngularSlickgridComponent {
 AngularSlickgridComponent.decorators = [
     { type: 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,
@@ -2231,11 +2119,9 @@ AngularSlickgridModule.decorators = [
                 ],
                 declarations: [
                     AngularSlickgridComponent,
-                    SlickPaginationComponent
                 ],
                 exports: [
                     AngularSlickgridComponent,
-                    SlickPaginationComponent
                 ],
                 entryComponents: [AngularSlickgridComponent]
             },] }
@@ -2245,5 +2131,5 @@ AngularSlickgridModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AngularSlickgridComponent, AngularSlickgridModule, AngularUtilService, BsDropDownService, RowDetailViewExtension, SlickPaginationComponent, SlickgridConfig, unsubscribeAllObservables, ContainerService as ɵb, TranslaterService as ɵc };
+export { AngularSlickgridComponent, AngularSlickgridModule, AngularUtilService, BsDropDownService, RowDetailViewExtension, SlickgridConfig, unsubscribeAllObservables, ContainerService as ɵb, TranslaterService as ɵc };
 //# sourceMappingURL=angular-slickgrid.js.map