@tsparticles/stencil 4.1.3 → 4.2.1

package/dist/collection/components/stencil-particles/stencil-particles.js

@@ -17,8 +17,14 @@ export class StencilParticles {
     async onPropsChange() {
         await this.loadParticles(++this.renderId);
     }
+    async onThemeChange() {
+        var _a, _b;
+        if (!this.container)
+            return;
+        (_b = (_a = this.container).loadTheme) === null || _b === void 0 ? void 0 : _b.call(_a, this.theme);
+    }
     async loadParticles(currentRenderId) {
-        var _a;
+        var _a, _b, _c;
         (_a = this.container) === null || _a === void 0 ? void 0 : _a.destroy();
         if (!this.containerElement) {
             console.warn("[stencil-particles] container element not available yet");
@@ -37,8 +43,8 @@ export class StencilParticles {
                 return;
             }
             // Load particles directly onto the DOM element.
-            // tsParticles will auto-generate a unique internal ID, preventing collisions.
-            const loadParams = Object.assign({ element: this.containerElement }, (this.options ? { options: this.options } : { url: this.url }));
+            // If a container-id is provided, use it so consumers can retrieve the container later.
+            const loadParams = Object.assign(Object.assign({ element: this.containerElement }, (this.containerId ? { id: this.containerId } : {})), (this.options ? { options: this.options } : { url: this.url }));
             container = await tsParticles.load(loadParams);
         }
         catch (error) {
@@ -51,9 +57,13 @@ export class StencilParticles {
             return;
         }
         this.container = container;
+        this.particlesLoaded.emit(container);
+        if (container && this.theme) {
+            (_c = (_b = container).loadTheme) === null || _c === void 0 ? void 0 : _c.call(_b, this.theme);
+        }
     }
     render() {
-        return (h("div", { key: '870e2cc222aed94f8bbfa274dc3c047392ed8b1a', ref: el => {
+        return (h("div", { key: 'f5fe33d147a1a606a75fe0d1ee385bacaf0e0b7d', id: this.containerId, ref: el => {
                 this.containerElement = el;
             }, style: { width: "100%", height: "100%" } }));
     }
@@ -126,9 +136,72 @@ export class StencilParticles {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "containerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container-id"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "particlesLoaded",
+                "name": "particlesLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Container | undefined",
+                    "resolved": "Container",
+                    "references": {
+                        "Container": {
+                            "location": "import",
+                            "path": "@tsparticles/engine",
+                            "id": "../../engine/dist/types/index.d.ts::Container",
+                            "referenceLocation": "Container"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "options",
@@ -139,6 +212,12 @@ export class StencilParticles {
             }, {
                 "propName": "init",
                 "methodName": "onPropsChange"
+            }, {
+                "propName": "containerId",
+                "methodName": "onPropsChange"
+            }, {
+                "propName": "theme",
+                "methodName": "onThemeChange"
             }];
     }
 }