angular-slickgrid 3.3.2 → 4.1.2

package/fesm2015/{angular-slickgrid.js → angular-slickgrid.mjs}

@@ -1,13 +1,15 @@
-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';
+import { unsubscribeAll, SlickRowSelectionModel, castObservableToPromise, addToArrayWhenNotExists, Filters, OperatorType, EventNamingStyle, FileType, DelimiterType, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, SharedService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, ExtensionService, GridStateService, GridService, GroupingAndColspanService, emptyElement, SlickGroupItemMetadataProvider, autoAddEditorFormatterToColumnsWithEditor, GridStateType, ExtensionName } from '@slickgrid-universal/common';
 export * from '@slickgrid-universal/common';
-import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Optional, Component, ChangeDetectorRef, ElementRef, Inject, Input, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { Injectable, Optional, ApplicationRef, Component, Inject, Input, NgModule } from '@angular/core';
 import { __awaiter } from 'tslib';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import 'slickgrid/plugins/slick.rowdetailview';
 import 'slickgrid/plugins/slick.rowselectionmodel';
-import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+import { SlickRowDetailView as SlickRowDetailView$1 } from '@slickgrid-universal/row-detail-view-plugin';
 import { Observable } from 'rxjs';
-import * as DOMPurify_ from 'dompurify';
+import * as DOMPurify from 'dompurify';
 import 'jquery-ui/ui/widgets/draggable';
 import 'jquery-ui/ui/widgets/droppable';
 import 'jquery-ui/ui/widgets/sortable';
@@ -16,7 +18,7 @@ import 'slickgrid/lib/jquery.mousewheel';
 import 'slickgrid/slick.core';
 import 'slickgrid/slick.grid';
 import 'slickgrid/slick.dataview';
-import 'slickgrid/slick.groupitemmetadataprovider';
+import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
@@ -62,14 +64,11 @@ class AngularUtilService {
         return componentOutput;
     }
 }
-AngularUtilService.decorators = [
-    { type: Injectable }
-];
-AngularUtilService.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: ApplicationRef },
-    { type: Injector }
-];
+AngularUtilService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AngularUtilService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+AngularUtilService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AngularUtilService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AngularUtilService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } });
 
 // Boostrap dropdown service
 class BsDropDownService {
@@ -165,12 +164,11 @@ class BsDropDownService {
         });
     }
 }
-BsDropDownService.decorators = [
-    { type: Injectable }
-];
-BsDropDownService.ctorParameters = () => [
-    { type: AngularUtilService }
-];
+BsDropDownService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: BsDropDownService, deps: [{ token: AngularUtilService }], target: i0.ɵɵFactoryTarget.Injectable });
+BsDropDownService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: BsDropDownService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: BsDropDownService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: AngularUtilService }]; } });
 
 class ContainerService {
     constructor() {
@@ -190,10 +188,11 @@ class ContainerService {
         }
     }
 }
-ContainerService.decorators = [
-    { type: Injectable }
-];
-ContainerService.ctorParameters = () => [];
+ContainerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContainerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ContainerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ContainerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
 /**
  * This is a Translate Service Wrapper for Slickgrid-Universal monorepo lib to work properly,
@@ -232,12 +231,15 @@ class TranslaterService {
         return (_b = (_a = this.translateService) === null || _a === void 0 ? void 0 : _a.instant) === null || _b === void 0 ? void 0 : _b.call(_a, translationKey || ' ');
     }
 }
-TranslaterService.decorators = [
-    { type: Injectable }
-];
-TranslaterService.ctorParameters = () => [
-    { type: TranslateService, decorators: [{ type: Optional }] }
-];
+TranslaterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: TranslaterService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TranslaterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: TranslaterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: TranslaterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i1.TranslateService, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
 
 /**
  * Unsubscribe all Observables Subscriptions
@@ -256,19 +258,21 @@ function unsubscribeAllObservables(subscriptions) {
     return subscriptions;
 }
 
-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 {
-    constructor(angularUtilService, appRef, eventPubSubService, sharedService, rxjs) {
+class SlickRowDetailView extends SlickRowDetailView$1 {
+    constructor(angularUtilService, appRef, eventPubSubService, gridContainerElement, rxjs) {
+        super();
         this.angularUtilService = angularUtilService;
         this.appRef = appRef;
         this.eventPubSubService = eventPubSubService;
-        this.sharedService = sharedService;
+        this.gridContainerElement = gridContainerElement;
         this.rxjs = rxjs;
         this._views = [];
         this._subscriptions = [];
-        this._eventHandler = new Slick.EventHandler();
+    }
+    get addonOptions() {
+        return this.getOptions();
     }
     get datasetIdPropName() {
         return this.gridOptions.datasetIdPropertyName || 'id';
@@ -276,9 +280,13 @@ class RowDetailViewExtension {
     get eventHandler() {
         return this._eventHandler;
     }
+    set eventHandler(eventHandler) {
+        this._eventHandler = eventHandler;
+    }
+    /** Getter for the Grid Options pulled through the Grid Object */
     get gridOptions() {
-        var _a, _b;
-        return ((_b = (_a = this.sharedService) === null || _a === void 0 ? void 0 : _a.gridOptions) !== null && _b !== void 0 ? _b : {});
+        var _a;
+        return (((_a = this._grid) === null || _a === void 0 ? void 0 : _a.getOptions()) || {});
     }
     get rowDetailViewOptions() {
         return this.gridOptions.rowDetailView;
@@ -288,152 +296,127 @@ class RowDetailViewExtension {
     }
     /** Dispose of the RowDetailView Extension */
     dispose() {
-        // unsubscribe all SlickGrid events
-        this._eventHandler.unsubscribeAll();
-        if (this._addon && this._addon.destroy) {
-            this._addon.destroy();
-        }
-        this._addonOptions = null;
-        // also unsubscribe all RxJS subscriptions
-        this._subscriptions = unsubscribeAllObservables(this._subscriptions);
         this.disposeAllViewComponents();
+        this._subscriptions = unsubscribeAll(this._subscriptions); // also unsubscribe all RxJS subscriptions
+        super.dispose();
     }
     /** Dispose of all the opened Row Detail Panels Angular View Components */
     disposeAllViewComponents() {
         this._views.forEach((compRef) => this.disposeViewComponent(compRef));
         this._views = [];
     }
+    /** Get the instance of the SlickGrid addon (control or plugin). */
+    getAddonInstance() {
+        return this;
+    }
+    init(grid) {
+        this._grid = grid;
+        super.init(this._grid);
+        this.register(grid === null || grid === void 0 ? void 0 : grid.getSelectionModel());
+    }
     /**
      * Create the plugin before the Grid creation, else it will behave oddly.
      * Mostly because the column definitions might change after the grid creation
      */
-    create(columnDefinitions, gridOptions) {
-        var _a, _b;
-        if (columnDefinitions && gridOptions) {
-            if (!gridOptions.rowDetailView) {
-                throw new Error('The Row Detail View requires options to be passed via the "rowDetailView" property of the Grid Options');
+    register(rowSelectionPlugin) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (typeof ((_a = this.gridOptions.rowDetailView) === null || _a === void 0 ? void 0 : _a.process) === 'function') {
+            // we need to keep the user "process" method and replace it with our own execution method
+            // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work
+            this._userProcessFn = this.gridOptions.rowDetailView.process; // keep user's process method
+            this.gridOptions.rowDetailView.process = (item) => this.onProcessing(item); // replace process method & run our internal one
+        }
+        else {
+            throw new Error('[Angular-Slickgrid] You need to provide a "process" function for the Row Detail Extension to work properly');
+        }
+        if (this._grid && ((_b = this.gridOptions) === null || _b === void 0 ? void 0 : _b.rowDetailView)) {
+            // load the Preload & RowDetail Templates (could be straight HTML or Angular View/ViewModel)
+            // when those are Angular View/ViewModel, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
+            if (!this.gridOptions.rowDetailView.preTemplate) {
+                this._preloadComponent = (_d = (_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.rowDetailView) === null || _d === void 0 ? void 0 : _d.preloadComponent;
+                this.gridOptions.rowDetailView.preTemplate = () => DOMPurify.sanitize(`<div class="${PRELOAD_CONTAINER_PREFIX}"></div>`);
             }
-            if (gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.rowDetailView) {
-                if (!this._addon) {
-                    if (typeof gridOptions.rowDetailView.process === 'function') {
-                        // we need to keep the user "process" method and replace it with our own execution method
-                        // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work
-                        this._userProcessFn = gridOptions.rowDetailView.process; // keep user's process method
-                        gridOptions.rowDetailView.process = (item) => this.onProcessing(item); // replace process method & run our internal one
-                    }
-                    else {
-                        throw new Error('You need to provide a "process" function for the Row Detail Extension to work properly');
-                    }
-                    // load the Preload & RowDetail Templates (could be straight HTML or Angular View/ViewModel)
-                    // when those are Angular View/ViewModel, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
-                    if (!gridOptions.rowDetailView.preTemplate) {
-                        this._preloadComponent = (_a = gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.rowDetailView) === null || _a === void 0 ? void 0 : _a.preloadComponent;
-                        gridOptions.rowDetailView.preTemplate = () => DOMPurify.sanitize(`<div class="${PRELOAD_CONTAINER_PREFIX}"></div>`);
-                    }
-                    if (!gridOptions.rowDetailView.postTemplate) {
-                        this._viewComponent = (_b = gridOptions === null || gridOptions === void 0 ? void 0 : gridOptions.rowDetailView) === null || _b === void 0 ? void 0 : _b.viewComponent;
-                        gridOptions.rowDetailView.postTemplate = (itemDetail) => DOMPurify.sanitize(`<div class="${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}"></div>`);
-                    }
-                    // finally register the Row Detail View Plugin
-                    this._addonOptions = gridOptions.rowDetailView;
-                    this._addon = new Slick.Plugins.RowDetailView(this._addonOptions);
-                }
-                const iconColumn = this._addon.getColumnDefinition();
-                if (typeof iconColumn === 'object') {
-                    iconColumn.excludeFromExport = true;
-                    iconColumn.excludeFromColumnPicker = true;
-                    iconColumn.excludeFromGridMenu = true;
-                    iconColumn.excludeFromQuery = true;
-                    iconColumn.excludeFromHeaderMenu = true;
-                    // column index position in the grid
-                    const columnPosition = gridOptions && gridOptions.rowDetailView && gridOptions.rowDetailView.columnIndexPosition || 0;
-                    if (columnPosition > 0) {
-                        columnDefinitions.splice(columnPosition, 0, iconColumn);
-                    }
-                    else {
-                        columnDefinitions.unshift(iconColumn);
-                    }
-                }
+            if (!this.gridOptions.rowDetailView.postTemplate) {
+                this._viewComponent = (_f = (_e = this.gridOptions) === null || _e === void 0 ? void 0 : _e.rowDetailView) === null || _f === void 0 ? void 0 : _f.viewComponent;
+                this.gridOptions.rowDetailView.postTemplate = (itemDetail) => DOMPurify.sanitize(`<div class="${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}"></div>`);
             }
-            return this._addon;
-        }
-        return null;
-    }
-    /** Get the instance of the SlickGrid addon (control or plugin). */
-    getAddonInstance() {
-        return this._addon;
-    }
-    register(rowSelectionPlugin) {
-        var _a;
-        if (((_a = this.sharedService) === null || _a === void 0 ? void 0 : _a.slickGrid) && this.sharedService.gridOptions) {
-            // the plugin has to be created BEFORE the grid (else it behaves oddly), but we can only watch grid events AFTER the grid is created
-            this.sharedService.slickGrid.registerPlugin(this._addon);
             // this also requires the Row Selection Model to be registered as well
-            if (!rowSelectionPlugin || !this.sharedService.slickGrid.getSelectionModel()) {
-                rowSelectionPlugin = new Slick.RowSelectionModel(this.sharedService.gridOptions.rowSelectionOptions || { selectActiveRow: true });
-                this.sharedService.slickGrid.setSelectionModel(rowSelectionPlugin);
+            if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {
+                rowSelectionPlugin = new SlickRowSelectionModel(this.gridOptions.rowSelectionOptions || { selectActiveRow: true });
+                this._grid.setSelectionModel(rowSelectionPlugin);
             }
             // hook all events
-            if (this.sharedService.slickGrid && this.rowDetailViewOptions) {
+            if (this._grid && this.rowDetailViewOptions) {
                 if (this.rowDetailViewOptions.onExtensionRegistered) {
-                    this.rowDetailViewOptions.onExtensionRegistered(this._addon);
+                    this.rowDetailViewOptions.onExtensionRegistered(this);
+                }
+                if (this.onAsyncResponse) {
+                    this._eventHandler.subscribe(this.onAsyncResponse, (event, args) => {
+                        if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncResponse === 'function') {
+                            this.rowDetailViewOptions.onAsyncResponse(event, args);
+                        }
+                    });
+                }
+                if (this.onAsyncEndUpdate) {
+                    this._eventHandler.subscribe(this.onAsyncEndUpdate, (e, args) => {
+                        // triggers after backend called "onAsyncResponse.notify()"
+                        this.renderViewModel(args === null || args === void 0 ? void 0 : args.item);
+                        if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncEndUpdate === 'function') {
+                            this.rowDetailViewOptions.onAsyncEndUpdate(e, args);
+                        }
+                    });
+                }
+                if (this.onAfterRowDetailToggle) {
+                    this._eventHandler.subscribe(this.onAfterRowDetailToggle, (e, args) => {
+                        // display preload template & re-render all the other Detail Views after toggling
+                        // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
+                        this.renderPreloadView();
+                        this.renderAllViewComponents();
+                        if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAfterRowDetailToggle === 'function') {
+                            this.rowDetailViewOptions.onAfterRowDetailToggle(e, args);
+                        }
+                    });
+                }
+                if (this.onBeforeRowDetailToggle) {
+                    this._eventHandler.subscribe(this.onBeforeRowDetailToggle, (e, args) => {
+                        // before toggling row detail, we need to create View Component if it doesn't exist
+                        this.handleOnBeforeRowDetailToggle(e, args);
+                        if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onBeforeRowDetailToggle === 'function') {
+                            this.rowDetailViewOptions.onBeforeRowDetailToggle(e, args);
+                        }
+                    });
+                }
+                if (this.onRowBackToViewportRange) {
+                    this._eventHandler.subscribe(this.onRowBackToViewportRange, (e, args) => {
+                        // when row is back to viewport range, we will re-render the View Component(s)
+                        this.handleOnRowBackToViewportRange(e, args);
+                        if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowBackToViewportRange === 'function') {
+                            this.rowDetailViewOptions.onRowBackToViewportRange(e, args);
+                        }
+                    });
+                }
+                if (this.onRowOutOfViewportRange) {
+                    this._eventHandler.subscribe(this.onRowOutOfViewportRange, (e, args) => {
+                        if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowOutOfViewportRange === 'function') {
+                            this.rowDetailViewOptions.onRowOutOfViewportRange(e, args);
+                        }
+                    });
                 }
-                this._eventHandler.subscribe(this._addon.onAsyncResponse, (e, args) => {
-                    if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncResponse === 'function') {
-                        this.rowDetailViewOptions.onAsyncResponse(e, args);
-                    }
-                });
-                this._eventHandler.subscribe(this._addon.onAsyncEndUpdate, (e, args) => {
-                    // triggers after backend called "onAsyncResponse.notify()"
-                    this.renderViewModel(args && args.item);
-                    if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncEndUpdate === 'function') {
-                        this.rowDetailViewOptions.onAsyncEndUpdate(e, args);
-                    }
-                });
-                this._eventHandler.subscribe(this._addon.onAfterRowDetailToggle, (e, args) => {
-                    // display preload template & re-render all the other Detail Views after toggling
-                    // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
-                    this.renderPreloadView();
-                    this.renderAllViewComponents();
-                    if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAfterRowDetailToggle === 'function') {
-                        this.rowDetailViewOptions.onAfterRowDetailToggle(e, args);
-                    }
-                });
-                this._eventHandler.subscribe(this._addon.onBeforeRowDetailToggle, (e, args) => {
-                    // before toggling row detail, we need to create View Component if it doesn't exist
-                    this.onBeforeRowDetailToggle(e, args);
-                    if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onBeforeRowDetailToggle === 'function') {
-                        this.rowDetailViewOptions.onBeforeRowDetailToggle(e, args);
-                    }
-                });
-                this._eventHandler.subscribe(this._addon.onRowBackToViewportRange, (e, args) => {
-                    // when row is back to viewport range, we will re-render the View Component(s)
-                    this.onRowBackToViewportRange(e, args);
-                    if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowBackToViewportRange === 'function') {
-                        this.rowDetailViewOptions.onRowBackToViewportRange(e, args);
-                    }
-                });
-                this._eventHandler.subscribe(this._addon.onRowOutOfViewportRange, (e, args) => {
-                    if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowOutOfViewportRange === 'function') {
-                        this.rowDetailViewOptions.onRowOutOfViewportRange(e, args);
-                    }
-                });
                 // --
                 // hook some events needed by the Plugin itself
                 // we need to redraw the open detail views if we change column position (column reorder)
-                this._eventHandler.subscribe(this.sharedService.slickGrid.onColumnsReordered, this.redrawAllViewComponents.bind(this));
+                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.sharedService.slickGrid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this));
+                    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.sharedService.slickGrid.onSort, this.disposeAllViewComponents.bind(this));
+                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._subscriptions.push((_g = this.eventPubSubService) === null || _g === void 0 ? void 0 : _g.subscribe('onFilterChanged', this.redrawAllViewComponents.bind(this)), (_h = this.eventPubSubService) === null || _h === void 0 ? void 0 : _h.subscribe('onGridMenuClearAllFilters', () => setTimeout(() => this.redrawAllViewComponents())), (_j = this.eventPubSubService) === null || _j === void 0 ? void 0 : _j.subscribe('onGridMenuClearAllSorting', () => setTimeout(() => this.redrawAllViewComponents())));
             }
-            return this._addon;
         }
-        return null;
+        return this;
     }
     /** Redraw (re-render) all the expanded row detail View Components */
     redrawAllViewComponents() {
@@ -451,30 +434,30 @@ class RowDetailViewExtension {
     }
     /** Redraw the necessary View Component */
     redrawViewComponent(createdView) {
-        const containerElements = document.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${createdView.id}`);
+        const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${createdView.id}`);
         if (containerElements && containerElements.length >= 0) {
             this.renderViewModel(createdView.dataContext);
         }
     }
     /** Render (or re-render) the View Component (Row Detail) */
     renderPreloadView() {
-        const containerElements = document.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
+        const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
         if (containerElements && containerElements.length >= 0) {
             this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[containerElements.length - 1], true);
         }
     }
     /** Render (or re-render) the View Component (Row Detail) */
     renderViewModel(item) {
-        const containerElements = document.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
+        const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
         if (containerElements && containerElements.length > 0) {
             const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[containerElements.length - 1], true);
             if (componentOutput && componentOutput.componentRef && componentOutput.componentRef.instance) {
                 // pass a few properties to the Row Detail template component
                 Object.assign(componentOutput.componentRef.instance, {
                     model: item,
-                    addon: this._addon,
-                    grid: this.sharedService.slickGrid,
-                    dataView: this.sharedService.dataView,
+                    addon: this,
+                    grid: this._grid,
+                    dataView: this.dataView,
                     parent: this.rowDetailViewOptions && this.rowDetailViewOptions.parent,
                 });
                 const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
@@ -487,7 +470,7 @@ class RowDetailViewExtension {
         return undefined;
     }
     // --
-    // private functions
+    // protected functions
     // ------------------
     disposeViewComponent(expandedView) {
         const compRef = expandedView === null || expandedView === void 0 ? void 0 : expandedView.componentRef;
@@ -498,7 +481,6 @@ class RowDetailViewExtension {
             }
             return expandedView;
         }
-        return null;
     }
     /**
      * notify the onAsyncResponse with the "args.item" (required property)
@@ -506,8 +488,8 @@ class RowDetailViewExtension {
      * @param item
      */
     notifyTemplate(item) {
-        if (this._addon) {
-            this._addon.onAsyncResponse.notify({ item }, undefined, this);
+        if (this.onAsyncResponse) {
+            this.onAsyncResponse.notify({ item }, undefined, this);
         }
     }
     /**
@@ -542,7 +524,7 @@ class RowDetailViewExtension {
      * if it's expanding we will add it to our View Components reference array if we don't already have it
      * or if it's collapsing we will remove it from our View Components reference array
      */
-    onBeforeRowDetailToggle(e, args) {
+    handleOnBeforeRowDetailToggle(e, args) {
         // expanding
         if (args && args.item && args.item.__collapsed) {
             // expanding row detail
@@ -567,26 +549,12 @@ class RowDetailViewExtension {
         }
     }
     /** When Row comes back to Viewport Range, we need to redraw the View */
-    onRowBackToViewportRange(e, args) {
-        if (args && args.item) {
-            this._views.forEach((view) => {
-                if (view.id === args.item[this.datasetIdPropName]) {
-                    this.redrawViewComponent(view);
-                }
-            });
+    handleOnRowBackToViewportRange(e, args) {
+        if (args === null || args === void 0 ? void 0 : args.item) {
+            this.redrawAllViewComponents();
         }
     }
-}
-RowDetailViewExtension.decorators = [
-    { type: Injectable }
-];
-RowDetailViewExtension.ctorParameters = () => [
-    { type: AngularUtilService },
-    { type: ApplicationRef },
-    { type: EventPubSubService },
-    { type: SharedService },
-    { type: RxJsFacade }
-];
+}
 
 /** Global Grid Options Defaults */
 const GlobalGridOptions = {
@@ -637,7 +605,6 @@ const GlobalGridOptions = {
         iconExportCsvCommand: 'fa fa-download',
         iconExportExcelCommand: 'fa fa-file-excel-o text-success',
         iconExportTextDelimitedCommand: 'fa fa-download',
-        width: 200,
     },
     customFooterOptions: {
         dateFormat: 'YYYY-MM-DD, hh:mm a',
@@ -722,6 +689,7 @@ const GlobalGridOptions = {
     forceFitColumns: false,
     frozenHeaderWidthCalcDifferential: 0,
     gridMenu: {
+        dropSide: 'left',
         commandLabels: {
             clearAllFiltersCommandKey: 'CLEAR_ALL_FILTERS',
             clearAllSortingCommandKey: 'CLEAR_ALL_SORTING',
@@ -756,7 +724,6 @@ const GlobalGridOptions = {
         iconTogglePreHeaderCommand: 'fa fa-random',
         menuWidth: 16,
         resizeOnShowHeaderRow: true,
-        useClickToRepositionMenu: false,
         headerColumnValueExtractor: pickerHeaderColumnValueExtractor
     },
     headerMenu: {
@@ -790,6 +757,7 @@ const GlobalGridOptions = {
     },
     // technically speaking the Row Detail requires the process & viewComponent but we'll ignore it just to set certain options
     rowDetailView: {
+        collapseAllOnSort: true,
         cssClass: 'detail-view-toggle',
         panelRows: 1,
         keyPrefix: '__',
@@ -965,32 +933,17 @@ class AngularSlickgridComponent {
         this.gridEventService = (_c = externalServices === null || externalServices === void 0 ? void 0 : externalServices.gridEventService) !== null && _c !== void 0 ? _c : new GridEventService();
         this.sharedService = (_d = externalServices === null || externalServices === void 0 ? void 0 : externalServices.sharedService) !== null && _d !== void 0 ? _d : new SharedService();
         this.collectionService = (_f = externalServices === null || externalServices === void 0 ? void 0 : externalServices.collectionService) !== null && _f !== void 0 ? _f : new CollectionService(this.translaterService);
-        this.extensionUtility = (_g = externalServices === null || externalServices === void 0 ? void 0 : externalServices.extensionUtility) !== null && _g !== void 0 ? _g : new ExtensionUtility(this.sharedService, this.translaterService);
+        this.extensionUtility = (_g = externalServices === null || externalServices === void 0 ? void 0 : externalServices.extensionUtility) !== null && _g !== void 0 ? _g : new ExtensionUtility(this.sharedService, this.backendUtilityService, this.translaterService);
         this.filterFactory = new FilterFactory(slickgridConfig, this.translaterService, this.collectionService);
         this.filterService = (_h = externalServices === null || externalServices === void 0 ? void 0 : externalServices.filterService) !== null && _h !== void 0 ? _h : new FilterService(this.filterFactory, this._eventPubSubService, this.sharedService, this.backendUtilityService);
         this.resizerService = (_j = externalServices === null || externalServices === void 0 ? void 0 : externalServices.resizerService) !== null && _j !== void 0 ? _j : new ResizerService(this._eventPubSubService);
         this.sortService = (_k = externalServices === null || externalServices === void 0 ? void 0 : externalServices.sortService) !== null && _k !== void 0 ? _k : new SortService(this.sharedService, this._eventPubSubService, this.backendUtilityService);
         this.treeDataService = (_l = externalServices === null || externalServices === void 0 ? void 0 : externalServices.treeDataService) !== null && _l !== void 0 ? _l : new TreeDataService(this._eventPubSubService, this.sharedService, this.sortService);
         this.paginationService = (_m = externalServices === null || externalServices === void 0 ? void 0 : externalServices.paginationService) !== null && _m !== void 0 ? _m : new PaginationService(this._eventPubSubService, this.sharedService, this.backendUtilityService);
-        // extensions
-        const autoTooltipExtension = new AutoTooltipExtension(this.sharedService);
-        const cellExternalCopyManagerExtension = new CellExternalCopyManagerExtension(this.extensionUtility, this.sharedService);
-        const cellMenuExtension = new CellMenuExtension(this.extensionUtility, this.sharedService, this.translaterService);
-        const contextMenuExtension = new ContextMenuExtension(this.extensionUtility, this._eventPubSubService, this.sharedService, this.treeDataService, this.translaterService);
-        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._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);
-        const rowDetailViewExtension = new RowDetailViewExtension(this.angularUtilService, this.appRef, this._eventPubSubService, this.sharedService, this.rxjs);
-        const rowMoveManagerExtension = new RowMoveManagerExtension(this.sharedService);
-        const rowSelectionExtension = new RowSelectionExtension(this.sharedService);
-        this.extensionService = (_o = externalServices === null || externalServices === void 0 ? void 0 : externalServices.extensionService) !== null && _o !== void 0 ? _o : new ExtensionService(autoTooltipExtension, cellExternalCopyManagerExtension, cellMenuExtension, checkboxExtension, columnPickerExtension, contextMenuExtension, draggableGroupingExtension, gridMenuExtension, groupItemMetaProviderExtension, headerButtonExtension, headerMenuExtension, rowDetailViewExtension, rowMoveManagerExtension, rowSelectionExtension, this.sharedService, this.translaterService);
+        this.extensionService = (_o = externalServices === null || externalServices === void 0 ? void 0 : externalServices.extensionService) !== null && _o !== void 0 ? _o : new ExtensionService(this.extensionUtility, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService, this.translaterService);
         this.gridStateService = (_p = externalServices === null || externalServices === void 0 ? void 0 : externalServices.gridStateService) !== null && _p !== void 0 ? _p : new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
         this.gridService = (_q = externalServices === null || externalServices === void 0 ? void 0 : externalServices.gridService) !== null && _q !== void 0 ? _q : new GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService);
-        this.groupingService = (_r = externalServices === null || externalServices === void 0 ? void 0 : externalServices.groupingAndColspanService) !== null && _r !== void 0 ? _r : new GroupingAndColspanService(this.extensionUtility, this.extensionService, this._eventPubSubService);
+        this.groupingService = (_r = externalServices === null || externalServices === void 0 ? void 0 : externalServices.groupingAndColspanService) !== null && _r !== void 0 ? _r : new GroupingAndColspanService(this.extensionUtility, this._eventPubSubService);
         this.serviceList = [
             this.extensionService,
             this.filterService,
@@ -1188,7 +1141,7 @@ class AngularSlickgridComponent {
             this.emptyGridContainerElm();
         }
         // also unsubscribe all RxJS subscriptions
-        this.subscriptions = unsubscribeAllObservables(this.subscriptions);
+        this.subscriptions = unsubscribeAll(this.subscriptions);
         this._dataset = null;
         this.datasetHierarchical = undefined;
         this._columnDefinitions = [];
@@ -1222,7 +1175,7 @@ class AngularSlickgridComponent {
         }
     }
     initialization(eventHandler) {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         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
@@ -1243,7 +1196,7 @@ class AngularSlickgridComponent {
             const dataviewInlineFilters = this.gridOptions.dataView && this.gridOptions.dataView.inlineFilters || false;
             let dataViewOptions = { inlineFilters: dataviewInlineFilters };
             if (this.gridOptions.draggableGrouping || this.gridOptions.enableGrouping) {
-                this.groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
+                this.groupItemMetadataProvider = new SlickGroupItemMetadataProvider();
                 this.sharedService.groupItemMetadataProvider = this.groupItemMetadataProvider;
                 dataViewOptions = Object.assign(Object.assign({}, dataViewOptions), { groupItemMetadataProvider: this.groupItemMetadataProvider });
             }
@@ -1274,6 +1227,7 @@ class AngularSlickgridComponent {
         this.slickGrid = new Slick.Grid(`#${this.gridId}`, this.customDataView || this.dataView, this._columnDefinitions, this.gridOptions);
         this.sharedService.dataView = this.dataView;
         this.sharedService.slickGrid = this.slickGrid;
+        this.sharedService.gridContainerElement = this.elm.nativeElement;
         this.extensionService.bindDifferentExtensions();
         this.bindDifferentHooks(this.slickGrid, this.gridOptions, this.dataView);
         // when it's a frozen grid, we need to keep the frozen column id for reference if we ever show/hide column from ColumnPicker/GridMenu afterward
@@ -1303,7 +1257,7 @@ class AngularSlickgridComponent {
             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
-            const selectionModel = this.slickGrid && this.slickGrid.getSelectionModel();
+            const selectionModel = (_l = this.slickGrid) === null || _l === void 0 ? void 0 : _l.getSelectionModel();
             if (selectionModel && this.gridOptions && this.gridOptions.dataView && this.gridOptions.dataView.hasOwnProperty('syncGridSelection')) {
                 // if we are using a Backend Service, we will do an extra flag check, the reason is because it might have some unintended behaviors
                 // with the BackendServiceApi because technically the data in the page changes the DataView on every page change.
@@ -1349,13 +1303,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 ((_l = this.gridOptions) === null || _l === void 0 ? void 0 : _l.backendServiceApi) {
+        if ((_m = this.gridOptions) === null || _m === void 0 ? void 0 : _m.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 (((_m = this.gridOptions) === null || _m === void 0 ? void 0 : _m.enablePagination) && this._isLocalGrid) {
+        if (((_o = this.gridOptions) === null || _o === void 0 ? void 0 : _o.enablePagination) && this._isLocalGrid) {
             this.showPagination = true;
             this.loadLocalGridPagination(this.dataset);
         }
@@ -1363,11 +1317,11 @@ class AngularSlickgridComponent {
             // Slick Grid & DataView objects
             dataView: this.dataView,
             slickGrid: this.slickGrid,
-            extensions: (_o = this.extensionService) === null || _o === void 0 ? void 0 : _o.extensionList,
+            extensions: (_p = this.extensionService) === null || _p === void 0 ? void 0 : _p.extensionList,
             // public methods
             destroy: this.destroy.bind(this),
             // return all available Services (non-singleton)
-            backendService: (_q = (_p = this.gridOptions) === null || _p === void 0 ? void 0 : _p.backendServiceApi) === null || _q === void 0 ? void 0 : _q.service,
+            backendService: (_r = (_q = this.gridOptions) === null || _q === void 0 ? void 0 : _q.backendServiceApi) === null || _r === void 0 ? void 0 : _r.service,
             filterService: this.filterService,
             gridEventService: this.gridEventService,
             gridStateService: this.gridStateService,
@@ -1522,6 +1476,7 @@ class AngularSlickgridComponent {
         if ((_a = this.translate) === null || _a === void 0 ? void 0 : _a.onLangChange) {
             // translate some of them on first load, then on each language change
             if (gridOptions.enableTranslate) {
+                this.extensionService.translateAllExtensions();
                 this.translateColumnHeaderTitleKeys();
                 this.translateColumnGroupKeys();
             }
@@ -1529,12 +1484,7 @@ class AngularSlickgridComponent {
                 // 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();
-                    this.extensionService.translateColumnPicker();
-                    this.extensionService.translateContextMenu();
-                    this.extensionService.translateGridMenu();
-                    this.extensionService.translateHeaderMenu();
+                    this.extensionService.translateAllExtensions();
                     this.translateColumnHeaderTitleKeys();
                     this.translateColumnGroupKeys();
                     if (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping) {
@@ -1555,9 +1505,8 @@ class AngularSlickgridComponent {
             // expose all Slick Grid Events through dispatch
             for (const prop in grid) {
                 if (grid.hasOwnProperty(prop) && prop.startsWith('on')) {
-                    const gridEventHandler = grid[prop];
                     const gridEventName = this._eventPubSubService.getEventNameByNamingConvention(prop, slickgridEventPrefix);
-                    this._eventHandler.subscribe(gridEventHandler, (event, args) => {
+                    this._eventHandler.subscribe(grid[prop], (event, args) => {
                         return this._eventPubSubService.dispatchCustomEvent(gridEventName, { eventData: event, args });
                     });
                 }
@@ -1565,8 +1514,7 @@ class AngularSlickgridComponent {
             // expose all Slick DataView Events through dispatch
             for (const prop in dataView) {
                 if (dataView.hasOwnProperty(prop) && prop.startsWith('on')) {
-                    const dataViewEventHandler = dataView[prop];
-                    this._eventHandler.subscribe(dataViewEventHandler, (event, args) => {
+                    this._eventHandler.subscribe(dataView[prop], (event, args) => {
                         const dataViewEventName = this._eventPubSubService.getEventNameByNamingConvention(prop, slickgridEventPrefix);
                         return this._eventPubSubService.dispatchCustomEvent(dataViewEventName, { eventData: event, args });
                     });
@@ -1601,13 +1549,11 @@ class AngularSlickgridComponent {
                 this.loadColumnPresetsWhenDatasetInitialized();
                 this.loadFilterPresetsWhenDatasetInitialized();
                 // When data changes in the DataView, we need to refresh the metrics and/or display a warning if the dataset is empty
-                const onRowCountChangedHandler = dataView.onRowCountChanged;
-                this._eventHandler.subscribe(onRowCountChangedHandler, (_e, args) => {
+                this._eventHandler.subscribe(dataView.onRowCountChanged, () => {
                     grid.invalidate();
                     this.handleOnItemCountChanged(this.dataView.getFilteredItemCount() || 0, dataView.getItemCount());
                 });
-                const onSetItemsCalledHandler = dataView.onSetItemsCalled;
-                this._eventHandler.subscribe(onSetItemsCalledHandler, (_e, args) => {
+                this._eventHandler.subscribe(dataView.onSetItemsCalled, (_e, args) => {
                     var _a;
                     grid.invalidate();
                     this.handleOnItemCountChanged(this.dataView.getFilteredItemCount(), args.itemCount);
@@ -1616,8 +1562,7 @@ class AngularSlickgridComponent {
                         this.resizerService.resizeColumnsByCellContent(!((_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.resizeByContentOnlyOnFirstLoad));
                     }
                 });
-                const onRowsChangedHandler = dataView.onRowsChanged;
-                this._eventHandler.subscribe(onRowsChangedHandler, (_e, args) => {
+                this._eventHandler.subscribe(dataView.onRowsChanged, (_e, args) => {
                     // filtering data with local dataset will not always show correctly unless we call this updateRow/render
                     // also don't use "invalidateRows" since it destroys the entire row and as bad user experience when updating a row
                     // see commit: https://github.com/ghiscoding/aurelia-slickgrid/commit/8c503a4d45fba11cbd8d8cc467fae8d177cc4f60
@@ -1850,10 +1795,10 @@ class AngularSlickgridComponent {
     }
     /** Load any Row Selections into the DataView that were presets by the user */
     loadRowSelectionPresetWhenExists() {
-        var _a, _b, _c;
+        var _a, _b;
         // if user entered some Row Selections "presets"
         const presets = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.presets;
-        const selectionModel = (_c = (_b = this.slickGrid) === null || _b === void 0 ? void 0 : _b.getSelectionModel) === null || _c === void 0 ? void 0 : _c.call(_b);
+        const selectionModel = (_b = this.slickGrid) === null || _b === void 0 ? void 0 : _b.getSelectionModel();
         const enableRowSelection = this.gridOptions && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection);
         if (enableRowSelection && selectionModel && presets && presets.rowSelection && (Array.isArray(presets.rowSelection.gridRowIndexes) || Array.isArray(presets.rowSelection.dataContextIds))) {
             let dataContextIds = presets.rowSelection.dataContextIds;
@@ -1879,6 +1824,7 @@ class AngularSlickgridComponent {
         }
     }
     mergeGridOptions(gridOptions) {
+        var _a, _b, _c, _d, _f, _g, _h, _j;
         gridOptions.gridId = this.gridId;
         gridOptions.gridContainerId = `slickGridContainer-${this.gridId}`;
         // if we have a backendServiceApi and the enablePagination is undefined, we'll assume that we do want to see it, else get that defined value
@@ -1888,8 +1834,9 @@ class AngularSlickgridComponent {
         // using jQuery extend to do a deep clone has an unwanted side on objects and pageSizes but ES6 spread has other worst side effects
         // so we will just overwrite the pageSizes when needed, this is the only one causing issues so far.
         // jQuery wrote this on their docs:: On a deep extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not.
-        if ((options === null || options === void 0 ? void 0 : options.pagination) && (gridOptions.enablePagination || gridOptions.backendServiceApi) && gridOptions.pagination && Array.isArray(gridOptions.pagination.pageSizes)) {
-            options.pagination.pageSizes = gridOptions.pagination.pageSizes;
+        if ((options === null || options === void 0 ? void 0 : options.pagination) && (gridOptions.enablePagination || gridOptions.backendServiceApi) && (this.forRootConfig.pagination || gridOptions.pagination)) {
+            options.pagination.pageSize = (_d = (_b = (_a = gridOptions.pagination) === null || _a === void 0 ? void 0 : _a.pageSize) !== null && _b !== void 0 ? _b : (_c = this.forRootConfig.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) !== null && _d !== void 0 ? _d : GlobalGridOptions.pagination.pageSize;
+            options.pagination.pageSizes = (_j = (_g = (_f = gridOptions.pagination) === null || _f === void 0 ? void 0 : _f.pageSizes) !== null && _g !== void 0 ? _g : (_h = this.forRootConfig.pagination) === null || _h === void 0 ? void 0 : _h.pageSizes) !== null && _j !== void 0 ? _j : GlobalGridOptions.pagination.pageSizes;
         }
         // also make sure to show the header row if user have enabled filtering
         this._hideHeaderRowAfterPageLoad = (options.showHeaderRow === false);
@@ -1933,6 +1880,12 @@ class AngularSlickgridComponent {
         if (this.gridOptions.enableTranslate) {
             this.extensionService.translateColumnHeaders();
         }
+        if (this.gridOptions.enableRowDetailView) {
+            this.slickRowDetailView = new SlickRowDetailView(this.angularUtilService, this.appRef, this._eventPubSubService, this.elm.nativeElement, this.rxjs);
+            this.slickRowDetailView.create(this.columnDefinitions, this.gridOptions);
+            this._registeredResources.push(this.slickRowDetailView);
+            this.extensionService.addExtensionToList(ExtensionName.rowDetailView, { name: ExtensionName.rowDetailView, instance: this.slickRowDetailView });
+        }
         // also initialize (render) the empty warning component
         this.slickEmptyWarning = new SlickEmptyWarningComponent();
         this._registeredResources.push(this.slickEmptyWarning);
@@ -2063,39 +2016,48 @@ 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</div>",
-                providers: [
-                    // make everything transient (non-singleton)
-                    AngularUtilService,
-                    ApplicationRef,
-                    RowDetailViewExtension,
-                    TranslaterService,
-                ]
-            },] }
-];
-AngularSlickgridComponent.ctorParameters = () => [
-    { type: AngularUtilService },
-    { type: ApplicationRef },
-    { type: ChangeDetectorRef },
-    { type: ContainerService },
-    { type: ElementRef },
-    { type: TranslateService, decorators: [{ type: Optional }] },
-    { type: TranslaterService, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Inject, args: ['config',] }] },
-    { type: undefined, decorators: [{ type: Inject, args: ['externalService',] }] }
-];
-AngularSlickgridComponent.propDecorators = {
-    customDataView: [{ type: Input }],
-    gridId: [{ type: Input }],
-    gridOptions: [{ type: Input }],
-    paginationOptions: [{ type: Input }],
-    columnDefinitions: [{ type: Input }],
-    dataset: [{ type: Input }],
-    datasetHierarchical: [{ type: Input }]
-};
+AngularSlickgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", 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 });
+AngularSlickgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: AngularSlickgridComponent, selector: "angular-slickgrid", inputs: { customDataView: "customDataView", gridId: "gridId", gridOptions: "gridOptions", paginationOptions: "paginationOptions", columnDefinitions: "columnDefinitions", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, providers: [
+        // make everything transient (non-singleton)
+        AngularUtilService,
+        ApplicationRef,
+        TranslaterService,
+    ], ngImport: i0, 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>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AngularSlickgridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-slickgrid', providers: [
+                        // make everything transient (non-singleton)
+                        AngularUtilService,
+                        ApplicationRef,
+                        TranslaterService,
+                    ], 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>" }]
+        }], ctorParameters: function () {
+        return [{ type: AngularUtilService }, { type: i0.ApplicationRef }, { type: i0.ChangeDetectorRef }, { type: ContainerService }, { type: i0.ElementRef }, { type: i1.TranslateService, decorators: [{
+                        type: Optional
+                    }] }, { type: TranslaterService, decorators: [{
+                        type: Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: ['config']
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: ['externalService']
+                    }] }];
+    }, propDecorators: { customDataView: [{
+                type: Input
+            }], gridId: [{
+                type: Input
+            }], gridOptions: [{
+                type: Input
+            }], paginationOptions: [{
+                type: Input
+            }], columnDefinitions: [{
+                type: Input
+            }], dataset: [{
+                type: Input
+            }], datasetHierarchical: [{
+                type: Input
+            }] } });
 
 class AngularSlickgridModule {
     static forRoot(config = {}) {
@@ -2111,25 +2073,33 @@ class AngularSlickgridModule {
         };
     }
 }
-AngularSlickgridModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    TranslateModule
-                ],
-                declarations: [
-                    AngularSlickgridComponent,
-                ],
-                exports: [
-                    AngularSlickgridComponent,
-                ],
-                entryComponents: [AngularSlickgridComponent]
-            },] }
-];
+AngularSlickgridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AngularSlickgridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AngularSlickgridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AngularSlickgridModule, declarations: [AngularSlickgridComponent], imports: [CommonModule,
+        TranslateModule], exports: [AngularSlickgridComponent] });
+AngularSlickgridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AngularSlickgridModule, imports: [[
+            CommonModule,
+            TranslateModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AngularSlickgridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        TranslateModule
+                    ],
+                    declarations: [
+                        AngularSlickgridComponent,
+                    ],
+                    exports: [
+                        AngularSlickgridComponent,
+                    ],
+                    entryComponents: [AngularSlickgridComponent]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularSlickgridComponent, AngularSlickgridModule, AngularUtilService, BsDropDownService, RowDetailViewExtension, SlickgridConfig, unsubscribeAllObservables, ContainerService as ɵb, TranslaterService as ɵc };
-//# sourceMappingURL=angular-slickgrid.js.map
+export { AngularSlickgridComponent, AngularSlickgridModule, AngularUtilService, BsDropDownService, SlickRowDetailView, SlickgridConfig, unsubscribeAllObservables };
+//# sourceMappingURL=angular-slickgrid.mjs.map