angular-slickgrid 6.2.2 → 6.3.0

package/fesm2022/angular-slickgrid.mjs

@@ -24,35 +24,62 @@ class AngularUtilService {
     constructor(vcr) {
         this.vcr = vcr;
     }
-    createAngularComponent(component) {
+    /**
+     * Dynamically create an Angular component, user could also provide optional arguments for target, data & createComponent options
+     * @param {Component} component
+     * @param {HTMLElement} [targetElement]
+     * @param {*} [data]
+     * @param {CreateComponentOption} [createCompOptions]
+     * @returns
+     */
+    createAngularComponent(component, targetElement, data, createCompOptions) {
         // Create a component reference from the component
-        const componentRef = this.vcr.createComponent(component);
+        const componentRef = this.vcr.createComponent(component, createCompOptions);
+        // user could provide data to assign to the component instance
+        if (componentRef?.instance && data) {
+            Object.assign(componentRef.instance, data);
+            // NOTE: detectChanges() MUST be doene 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;
+        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()
         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
+            if (targetElement && domElem) {
+                targetElement.innerHTML = domElem.innerHTML;
+            }
         }
         return { componentRef, domElement: domElem };
     }
-    createAngularComponentAppendToDom(component, targetElement, clearTargetContent = false) {
-        const componentOutput = this.createAngularComponent(component);
+    /**
+     * Dynamically create an Angular component and append it to the DOM unless a target element is provided,
+     * user could also provide other optional arguments for data & createComponent options.
+     * @param {Component} component
+     * @param {HTMLElement} [targetElement]
+     * @param {*} [data]
+     * @param {CreateComponentOption} [createCompOptions]
+     * @returns
+     */
+    createAngularComponentAppendToDom(component, targetElement, data, createCompOptions) {
+        const componentOutput = this.createAngularComponent(component, targetElement, data, createCompOptions);
         // Append DOM element to the HTML element specified
-        if (targetElement?.appendChild) {
-            if (clearTargetContent && targetElement.innerHTML) {
-                targetElement.innerHTML = '';
-            }
-            targetElement.appendChild(componentOutput.domElement);
+        if (targetElement?.replaceChildren) {
+            targetElement.replaceChildren(componentOutput.domElement);
         }
         else {
             document.body.appendChild(componentOutput.domElement); // when no target provided, we'll simply add it to the HTML Body
         }
         return componentOutput;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AngularUtilService, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AngularUtilService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: AngularUtilService, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: AngularUtilService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AngularUtilService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: AngularUtilService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
 
@@ -74,10 +101,10 @@ class ContainerService {
             this.dependencies.push({ key, instance });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ContainerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ContainerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: ContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ContainerService, decorators: [{
             type: Injectable
         }] });
 
@@ -113,10 +140,10 @@ class TranslaterService {
     translate(translationKey) {
         return this.translateService?.instant?.(translationKey || ' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TranslaterService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TranslaterService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: TranslaterService, deps: [{ token: i1.TranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: TranslaterService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: TranslaterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: TranslaterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.TranslateService, decorators: [{
                     type: Optional
@@ -332,24 +359,22 @@ class SlickRowDetailView extends SlickRowDetailView$1 {
     /** Render (or re-render) the View Component (Row Detail) */
     renderPreloadView() {
         const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
-        if (containerElements?.length >= 0) {
-            this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[containerElements.length - 1], true);
+        if (this._preloadComponent && containerElements?.length >= 0) {
+            this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[containerElements.length - 1]);
         }
     }
     /** Render (or re-render) the View Component (Row Detail) */
     renderViewModel(item) {
         const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
-        if (containerElements?.length > 0) {
-            const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[containerElements.length - 1], true);
-            if (componentOutput && componentOutput.componentRef && componentOutput.componentRef.instance) {
-                // pass a few properties to the Row Detail template component
-                Object.assign(componentOutput.componentRef.instance, {
-                    model: item,
-                    addon: this,
-                    grid: this._grid,
-                    dataView: this.dataView,
-                    parent: this.rowDetailViewOptions?.parent,
-                });
+        if (this._viewComponent && containerElements?.length > 0) {
+            const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[containerElements.length - 1], {
+                model: item,
+                addon: this,
+                grid: this._grid,
+                dataView: this.dataView,
+                parent: this.rowDetailViewOptions?.parent,
+            });
+            if (componentOutput?.componentRef) {
                 const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
                 if (viewObj) {
                     viewObj.componentRef = componentOutput.componentRef;
@@ -1958,15 +1983,15 @@ class AngularSlickgridComponent {
             currentEditor.renderDomElement(newCollection);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AngularSlickgridComponent, deps: [{ token: AngularUtilService }, { token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: ContainerService }, { token: i0.ElementRef }, { token: i1.TranslateService, optional: true }, { token: TranslaterService, optional: true }, { token: 'config' }, { token: 'externalService' }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: AngularSlickgridComponent, selector: "angular-slickgrid", inputs: { customDataView: "customDataView", gridId: "gridId", gridOptions: "gridOptions", paginationOptions: "paginationOptions", columnDefinitions: "columnDefinitions", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, outputs: { columnDefinitionsChange: "columnDefinitionsChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", 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: "16.2.8", type: AngularSlickgridComponent, selector: "angular-slickgrid", inputs: { customDataView: "customDataView", gridId: "gridId", gridOptions: "gridOptions", paginationOptions: "paginationOptions", columnDefinitions: "columnDefinitions", dataset: "dataset", datasetHierarchical: "datasetHierarchical" }, outputs: { columnDefinitionsChange: "columnDefinitionsChange" }, providers: [
             // make everything transient (non-singleton)
             AngularUtilService,
             ApplicationRef,
             TranslaterService,
         ], ngImport: i0, template: "<div id=\"slickGridContainer-{{gridId}}\" class=\"gridPane\">\n  <div attr.id='{{gridId}}' class=\"slickgrid-container\" style=\"width: 100%\">\n  </div>\n</div>" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AngularSlickgridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: AngularSlickgridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'angular-slickgrid', providers: [
                         // make everything transient (non-singleton)
@@ -2014,13 +2039,13 @@ class AngularSlickgridModule {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AngularSlickgridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: AngularSlickgridModule, declarations: [AngularSlickgridComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: AngularSlickgridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: AngularSlickgridModule, declarations: [AngularSlickgridComponent], imports: [CommonModule,
             TranslateModule], exports: [AngularSlickgridComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AngularSlickgridModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: AngularSlickgridModule, imports: [CommonModule,
             TranslateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: AngularSlickgridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: AngularSlickgridModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [