@revolist/revogrid 4.0.37 → 4.0.40

package/dist/esm/revo-grid.entry.js

@@ -3212,6 +3212,7 @@ const RevoGridComponent = class {
         // UUID required to support multiple grids in one page and avoid collision
         this.uuid = null;
         this.viewport = null;
+        this.isInited = false;
         /**
          * Plugins
          * Define plugins collection
@@ -3722,30 +3723,11 @@ const RevoGridComponent = class {
         this.extraElements = [...this.extraElements, ...elements];
     }
     // #endregion
-    componentWillRender() {
-        const event = this.beforegridrender.emit();
-        if (event.defaultPrevented) {
-            return false;
-        }
-        return Promise.all(this.jobsBeforeRender);
-    }
-    connectedCallback() {
-        // #region Setup Providers
-        this.viewportProvider = new ViewportProvider();
-        this.themeService = new ThemeService({
-            rowSize: this.rowSize,
-        });
-        this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
-            realSizeChanged: (k) => this.contentsizechanged.emit(k),
-        });
-        this.columnProvider = new ColumnDataProvider();
-        this.selectionStoreConnector = new SelectionStoreConnector();
-        this.dataProvider = new DataProvider(this.dimensionProvider);
-        // #endregion
-        // generate uuid for this grid
-        this.uuid = `${new Date().getTime()}-rvgrid`;
-        this.registerOutsideVNodes(this.registerVNode);
-        // #region Plugins
+    // #region Plugins
+    setPlugins() {
+        var _a;
+        // remove old plugins if any
+        this.removePlugins();
         // pass data provider to plugins
         const pluginData = {
             data: this.dataProvider,
@@ -3776,12 +3758,43 @@ const RevoGridComponent = class {
             this.internalPlugins.push(new ColumnPlugin(this.element, pluginData));
         }
         // register user plugins
-        if (this.plugins) {
-            this.plugins.forEach(p => {
-                this.internalPlugins.push(new p(this.element, pluginData));
-            });
+        (_a = this.plugins) === null || _a === void 0 ? void 0 : _a.forEach(p => this.internalPlugins.push(new p(this.element, pluginData)));
+    }
+    removePlugins() {
+        this.internalPlugins.forEach(p => p.destroy());
+        this.internalPlugins = [];
+    }
+    // #endregion
+    // if reconnect to dom we need to set up plugins
+    connectedCallback() {
+        if (this.isInited) {
+            this.setPlugins();
         }
+    }
+    /**
+     * Called once just after the component is first connected to the DOM.
+     * Since this method is only called once, it's a good place to load data asynchronously and to setup the state
+     * without triggering extra re-renders.
+     * A promise can be returned, that can be used to wait for the first render().
+     */
+    componentWillLoad() {
+        // #region Setup Providers
+        this.viewportProvider = new ViewportProvider();
+        this.themeService = new ThemeService({
+            rowSize: this.rowSize,
+        });
+        this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
+            realSizeChanged: (k) => this.contentsizechanged.emit(k),
+        });
+        this.columnProvider = new ColumnDataProvider();
+        this.selectionStoreConnector = new SelectionStoreConnector();
+        this.dataProvider = new DataProvider(this.dimensionProvider);
         // #endregion
+        // generate uuid for this grid
+        this.uuid = `rv--${Math.random().toString(36).slice(2, 6)}-${Date.now()}`;
+        this.registerOutsideVNodes(this.registerVNode);
+        // init plugins
+        this.setPlugins();
         // set data
         this.applyStretch(this.stretch);
         this.themeChanged(this.theme, undefined, undefined, true);
@@ -3801,11 +3814,15 @@ const RevoGridComponent = class {
             this.viewportscroll.emit(e);
         });
         this.aftergridinit.emit();
+        // set inited flag for connectedCallback
+        this.isInited = true;
     }
-    disconnectedCallback() {
-        // destroy plugins on element disconnect
-        this.internalPlugins.forEach(p => p.destroy());
-        this.internalPlugins = [];
+    componentWillRender() {
+        const event = this.beforegridrender.emit();
+        if (event.defaultPrevented) {
+            return false;
+        }
+        return Promise.all(this.jobsBeforeRender);
     }
     render() {
         const contentHeight = this.dimensionProvider.stores['rgRow'].store.get('realSize');
@@ -3843,7 +3860,7 @@ const RevoGridComponent = class {
             const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
             // Column headers
             const dataViews = [
-                h("revogr-header", Object.assign({ key: 'b3c3ccd088d6a01511b07f66f7dc937617a4786d' }, headerProperties, { slot: HEADER_SLOT })),
+                h("revogr-header", Object.assign({ key: '67b0af56acae99e5b999c0b338a279b076022171' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -3865,11 +3882,15 @@ const RevoGridComponent = class {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (h(Host, { key: '6c36df93ae796fbfeee95cb5ab789a1f9b0c42f1', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("div", { key: 'e5cd68158497d79d98ce4f92f1e816b60acbf6ac', class: "main-viewport", onClick: (e) => {
+        return (h(Host, { key: '3837943944ca3c255083a2fa7fa125291442b98a', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("div", { key: '97e0e9cbd158c398945e0d5c0c43a93422c090f9', class: "main-viewport", onClick: (e) => {
                 if (e.currentTarget === e.target) {
                     this.viewport.clearEdit();
                 }
-            } }, h("div", { key: '9f121f8e4184f38ad0f086eeabb287434dbae101', class: "viewports" }, h("slot", { key: 'e234abc3d5a6b1ddbe1fb1da4e415e754444057d', name: "viewport" }), viewportSections, h("revogr-scroll-virtual", { key: 'c7b915c6117a822cea1fadce5111cd665f5a43d9', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h(OrderRenderer, { key: '5e6c259216474164247f2120eb9a16786ce03e6f', ref: e => (this.orderService = e) }))), h("revogr-scroll-virtual", { key: 'ce8e46b6e7913e798b8d1bd094a4c61a54b73a0a', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+            } }, h("div", { key: '9c77a61499d749aa2e786f593715d8bcacdb3ad0', class: "viewports" }, h("slot", { key: '8af1657ec8ec9b7f56afe957f589d64b55c53bcd', name: "viewport" }), viewportSections, h("revogr-scroll-virtual", { key: '1947f0706d5e9e552822a44a55504ae82c603ce7', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h(OrderRenderer, { key: '6cf863db4b189cf9480d5aca1473832f0ee322b5', ref: e => (this.orderService = e) }))), h("revogr-scroll-virtual", { key: '542cc17558cc0cfa1def201870e0cac8f83ebd36', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+    }
+    disconnectedCallback() {
+        // Remove all plugins, to avoid memory leaks and unexpected behaviour when the component is removed
+        this.removePlugins();
     }
     get element() { return getElement(this); }
     static get watchers() { return {