angular-slickgrid 8.8.1 → 8.10.0

package/fesm2022/angular-slickgrid.mjs

@@ -1,4 +1,4 @@
-import { unsubscribeAll, SlickRowSelectionModel, castObservableToPromise, addToArrayWhenNotExists, Filters, OperatorType, EventNamingStyle, FileType, DelimiterType, SlickEventHandler, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, SharedService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, ExtensionService, GridStateService, GridService, GroupingAndColspanService, emptyElement, SlickGroupItemMetadataProvider, SlickDataView, autoAddEditorFormatterToColumnsWithEditor, SlickGrid, GridStateType, ExtensionName, isColumnDateType } from '@slickgrid-universal/common';
+import { unsubscribeAll, SlickRowSelectionModel, castObservableToPromise, addToArrayWhenNotExists, Filters, OperatorType, EventNamingStyle, FileType, DelimiterType, SlickEventHandler, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, SharedService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, ExtensionService, GridStateService, GridService, HeaderGroupingService, emptyElement, SlickGroupItemMetadataProvider, SlickDataView, autoAddEditorFormatterToColumnsWithEditor, SlickGrid, GridStateType, ExtensionName, isColumnDateType } from '@slickgrid-universal/common';
 export * from '@slickgrid-universal/common';
 import * as i0 from '@angular/core';
 import { Injectable, Optional, EventEmitter, Component, Inject, Input, Output, ContentChild, NgModule } from '@angular/core';
@@ -17,6 +17,7 @@ import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 class AngularUtilService {
+    vcr;
     constructor(vcr) {
         this.vcr = vcr;
     }
@@ -91,17 +92,15 @@ class AngularUtilService {
         }
         return componentOutput;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AngularUtilService, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AngularUtilService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: AngularUtilService, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: AngularUtilService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AngularUtilService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: AngularUtilService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
 class ContainerService {
-    constructor() {
-        this.dependencies = [];
-    }
+    dependencies = [];
     get(key) {
         const dependency = this.dependencies.find(dep => dep.key === key);
         if (dependency?.instance) {
@@ -118,10 +117,10 @@ class ContainerService {
             this.dependencies.push({ key, instance });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ContainerService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: ContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: ContainerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: ContainerService, decorators: [{
             type: Injectable
         }] });
 
@@ -130,6 +129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
  * it must implement Slickgrid-Universal TranslaterService interface to work properly
  */
 class TranslaterService {
+    translateService;
     constructor(translateService) {
         this.translateService = translateService;
     }
@@ -156,10 +156,10 @@ class TranslaterService {
     translate(translationKey) {
         return this.translateService?.instant?.(translationKey || ' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TranslaterService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TranslaterService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: TranslaterService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: TranslaterService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: TranslaterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: TranslaterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.TranslateService, decorators: [{
                     type: Optional
@@ -187,6 +187,17 @@ function unsubscribeAllObservables(subscriptions) {
 const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
 const PRELOAD_CONTAINER_PREFIX = 'container_loading';
 class SlickRowDetailView extends SlickRowDetailView$1 {
+    angularUtilService;
+    appRef;
+    eventPubSubService;
+    gridContainerElement;
+    rxjs;
+    rowDetailContainer;
+    _preloadComponent;
+    _views = [];
+    _viewComponent;
+    _subscriptions = [];
+    _userProcessFn;
     constructor(angularUtilService, appRef, eventPubSubService, gridContainerElement, rxjs) {
         super(eventPubSubService);
         this.angularUtilService = angularUtilService;
@@ -194,8 +205,6 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
         this.eventPubSubService = eventPubSubService;
         this.gridContainerElement = gridContainerElement;
         this.rxjs = rxjs;
-        this._views = [];
-        this._subscriptions = [];
     }
     get addonOptions() {
         return this.getOptions();
@@ -329,16 +338,16 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
                 }
                 // --
                 // hook some events needed by the Plugin itself
-                // redraw anytime the grid is re-rendered
-                this.eventHandler.subscribe(this._grid.onRendered, this.redrawAllViewComponents.bind(this));
+                // we need to redraw the open detail views if we change column position (column reorder)
+                this.eventHandler.subscribe(this._grid.onColumnsReordered, this.redrawAllViewComponents.bind(this));
                 // on row selection changed, we also need to redraw
                 if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) {
                     this.eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this));
                 }
                 // on sort, all row detail are collapsed so we can dispose of all the Views as well
                 this.eventHandler.subscribe(this._grid.onSort, this.disposeAllViewComponents.bind(this));
-                // on filter changed, we need to re-render all Views
-                this._subscriptions.push(this.eventPubSubService?.subscribe('onFilterChanged', this.redrawAllViewComponents.bind(this)), this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () => window.setTimeout(() => this.redrawAllViewComponents())));
+                // redraw all Views whenever certain events are triggered
+                this._subscriptions.push(this.eventPubSubService?.subscribe(['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'], this.redrawAllViewComponents.bind(this)), this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () => window.setTimeout(() => this.redrawAllViewComponents())));
             }
         }
         return this;
@@ -739,6 +748,7 @@ function pickerHeaderColumnValueExtractor(column, gridOptions) {
 }
 
 class SlickgridConfig {
+    options;
     constructor() {
         this.options = GlobalGridOptions;
     }
@@ -746,7 +756,7 @@ class SlickgridConfig {
 
 class Constants {
     // English Locale texts when using only 1 Locale instead of I18N
-    static { this.locales = {
+    static locales = {
         TEXT_ALL_SELECTED: 'All Selected',
         TEXT_ALL_X_RECORDS_SELECTED: 'All {{x}} records selected',
         TEXT_APPLY_MASS_UPDATE: 'Apply Mass Update',
@@ -810,38 +820,101 @@ class Constants {
         TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
         TEXT_X_OF_Y_SELECTED: '# of % selected',
         TEXT_X_OF_Y_MASS_SELECTED: '{{x}} of {{y}} selected',
-    }; }
-    static { this.treeDataProperties = {
+    };
+    static treeDataProperties = {
         CHILDREN_PROP: 'children',
         COLLAPSED_PROP: '__collapsed',
         HAS_CHILDREN_PROP: '__hasChildren',
         TREE_LEVEL_PROP: '__treeLevel',
         PARENT_PROP: '__parentId',
-    }; }
+    };
     // some Validation default texts
-    static { this.VALIDATION_REQUIRED_FIELD = 'Field is required'; }
-    static { this.VALIDATION_EDITOR_VALID_NUMBER = 'Please enter a valid number'; }
-    static { this.VALIDATION_EDITOR_VALID_INTEGER = 'Please enter a valid integer number'; }
-    static { this.VALIDATION_EDITOR_INTEGER_BETWEEN = 'Please enter a valid integer number between {{minValue}} and {{maxValue}}'; }
-    static { this.VALIDATION_EDITOR_INTEGER_MAX = 'Please enter a valid integer number that is lower than {{maxValue}}'; }
-    static { this.VALIDATION_EDITOR_INTEGER_MAX_INCLUSIVE = 'Please enter a valid integer number that is lower than or equal to {{maxValue}}'; }
-    static { this.VALIDATION_EDITOR_INTEGER_MIN = 'Please enter a valid integer number that is greater than {{minValue}}'; }
-    static { this.VALIDATION_EDITOR_INTEGER_MIN_INCLUSIVE = 'Please enter a valid integer number that is greater than or equal to {{minValue}}'; }
-    static { this.VALIDATION_EDITOR_NUMBER_BETWEEN = 'Please enter a valid number between {{minValue}} and {{maxValue}}'; }
-    static { this.VALIDATION_EDITOR_NUMBER_MAX = 'Please enter a valid number that is lower than {{maxValue}}'; }
-    static { this.VALIDATION_EDITOR_NUMBER_MAX_INCLUSIVE = 'Please enter a valid number that is lower than or equal to {{maxValue}}'; }
-    static { this.VALIDATION_EDITOR_NUMBER_MIN = 'Please enter a valid number that is greater than {{minValue}}'; }
-    static { this.VALIDATION_EDITOR_NUMBER_MIN_INCLUSIVE = 'Please enter a valid number that is greater than or equal to {{minValue}}'; }
-    static { this.VALIDATION_EDITOR_DECIMAL_BETWEEN = 'Please enter a valid number with a maximum of {{maxDecimal}} decimals'; }
-    static { this.VALIDATION_EDITOR_TEXT_LENGTH_BETWEEN = 'Please make sure your text length is between {{minLength}} and {{maxLength}} characters'; }
-    static { this.VALIDATION_EDITOR_TEXT_MAX_LENGTH = 'Please make sure your text is less than {{maxLength}} characters'; }
-    static { this.VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE = 'Please make sure your text is less than or equal to {{maxLength}} characters'; }
-    static { this.VALIDATION_EDITOR_TEXT_MIN_LENGTH = 'Please make sure your text is more than {{minLength}} character(s)'; }
-    static { this.VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = 'Please make sure your text is at least {{minLength}} character(s)'; }
+    static VALIDATION_REQUIRED_FIELD = 'Field is required';
+    static VALIDATION_EDITOR_VALID_NUMBER = 'Please enter a valid number';
+    static VALIDATION_EDITOR_VALID_INTEGER = 'Please enter a valid integer number';
+    static VALIDATION_EDITOR_INTEGER_BETWEEN = 'Please enter a valid integer number between {{minValue}} and {{maxValue}}';
+    static VALIDATION_EDITOR_INTEGER_MAX = 'Please enter a valid integer number that is lower than {{maxValue}}';
+    static VALIDATION_EDITOR_INTEGER_MAX_INCLUSIVE = 'Please enter a valid integer number that is lower than or equal to {{maxValue}}';
+    static VALIDATION_EDITOR_INTEGER_MIN = 'Please enter a valid integer number that is greater than {{minValue}}';
+    static VALIDATION_EDITOR_INTEGER_MIN_INCLUSIVE = 'Please enter a valid integer number that is greater than or equal to {{minValue}}';
+    static VALIDATION_EDITOR_NUMBER_BETWEEN = 'Please enter a valid number between {{minValue}} and {{maxValue}}';
+    static VALIDATION_EDITOR_NUMBER_MAX = 'Please enter a valid number that is lower than {{maxValue}}';
+    static VALIDATION_EDITOR_NUMBER_MAX_INCLUSIVE = 'Please enter a valid number that is lower than or equal to {{maxValue}}';
+    static VALIDATION_EDITOR_NUMBER_MIN = 'Please enter a valid number that is greater than {{minValue}}';
+    static VALIDATION_EDITOR_NUMBER_MIN_INCLUSIVE = 'Please enter a valid number that is greater than or equal to {{minValue}}';
+    static VALIDATION_EDITOR_DECIMAL_BETWEEN = 'Please enter a valid number with a maximum of {{maxDecimal}} decimals';
+    static VALIDATION_EDITOR_TEXT_LENGTH_BETWEEN = 'Please make sure your text length is between {{minLength}} and {{maxLength}} characters';
+    static VALIDATION_EDITOR_TEXT_MAX_LENGTH = 'Please make sure your text is less than {{maxLength}} characters';
+    static VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE = 'Please make sure your text is less than or equal to {{maxLength}} characters';
+    static VALIDATION_EDITOR_TEXT_MIN_LENGTH = 'Please make sure your text is more than {{minLength}} character(s)';
+    static VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = 'Please make sure your text is at least {{minLength}} character(s)';
 }
 
-const WARN_NO_PREPARSE_DATE_SIZE = 5000; // data size to warn user when pre-parse isn't enabled
+const WARN_NO_PREPARSE_DATE_SIZE = 10000; // data size to warn user when pre-parse isn't enabled
 class AngularSlickgridComponent {
+    angularUtilService;
+    appRef;
+    cd;
+    containerService;
+    elm;
+    translate;
+    translaterService;
+    forRootConfig;
+    _dataset;
+    _columnDefinitions;
+    _currentDatasetLength = 0;
+    _darkMode = false;
+    _eventHandler = new SlickEventHandler();
+    _eventPubSubService;
+    _angularGridInstances;
+    _hideHeaderRowAfterPageLoad = false;
+    _isAutosizeColsCalled = false;
+    _isGridInitialized = false;
+    _isDatasetInitialized = false;
+    _isDatasetHierarchicalInitialized = false;
+    _isPaginationInitialized = false;
+    _isLocalGrid = true;
+    _paginationOptions;
+    _registeredResources = [];
+    _scrollEndCalled = false;
+    dataView;
+    slickGrid;
+    groupingDefinition = {};
+    groupItemMetadataProvider;
+    backendServiceApi;
+    locales;
+    metrics;
+    showPagination = false;
+    serviceList = [];
+    totalItems = 0;
+    paginationData;
+    subscriptions = [];
+    // components / plugins
+    slickEmptyWarning;
+    slickFooter;
+    slickPagination;
+    paginationComponent;
+    slickRowDetailView;
+    // services
+    backendUtilityService;
+    collectionService;
+    extensionService;
+    extensionUtility;
+    filterFactory;
+    filterService;
+    gridEventService;
+    gridService;
+    gridStateService;
+    headerGroupingService;
+    paginationService;
+    resizerService;
+    rxjs;
+    sharedService;
+    sortService;
+    treeDataService;
+    customDataView;
+    gridId = '';
+    gridOptions;
     get paginationOptions() {
         return this._paginationOptions;
     }
@@ -867,6 +940,9 @@ class AngularSlickgridComponent {
     get columnDefinitions() {
         return this._columnDefinitions;
     }
+    // make the columnDefinitions a 2-way binding so that plugin adding cols
+    // are synched on user's side as well (RowMove, RowDetail, RowSelections)
+    columnDefinitionsChange = new EventEmitter(true);
     get dataset() {
         return (this.customDataView ? this.slickGrid?.getData?.() : this.dataView?.getItems()) || [];
     }
@@ -940,6 +1016,8 @@ class AngularSlickgridComponent {
     get registeredResources() {
         return this._registeredResources;
     }
+    slickgridHeader;
+    slickgridFooter;
     constructor(angularUtilService, appRef, cd, containerService, elm, translate, translaterService, forRootConfig, externalServices) {
         this.angularUtilService = angularUtilService;
         this.appRef = appRef;
@@ -949,27 +1027,6 @@ class AngularSlickgridComponent {
         this.translate = translate;
         this.translaterService = translaterService;
         this.forRootConfig = forRootConfig;
-        this._currentDatasetLength = 0;
-        this._darkMode = false;
-        this._eventHandler = new SlickEventHandler();
-        this._hideHeaderRowAfterPageLoad = false;
-        this._isAutosizeColsCalled = false;
-        this._isGridInitialized = false;
-        this._isDatasetInitialized = false;
-        this._isDatasetHierarchicalInitialized = false;
-        this._isPaginationInitialized = false;
-        this._isLocalGrid = true;
-        this._registeredResources = [];
-        this._scrollEndCalled = false;
-        this.groupingDefinition = {};
-        this.showPagination = false;
-        this.serviceList = [];
-        this.totalItems = 0;
-        this.subscriptions = [];
-        this.gridId = '';
-        // make the columnDefinitions a 2-way binding so that plugin adding cols
-        // are synched on user's side as well (RowMove, RowDetail, RowSelections)
-        this.columnDefinitionsChange = new EventEmitter(true);
         const slickgridConfig = new SlickgridConfig$1();
         // initialize and assign all Service Dependencies
         this._eventPubSubService = externalServices?.eventPubSubService ?? new EventPubSubService(this.elm.nativeElement);
@@ -988,7 +1045,7 @@ class AngularSlickgridComponent {
         this.extensionService = externalServices?.extensionService ?? new ExtensionService(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService, this.translaterService, () => this.gridService);
         this.gridStateService = externalServices?.gridStateService ?? new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
         this.gridService = externalServices?.gridService ?? new GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService);
-        this.groupingService = externalServices?.groupingAndColspanService ?? new GroupingAndColspanService(this.extensionUtility, this._eventPubSubService);
+        this.headerGroupingService = externalServices?.headerGroupingService ?? new HeaderGroupingService(this.extensionUtility);
         this.serviceList = [
             this.containerService,
             this.extensionService,
@@ -996,7 +1053,7 @@ class AngularSlickgridComponent {
             this.gridEventService,
             this.gridService,
             this.gridStateService,
-            this.groupingService,
+            this.headerGroupingService,
             this.paginationService,
             this.resizerService,
             this.sortService,
@@ -1010,7 +1067,7 @@ class AngularSlickgridComponent {
         this.containerService.registerInstance('GridEventService', this.gridEventService);
         this.containerService.registerInstance('GridService', this.gridService);
         this.containerService.registerInstance('GridStateService', this.gridStateService);
-        this.containerService.registerInstance('GroupingAndColspanService', this.groupingService);
+        this.containerService.registerInstance('HeaderGroupingService', this.headerGroupingService);
         this.containerService.registerInstance('PaginationService', this.paginationService);
         this.containerService.registerInstance('ResizerService', this.resizerService);
         this.containerService.registerInstance('SharedService', this.sharedService);
@@ -1294,8 +1351,10 @@ class AngularSlickgridComponent {
             gridEventService: this.gridEventService,
             gridStateService: this.gridStateService,
             gridService: this.gridService,
-            groupingService: this.groupingService,
+            groupingService: this.headerGroupingService,
+            headerGroupingService: this.headerGroupingService,
             extensionService: this.extensionService,
+            paginationComponent: this.slickPagination,
             paginationService: this.paginationService,
             resizerService: this.resizerService,
             sortService: this.sortService,
@@ -1466,7 +1525,7 @@ class AngularSlickgridComponent {
                 if (gridOptions.enableTranslate) {
                     this.extensionService.translateAllExtensions(lang);
                     if ((gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) || (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping)) {
-                        this.groupingService.translateGroupingAndColSpan();
+                        this.headerGroupingService.translateHeaderGrouping();
                     }
                 }
             }));
@@ -1918,7 +1977,7 @@ class AngularSlickgridComponent {
         this._registeredResources.push(this.gridService, this.gridStateService);
         // when using Grouping/DraggableGrouping/Colspan register its Service
         if ((this.gridOptions.createPreHeaderPanel && this.gridOptions.createTopHeaderPanel) || (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping)) {
-            this._registeredResources.push(this.groupingService);
+            this._registeredResources.push(this.headerGroupingService);
         }
         // when using Tree Data View, register its Service
         if (this.gridOptions.enableTreeData) {
@@ -1957,10 +2016,19 @@ class AngularSlickgridComponent {
      * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
      */
     renderPagination(showPagination = true) {
-        if (this.gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
-            this.slickPagination = new SlickPaginationComponent(this.paginationService, this._eventPubSubService, this.sharedService, this.translaterService);
-            this.slickPagination.renderPagination(this.gridContainerElement);
-            this._isPaginationInitialized = true;
+        if (this.slickGrid && this.gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
+            if (this.gridOptions.customPaginationComponent) {
+                const paginationComp = this.angularUtilService.createAngularComponent(this.gridOptions.customPaginationComponent);
+                this.slickPagination = paginationComp.componentRef.instance;
+            }
+            else {
+                this.slickPagination = new SlickPaginationComponent();
+            }
+            if (this.slickPagination) {
+                this.slickPagination.init(this.slickGrid, this.paginationService, this._eventPubSubService, this.translaterService);
+                this.slickPagination.renderPagination(this.gridContainerElement);
+                this._isPaginationInitialized = true;
+            }
         }
         else if (!showPagination) {
             this.slickPagination?.dispose();
@@ -2009,9 +2077,9 @@ class AngularSlickgridComponent {
         });
     }
     suggestDateParsingWhenHelpful() {
-        if (this.dataView?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.preParseDateColumns && this.slickGrid.getColumns().some(c => isColumnDateType(c.type))) {
+        if (this.dataView?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.silenceWarnings && !this.gridOptions.preParseDateColumns && this.slickGrid.getColumns().some(c => isColumnDateType(c.type))) {
             console.warn('[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option, ' +
-                'for more info visit:: https://ghiscoding.gitbook.io/slickgrid-universal/column-functionalities/sorting#pre-parse-date-columns-for-better-perf');
+                'for more info visit => https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/sorting#pre-parse-date-columns-for-better-perf');
         }
     }
     /**
@@ -2031,14 +2099,14 @@ class AngularSlickgridComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AngularSlickgridComponent, deps: [{ token: AngularUtilService }, { token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: ContainerService }, { token: i0.ElementRef }, { token: i1.TranslateService, optional: true }, { token: TranslaterService, optional: true }, { token: 'config' }, { token: 'externalService' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: AngularSlickgridComponent, selector: "angular-slickgrid", inputs: { customDataView: "customDataView", gridId: "gridId", gridOptions: "gridOptions", paginationOptions: "paginationOptions", columnDefinitions: "columnDefinitions", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, outputs: { columnDefinitionsChange: "columnDefinitionsChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: AngularSlickgridComponent, deps: [{ token: AngularUtilService }, { token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: ContainerService }, { token: i0.ElementRef }, { token: i1.TranslateService, optional: true }, { token: TranslaterService, optional: true }, { token: 'config' }, { token: 'externalService' }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: AngularSlickgridComponent, selector: "angular-slickgrid", inputs: { customDataView: "customDataView", gridId: "gridId", gridOptions: "gridOptions", paginationOptions: "paginationOptions", columnDefinitions: "columnDefinitions", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, outputs: { columnDefinitionsChange: "columnDefinitionsChange" }, providers: [
             // make everything transient (non-singleton)
             AngularUtilService,
             TranslaterService,
-        ], queries: [{ propertyName: "slickgridHeader", first: true, predicate: ["slickgridHeader"], descendants: true, static: true }, { propertyName: "slickgridFooter", first: true, predicate: ["slickgridFooter"], descendants: true, static: true }], ngImport: i0, template: "<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\n  <ng-container *ngTemplateOutlet=\"slickgridHeader\"></ng-container>\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\">\n  </div>\n  <ng-container *ngTemplateOutlet=\"slickgridFooter\"></ng-container>\n</div>", dependencies: [{ kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], preserveWhitespaces: true }); }
+        ], queries: [{ propertyName: "slickgridHeader", first: true, predicate: ["slickgridHeader"], descendants: true, static: true }, { propertyName: "slickgridFooter", first: true, predicate: ["slickgridFooter"], descendants: true, static: true }], ngImport: i0, template: "<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\n  <ng-container *ngTemplateOutlet=\"slickgridHeader\"></ng-container>\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\">\n  </div>\n  <ng-container *ngTemplateOutlet=\"slickgridFooter\"></ng-container>\n</div>", dependencies: [{ kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], preserveWhitespaces: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AngularSlickgridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: AngularSlickgridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'angular-slickgrid', providers: [
                         // make everything transient (non-singleton)
@@ -2091,13 +2159,13 @@ class AngularSlickgridModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AngularSlickgridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: AngularSlickgridModule, declarations: [AngularSlickgridComponent], imports: [CommonModule,
-            TranslateModule], exports: [AngularSlickgridComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AngularSlickgridModule, imports: [CommonModule,
-            TranslateModule] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: AngularSlickgridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: AngularSlickgridModule, declarations: [AngularSlickgridComponent], imports: [CommonModule,
+            TranslateModule], exports: [AngularSlickgridComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: AngularSlickgridModule, imports: [CommonModule,
+            TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: AngularSlickgridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: AngularSlickgridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [