angular-slickgrid 9.13.0 → 10.0.0

package/fesm2022/angular-slickgrid.mjs

@@ -1,11 +1,9 @@
-import { unsubscribeAll, createDomElement, SlickHybridSelectionModel, SlickRowSelectionModel, SlickEventData, castObservableToPromise, addToArrayWhenNotExists, DelimiterType, EventNamingStyle, Filters, 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, ExtensionName, isColumnDateType } from '@slickgrid-universal/common';
+import { GlobalGridOptions as GlobalGridOptions$1, SlickEventHandler, SlickgridConfig as SlickgridConfig$1, BackendUtilityService, GridEventService, SharedService, CollectionService, ExtensionUtility, FilterFactory, FilterService, ResizerService, SortService, TreeDataService, PaginationService, ExtensionService, GridStateService, GridService, HeaderGroupingService, unsubscribeAll, emptyElement, SlickGroupItemMetadataProvider, SlickDataView, autoAddEditorFormatterToColumnsWithEditor, SlickGrid, PluginFlagMappings, isColumnDateType } from '@slickgrid-universal/common';
 export * from '@slickgrid-universal/common';
 import * as i0 from '@angular/core';
-import { Injectable, Optional, EventEmitter, output, ContentChild, Input, Output, Inject, Component, NgModule } from '@angular/core';
+import { ViewContainerRef, Injectable, Inject, Optional, EventEmitter, output, Component, ContentChild, Input, Output } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { SlickRowDetailView as SlickRowDetailView$1 } from '@slickgrid-universal/row-detail-view-plugin';
-import { Observable } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
@@ -13,8 +11,7 @@ import { SlickPaginationComponent } from '@slickgrid-universal/pagination-compon
 import { RxJsResource } from '@slickgrid-universal/rxjs-observable';
 import { extend } from '@slickgrid-universal/utils';
 import { dequal } from 'dequal/lite';
-import * as i5 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';
 
 class AngularUtilService {
     vcr;
@@ -54,15 +51,11 @@ class AngularUtilService {
         // user could provide data to assign to the component instance
         if (componentRef?.instance && data) {
             Object.assign(componentRef.instance, data);
-            // NOTE: detectChanges() MUST be done BEFORE returning the DOM element in the next step,
-            // because if we do it only after returning the rootNodes (domElement) then it won't have the instance data yet
-            // and we would have to wait an extra cycle to see the result, this basically helps with Example22
-            componentRef.changeDetectorRef.detectChanges();
         }
         // Get DOM element from component
         let domElem = null;
         const viewRef = componentRef.hostView;
-        // get DOM element from the new dynamic Component, make sure this is read after any data and detectChanges()
+        // get DOM element from the new dynamic Component, make sure this is read after any data
         if (viewRef && Array.isArray(viewRef.rootNodes) && viewRef.rootNodes[0]) {
             domElem = viewRef.rootNodes[0];
             // when user provides the DOM element target, we will read the new Component html and use it to replace the target html
@@ -93,12 +86,15 @@ class AngularUtilService {
         }
         return componentOutput;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AngularUtilService, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AngularUtilService });
+    static ɵfac = function AngularUtilService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AngularUtilService)(i0.ɵɵinject(ViewContainerRef)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: AngularUtilService, factory: AngularUtilService.ɵfac });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AngularUtilService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AngularUtilService, [{
+        type: Injectable
+    }], () => [{ type: i0.ViewContainerRef, decorators: [{
+                type: Inject,
+                args: [ViewContainerRef]
+            }] }], null); })();
 
 class ContainerService {
     dependencies = [];
@@ -118,12 +114,15 @@ class ContainerService {
             this.dependencies.push({ key, instance });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ContainerService });
+    static ɵfac = function ContainerService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContainerService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ContainerService, factory: ContainerService.ɵfac, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ContainerService, decorators: [{
-            type: Injectable
-        }] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContainerService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root', // This ensures it can be injected anywhere
+            }]
+    }], null, null); })();
 
 /**
  * This is a Translate Service Wrapper for Slickgrid-Universal monorepo lib to work properly,
@@ -139,7 +138,7 @@ class TranslaterService {
      * @return {string} current language
      */
     getCurrentLanguage() {
-        return this.translateService?.currentLang ?? '';
+        return this.translateService?.getCurrentLang?.() ?? '';
     }
     /**
      * Method to set the language to use in the App and Translate Service
@@ -157,14 +156,14 @@ class TranslaterService {
     translate(translationKey) {
         return this.translateService?.instant?.(translationKey || ' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TranslaterService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TranslaterService });
+    static ɵfac = function TranslaterService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TranslaterService)(i0.ɵɵinject(i1.TranslateService, 8)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TranslaterService, factory: TranslaterService.ɵfac });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TranslaterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.TranslateService, decorators: [{
-                    type: Optional
-                }] }] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TranslaterService, [{
+        type: Injectable
+    }], () => [{ type: i1.TranslateService, decorators: [{
+                type: Optional
+            }] }], null); })();
 
 /**
  * Unsubscribe all Observables Subscriptions
@@ -181,547 +180,12 @@ function unsubscribeAllObservables(subscriptions) {
             subscription = subscriptions.pop();
         }
     }
-    // TODO: deprecated, remove the return type in next major version
-    return 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;
-    _preloadCompRef;
-    _views = [];
-    _viewComponent;
-    _subscriptions = [];
-    _userProcessFn;
-    constructor(angularUtilService, appRef, eventPubSubService, gridContainerElement, rxjs) {
-        super(eventPubSubService);
-        this.angularUtilService = angularUtilService;
-        this.appRef = appRef;
-        this.eventPubSubService = eventPubSubService;
-        this.gridContainerElement = gridContainerElement;
-        this.rxjs = rxjs;
-    }
-    get addonOptions() {
-        return this.getOptions();
-    }
-    get datasetIdPropName() {
-        return this.gridOptions.datasetIdPropertyName || 'id';
-    }
-    /** Getter for the Grid Options pulled through the Grid Object */
-    get gridOptions() {
-        return (this._grid?.getOptions() || {});
-    }
-    get rowDetailViewOptions() {
-        return this.gridOptions.rowDetailView;
-    }
-    addRxJsResource(rxjs) {
-        this.rxjs = rxjs;
-    }
-    /** Dispose of the RowDetailView Extension */
-    dispose() {
-        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() {
-        do {
-            const view = this._views.pop();
-            if (view) {
-                this.disposeView(view);
-            }
-        } while (this._views.length > 0);
-    }
-    /** Get the instance of the SlickGrid addon (control or plugin). */
-    getAddonInstance() {
-        return this;
-    }
-    init(grid) {
-        this._grid = grid;
-        super.init(grid);
-        this.register(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
-     */
-    register(rowSelectionPlugin) {
-        if (typeof this.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 = this.gridOptions.rowDetailView.process; // keep user's process method
-            this.addonOptions.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 && this.gridOptions?.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 = this.gridOptions.rowDetailView.preloadComponent;
-                this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` });
-            }
-            if (!this.gridOptions.rowDetailView.postTemplate) {
-                this._viewComponent = this.gridOptions.rowDetailView.viewComponent;
-                this.addonOptions.postTemplate = (itemDetail) => createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` });
-            }
-            // this also requires the Row Selection Model to be registered as well
-            if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {
-                const SelectionModelClass = this.gridOptions.enableHybridSelection ? SlickHybridSelectionModel : SlickRowSelectionModel;
-                rowSelectionPlugin = new SelectionModelClass(this.gridOptions.selectionOptions ?? this.gridOptions.rowSelectionOptions ?? { selectActiveRow: true });
-                this._grid.setSelectionModel(rowSelectionPlugin);
-            }
-            // hook all events
-            if (this._grid && this.rowDetailViewOptions) {
-                if (this.rowDetailViewOptions.onExtensionRegistered) {
-                    this.rowDetailViewOptions.onExtensionRegistered(this);
-                }
-                this.eventHandler.subscribe(this.onAsyncResponse, (event, args) => {
-                    if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncResponse === 'function') {
-                        this.rowDetailViewOptions.onAsyncResponse(event, args);
-                    }
-                });
-                this.eventHandler.subscribe(this.onAsyncEndUpdate, (e, args) => {
-                    // destroy preload if exists
-                    this._preloadCompRef?.destroy();
-                    // triggers after backend called "onAsyncResponse.notify()"
-                    // because of the preload destroy above, we need a small delay to make sure the DOM element is ready to render the Row Detail
-                    queueMicrotask(() => {
-                        this.renderViewModel(args?.item);
-                        if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncEndUpdate === 'function') {
-                            this.rowDetailViewOptions.onAsyncEndUpdate(e, args);
-                        }
-                    });
-                });
-                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();
-                    if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAfterRowDetailToggle === 'function') {
-                        this.rowDetailViewOptions.onAfterRowDetailToggle(e, args);
-                    }
-                });
-                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') {
-                        return this.rowDetailViewOptions.onBeforeRowDetailToggle(e, args);
-                    }
-                    return true;
-                });
-                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);
-                    }
-                });
-                this._eventHandler.subscribe(this.onBeforeRowOutOfViewportRange, (event, args) => {
-                    if (typeof this.rowDetailViewOptions?.onBeforeRowOutOfViewportRange === 'function') {
-                        this.rowDetailViewOptions.onBeforeRowOutOfViewportRange(event, args);
-                    }
-                    this.disposeViewByItem(args.item);
-                });
-                this.eventHandler.subscribe(this.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._grid.onColumnsReordered, this.redrawAllViewComponents.bind(this, false));
-                // on row selection changed, we also need to redraw
-                if (this.gridOptions.enableRowSelection || this.gridOptions.enableHybridSelection || this.gridOptions.enableCheckboxSelector) {
-                    this.eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this, false));
-                }
-                // 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));
-                // redraw all Views whenever certain events are triggered
-                this._subscriptions.push(this.eventPubSubService?.subscribe(['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'], this.redrawAllViewComponents.bind(this, false)), this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () => setTimeout(() => this.redrawAllViewComponents())));
-            }
-        }
-        return this;
-    }
-    /** Redraw (re-render) all the expanded row detail View Components */
-    redrawAllViewComponents(forceRedraw = false) {
-        this.resetRenderedRows();
-        this._views.forEach((view) => {
-            if (!view.rendered || forceRedraw) {
-                forceRedraw && view.componentRef?.destroy();
-                this.redrawViewComponent(view);
-            }
-        });
-    }
-    /** Redraw the necessary View Component */
-    redrawViewComponent(createdView) {
-        const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${createdView.id}`);
-        if (containerElement) {
-            this.renderViewModel(createdView.dataContext);
-        }
-    }
-    /** Render (or re-render) the View Component (Row Detail) */
-    renderPreloadView() {
-        const containerElement = this.gridContainerElement.querySelector(`.${PRELOAD_CONTAINER_PREFIX}`);
-        if (this._preloadComponent && containerElement) {
-            const preloadComp = this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElement, {}, { sanitizer: this._grid.sanitizeHtmlString });
-            this._preloadCompRef = preloadComp.componentRef;
-        }
-    }
-    /** Render (or re-render) the View Component (Row Detail) */
-    renderViewModel(item) {
-        const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
-        if (this._viewComponent && containerElement) {
-            // render row detail
-            const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElement, {
-                model: item,
-                addon: this,
-                grid: this._grid,
-                dataView: this.dataView,
-                parentRef: this.rowDetailViewOptions?.parentRef,
-            }, {
-                sanitizer: this._grid.sanitizeHtmlString,
-            });
-            if (componentOutput?.componentRef) {
-                const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]);
-                if (viewObj) {
-                    viewObj.componentRef = componentOutput.componentRef;
-                    viewObj.rendered = true;
-                }
-                return viewObj;
-            }
-        }
-        return undefined;
-    }
-    // --
-    // protected functions
-    // ------------------
-    disposeViewByItem(item, removeFromArray = false) {
-        const foundViewIndex = this._views.findIndex((view) => view.id === item[this.datasetIdPropName]);
-        if (foundViewIndex >= 0) {
-            this.disposeView(this._views[foundViewIndex]);
-            if (removeFromArray) {
-                this._views.splice(foundViewIndex, 1);
-            }
-        }
-    }
-    disposeView(expandedView) {
-        expandedView.rendered = false;
-        const compRef = expandedView?.componentRef;
-        if (compRef) {
-            this.appRef.detachView(compRef.hostView);
-            if (typeof compRef?.destroy === 'function') {
-                compRef.destroy();
-            }
-            return expandedView;
-        }
-    }
-    /**
-     * notify the onAsyncResponse with the "args.item" (required property)
-     * the plugin will then use item to populate the row detail panel with the "postTemplate"
-     * @param item
-     */
-    notifyTemplate(item) {
-        this.onAsyncResponse.notify({ item }, new SlickEventData(), this);
-    }
-    /**
-     * On Processing, we will notify the plugin with the new item detail once backend server call completes
-     * @param item
-     */
-    async onProcessing(item) {
-        if (item && typeof this._userProcessFn === 'function') {
-            let awaitedItemDetail;
-            const userProcessFn = this._userProcessFn(item);
-            // wait for the "userProcessFn", once resolved we will save it into the "collection"
-            const response = await userProcessFn;
-            if (this.datasetIdPropName in response) {
-                awaitedItemDetail = response; // from Promise
-            }
-            else if ((response && response instanceof Observable) || response instanceof Promise) {
-                awaitedItemDetail = await castObservableToPromise(this.rxjs, response); // from Angular-http-client
-            }
-            if (!awaitedItemDetail || !(this.datasetIdPropName in awaitedItemDetail)) {
-                throw new Error('[Angular-Slickgrid] could not process the Row Detail, you must make sure that your "process" callback ' +
-                    `returns an item object that has an "${this.datasetIdPropName}" property`);
-            }
-            // notify the plugin with the new item details
-            this.notifyTemplate(awaitedItemDetail || {});
-        }
-    }
-    /**
-     * Just before the row get expanded or collapsed we will do the following
-     * First determine if the row is expanding or collapsing,
-     * 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
-     */
-    handleOnBeforeRowDetailToggle(_e, args) {
-        // expanding
-        if (args?.item?.__collapsed) {
-            // expanding row detail
-            const viewInfo = {
-                id: args.item[this.datasetIdPropName],
-                dataContext: args.item,
-                rendered: false,
-            };
-            addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName);
-        }
-        else {
-            // collapsing, so dispose of the View/Component
-            this.disposeViewByItem(args.item, true);
-        }
-    }
-    /** When Row comes back to Viewport Range, we need to redraw the View */
-    handleOnRowBackToViewportRange(_e, args) {
-        const viewModel = this._views.find((x) => x.id === args.rowId);
-        if (viewModel && !viewModel.rendered) {
-            this.redrawViewComponent(viewModel);
-        }
-    }
 }
 
 /** Global Grid Options Defaults */
 const GlobalGridOptions = {
-    alwaysShowVerticalScroll: true,
-    autoEdit: false,
-    asyncEditorLoading: false,
-    autoFitColumnsOnFirstLoad: true,
-    autoResize: {
-        applyResizeToContainer: true,
-        autoHeight: true,
-        autoHeightRecalcRow: 100,
-        calculateAvailableSizeBy: 'window',
-        bottomPadding: 20,
-        minHeight: 250,
-        minWidth: 300,
-        rightPadding: 0,
-    },
-    cellHighlightCssClass: 'slick-cell-modified',
-    checkboxSelector: {
-        cssClass: 'slick-cell-checkboxsel',
-    },
-    columnPicker: {
-        hideForceFitButton: false,
-        hideSyncResizeButton: true,
-        headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
-    },
-    cellMenu: {
-        autoAdjustDrop: true,
-        autoAlignSide: true,
-        hideCloseButton: true,
-        hideCommandSection: false,
-        hideOptionSection: false,
-    },
-    contextMenu: {
-        autoAdjustDrop: true,
-        autoAlignSide: true,
-        hideCloseButton: true,
-        hideClearAllGrouping: false,
-        hideCollapseAllGroups: false,
-        hideCommandSection: false,
-        hideCopyCellValueCommand: false,
-        hideExpandAllGroups: false,
-        hideExportCsvCommand: false,
-        hideExportExcelCommand: false,
-        hideExportPdfCommand: false,
-        hideExportTextDelimitedCommand: true,
-        hideMenuOnScroll: true,
-        hideOptionSection: false,
-        iconCollapseAllGroupsCommand: 'mdi mdi-arrow-collapse',
-        iconExpandAllGroupsCommand: 'mdi mdi-arrow-expand',
-        iconClearGroupingCommand: 'mdi mdi-close',
-        iconCopyCellValueCommand: 'mdi mdi-content-copy',
-        iconExportCsvCommand: 'mdi mdi-download',
-        iconExportExcelCommand: 'mdi mdi-file-excel-outline',
-        iconExportTextDelimitedCommand: 'mdi mdi-download',
-        showBulletWhenIconMissing: true,
-        subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
-    },
-    customFooterOptions: {
-        dateFormat: 'YYYY-MM-DD, hh:mm a',
-        hideRowSelectionCount: false,
-        hideTotalItemCount: false,
-        hideLastUpdateTimestamp: true,
-        footerHeight: 25,
-        leftContainerClass: 'col-xs-12 col-sm-5',
-        rightContainerClass: 'col-xs-6 col-sm-7',
-        metricSeparator: '|',
-        metricTexts: {
-            items: 'items',
-            itemsKey: 'ITEMS',
-            itemsSelected: 'items selected',
-            itemsSelectedKey: 'ITEMS_SELECTED',
-            of: 'of',
-            ofKey: 'OF',
-        },
-    },
-    dataView: {
-        // when enabled, this will preserve the row selection even after filtering/sorting/grouping
-        syncGridSelection: {
-            preserveHidden: false,
-            preserveHiddenOnSelectionChange: true,
-        },
-        syncGridSelectionWithBackendService: false, // but disable it when using backend services
-    },
-    datasetIdPropertyName: 'id',
-    defaultFilter: Filters.input,
-    defaultBackendServiceFilterTypingDebounce: 500,
-    defaultColumnSortFieldId: 'id',
-    defaultFilterPlaceholder: '🔎︎',
-    defaultFilterRangeOperator: 'RangeInclusive',
-    editable: false,
-    enableAutoResize: true,
-    enableAutoSizeColumns: true,
-    enableCellNavigation: false,
-    enableColumnPicker: true,
-    enableColumnReorder: true,
-    enableColumnResizeOnDoubleClick: true,
-    enableContextMenu: true,
-    enableExcelExport: false,
-    enableTextExport: false, // CSV/Text with Tab Delimited
-    enableFilterTrimWhiteSpace: false, // do we want to trim white spaces on all Filters?
-    enableGridMenu: true,
-    enableHeaderMenu: true,
-    enableEmptyDataWarningMessage: true,
-    emptyDataWarning: {
-        className: 'slick-empty-data-warning',
-        message: 'No data to display.',
-        messageKey: 'EMPTY_DATA_WARNING_MESSAGE',
-        hideFrozenLeftWarning: false,
-        hideFrozenRightWarning: false,
-        leftViewportMarginLeft: '40%',
-        rightViewportMarginLeft: '40%',
-        frozenLeftViewportMarginLeft: '0px',
-        frozenRightViewportMarginLeft: '40%',
-    },
-    enableMouseHoverHighlightRow: true,
-    enableSorting: true,
-    enableTextSelectionOnCells: true,
-    eventNamingStyle: EventNamingStyle.camelCase,
-    explicitInitialization: true,
-    excelExportOptions: {
-        addGroupIndentation: true,
-        exportWithFormatter: false,
-        filename: 'export',
-        format: 'xlsx',
-        groupingColumnHeaderTitle: 'Group By',
-        groupCollapsedSymbol: '⮞',
-        groupExpandedSymbol: '⮟',
-        groupingAggregatorRowText: '',
-        sanitizeDataExport: false,
-    },
-    pdfExportOptions: {
-        addGroupIndentation: true,
-        exportWithFormatter: false,
-        filename: 'export',
-        pageOrientation: 'portrait',
-        pageSize: 'a4',
-        fontSize: 10,
-        headerFontSize: 11,
-        includeColumnHeaders: true,
-        htmlDecode: true,
-        sanitizeDataExport: true,
-        groupingColumnHeaderTitle: 'Group By',
-        groupCollapsedSymbol: '+',
-        groupExpandedSymbol: '-',
-        groupingAggregatorRowText: '',
-        repeatHeadersOnEachPage: true,
-    },
-    textExportOptions: {
-        delimiter: DelimiterType.comma,
-        exportWithFormatter: false,
-        filename: 'export',
-        format: 'csv',
-        groupingColumnHeaderTitle: 'Group By',
-        groupingAggregatorRowText: '',
-        sanitizeDataExport: false,
-        useUtf8WithBom: true,
-    },
-    filterTypingDebounce: 0,
-    forceFitColumns: false,
-    frozenHeaderWidthCalcDifferential: 0,
-    gridMenu: {
-        dropSide: 'left',
-        commandLabels: {
-            clearAllFiltersCommandKey: 'CLEAR_ALL_FILTERS',
-            clearAllSortingCommandKey: 'CLEAR_ALL_SORTING',
-            clearFrozenColumnsCommandKey: 'CLEAR_PINNING',
-            exportCsvCommandKey: 'EXPORT_TO_CSV',
-            exportExcelCommandKey: 'EXPORT_TO_EXCEL',
-            exportPdfCommandKey: 'EXPORT_TO_PDF',
-            exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
-            refreshDatasetCommandKey: 'REFRESH_DATASET',
-            toggleDarkModeCommandKey: 'TOGGLE_DARK_MODE',
-            toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
-            togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
-        },
-        hideClearAllFiltersCommand: false,
-        hideClearAllSortingCommand: false,
-        hideClearFrozenColumnsCommand: true, // opt-in command
-        hideExportCsvCommand: false,
-        hideExportExcelCommand: false,
-        hideExportPdfCommand: false,
-        hideExportTextDelimitedCommand: true,
-        hideForceFitButton: false,
-        hideRefreshDatasetCommand: false,
-        hideSyncResizeButton: true,
-        hideToggleDarkModeCommand: true,
-        hideToggleFilterCommand: false,
-        hideTogglePreHeaderCommand: false,
-        iconCssClass: 'mdi mdi-menu',
-        iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
-        iconClearAllSortingCommand: 'mdi mdi-sort-variant-off',
-        iconClearFrozenColumnsCommand: 'mdi mdi-pin-off-outline',
-        iconExportCsvCommand: 'mdi mdi-download',
-        iconExportExcelCommand: 'mdi mdi-file-excel-outline',
-        iconExportTextDelimitedCommand: 'mdi mdi-download',
-        iconRefreshDatasetCommand: 'mdi mdi-sync',
-        iconToggleDarkModeCommand: 'mdi mdi-brightness-4',
-        iconToggleFilterCommand: 'mdi mdi-flip-vertical',
-        iconTogglePreHeaderCommand: 'mdi mdi-flip-vertical',
-        menuWidth: 16,
-        resizeOnShowHeaderRow: true,
-        subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
-        headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
-    },
-    headerMenu: {
-        autoAlign: true,
-        autoAlignOffset: 12,
-        minWidth: 140,
-        iconClearFilterCommand: 'mdi mdi-filter-remove-outline',
-        iconClearSortCommand: 'mdi mdi-sort-variant-off',
-        iconFreezeColumns: 'mdi mdi-pin-outline',
-        iconUnfreezeColumns: 'mdi mdi-pin-off-outline',
-        iconSortAscCommand: 'mdi mdi-sort-ascending',
-        iconSortDescCommand: 'mdi mdi-sort-descending',
-        iconColumnHideCommand: 'mdi mdi-close',
-        iconColumnResizeByContentCommand: 'mdi mdi-arrow-expand-horizontal',
-        hideColumnResizeByContentCommand: false,
-        hideColumnHideCommand: false,
-        hideClearFilterCommand: false,
-        hideClearSortCommand: false,
-        hideFreezeColumnsCommand: true, // opt-in command
-        hideSortCommands: false,
-        subItemChevronClass: 'mdi mdi-chevron-down mdi-rotate-270',
-    },
-    headerRowHeight: 35,
-    multiColumnSort: true,
-    numberedMultiColumnSort: true,
-    tristateMultiColumnSort: false,
-    sortColNumberInSeparateSpan: true,
-    suppressActiveCellChangeOnEdit: false,
-    pagination: {
-        pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
-        pageSize: 25,
-        totalItems: 0,
-    },
+    ...GlobalGridOptions$1,
+    eventNamingStyle: 'camelCase',
     // technically speaking the Row Detail requires the process & viewComponent but we'll ignore it just to set certain options
     rowDetailView: {
         collapseAllOnSort: true,
@@ -731,44 +195,7 @@ const GlobalGridOptions = {
         useRowClick: false,
         saveDetailViewOnScroll: false,
     },
-    rowHeight: 35,
-    topPanelHeight: 35,
-    preHeaderPanelWidth: '100%', // mostly useful for Draggable Grouping dropzone to take full width
-    translationNamespaceSeparator: ':',
-    resetFilterSearchValueAfterOnBeforeCancellation: true,
-    resizeByContentOnlyOnFirstLoad: true,
-    resizeByContentOptions: {
-        alwaysRecalculateColumnWidth: false,
-        cellPaddingWidthInPx: 14,
-        defaultRatioForStringType: 0.88,
-        formatterPaddingWidthInPx: 0,
-        maxItemToInspectCellContentWidth: 1000,
-        maxItemToInspectSingleColumnWidthByContent: 5000,
-        widthToRemoveFromExceededWidthReadjustment: 50,
-    },
-    rowTopOffsetRenderType: 'transform',
-    treeDataOptions: {
-        exportIndentMarginLeft: 5,
-        exportIndentationLeadingChar: '͏͏͏͏͏͏͏͏͏·',
-    },
 };
-/**
- * Value Extractor for both ColumnPicker & GridMenu Picker
- * when using Column Header Grouping, we'll prefix the column group title
- * else we'll simply return the column name title
- */
-function pickerHeaderColumnValueExtractor(column, gridOptions) {
-    let colName = column?.columnPickerLabel ?? column?.name ?? '';
-    if (colName instanceof HTMLElement || colName instanceof DocumentFragment) {
-        colName = colName.textContent || '';
-    }
-    const headerGroup = column?.columnGroup || '';
-    const columnGroupSeparator = gridOptions?.columnGroupSeparator ?? ' - ';
-    if (headerGroup) {
-        return headerGroup + columnGroupSeparator + colName;
-    }
-    return colName;
-}
 
 class SlickgridConfig {
     options;
@@ -878,11 +305,18 @@ class Constants {
     static VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = 'Please make sure your text is at least {{minLength}} character(s)';
 }
 
+const _c0 = ["slickgridHeader"];
+const _c1 = ["slickgridFooter"];
+function AngularSlickgridComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function AngularSlickgridComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
 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;
@@ -943,6 +377,7 @@ class AngularSlickgridComponent {
     customDataView;
     gridId = '';
     options = {};
+    containerClasses = undefined;
     get paginationOptions() {
         return this._paginationOptions;
     }
@@ -1178,10 +613,9 @@ class AngularSlickgridComponent {
     }
     slickgridHeader = null;
     slickgridFooter = null;
-    constructor(angularUtilService, appRef, cd, containerService, elm, translate, translaterService, forRootConfig, externalServices) {
+    constructor(angularUtilService, appRef, containerService, elm, translate, translaterService, forRootConfig, externalServices) {
         this.angularUtilService = angularUtilService;
         this.appRef = appRef;
-        this.cd = cd;
         this.containerService = containerService;
         this.elm = elm;
         this.translate = translate;
@@ -1190,7 +624,7 @@ class AngularSlickgridComponent {
         const slickgridConfig = new SlickgridConfig$1();
         // initialize and assign all Service Dependencies
         this._eventPubSubService = externalServices?.eventPubSubService ?? new EventPubSubService(this.elm.nativeElement);
-        this._eventPubSubService.eventNamingStyle = EventNamingStyle.camelCase;
+        this._eventPubSubService.eventNamingStyle = 'camelCase';
         this.backendUtilityService = externalServices?.backendUtilityService ?? new BackendUtilityService();
         this.gridEventService = externalServices?.gridEventService ?? new GridEventService();
         this.sharedService = externalServices?.sharedService ?? new SharedService();
@@ -1327,7 +761,7 @@ class AngularSlickgridComponent {
         if (Array.isArray(this._registeredResources)) {
             while (this._registeredResources.length > 0) {
                 const res = this._registeredResources.pop();
-                if (res?.dispose) {
+                if (typeof res?.dispose === 'function') {
                     res.dispose();
                 }
             }
@@ -1377,7 +811,7 @@ class AngularSlickgridComponent {
             this.options.enableMouseWheelScrollHandler === undefined) {
             this.options.enableMouseWheelScrollHandler = true;
         }
-        this._eventPubSubService.eventNamingStyle = this.options?.eventNamingStyle ?? EventNamingStyle.camelCase;
+        this._eventPubSubService.eventNamingStyle = this.options?.eventNamingStyle ?? 'camelCase';
         this._eventPubSubService.publish('onBeforeGridCreate', true);
         // make sure the dataset is initialized (if not it will throw an error that it cannot getLength of null)
         this._dataset ||= [];
@@ -1412,7 +846,6 @@ class AngularSlickgridComponent {
         }
         // save reference for all columns before they optionally become hidden/visible
         this.sharedService.allColumns = this._columnDefinitions;
-        this.sharedService.visibleColumns = this._columnDefinitions;
         // before certain extentions/plugins potentially adds extra columns not created by the user itself (RowMove, RowDetail, RowSelections)
         // we'll subscribe to the event and push back the change to the user so they always use full column defs array including extra cols
         this.subscriptions.push(this._eventPubSubService.subscribe('onPluginColumnsChanged', (data) => {
@@ -1434,12 +867,12 @@ class AngularSlickgridComponent {
         if (this.groupItemMetadataProvider) {
             this.slickGrid.registerPlugin(this.groupItemMetadataProvider); // register GroupItemMetadataProvider when Grouping is enabled
         }
+        // get any possible Services that user want to register
+        this.registerResources();
         this.extensionService.bindDifferentExtensions();
         this.bindDifferentHooks(this.slickGrid, this.options, 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
         this.sharedService.frozenVisibleColumnId = this.slickGrid.getFrozenColumnId();
-        // get any possible Services that user want to register
-        this.registerResources();
         // initialize the SlickGrid grid
         this.slickGrid.init();
         // initialized the resizer service only after SlickGrid is initialized
@@ -1482,8 +915,7 @@ class AngularSlickgridComponent {
             }
             const datasetLn = this.dataView.getLength() || this._dataset?.length || 0;
             if (datasetLn > 0) {
-                if (!this._isDatasetInitialized &&
-                    (this.options.enableCheckboxSelector || this.options.enableRowSelection || this.options.enableHybridSelection)) {
+                if (!this._isDatasetInitialized && (this.options.enableCheckboxSelector || this.options.enableSelection)) {
                     this.loadRowSelectionPresetWhenExists();
                 }
                 this.loadFilterPresetsWhenDatasetInitialized();
@@ -1550,7 +982,7 @@ class AngularSlickgridComponent {
         if (this.slickGrid &&
             !isSyncGridSelectionEnabled &&
             this.options?.backendServiceApi &&
-            (this.options.enableRowSelection || this.options.enableHybridSelection || this.options.enableCheckboxSelector)) {
+            (this.options.enableSelection || this.options.enableCheckboxSelector)) {
             this.slickGrid.setSelectedRows([]);
         }
         const { pageNumber, pageSize } = pagination;
@@ -1563,7 +995,6 @@ class AngularSlickgridComponent {
             change: { newValues: { pageNumber, pageSize }, type: 'pagination' },
             gridState: this.gridStateService.getCurrentGridState(),
         });
-        this.cd.markForCheck();
     }
     /**
      * When dataset changes, we need to refresh the entire grid UI & possibly resize it as well
@@ -1655,9 +1086,7 @@ class AngularSlickgridComponent {
         if (this.options.enableTranslate) {
             this.extensionService.translateColumnHeaders(undefined, newColumns);
         }
-        else {
-            this.extensionService.renderColumnHeaders(newColumns, true);
-        }
+        this.extensionService.renderColumnHeaders(newColumns, true);
         if (this.options?.enableAutoSizeColumns) {
             this.slickGrid.autosizeColumns();
         }
@@ -1744,10 +1173,9 @@ class AngularSlickgridComponent {
                     this.filterService.bindLocalOnFilter(grid);
                 }
             }
-            // when column are reordered, we need to update the visibleColumn array
-            this._eventHandler.subscribe(grid.onColumnsReordered, (_e, args) => {
+            // when column are reordered, we need to update SharedService flag
+            this._eventHandler.subscribe(grid.onColumnsReordered, () => {
                 this.sharedService.hasColumnsReordered = true;
-                this.sharedService.visibleColumns = args.impactedColumns;
             });
             this._eventHandler.subscribe(grid.onSetOptions, (_e, args) => {
                 // add/remove dark mode CSS class when enabled
@@ -1974,7 +1402,6 @@ class AngularSlickgridComponent {
             this.renderPagination();
             this._isPaginationInitialized = true;
         }
-        this.cd.detectChanges();
     }
     /** Load the Editor Collection asynchronously and replace the "collection" property when Observable resolves */
     loadEditorCollectionAsync(column) {
@@ -1995,43 +1422,13 @@ class AngularSlickgridComponent {
             }
         }
     }
-    insertDynamicPresetColumns(columnId, gridPresetColumns) {
-        if (this._columnDefinitions) {
-            const columnPosition = this._columnDefinitions.findIndex((c) => c.id === columnId);
-            if (columnPosition >= 0) {
-                const dynColumn = this._columnDefinitions[columnPosition];
-                if (dynColumn?.id === columnId && !gridPresetColumns.some((c) => c.id === columnId)) {
-                    columnPosition > 0 ? gridPresetColumns.splice(columnPosition, 0, dynColumn) : gridPresetColumns.unshift(dynColumn);
-                }
-            }
-        }
-    }
     /** Load any possible Columns Grid Presets */
     loadColumnPresetsWhenDatasetInitialized() {
         // if user entered some Columns "presets", we need to reflect them all in the grid
         if (Array.isArray(this.options.presets?.columns) && this.options.presets.columns.length > 0) {
-            const gridPresetColumns = this.gridStateService.getAssociatedGridColumns(this.slickGrid, this.options.presets.columns);
-            if (Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columnDefinitions)) {
-                // make sure that the dynamic columns are included in presets (1.Row Move, 2. Row Selection, 3. Row Detail)
-                if (this.options.enableRowMoveManager) {
-                    const rmmColId = this.options?.rowMoveManager?.columnId ?? '_move';
-                    this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
-                }
-                if (this.options.enableCheckboxSelector) {
-                    const chkColId = this.options?.checkboxSelector?.columnId ?? '_checkbox_selector';
-                    this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
-                }
-                if (this.options.enableRowDetailView) {
-                    const rdvColId = this.options?.rowDetailView?.columnId ?? '_detail_selector';
-                    this.insertDynamicPresetColumns(rdvColId, gridPresetColumns);
-                }
-                // keep copy the original optional `width` properties optionally provided by the user.
-                // We will use this when doing a resize by cell content, if user provided a `width` it won't override it.
-                gridPresetColumns.forEach((col) => (col.originalWidth = col.width));
-                // finally set the new presets columns (including checkbox selector if need be)
-                this.slickGrid.setColumns(gridPresetColumns);
-                this.sharedService.visibleColumns = gridPresetColumns;
-            }
+            // delegate to GridStateService for centralized column arrangement logic
+            // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
+            this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
         }
     }
     /** Load any possible Filters Grid Presets */
@@ -2068,7 +1465,7 @@ class AngularSlickgridComponent {
     loadRowSelectionPresetWhenExists() {
         // if user entered some Row Selections "presets"
         const presets = this.options?.presets;
-        const enableRowSelection = this.options && (this.options.enableCheckboxSelector || this.options.enableRowSelection || this.options.enableHybridSelection);
+        const enableRowSelection = this.options && (this.options.enableCheckboxSelector || this.options.enableSelection);
         if (enableRowSelection &&
             this.slickGrid?.getSelectionModel() &&
             presets?.rowSelection &&
@@ -2112,11 +1509,11 @@ class AngularSlickgridComponent {
         // 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?.pagination &&
             (gridOptions.enablePagination || gridOptions.backendServiceApi) &&
-            (this.forRootConfig.pagination || gridOptions.pagination)) {
+            (this.forRootConfig?.pagination || gridOptions.pagination)) {
             options.pagination.pageSize =
-                gridOptions.pagination?.pageSize ?? this.forRootConfig.pagination?.pageSize ?? GlobalGridOptions.pagination.pageSize;
+                gridOptions.pagination?.pageSize ?? this.forRootConfig?.pagination?.pageSize ?? GlobalGridOptions.pagination.pageSize;
             options.pagination.pageSizes =
-                gridOptions.pagination?.pageSizes ?? this.forRootConfig.pagination?.pageSizes ?? GlobalGridOptions.pagination.pageSizes;
+                gridOptions.pagination?.pageSizes ?? this.forRootConfig?.pagination?.pageSizes ?? GlobalGridOptions.pagination.pageSizes;
         }
         // also make sure to show the header row if user have enabled filtering
         this._hideHeaderRowAfterPageLoad = options.showHeaderRow === false;
@@ -2152,20 +1549,40 @@ class AngularSlickgridComponent {
         // Angular-Slickgrid requires RxJS, so we'll register it as the first resource
         this.registerRxJsResource(new RxJsResource());
         if (this.options.enableRowDetailView) {
-            this.slickRowDetailView = new SlickRowDetailView(this.angularUtilService, this.appRef, this._eventPubSubService, this.elm.nativeElement, this.rxjs);
-            this.slickRowDetailView.create(this.columns, this.options);
-            this.extensionService.addExtensionToList(ExtensionName.rowDetailView, {
-                name: ExtensionName.rowDetailView,
-                instance: this.slickRowDetailView,
-            });
+            const RowDetailClass = this._registeredResources.find((res) => res.pluginName === 'AngularRowDetailView');
+            if (!RowDetailClass) {
+                throw new Error('[Angular-Slickgrid] You enabled the Row Detail View feature but you did not provide the "AngularRowDetailView" class as an external resource.');
+            }
+            if (RowDetailClass) {
+                const rowDetailInstance = new RowDetailClass(this.angularUtilService, this.appRef, this._eventPubSubService, this.elm.nativeElement, this.rxjs);
+                this.slickRowDetailView = rowDetailInstance;
+                rowDetailInstance.create(this.columns, this.options);
+                this.extensionService.addExtensionToList('rowDetailView', {
+                    name: 'rowDetailView',
+                    instance: this.slickRowDetailView,
+                });
+            }
+        }
+    }
+    /** initialized & auto-enable external registered resources, e.g. if user registers `ExcelExportService` then let's auto-enable `enableExcelExport:true` */
+    autoEnableInitializedResources(resource) {
+        if (this.slickGrid && typeof resource.init === 'function') {
+            resource.init(this.slickGrid, this.containerService);
+        }
+        // auto-enable unless the flag was specifically disabled by the end user
+        if ('pluginName' in resource) {
+            const pluginFlagName = PluginFlagMappings.get(resource.pluginName);
+            if (pluginFlagName && this.options[pluginFlagName] !== false) {
+                this.options[pluginFlagName] = true;
+                this.slickGrid?.setOptions({ [pluginFlagName]: true });
+            }
         }
     }
     initializeExternalResources(resources) {
+        PluginFlagMappings.set('AngularRowDetailView', 'enableRowDetailView'); // map the external Row Detail View resource to its flag
         if (Array.isArray(resources)) {
             for (const resource of resources) {
-                if (this.slickGrid && typeof resource.init === 'function') {
-                    resource.init(this.slickGrid, this.containerService);
-                }
+                this.autoEnableInitializedResources(resource);
             }
         }
     }
@@ -2304,74 +1721,95 @@ class AngularSlickgridComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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: "19.2.18", type: AngularSlickgridComponent, isStandalone: false, selector: "angular-slickgrid", inputs: { customDataView: "customDataView", gridId: "gridId", options: "options", paginationOptions: "paginationOptions", columns: "columns", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, outputs: { columnsChange: "columnsChange", onActiveCellChanged: "onActiveCellChanged", onActiveCellPositionChanged: "onActiveCellPositionChanged", onAddNewRow: "onAddNewRow", onAutosizeColumns: "onAutosizeColumns", onBeforeAppendCell: "onBeforeAppendCell", onBeforeCellEditorDestroy: "onBeforeCellEditorDestroy", onBeforeColumnsResize: "onBeforeColumnsResize", onBeforeDestroy: "onBeforeDestroy", onBeforeEditCell: "onBeforeEditCell", onBeforeHeaderCellDestroy: "onBeforeHeaderCellDestroy", onBeforeHeaderRowCellDestroy: "onBeforeHeaderRowCellDestroy", onBeforeFooterRowCellDestroy: "onBeforeFooterRowCellDestroy", onBeforeSetColumns: "onBeforeSetColumns", onBeforeSort: "onBeforeSort", onCellChange: "onCellChange", onCellCssStylesChanged: "onCellCssStylesChanged", onClick: "onClick", onColumnsDrag: "onColumnsDrag", onColumnsReordered: "onColumnsReordered", onColumnsResized: "onColumnsResized", onColumnsResizeDblClick: "onColumnsResizeDblClick", onCompositeEditorChange: "onCompositeEditorChange", onContextMenu: "onContextMenu", onDrag: "onDrag", onDragEnd: "onDragEnd", onDragInit: "onDragInit", onDragStart: "onDragStart", onDragReplaceCells: "onDragReplaceCells", onDblClick: "onDblClick", onFooterContextMenu: "onFooterContextMenu", onFooterRowCellRendered: "onFooterRowCellRendered", onHeaderCellRendered: "onHeaderCellRendered", onFooterClick: "onFooterClick", onHeaderClick: "onHeaderClick", onHeaderContextMenu: "onHeaderContextMenu", onHeaderMouseEnter: "onHeaderMouseEnter", onHeaderMouseLeave: "onHeaderMouseLeave", onHeaderRowCellRendered: "onHeaderRowCellRendered", onHeaderRowMouseEnter: "onHeaderRowMouseEnter", onHeaderRowMouseLeave: "onHeaderRowMouseLeave", onKeyDown: "onKeyDown", onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave", onValidationError: "onValidationError", onViewportChanged: "onViewportChanged", onRendered: "onRendered", onSelectedRowsChanged: "onSelectedRowsChanged", onSetOptions: "onSetOptions", onScroll: "onScroll", onSort: "onSort", onBeforePagingInfoChanged: "onBeforePagingInfoChanged", onGroupExpanded: "onGroupExpanded", onGroupCollapsed: "onGroupCollapsed", onPagingInfoChanged: "onPagingInfoChanged", onRowCountChanged: "onRowCountChanged", onRowsChanged: "onRowsChanged", onRowsOrCountChanged: "onRowsOrCountChanged", onSelectedRowIdsChanged: "onSelectedRowIdsChanged", onSetItemsCalled: "onSetItemsCalled", onAfterMenuShow: "onAfterMenuShow", onBeforeMenuClose: "onBeforeMenuClose", onBeforeMenuShow: "onBeforeMenuShow", onColumnsChanged: "onColumnsChanged", onCommand: "onCommand", onGridMenuColumnsChanged: "onGridMenuColumnsChanged", onMenuClose: "onMenuClose", onCopyCells: "onCopyCells", onCopyCancelled: "onCopyCancelled", onPasteCells: "onPasteCells", onBeforePasteCell: "onBeforePasteCell", onAfterExportToExcel: "onAfterExportToExcel", onBeforeExportToExcel: "onBeforeExportToExcel", onBeforeFilterChange: "onBeforeFilterChange", onBeforeFilterClear: "onBeforeFilterClear", onBeforeSearchChange: "onBeforeSearchChange", onBeforeSortChange: "onBeforeSortChange", onContextMenuClearGrouping: "onContextMenuClearGrouping", onContextMenuCollapseAllGroups: "onContextMenuCollapseAllGroups", onContextMenuExpandAllGroups: "onContextMenuExpandAllGroups", onOptionSelected: "onOptionSelected", onColumnPickerColumnsChanged: "onColumnPickerColumnsChanged", onGridMenuMenuClose: "onGridMenuMenuClose", onGridMenuBeforeMenuShow: "onGridMenuBeforeMenuShow", onGridMenuAfterMenuShow: "onGridMenuAfterMenuShow", onGridMenuClearAllPinning: "onGridMenuClearAllPinning", onGridMenuClearAllFilters: "onGridMenuClearAllFilters", onGridMenuClearAllSorting: "onGridMenuClearAllSorting", onGridMenuCommand: "onGridMenuCommand", onHeaderButtonCommand: "onHeaderButtonCommand", onHeaderMenuCommand: "onHeaderMenuCommand", onHeaderMenuColumnResizeByContent: "onHeaderMenuColumnResizeByContent", onHeaderMenuBeforeMenuShow: "onHeaderMenuBeforeMenuShow", onHeaderMenuAfterMenuShow: "onHeaderMenuAfterMenuShow", onHideColumns: "onHideColumns", onItemsAdded: "onItemsAdded", onItemsDeleted: "onItemsDeleted", onItemsUpdated: "onItemsUpdated", onItemsUpserted: "onItemsUpserted", onFullResizeByContentRequested: "onFullResizeByContentRequested", onGridStateChanged: "onGridStateChanged", onBeforePaginationChange: "onBeforePaginationChange", onPaginationChanged: "onPaginationChanged", onPaginationRefreshed: "onPaginationRefreshed", onPaginationVisibilityChanged: "onPaginationVisibilityChanged", onPaginationSetCursorBased: "onPaginationSetCursorBased", onGridBeforeResize: "onGridBeforeResize", onGridAfterResize: "onGridAfterResize", onBeforeResizeByContent: "onBeforeResizeByContent", onAfterResizeByContent: "onAfterResizeByContent", onSortCleared: "onSortCleared", onFilterChanged: "onFilterChanged", onFilterCleared: "onFilterCleared", onSortChanged: "onSortChanged", onTreeItemToggled: "onTreeItemToggled", onTreeFullToggleEnd: "onTreeFullToggleEnd", onTreeFullToggleStart: "onTreeFullToggleStart", onBeforeGridCreate: "onBeforeGridCreate", onGridCreated: "onGridCreated", onDataviewCreated: "onDataviewCreated", onAngularGridCreated: "onAngularGridCreated", onBeforeGridDestroy: "onBeforeGridDestroy", onAfterGridDestroyed: "onAfterGridDestroyed", onLanguageChange: "onLanguageChange" }, providers: [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\"></div>\n  <ng-container *ngTemplateOutlet=\"slickgridFooter\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], preserveWhitespaces: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AngularSlickgridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'angular-slickgrid', providers: [AngularUtilService, TranslaterService], standalone: false, template: "<div id=\"slickGridContainer-{{ gridId }}\" class=\"gridPane\">\n  <ng-container *ngTemplateOutlet=\"slickgridHeader\"></ng-container>\n  <div attr.id=\"{{ gridId }}\" class=\"slickgrid-container\"></div>\n  <ng-container *ngTemplateOutlet=\"slickgridFooter\"></ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ 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
-            }], options: [{
-                type: Input
-            }], paginationOptions: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], columnsChange: [{
-                type: Output
-            }], dataset: [{
-                type: Input
-            }], datasetHierarchical: [{
-                type: Input
-            }], slickgridHeader: [{
-                type: ContentChild,
-                args: ['slickgridHeader', { static: true }]
-            }], slickgridFooter: [{
-                type: ContentChild,
-                args: ['slickgridFooter', { static: true }]
-            }] } });
-
-class AngularSlickgridModule {
-    static forRoot(config = {}) {
-        return {
-            ngModule: AngularSlickgridModule,
-            providers: [
-                { provide: 'config', useValue: config },
-                { provide: 'externalService', useValue: null },
-                AngularUtilService,
-                ContainerService,
-            ],
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AngularSlickgridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: AngularSlickgridModule, declarations: [AngularSlickgridComponent], imports: [CommonModule, TranslateModule], exports: [AngularSlickgridComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AngularSlickgridModule, imports: [CommonModule, TranslateModule] });
+    static ɵfac = function AngularSlickgridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AngularSlickgridComponent)(i0.ɵɵdirectiveInject(AngularUtilService), i0.ɵɵdirectiveInject(i0.ApplicationRef), i0.ɵɵdirectiveInject(ContainerService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.TranslateService, 8), i0.ɵɵdirectiveInject(TranslaterService, 8), i0.ɵɵdirectiveInject('defaultGridOption', 8), i0.ɵɵdirectiveInject('externalService', 8)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AngularSlickgridComponent, selectors: [["angular-slickgrid"]], contentQueries: function AngularSlickgridComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, _c0, 7)(dirIndex, _c1, 7);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slickgridHeader = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slickgridFooter = _t.first);
+        } }, inputs: { customDataView: "customDataView", gridId: "gridId", options: "options", containerClasses: "containerClasses", paginationOptions: "paginationOptions", columns: "columns", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, outputs: { columnsChange: "columnsChange", onActiveCellChanged: "onActiveCellChanged", onActiveCellPositionChanged: "onActiveCellPositionChanged", onAddNewRow: "onAddNewRow", onAutosizeColumns: "onAutosizeColumns", onBeforeAppendCell: "onBeforeAppendCell", onBeforeCellEditorDestroy: "onBeforeCellEditorDestroy", onBeforeColumnsResize: "onBeforeColumnsResize", onBeforeDestroy: "onBeforeDestroy", onBeforeEditCell: "onBeforeEditCell", onBeforeHeaderCellDestroy: "onBeforeHeaderCellDestroy", onBeforeHeaderRowCellDestroy: "onBeforeHeaderRowCellDestroy", onBeforeFooterRowCellDestroy: "onBeforeFooterRowCellDestroy", onBeforeSetColumns: "onBeforeSetColumns", onBeforeSort: "onBeforeSort", onCellChange: "onCellChange", onCellCssStylesChanged: "onCellCssStylesChanged", onClick: "onClick", onColumnsDrag: "onColumnsDrag", onColumnsReordered: "onColumnsReordered", onColumnsResized: "onColumnsResized", onColumnsResizeDblClick: "onColumnsResizeDblClick", onCompositeEditorChange: "onCompositeEditorChange", onContextMenu: "onContextMenu", onDrag: "onDrag", onDragEnd: "onDragEnd", onDragInit: "onDragInit", onDragStart: "onDragStart", onDragReplaceCells: "onDragReplaceCells", onDblClick: "onDblClick", onFooterContextMenu: "onFooterContextMenu", onFooterRowCellRendered: "onFooterRowCellRendered", onHeaderCellRendered: "onHeaderCellRendered", onFooterClick: "onFooterClick", onHeaderClick: "onHeaderClick", onHeaderContextMenu: "onHeaderContextMenu", onHeaderMouseEnter: "onHeaderMouseEnter", onHeaderMouseLeave: "onHeaderMouseLeave", onHeaderRowCellRendered: "onHeaderRowCellRendered", onHeaderRowMouseEnter: "onHeaderRowMouseEnter", onHeaderRowMouseLeave: "onHeaderRowMouseLeave", onKeyDown: "onKeyDown", onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave", onValidationError: "onValidationError", onViewportChanged: "onViewportChanged", onRendered: "onRendered", onSelectedRowsChanged: "onSelectedRowsChanged", onSetOptions: "onSetOptions", onScroll: "onScroll", onSort: "onSort", onBeforePagingInfoChanged: "onBeforePagingInfoChanged", onGroupExpanded: "onGroupExpanded", onGroupCollapsed: "onGroupCollapsed", onPagingInfoChanged: "onPagingInfoChanged", onRowCountChanged: "onRowCountChanged", onRowsChanged: "onRowsChanged", onRowsOrCountChanged: "onRowsOrCountChanged", onSelectedRowIdsChanged: "onSelectedRowIdsChanged", onSetItemsCalled: "onSetItemsCalled", onAfterMenuShow: "onAfterMenuShow", onBeforeMenuClose: "onBeforeMenuClose", onBeforeMenuShow: "onBeforeMenuShow", onColumnsChanged: "onColumnsChanged", onCommand: "onCommand", onGridMenuColumnsChanged: "onGridMenuColumnsChanged", onMenuClose: "onMenuClose", onCopyCells: "onCopyCells", onCopyCancelled: "onCopyCancelled", onPasteCells: "onPasteCells", onBeforePasteCell: "onBeforePasteCell", onAfterExportToExcel: "onAfterExportToExcel", onBeforeExportToExcel: "onBeforeExportToExcel", onBeforeFilterChange: "onBeforeFilterChange", onBeforeFilterClear: "onBeforeFilterClear", onBeforeSearchChange: "onBeforeSearchChange", onBeforeSortChange: "onBeforeSortChange", onContextMenuClearGrouping: "onContextMenuClearGrouping", onContextMenuCollapseAllGroups: "onContextMenuCollapseAllGroups", onContextMenuExpandAllGroups: "onContextMenuExpandAllGroups", onOptionSelected: "onOptionSelected", onColumnPickerColumnsChanged: "onColumnPickerColumnsChanged", onGridMenuMenuClose: "onGridMenuMenuClose", onGridMenuBeforeMenuShow: "onGridMenuBeforeMenuShow", onGridMenuAfterMenuShow: "onGridMenuAfterMenuShow", onGridMenuClearAllPinning: "onGridMenuClearAllPinning", onGridMenuClearAllFilters: "onGridMenuClearAllFilters", onGridMenuClearAllSorting: "onGridMenuClearAllSorting", onGridMenuCommand: "onGridMenuCommand", onHeaderButtonCommand: "onHeaderButtonCommand", onHeaderMenuCommand: "onHeaderMenuCommand", onHeaderMenuColumnResizeByContent: "onHeaderMenuColumnResizeByContent", onHeaderMenuBeforeMenuShow: "onHeaderMenuBeforeMenuShow", onHeaderMenuAfterMenuShow: "onHeaderMenuAfterMenuShow", onHideColumns: "onHideColumns", onItemsAdded: "onItemsAdded", onItemsDeleted: "onItemsDeleted", onItemsUpdated: "onItemsUpdated", onItemsUpserted: "onItemsUpserted", onFullResizeByContentRequested: "onFullResizeByContentRequested", onGridStateChanged: "onGridStateChanged", onBeforePaginationChange: "onBeforePaginationChange", onPaginationChanged: "onPaginationChanged", onPaginationRefreshed: "onPaginationRefreshed", onPaginationVisibilityChanged: "onPaginationVisibilityChanged", onPaginationSetCursorBased: "onPaginationSetCursorBased", onGridBeforeResize: "onGridBeforeResize", onGridAfterResize: "onGridAfterResize", onBeforeResizeByContent: "onBeforeResizeByContent", onAfterResizeByContent: "onAfterResizeByContent", onSortCleared: "onSortCleared", onFilterChanged: "onFilterChanged", onFilterCleared: "onFilterCleared", onSortChanged: "onSortChanged", onTreeItemToggled: "onTreeItemToggled", onTreeFullToggleEnd: "onTreeFullToggleEnd", onTreeFullToggleStart: "onTreeFullToggleStart", onBeforeGridCreate: "onBeforeGridCreate", onGridCreated: "onGridCreated", onDataviewCreated: "onDataviewCreated", onAngularGridCreated: "onAngularGridCreated", onBeforeGridDestroy: "onBeforeGridDestroy", onAfterGridDestroyed: "onAfterGridDestroyed", onLanguageChange: "onLanguageChange" }, features: [i0.ɵɵProvidersFeature([AngularUtilService, TranslaterService])], decls: 10, vars: 7, consts: [[1, "gridPane", 3, "id"], [4, "ngTemplateOutlet"], [1, "slickgrid-container"]], template: function AngularSlickgridComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtext(0, "\n    ");
+            i0.ɵɵelementStart(1, "div", 0);
+            i0.ɵɵtext(2, "\n      ");
+            i0.ɵɵtemplate(3, AngularSlickgridComponent_ng_container_3_Template, 1, 0, "ng-container", 1);
+            i0.ɵɵtext(4, "\n      ");
+            i0.ɵɵelement(5, "div", 2);
+            i0.ɵɵtext(6, "\n      ");
+            i0.ɵɵtemplate(7, AngularSlickgridComponent_ng_container_7_Template, 1, 0, "ng-container", 1);
+            i0.ɵɵtext(8, "\n    ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(9, "\n  ");
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.containerClasses);
+            i0.ɵɵproperty("id", i0.ɵɵinterpolate1("slickGridContainer-", ctx.gridId));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.slickgridHeader);
+            i0.ɵɵadvance(2);
+            i0.ɵɵattribute("id", ctx.gridId);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.slickgridFooter);
+        } }, dependencies: [NgTemplateOutlet], encapsulation: 2 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AngularSlickgridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TranslateModule],
-                    declarations: [AngularSlickgridComponent],
-                    exports: [AngularSlickgridComponent],
-                }]
-        }] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AngularSlickgridComponent, [{
+        type: Component,
+        args: [{
+                selector: 'angular-slickgrid',
+                template: `
+    <div id="slickGridContainer-{{ gridId }}" class="gridPane" [class]="containerClasses">
+      <ng-container *ngTemplateOutlet="slickgridHeader"></ng-container>
+      <div [attr.id]="gridId" class="slickgrid-container"></div>
+      <ng-container *ngTemplateOutlet="slickgridFooter"></ng-container>
+    </div>
+  `,
+                providers: [AngularUtilService, TranslaterService], // make everything transient (non-singleton)
+                imports: [NgTemplateOutlet],
+            }]
+    }], () => [{ type: AngularUtilService }, { type: i0.ApplicationRef }, { type: ContainerService }, { type: i0.ElementRef }, { type: i1.TranslateService, decorators: [{
+                type: Optional
+            }] }, { type: TranslaterService, decorators: [{
+                type: Optional
+            }] }, { type: undefined, decorators: [{
+                type: Optional
+            }, {
+                type: Inject,
+                args: ['defaultGridOption']
+            }] }, { type: undefined, decorators: [{
+                type: Optional
+            }, {
+                type: Inject,
+                args: ['externalService']
+            }] }], { customDataView: [{
+            type: Input
+        }], gridId: [{
+            type: Input
+        }], options: [{
+            type: Input
+        }], containerClasses: [{
+            type: Input
+        }], paginationOptions: [{
+            type: Input
+        }], columns: [{
+            type: Input
+        }], columnsChange: [{
+            type: Output
+        }], onActiveCellChanged: [{ type: i0.Output, args: ["onActiveCellChanged"] }], onActiveCellPositionChanged: [{ type: i0.Output, args: ["onActiveCellPositionChanged"] }], onAddNewRow: [{ type: i0.Output, args: ["onAddNewRow"] }], onAutosizeColumns: [{ type: i0.Output, args: ["onAutosizeColumns"] }], onBeforeAppendCell: [{ type: i0.Output, args: ["onBeforeAppendCell"] }], onBeforeCellEditorDestroy: [{ type: i0.Output, args: ["onBeforeCellEditorDestroy"] }], onBeforeColumnsResize: [{ type: i0.Output, args: ["onBeforeColumnsResize"] }], onBeforeDestroy: [{ type: i0.Output, args: ["onBeforeDestroy"] }], onBeforeEditCell: [{ type: i0.Output, args: ["onBeforeEditCell"] }], onBeforeHeaderCellDestroy: [{ type: i0.Output, args: ["onBeforeHeaderCellDestroy"] }], onBeforeHeaderRowCellDestroy: [{ type: i0.Output, args: ["onBeforeHeaderRowCellDestroy"] }], onBeforeFooterRowCellDestroy: [{ type: i0.Output, args: ["onBeforeFooterRowCellDestroy"] }], onBeforeSetColumns: [{ type: i0.Output, args: ["onBeforeSetColumns"] }], onBeforeSort: [{ type: i0.Output, args: ["onBeforeSort"] }], onCellChange: [{ type: i0.Output, args: ["onCellChange"] }], onCellCssStylesChanged: [{ type: i0.Output, args: ["onCellCssStylesChanged"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onColumnsDrag: [{ type: i0.Output, args: ["onColumnsDrag"] }], onColumnsReordered: [{ type: i0.Output, args: ["onColumnsReordered"] }], onColumnsResized: [{ type: i0.Output, args: ["onColumnsResized"] }], onColumnsResizeDblClick: [{ type: i0.Output, args: ["onColumnsResizeDblClick"] }], onCompositeEditorChange: [{ type: i0.Output, args: ["onCompositeEditorChange"] }], onContextMenu: [{ type: i0.Output, args: ["onContextMenu"] }], onDrag: [{ type: i0.Output, args: ["onDrag"] }], onDragEnd: [{ type: i0.Output, args: ["onDragEnd"] }], onDragInit: [{ type: i0.Output, args: ["onDragInit"] }], onDragStart: [{ type: i0.Output, args: ["onDragStart"] }], onDragReplaceCells: [{ type: i0.Output, args: ["onDragReplaceCells"] }], onDblClick: [{ type: i0.Output, args: ["onDblClick"] }], onFooterContextMenu: [{ type: i0.Output, args: ["onFooterContextMenu"] }], onFooterRowCellRendered: [{ type: i0.Output, args: ["onFooterRowCellRendered"] }], onHeaderCellRendered: [{ type: i0.Output, args: ["onHeaderCellRendered"] }], onFooterClick: [{ type: i0.Output, args: ["onFooterClick"] }], onHeaderClick: [{ type: i0.Output, args: ["onHeaderClick"] }], onHeaderContextMenu: [{ type: i0.Output, args: ["onHeaderContextMenu"] }], onHeaderMouseEnter: [{ type: i0.Output, args: ["onHeaderMouseEnter"] }], onHeaderMouseLeave: [{ type: i0.Output, args: ["onHeaderMouseLeave"] }], onHeaderRowCellRendered: [{ type: i0.Output, args: ["onHeaderRowCellRendered"] }], onHeaderRowMouseEnter: [{ type: i0.Output, args: ["onHeaderRowMouseEnter"] }], onHeaderRowMouseLeave: [{ type: i0.Output, args: ["onHeaderRowMouseLeave"] }], onKeyDown: [{ type: i0.Output, args: ["onKeyDown"] }], onMouseEnter: [{ type: i0.Output, args: ["onMouseEnter"] }], onMouseLeave: [{ type: i0.Output, args: ["onMouseLeave"] }], onValidationError: [{ type: i0.Output, args: ["onValidationError"] }], onViewportChanged: [{ type: i0.Output, args: ["onViewportChanged"] }], onRendered: [{ type: i0.Output, args: ["onRendered"] }], onSelectedRowsChanged: [{ type: i0.Output, args: ["onSelectedRowsChanged"] }], onSetOptions: [{ type: i0.Output, args: ["onSetOptions"] }], onScroll: [{ type: i0.Output, args: ["onScroll"] }], onSort: [{ type: i0.Output, args: ["onSort"] }], onBeforePagingInfoChanged: [{ type: i0.Output, args: ["onBeforePagingInfoChanged"] }], onGroupExpanded: [{ type: i0.Output, args: ["onGroupExpanded"] }], onGroupCollapsed: [{ type: i0.Output, args: ["onGroupCollapsed"] }], onPagingInfoChanged: [{ type: i0.Output, args: ["onPagingInfoChanged"] }], onRowCountChanged: [{ type: i0.Output, args: ["onRowCountChanged"] }], onRowsChanged: [{ type: i0.Output, args: ["onRowsChanged"] }], onRowsOrCountChanged: [{ type: i0.Output, args: ["onRowsOrCountChanged"] }], onSelectedRowIdsChanged: [{ type: i0.Output, args: ["onSelectedRowIdsChanged"] }], onSetItemsCalled: [{ type: i0.Output, args: ["onSetItemsCalled"] }], onAfterMenuShow: [{ type: i0.Output, args: ["onAfterMenuShow"] }], onBeforeMenuClose: [{ type: i0.Output, args: ["onBeforeMenuClose"] }], onBeforeMenuShow: [{ type: i0.Output, args: ["onBeforeMenuShow"] }], onColumnsChanged: [{ type: i0.Output, args: ["onColumnsChanged"] }], onCommand: [{ type: i0.Output, args: ["onCommand"] }], onGridMenuColumnsChanged: [{ type: i0.Output, args: ["onGridMenuColumnsChanged"] }], onMenuClose: [{ type: i0.Output, args: ["onMenuClose"] }], onCopyCells: [{ type: i0.Output, args: ["onCopyCells"] }], onCopyCancelled: [{ type: i0.Output, args: ["onCopyCancelled"] }], onPasteCells: [{ type: i0.Output, args: ["onPasteCells"] }], onBeforePasteCell: [{ type: i0.Output, args: ["onBeforePasteCell"] }], onAfterExportToExcel: [{ type: i0.Output, args: ["onAfterExportToExcel"] }], onBeforeExportToExcel: [{ type: i0.Output, args: ["onBeforeExportToExcel"] }], onBeforeFilterChange: [{ type: i0.Output, args: ["onBeforeFilterChange"] }], onBeforeFilterClear: [{ type: i0.Output, args: ["onBeforeFilterClear"] }], onBeforeSearchChange: [{ type: i0.Output, args: ["onBeforeSearchChange"] }], onBeforeSortChange: [{ type: i0.Output, args: ["onBeforeSortChange"] }], onContextMenuClearGrouping: [{ type: i0.Output, args: ["onContextMenuClearGrouping"] }], onContextMenuCollapseAllGroups: [{ type: i0.Output, args: ["onContextMenuCollapseAllGroups"] }], onContextMenuExpandAllGroups: [{ type: i0.Output, args: ["onContextMenuExpandAllGroups"] }], onOptionSelected: [{ type: i0.Output, args: ["onOptionSelected"] }], onColumnPickerColumnsChanged: [{ type: i0.Output, args: ["onColumnPickerColumnsChanged"] }], onGridMenuMenuClose: [{ type: i0.Output, args: ["onGridMenuMenuClose"] }], onGridMenuBeforeMenuShow: [{ type: i0.Output, args: ["onGridMenuBeforeMenuShow"] }], onGridMenuAfterMenuShow: [{ type: i0.Output, args: ["onGridMenuAfterMenuShow"] }], onGridMenuClearAllPinning: [{ type: i0.Output, args: ["onGridMenuClearAllPinning"] }], onGridMenuClearAllFilters: [{ type: i0.Output, args: ["onGridMenuClearAllFilters"] }], onGridMenuClearAllSorting: [{ type: i0.Output, args: ["onGridMenuClearAllSorting"] }], onGridMenuCommand: [{ type: i0.Output, args: ["onGridMenuCommand"] }], onHeaderButtonCommand: [{ type: i0.Output, args: ["onHeaderButtonCommand"] }], onHeaderMenuCommand: [{ type: i0.Output, args: ["onHeaderMenuCommand"] }], onHeaderMenuColumnResizeByContent: [{ type: i0.Output, args: ["onHeaderMenuColumnResizeByContent"] }], onHeaderMenuBeforeMenuShow: [{ type: i0.Output, args: ["onHeaderMenuBeforeMenuShow"] }], onHeaderMenuAfterMenuShow: [{ type: i0.Output, args: ["onHeaderMenuAfterMenuShow"] }], onHideColumns: [{ type: i0.Output, args: ["onHideColumns"] }], onItemsAdded: [{ type: i0.Output, args: ["onItemsAdded"] }], onItemsDeleted: [{ type: i0.Output, args: ["onItemsDeleted"] }], onItemsUpdated: [{ type: i0.Output, args: ["onItemsUpdated"] }], onItemsUpserted: [{ type: i0.Output, args: ["onItemsUpserted"] }], onFullResizeByContentRequested: [{ type: i0.Output, args: ["onFullResizeByContentRequested"] }], onGridStateChanged: [{ type: i0.Output, args: ["onGridStateChanged"] }], onBeforePaginationChange: [{ type: i0.Output, args: ["onBeforePaginationChange"] }], onPaginationChanged: [{ type: i0.Output, args: ["onPaginationChanged"] }], onPaginationRefreshed: [{ type: i0.Output, args: ["onPaginationRefreshed"] }], onPaginationVisibilityChanged: [{ type: i0.Output, args: ["onPaginationVisibilityChanged"] }], onPaginationSetCursorBased: [{ type: i0.Output, args: ["onPaginationSetCursorBased"] }], onGridBeforeResize: [{ type: i0.Output, args: ["onGridBeforeResize"] }], onGridAfterResize: [{ type: i0.Output, args: ["onGridAfterResize"] }], onBeforeResizeByContent: [{ type: i0.Output, args: ["onBeforeResizeByContent"] }], onAfterResizeByContent: [{ type: i0.Output, args: ["onAfterResizeByContent"] }], onSortCleared: [{ type: i0.Output, args: ["onSortCleared"] }], onFilterChanged: [{ type: i0.Output, args: ["onFilterChanged"] }], onFilterCleared: [{ type: i0.Output, args: ["onFilterCleared"] }], onSortChanged: [{ type: i0.Output, args: ["onSortChanged"] }], onTreeItemToggled: [{ type: i0.Output, args: ["onTreeItemToggled"] }], onTreeFullToggleEnd: [{ type: i0.Output, args: ["onTreeFullToggleEnd"] }], onTreeFullToggleStart: [{ type: i0.Output, args: ["onTreeFullToggleStart"] }], onBeforeGridCreate: [{ type: i0.Output, args: ["onBeforeGridCreate"] }], onGridCreated: [{ type: i0.Output, args: ["onGridCreated"] }], onDataviewCreated: [{ type: i0.Output, args: ["onDataviewCreated"] }], onAngularGridCreated: [{ type: i0.Output, args: ["onAngularGridCreated"] }], onBeforeGridDestroy: [{ type: i0.Output, args: ["onBeforeGridDestroy"] }], onAfterGridDestroyed: [{ type: i0.Output, args: ["onAfterGridDestroyed"] }], onLanguageChange: [{ type: i0.Output, args: ["onLanguageChange"] }], dataset: [{
+            type: Input
+        }], datasetHierarchical: [{
+            type: Input
+        }], slickgridHeader: [{
+            type: ContentChild,
+            args: ['slickgridHeader', { static: true }]
+        }], slickgridFooter: [{
+            type: ContentChild,
+            args: ['slickgridFooter', { static: true }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AngularSlickgridComponent, { className: "AngularSlickgridComponent", filePath: "library/components/angular-slickgrid.component.ts", lineNumber: 97 }); })();
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AngularSlickgridComponent, AngularSlickgridModule, AngularUtilService, SlickRowDetailView, SlickgridConfig, unsubscribeAllObservables };
+export { AngularSlickgridComponent, AngularUtilService, SlickgridConfig, unsubscribeAllObservables };
 //# sourceMappingURL=angular-slickgrid.mjs.map