@slickgrid-universal/angular-row-detail-plugin 0.0.1 → 10.0.0-beta.0

package/LICENSE

@@ -0,0 +1,25 @@
+Copyright (c) 2020-present, Ghislain B. 
+https://github.com/ghiscoding/slickgrid-universal
+
+and the original author of SlickGrid 
+Michael Leibman, michael{dot}leibman{at}gmail{dot}com
+http://github.com/mleibman/slickgrid
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,45 +1,19 @@
-# @slickgrid-universal/angular-row-detail-plugin
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
+[![npm](https://img.shields.io/npm/v/@slickgrid-universal/angular-row-detail-plugin.svg)](https://www.npmjs.com/package/@slickgrid-universal/angular-row-detail-plugin)
+[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/angular-row-detail-plugin)](https://www.npmjs.com/package/@slickgrid-universal/angular-row-detail-plugin)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@slickgrid-universal/angular-row-detail-plugin?color=success&label=gzip)](https://bundlephobia.com/result?p=@slickgrid-universal/angular-row-detail-plugin)
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+[![Actions Status](https://github.com/ghiscoding/slickgrid-universal/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/slickgrid-universal/actions)
+[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
+[![Vitest](https://img.shields.io/badge/tested%20with-vitest-fcc72b.svg?logo=vitest)](https://vitest.dev/)
+[![codecov](https://codecov.io/gh/ghiscoding/slickgrid-universal/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/slickgrid-universal)
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+## Angular-Slickgrid Row Detail plugin
+#### @slickgrid-universal/angular-row-detail-plugin
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+Angular-Slickgrid Row Detail plugin
 
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@slickgrid-universal/angular-row-detail-plugin`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+### Installation
+Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

package/dist/angularSlickRowDetailView.d.ts

@@ -0,0 +1,80 @@
+import type { ApplicationRef, ComponentRef, Type, ViewContainerRef } from '@angular/core';
+import { SlickEventData, type EventSubscription, type OnBeforeRowDetailToggleArgs, type OnRowBackOrOutOfViewportRangeArgs, type RowDetailViewOption, type RxJsFacade, type SelectionModel, type SlickGrid } from '@slickgrid-universal/common';
+import type { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
+import { type AngularUtilService, type GridOption } from 'angular-slickgrid';
+import { Observable, type Subject } from 'rxjs';
+import type { RowDetailView } from './interfaces';
+export interface CreatedView {
+    id: string | number;
+    dataContext: any;
+    componentRef?: ComponentRef<any>;
+    rendered?: boolean;
+}
+export declare class AngularSlickRowDetailView extends UniversalSlickRowDetailView {
+    protected readonly angularUtilService: AngularUtilService;
+    protected readonly appRef: ApplicationRef;
+    protected readonly eventPubSubService: EventPubSubService;
+    protected readonly gridContainerElement: HTMLDivElement;
+    protected rxjs?: RxJsFacade | undefined;
+    static readonly pluginName = "AngularSlickRowDetailView";
+    rowDetailContainer: ViewContainerRef;
+    protected _preloadComponent: Type<object> | undefined;
+    protected _preloadCompRef?: ComponentRef<any>;
+    protected _views: CreatedView[];
+    protected _viewComponent: Type<object>;
+    protected _subscriptions: EventSubscription[];
+    protected _userProcessFn: (item: any) => Promise<any> | Observable<any> | Subject<any>;
+    constructor(angularUtilService: AngularUtilService, appRef: ApplicationRef, eventPubSubService: EventPubSubService, gridContainerElement: HTMLDivElement, rxjs?: RxJsFacade | undefined);
+    get addonOptions(): RowDetailViewOption;
+    protected get datasetIdPropName(): string;
+    /** Getter for the Grid Options pulled through the Grid Object */
+    get gridOptions(): GridOption;
+    get rowDetailViewOptions(): RowDetailView | undefined;
+    addRxJsResource(rxjs: RxJsFacade): void;
+    /** Dispose of the RowDetailView Extension */
+    dispose(): void;
+    /** Dispose of all the opened Row Detail Panels Angular View Components */
+    disposeAllViewComponents(): void;
+    /** Get the instance of the SlickGrid addon (control or plugin). */
+    getAddonInstance(): AngularSlickRowDetailView | null;
+    init(grid: SlickGrid): void;
+    /**
+     * 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?: SelectionModel): AngularSlickRowDetailView;
+    /** Redraw (re-render) all the expanded row detail View Components */
+    redrawAllViewComponents(forceRedraw?: boolean): void;
+    /** Redraw the necessary View Component */
+    redrawViewComponent(createdView: CreatedView): void;
+    /** Render (or re-render) the View Component (Row Detail) */
+    renderPreloadView(): void;
+    /** Render (or re-render) the View Component (Row Detail) */
+    renderViewModel(item: any): CreatedView | undefined;
+    protected disposeViewByItem(item: any, removeFromArray?: boolean): void;
+    protected disposeView(expandedView: CreatedView): CreatedView | void;
+    /**
+     * 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
+     */
+    protected notifyTemplate(item: any): void;
+    /**
+     * On Processing, we will notify the plugin with the new item detail once backend server call completes
+     * @param item
+     */
+    protected onProcessing(item: any): Promise<void>;
+    /**
+     * 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
+     */
+    protected handleOnBeforeRowDetailToggle(_e: SlickEventData<OnBeforeRowDetailToggleArgs>, args: {
+        grid: SlickGrid;
+        item: any;
+    }): void;
+    /** When Row comes back to Viewport Range, we need to redraw the View */
+    protected handleOnRowBackToViewportRange(_e: SlickEventData<OnRowBackOrOutOfViewportRangeArgs>, args: OnRowBackOrOutOfViewportRangeArgs): void;
+}

package/dist/angularSlickRowDetailView.js

@@ -0,0 +1,307 @@
+import { addToArrayWhenNotExists, castObservableToPromise, createDomElement, SlickEventData, SlickHybridSelectionModel, unsubscribeAll, } from '@slickgrid-universal/common';
+import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
+import { Observable } from 'rxjs';
+const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
+const PRELOAD_CONTAINER_PREFIX = 'container_loading';
+export class AngularSlickRowDetailView extends UniversalSlickRowDetailView {
+    angularUtilService;
+    appRef;
+    eventPubSubService;
+    gridContainerElement;
+    rxjs;
+    static pluginName = 'AngularSlickRowDetailView';
+    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 selectionType = this.gridOptions.selectionOptions?.selectionType || 'row';
+                const selectActiveRow = this.gridOptions.selectionOptions?.selectActiveRow ?? true;
+                rowSelectionPlugin = new SlickHybridSelectionModel({ ...this.gridOptions.selectionOptions, selectionType, selectActiveRow });
+                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.enableSelection || 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);
+        }
+    }
+}
+//# sourceMappingURL=angularSlickRowDetailView.js.map

package/dist/angularSlickRowDetailView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"angularSlickRowDetailView.js","sourceRoot":"","sources":["../src/angularSlickRowDetailView.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ApplicationRef, ComponentRef, Type, ViewContainerRef } from '@angular/core';\nimport {\n  addToArrayWhenNotExists,\n  castObservableToPromise,\n  createDomElement,\n  SlickEventData,\n  SlickHybridSelectionModel,\n  unsubscribeAll,\n  type EventSubscription,\n  type OnBeforeRowDetailToggleArgs,\n  type OnRowBackOrOutOfViewportRangeArgs,\n  type RowDetailViewOption,\n  type RxJsFacade,\n  type SelectionModel,\n  type SlickGrid,\n} from '@slickgrid-universal/common';\nimport type { EventPubSubService } from '@slickgrid-universal/event-pub-sub';\nimport { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';\nimport { type AngularUtilService, type GridOption } from 'angular-slickgrid';\nimport { Observable, type Subject } from 'rxjs';\nimport type { RowDetailView } from './interfaces';\n\nconst ROW_DETAIL_CONTAINER_PREFIX = 'container_';\nconst PRELOAD_CONTAINER_PREFIX = 'container_loading';\n\nexport interface CreatedView {\n  id: string | number;\n  dataContext: any;\n  componentRef?: ComponentRef<any>;\n  rendered?: boolean;\n}\n\nexport class AngularSlickRowDetailView extends UniversalSlickRowDetailView {\n  static readonly pluginName = 'AngularSlickRowDetailView';\n  rowDetailContainer!: ViewContainerRef;\n  protected _preloadComponent: Type<object> | undefined;\n  protected _preloadCompRef?: ComponentRef<any>;\n  protected _views: CreatedView[] = [];\n  protected _viewComponent!: Type<object>;\n  protected _subscriptions: EventSubscription[] = [];\n  protected _userProcessFn!: (item: any) => Promise<any> | Observable<any> | Subject<any>;\n\n  constructor(\n    protected readonly angularUtilService: AngularUtilService,\n    protected readonly appRef: ApplicationRef,\n    protected readonly eventPubSubService: EventPubSubService,\n    protected readonly gridContainerElement: HTMLDivElement,\n    protected rxjs?: RxJsFacade | undefined\n  ) {\n    super(eventPubSubService);\n  }\n\n  get addonOptions(): RowDetailViewOption {\n    return this.getOptions();\n  }\n\n  protected get datasetIdPropName(): string {\n    return this.gridOptions.datasetIdPropertyName || 'id';\n  }\n\n  /** Getter for the Grid Options pulled through the Grid Object */\n  get gridOptions(): GridOption {\n    return (this._grid?.getOptions() || {}) as GridOption;\n  }\n\n  get rowDetailViewOptions(): RowDetailView | undefined {\n    return this.gridOptions.rowDetailView;\n  }\n\n  addRxJsResource(rxjs: RxJsFacade): void {\n    this.rxjs = rxjs;\n  }\n\n  /** Dispose of the RowDetailView Extension */\n  dispose(): void {\n    this.disposeAllViewComponents();\n    this._subscriptions = unsubscribeAll(this._subscriptions); // also unsubscribe all RxJS subscriptions\n    super.dispose();\n  }\n\n  /** Dispose of all the opened Row Detail Panels Angular View Components */\n  disposeAllViewComponents(): void {\n    do {\n      const view = this._views.pop();\n      if (view) {\n        this.disposeView(view);\n      }\n    } while (this._views.length > 0);\n  }\n\n  /** Get the instance of the SlickGrid addon (control or plugin). */\n  getAddonInstance(): AngularSlickRowDetailView | null {\n    return this;\n  }\n\n  init(grid: SlickGrid): void {\n    this._grid = grid;\n    super.init(grid);\n    this.register(grid.getSelectionModel());\n  }\n\n  /**\n   * Create the plugin before the Grid creation, else it will behave oddly.\n   * Mostly because the column definitions might change after the grid creation\n   */\n  register(rowSelectionPlugin?: SelectionModel): AngularSlickRowDetailView {\n    if (typeof this.gridOptions.rowDetailView?.process === 'function') {\n      // we need to keep the user \"process\" method and replace it with our own execution method\n      // we do this because when we get the item detail, we need to call \"onAsyncResponse.notify\" for the plugin to work\n      this._userProcessFn = this.gridOptions.rowDetailView.process as (item: any) => Promise<any>; // keep user's process method\n      this.addonOptions.process = (item) => this.onProcessing(item); // replace process method & run our internal one\n    } else {\n      throw new Error('[Angular-Slickgrid] You need to provide a \"process\" function for the Row Detail Extension to work properly');\n    }\n\n    if (this._grid && this.gridOptions?.rowDetailView) {\n      // load the Preload & RowDetail Templates (could be straight HTML or Angular View/ViewModel)\n      // when those are Angular View/ViewModel, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)\n      if (!this.gridOptions.rowDetailView.preTemplate) {\n        this._preloadComponent = this.gridOptions.rowDetailView.preloadComponent;\n        this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` });\n      }\n      if (!this.gridOptions.rowDetailView.postTemplate) {\n        this._viewComponent = this.gridOptions.rowDetailView.viewComponent;\n        this.addonOptions.postTemplate = (itemDetail: any) =>\n          createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` });\n      }\n\n      // this also requires the Row Selection Model to be registered as well\n      if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {\n        const selectionType = this.gridOptions.selectionOptions?.selectionType || 'row';\n        const selectActiveRow = this.gridOptions.selectionOptions?.selectActiveRow ?? true;\n        rowSelectionPlugin = new SlickHybridSelectionModel({ ...this.gridOptions.selectionOptions, selectionType, selectActiveRow });\n        this._grid.setSelectionModel(rowSelectionPlugin);\n      }\n\n      // hook all events\n      if (this._grid && this.rowDetailViewOptions) {\n        if (this.rowDetailViewOptions.onExtensionRegistered) {\n          this.rowDetailViewOptions.onExtensionRegistered(this);\n        }\n\n        this.eventHandler.subscribe(this.onAsyncResponse, (event, args) => {\n          if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncResponse === 'function') {\n            this.rowDetailViewOptions.onAsyncResponse(event, args);\n          }\n        });\n\n        this.eventHandler.subscribe(this.onAsyncEndUpdate, (e, args) => {\n          // destroy preload if exists\n          this._preloadCompRef?.destroy();\n\n          // triggers after backend called \"onAsyncResponse.notify()\"\n          // because of the preload destroy above, we need a small delay to make sure the DOM element is ready to render the Row Detail\n          queueMicrotask(() => {\n            this.renderViewModel(args?.item);\n\n            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncEndUpdate === 'function') {\n              this.rowDetailViewOptions.onAsyncEndUpdate(e, args);\n            }\n          });\n        });\n\n        this.eventHandler.subscribe(\n          this.onAfterRowDetailToggle,\n          (e: any, args: { grid: SlickGrid; item: any; expandedRows: Array<number | string> }) => {\n            // display preload template & re-render all the other Detail Views after toggling\n            // the preload View will eventually go away once the data gets loaded after the \"onAsyncEndUpdate\" event\n            this.renderPreloadView();\n\n            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAfterRowDetailToggle === 'function') {\n              this.rowDetailViewOptions.onAfterRowDetailToggle(e, args);\n            }\n          }\n        );\n\n        this.eventHandler.subscribe(this.onBeforeRowDetailToggle, (e, args) => {\n          // before toggling row detail, we need to create View Component if it doesn't exist\n          this.handleOnBeforeRowDetailToggle(e, args);\n\n          if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onBeforeRowDetailToggle === 'function') {\n            return this.rowDetailViewOptions.onBeforeRowDetailToggle(e, args);\n          }\n          return true;\n        });\n\n        this.eventHandler.subscribe(this.onRowBackToViewportRange, (e, args) => {\n          // when row is back to viewport range, we will re-render the View Component(s)\n          this.handleOnRowBackToViewportRange(e, args);\n\n          if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowBackToViewportRange === 'function') {\n            this.rowDetailViewOptions.onRowBackToViewportRange(e, args);\n          }\n        });\n\n        this._eventHandler.subscribe(this.onBeforeRowOutOfViewportRange, (event, args) => {\n          if (typeof this.rowDetailViewOptions?.onBeforeRowOutOfViewportRange === 'function') {\n            this.rowDetailViewOptions.onBeforeRowOutOfViewportRange(event, args);\n          }\n          this.disposeViewByItem(args.item);\n        });\n\n        this.eventHandler.subscribe(this.onRowOutOfViewportRange, (e, args) => {\n          if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowOutOfViewportRange === 'function') {\n            this.rowDetailViewOptions.onRowOutOfViewportRange(e, args);\n          }\n        });\n\n        // --\n        // hook some events needed by the Plugin itself\n\n        // we need to redraw the open detail views if we change column position (column reorder)\n        this.eventHandler.subscribe(this._grid.onColumnsReordered, this.redrawAllViewComponents.bind(this, false));\n\n        // on row selection changed, we also need to redraw\n        if (this.gridOptions.enableSelection || this.gridOptions.enableCheckboxSelector) {\n          this.eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this, false));\n        }\n\n        // on sort, all row detail are collapsed so we can dispose of all the Views as well\n        this.eventHandler.subscribe(this._grid.onSort, this.disposeAllViewComponents.bind(this));\n\n        // redraw all Views whenever certain events are triggered\n        this._subscriptions.push(\n          this.eventPubSubService?.subscribe(\n            ['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'],\n            this.redrawAllViewComponents.bind(this, false)\n          ),\n          this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () =>\n            setTimeout(() => this.redrawAllViewComponents())\n          )\n        );\n      }\n    }\n    return this;\n  }\n\n  /** Redraw (re-render) all the expanded row detail View Components */\n  redrawAllViewComponents(forceRedraw = false): void {\n    this.resetRenderedRows();\n    this._views.forEach((view) => {\n      if (!view.rendered || forceRedraw) {\n        forceRedraw && view.componentRef?.destroy();\n        this.redrawViewComponent(view);\n      }\n    });\n  }\n\n  /** Redraw the necessary View Component */\n  redrawViewComponent(createdView: CreatedView): void {\n    const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${createdView.id}`);\n    if (containerElement) {\n      this.renderViewModel(createdView.dataContext);\n    }\n  }\n\n  /** Render (or re-render) the View Component (Row Detail) */\n  renderPreloadView(): void {\n    const containerElement = this.gridContainerElement.querySelector(`.${PRELOAD_CONTAINER_PREFIX}`);\n    if (this._preloadComponent && containerElement) {\n      const preloadComp = this.angularUtilService.createAngularComponentAppendToDom(\n        this._preloadComponent,\n        containerElement,\n        {},\n        { sanitizer: this._grid.sanitizeHtmlString }\n      );\n      this._preloadCompRef = preloadComp.componentRef;\n    }\n  }\n\n  /** Render (or re-render) the View Component (Row Detail) */\n  renderViewModel(item: any): CreatedView | undefined {\n    const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);\n    if (this._viewComponent && containerElement) {\n      // render row detail\n      const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(\n        this._viewComponent,\n        containerElement,\n        {\n          model: item,\n          addon: this,\n          grid: this._grid,\n          dataView: this.dataView,\n          parentRef: this.rowDetailViewOptions?.parentRef,\n        },\n        {\n          sanitizer: this._grid.sanitizeHtmlString,\n        }\n      );\n\n      if (componentOutput?.componentRef) {\n        const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]);\n        if (viewObj) {\n          viewObj.componentRef = componentOutput.componentRef;\n          viewObj.rendered = true;\n        }\n        return viewObj;\n      }\n    }\n    return undefined;\n  }\n\n  // --\n  // protected functions\n  // ------------------\n\n  protected disposeViewByItem(item: any, removeFromArray = false): void {\n    const foundViewIndex = this._views.findIndex((view: CreatedView) => view.id === item[this.datasetIdPropName]);\n    if (foundViewIndex >= 0) {\n      this.disposeView(this._views[foundViewIndex]);\n      if (removeFromArray) {\n        this._views.splice(foundViewIndex, 1);\n      }\n    }\n  }\n\n  protected disposeView(expandedView: CreatedView): CreatedView | void {\n    expandedView.rendered = false;\n    const compRef = expandedView?.componentRef;\n    if (compRef) {\n      this.appRef.detachView(compRef.hostView);\n      if (typeof compRef?.destroy === 'function') {\n        compRef.destroy();\n      }\n      return expandedView;\n    }\n  }\n\n  /**\n   * notify the onAsyncResponse with the \"args.item\" (required property)\n   * the plugin will then use item to populate the row detail panel with the \"postTemplate\"\n   * @param item\n   */\n  protected notifyTemplate(item: any): void {\n    this.onAsyncResponse.notify({ item }, new SlickEventData(), this);\n  }\n\n  /**\n   * On Processing, we will notify the plugin with the new item detail once backend server call completes\n   * @param item\n   */\n  protected async onProcessing(item: any): Promise<void> {\n    if (item && typeof this._userProcessFn === 'function') {\n      let awaitedItemDetail: any;\n      const userProcessFn = this._userProcessFn(item);\n\n      // wait for the \"userProcessFn\", once resolved we will save it into the \"collection\"\n      const response: any | any[] = await userProcessFn;\n\n      if (this.datasetIdPropName in response) {\n        awaitedItemDetail = response; // from Promise\n      } else if ((response && response instanceof Observable) || response instanceof Promise) {\n        awaitedItemDetail = await castObservableToPromise(this.rxjs as RxJsFacade, response); // from Angular-http-client\n      }\n\n      if (!awaitedItemDetail || !(this.datasetIdPropName in awaitedItemDetail)) {\n        throw new Error(\n          '[Angular-Slickgrid] could not process the Row Detail, you must make sure that your \"process\" callback ' +\n            `returns an item object that has an \"${this.datasetIdPropName}\" property`\n        );\n      }\n\n      // notify the plugin with the new item details\n      this.notifyTemplate(awaitedItemDetail || {});\n    }\n  }\n\n  /**\n   * Just before the row get expanded or collapsed we will do the following\n   * First determine if the row is expanding or collapsing,\n   * if it's expanding we will add it to our View Components reference array if we don't already have it\n   * or if it's collapsing we will remove it from our View Components reference array\n   */\n  protected handleOnBeforeRowDetailToggle(_e: SlickEventData<OnBeforeRowDetailToggleArgs>, args: { grid: SlickGrid; item: any }): void {\n    // expanding\n    if (args?.item?.__collapsed) {\n      // expanding row detail\n      const viewInfo: CreatedView = {\n        id: args.item[this.datasetIdPropName],\n        dataContext: args.item,\n        rendered: false,\n      };\n      addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName);\n    } else {\n      // collapsing, so dispose of the View/Component\n      this.disposeViewByItem(args.item, true);\n    }\n  }\n\n  /** When Row comes back to Viewport Range, we need to redraw the View */\n  protected handleOnRowBackToViewportRange(\n    _e: SlickEventData<OnRowBackOrOutOfViewportRangeArgs>,\n    args: OnRowBackOrOutOfViewportRangeArgs\n  ): void {\n    const viewModel = this._views.find((x) => x.id === args.rowId);\n    if (viewModel && !viewModel.rendered) {\n      this.redrawViewComponent(viewModel);\n    }\n  }\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './angularSlickRowDetailView';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './angularSlickRowDetailView';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './angularSlickRowDetailView';\n"]}

package/dist/interfaces.d.ts

@@ -0,0 +1,13 @@
+import type { Type } from '@angular/core';
+import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
+export interface RowDetailView extends UniversalRowDetailView {
+    /**
+     * Optionally pass your Parent Component reference to your Child Component (row detail component).
+     * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR
+     */
+    parentRef?: any;
+    /** View Component of the preload template (typically a spinner) which shows after opening on the row detail but before the row detail is ready */
+    preloadComponent?: Type<object>;
+    /** View Component that will be loaded in the row detail after the async function completed */
+    viewComponent: Type<object>;
+}

package/dist/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/dist/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../src/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import type { Type } from '@angular/core';\nimport type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';\n\nexport interface RowDetailView extends UniversalRowDetailView {\n  /**\n   * Optionally pass your Parent Component reference to your Child Component (row detail component).\n   * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR\n   */\n  parentRef?: any;\n\n  /** View Component of the preload template (typically a spinner) which shows after opening on the row detail but before the row detail is ready */\n  preloadComponent?: Type<object>;\n\n  /** View Component that will be loaded in the row detail after the async function completed */\n  viewComponent: Type<object>;\n}\n"]}

package/package.json

@@ -1,10 +1,42 @@
 {
   "name": "@slickgrid-universal/angular-row-detail-plugin",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @slickgrid-universal/angular-row-detail-plugin",
-  "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+  "version": "10.0.0-beta.0",
+  "description": "Angular Row Detail Plugin for Angular-SlickGrid",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "/dist",
+    "/src"
+  ],
+  "license": "MIT",
+  "author": "Ghislain B.",
+  "homepage": "https://github.com/ghiscoding/slickgrid-universal",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ghiscoding/slickgrid-universal.git",
+    "directory": "packages/angular-row-detail-plugin"
+  },
+  "bugs": {
+    "url": "https://github.com/ghiscoding/slickgrid-universal/issues"
+  },
+  "dependencies": {
+    "@ngx-translate/core": "^17.0.0",
+    "@slickgrid-universal/common": "10.0.0-beta.0",
+    "@slickgrid-universal/event-pub-sub": "10.0.0-beta.0",
+    "@slickgrid-universal/row-detail-view-plugin": "10.0.0-beta.0",
+    "angular-slickgrid": "10.0.0-beta.0",
+    "rxjs": "^7.8.2"
+  },
+  "gitHead": "9ee3b4ce76e171dd3375f1e68e232e315364600e"
 }

package/src/angularSlickRowDetailView.ts

@@ -0,0 +1,400 @@
+import type { ApplicationRef, ComponentRef, Type, ViewContainerRef } from '@angular/core';
+import {
+  addToArrayWhenNotExists,
+  castObservableToPromise,
+  createDomElement,
+  SlickEventData,
+  SlickHybridSelectionModel,
+  unsubscribeAll,
+  type EventSubscription,
+  type OnBeforeRowDetailToggleArgs,
+  type OnRowBackOrOutOfViewportRangeArgs,
+  type RowDetailViewOption,
+  type RxJsFacade,
+  type SelectionModel,
+  type SlickGrid,
+} from '@slickgrid-universal/common';
+import type { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
+import { type AngularUtilService, type GridOption } from 'angular-slickgrid';
+import { Observable, type Subject } from 'rxjs';
+import type { RowDetailView } from './interfaces';
+
+const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
+const PRELOAD_CONTAINER_PREFIX = 'container_loading';
+
+export interface CreatedView {
+  id: string | number;
+  dataContext: any;
+  componentRef?: ComponentRef<any>;
+  rendered?: boolean;
+}
+
+export class AngularSlickRowDetailView extends UniversalSlickRowDetailView {
+  static readonly pluginName = 'AngularSlickRowDetailView';
+  rowDetailContainer!: ViewContainerRef;
+  protected _preloadComponent: Type<object> | undefined;
+  protected _preloadCompRef?: ComponentRef<any>;
+  protected _views: CreatedView[] = [];
+  protected _viewComponent!: Type<object>;
+  protected _subscriptions: EventSubscription[] = [];
+  protected _userProcessFn!: (item: any) => Promise<any> | Observable<any> | Subject<any>;
+
+  constructor(
+    protected readonly angularUtilService: AngularUtilService,
+    protected readonly appRef: ApplicationRef,
+    protected readonly eventPubSubService: EventPubSubService,
+    protected readonly gridContainerElement: HTMLDivElement,
+    protected rxjs?: RxJsFacade | undefined
+  ) {
+    super(eventPubSubService);
+  }
+
+  get addonOptions(): RowDetailViewOption {
+    return this.getOptions();
+  }
+
+  protected get datasetIdPropName(): string {
+    return this.gridOptions.datasetIdPropertyName || 'id';
+  }
+
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return (this._grid?.getOptions() || {}) as GridOption;
+  }
+
+  get rowDetailViewOptions(): RowDetailView | undefined {
+    return this.gridOptions.rowDetailView;
+  }
+
+  addRxJsResource(rxjs: RxJsFacade): void {
+    this.rxjs = rxjs;
+  }
+
+  /** Dispose of the RowDetailView Extension */
+  dispose(): void {
+    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(): void {
+    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(): AngularSlickRowDetailView | null {
+    return this;
+  }
+
+  init(grid: SlickGrid): void {
+    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?: SelectionModel): AngularSlickRowDetailView {
+    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 as (item: any) => Promise<any>; // 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: any) =>
+          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 selectionType = this.gridOptions.selectionOptions?.selectionType || 'row';
+        const selectActiveRow = this.gridOptions.selectionOptions?.selectActiveRow ?? true;
+        rowSelectionPlugin = new SlickHybridSelectionModel({ ...this.gridOptions.selectionOptions, selectionType, selectActiveRow });
+        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: any, args: { grid: SlickGrid; item: any; expandedRows: Array<number | string> }) => {
+            // 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.enableSelection || 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): void {
+    this.resetRenderedRows();
+    this._views.forEach((view) => {
+      if (!view.rendered || forceRedraw) {
+        forceRedraw && view.componentRef?.destroy();
+        this.redrawViewComponent(view);
+      }
+    });
+  }
+
+  /** Redraw the necessary View Component */
+  redrawViewComponent(createdView: CreatedView): void {
+    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(): void {
+    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: any): CreatedView | undefined {
+    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
+  // ------------------
+
+  protected disposeViewByItem(item: any, removeFromArray = false): void {
+    const foundViewIndex = this._views.findIndex((view: CreatedView) => view.id === item[this.datasetIdPropName]);
+    if (foundViewIndex >= 0) {
+      this.disposeView(this._views[foundViewIndex]);
+      if (removeFromArray) {
+        this._views.splice(foundViewIndex, 1);
+      }
+    }
+  }
+
+  protected disposeView(expandedView: CreatedView): CreatedView | void {
+    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
+   */
+  protected notifyTemplate(item: any): void {
+    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
+   */
+  protected async onProcessing(item: any): Promise<void> {
+    if (item && typeof this._userProcessFn === 'function') {
+      let awaitedItemDetail: any;
+      const userProcessFn = this._userProcessFn(item);
+
+      // wait for the "userProcessFn", once resolved we will save it into the "collection"
+      const response: any | any[] = 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 as RxJsFacade, 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
+   */
+  protected handleOnBeforeRowDetailToggle(_e: SlickEventData<OnBeforeRowDetailToggleArgs>, args: { grid: SlickGrid; item: any }): void {
+    // expanding
+    if (args?.item?.__collapsed) {
+      // expanding row detail
+      const viewInfo: CreatedView = {
+        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 */
+  protected handleOnRowBackToViewportRange(
+    _e: SlickEventData<OnRowBackOrOutOfViewportRangeArgs>,
+    args: OnRowBackOrOutOfViewportRangeArgs
+  ): void {
+    const viewModel = this._views.find((x) => x.id === args.rowId);
+    if (viewModel && !viewModel.rendered) {
+      this.redrawViewComponent(viewModel);
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './angularSlickRowDetailView';

package/src/interfaces.ts

@@ -0,0 +1,16 @@
+import type { Type } from '@angular/core';
+import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
+
+export interface RowDetailView extends UniversalRowDetailView {
+  /**
+   * Optionally pass your Parent Component reference to your Child Component (row detail component).
+   * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR
+   */
+  parentRef?: any;
+
+  /** View Component of the preload template (typically a spinner) which shows after opening on the row detail but before the row detail is ready */
+  preloadComponent?: Type<object>;
+
+  /** View Component that will be loaded in the row detail after the async function completed */
+  viewComponent: Type<object>;
+}