@revolist/revogrid 4.0.36 → 4.0.39

package/dist/types/components/revoGrid/revo-grid.d.ts

@@ -528,6 +528,7 @@ export declare class RevoGridComponent {
     viewportProvider: ViewportProvider;
     private themeService;
     private viewport;
+    private isInited;
     private orderService;
     private selectionStoreConnector;
     private scrollingService;
@@ -559,8 +560,17 @@ export declare class RevoGridComponent {
      * Register external VNodes
      */
     registerOutsideVNodes(elements?: VNode[]): void;
-    componentWillRender(): false | Promise<any[]>;
+    private setPlugins;
+    private removePlugins;
     connectedCallback(): void;
-    disconnectedCallback(): void;
+    /**
+     * 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(): void;
+    componentWillRender(): false | Promise<any[]>;
     render(): any;
+    disconnectedCallback(): void;
 }

package/hydrate/index.js

@@ -14092,6 +14092,7 @@ class RevoGridComponent {
         // 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
@@ -14602,30 +14603,11 @@ class RevoGridComponent {
         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,
@@ -14656,12 +14638,43 @@ class RevoGridComponent {
             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);
@@ -14681,11 +14694,15 @@ class RevoGridComponent {
             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');
@@ -14723,7 +14740,7 @@ class RevoGridComponent {
             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 = [
-                hAsync("revogr-header", Object.assign({ key: 'b3c3ccd088d6a01511b07f66f7dc937617a4786d' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({ key: '67b0af56acae99e5b999c0b338a279b076022171' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -14745,11 +14762,15 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: '6c36df93ae796fbfeee95cb5ab789a1f9b0c42f1', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: 'e5cd68158497d79d98ce4f92f1e816b60acbf6ac', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: '3837943944ca3c255083a2fa7fa125291442b98a', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '97e0e9cbd158c398945e0d5c0c43a93422c090f9', class: "main-viewport", onClick: (e) => {
                 if (e.currentTarget === e.target) {
                     this.viewport.clearEdit();
                 }
-            } }, hAsync("div", { key: '9f121f8e4184f38ad0f086eeabb287434dbae101', class: "viewports" }, hAsync("slot", { key: 'e234abc3d5a6b1ddbe1fb1da4e415e754444057d', name: "viewport" }), viewportSections, hAsync("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) }), hAsync(OrderRenderer, { key: '5e6c259216474164247f2120eb9a16786ce03e6f', ref: e => (this.orderService = e) }))), hAsync("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));
+            } }, hAsync("div", { key: '9c77a61499d749aa2e786f593715d8bcacdb3ad0', class: "viewports" }, hAsync("slot", { key: '8af1657ec8ec9b7f56afe957f589d64b55c53bcd', name: "viewport" }), viewportSections, hAsync("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) }), hAsync(OrderRenderer, { key: '6cf863db4b189cf9480d5aca1473832f0ee322b5', ref: e => (this.orderService = e) }))), hAsync("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 {

package/hydrate/index.mjs

@@ -14088,6 +14088,7 @@ class RevoGridComponent {
         // 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
@@ -14598,30 +14599,11 @@ class RevoGridComponent {
         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,
@@ -14652,12 +14634,43 @@ class RevoGridComponent {
             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);
@@ -14677,11 +14690,15 @@ class RevoGridComponent {
             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');
@@ -14719,7 +14736,7 @@ class RevoGridComponent {
             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 = [
-                hAsync("revogr-header", Object.assign({ key: 'b3c3ccd088d6a01511b07f66f7dc937617a4786d' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({ key: '67b0af56acae99e5b999c0b338a279b076022171' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -14741,11 +14758,15 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: '6c36df93ae796fbfeee95cb5ab789a1f9b0c42f1', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: 'e5cd68158497d79d98ce4f92f1e816b60acbf6ac', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: '3837943944ca3c255083a2fa7fa125291442b98a', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '97e0e9cbd158c398945e0d5c0c43a93422c090f9', class: "main-viewport", onClick: (e) => {
                 if (e.currentTarget === e.target) {
                     this.viewport.clearEdit();
                 }
-            } }, hAsync("div", { key: '9f121f8e4184f38ad0f086eeabb287434dbae101', class: "viewports" }, hAsync("slot", { key: 'e234abc3d5a6b1ddbe1fb1da4e415e754444057d', name: "viewport" }), viewportSections, hAsync("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) }), hAsync(OrderRenderer, { key: '5e6c259216474164247f2120eb9a16786ce03e6f', ref: e => (this.orderService = e) }))), hAsync("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));
+            } }, hAsync("div", { key: '9c77a61499d749aa2e786f593715d8bcacdb3ad0', class: "viewports" }, hAsync("slot", { key: '8af1657ec8ec9b7f56afe957f589d64b55c53bcd', name: "viewport" }), viewportSections, hAsync("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) }), hAsync(OrderRenderer, { key: '6cf863db4b189cf9480d5aca1473832f0ee322b5', ref: e => (this.orderService = e) }))), hAsync("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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.0.36",
+  "version": "4.0.39",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",
@@ -70,6 +70,10 @@
       "import": "./standalone/revo-grid.js",
       "types": "./standalone/revo-grid.d.ts"
     },
+    "./standalone/revo-grid.js": {
+      "import": "./standalone/revo-grid.js",
+      "types": "./standalone/revo-grid.d.ts"
+    },
     "./loader": {
       "import": "./loader/index.js",
       "require": "./loader/index.cjs",

package/standalone/revo-grid.js

@@ -3429,6 +3429,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         // 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
@@ -3939,30 +3940,11 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         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,
@@ -3993,12 +3975,43 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
             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);
@@ -4018,11 +4031,15 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
             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');
@@ -4060,7 +4077,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
             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 => {
@@ -4082,11 +4099,15 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         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 this; }
     static get watchers() { return {