@tsparticles/stencil 4.1.3 → 4.2.1

package/dist/cjs/{index-Bw7g3biq.js → index-BIoj1BEO.js}

@@ -9,7 +9,7 @@ const generatedAttribute = "generated", defaultCompositeValue = "source-over", r
     b: 0,
     c: 0,
     d: 1,
-}, randomColorValue = "random", double = 2, doublePI = Math.PI * double, defaultFps = 60, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultZoom = 1;
+}, randomColorValue = "random", double = 2, doublePI = Math.PI * double, defaultFps = 60, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, maxNits = 400, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultZoom = 1;
 
 exports.MoveDirection = void 0;
 (function (MoveDirection) {
@@ -76,11 +76,6 @@ class Vector3d {
     div(n) {
         return Vector3d.create(this.x / n, this.y / n, this.z / n);
     }
-    divTo(n) {
-        this.x /= n;
-        this.y /= n;
-        this.z /= n;
-    }
     getLengthSq() {
         return this.x ** squareExp + this.y ** squareExp;
     }
@@ -262,27 +257,6 @@ function calcExactPositionOrRandomFromSize(data) {
     };
 }
 
-var AnimationMode;
-(function (AnimationMode) {
-    AnimationMode["auto"] = "auto";
-    AnimationMode["increase"] = "increase";
-    AnimationMode["decrease"] = "decrease";
-    AnimationMode["random"] = "random";
-})(AnimationMode || (AnimationMode = {}));
-
-var AnimationStatus;
-(function (AnimationStatus) {
-    AnimationStatus["increasing"] = "increasing";
-    AnimationStatus["decreasing"] = "decreasing";
-})(AnimationStatus || (AnimationStatus = {}));
-
-var DestroyType;
-(function (DestroyType) {
-    DestroyType["none"] = "none";
-    DestroyType["max"] = "max";
-    DestroyType["min"] = "min";
-})(DestroyType || (DestroyType = {}));
-
 exports.OutModeDirection = void 0;
 (function (OutModeDirection) {
     OutModeDirection["bottom"] = "bottom";
@@ -297,66 +271,6 @@ exports.PixelMode = void 0;
     PixelMode["percent"] = "percent";
 })(exports.PixelMode || (exports.PixelMode = {}));
 
-var StartValueType;
-(function (StartValueType) {
-    StartValueType["max"] = "max";
-    StartValueType["min"] = "min";
-    StartValueType["random"] = "random";
-})(StartValueType || (StartValueType = {}));
-
-function memoize(fn, options) {
-    const cache = new Map(), keyFn = options?.keyFn, stableStringify = (obj, seen = new WeakSet()) => {
-        if (obj === null) {
-            return "null";
-        }
-        const t = typeof obj;
-        if (t === "undefined") {
-            return "undefined";
-        }
-        if (t === "number" || t === "boolean" || t === "string") {
-            return JSON.stringify(obj);
-        }
-        if (t === "function") {
-            try {
-                const fn = obj;
-                return fn.toString();
-            }
-            catch {
-                return '"[Function]"';
-            }
-        }
-        if (t === "symbol") {
-            try {
-                return obj.toString();
-            }
-            catch {
-                return '"[Symbol]"';
-            }
-        }
-        if (Array.isArray(obj)) {
-            return `[${obj.map(i => stableStringify(i, seen)).join(",")}]`;
-        }
-        if (seen.has(obj)) {
-            return '"[Circular]"';
-        }
-        seen.add(obj);
-        const keys = Object.keys(obj).sort();
-        return `{${keys.map(k => `${JSON.stringify(k)}:${stableStringify(obj[k], seen)}`).join(",")}}`;
-    }, defaultKeyer = (args) => stableStringify(args), makeKey = (args) => (keyFn ? keyFn(args) : defaultKeyer(args));
-    return (...args) => {
-        const key = makeKey(args), now = Date.now(), entry = cache.get(key);
-        if (entry !== undefined) {
-            {
-                cache.delete(key);
-                cache.set(key, { value: entry.value, ts: entry.ts });
-                return entry.value;
-            }
-        }
-        const result = fn(...args);
-        cache.set(key, { value: result, ts: now });
-        return result;
-    };
-}
 function hasMatchMedia() {
     return typeof matchMedia !== "undefined";
 }
@@ -378,11 +292,8 @@ function safeMutationObserver(callback) {
 function isInArray(value, array) {
     return value === array || (isArray(array) && array.includes(value));
 }
-function arrayRandomIndex(array) {
-    return Math.floor(getRandom() * array.length);
-}
 function itemFromArray(array, index, useIndex = true) {
-    return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
+    return array[index !== undefined && useIndex ? index % array.length : Math.floor(getRandom() * array.length)];
 }
 function deepExtend(destination, ...sources) {
     for (const source of sources) {
@@ -483,30 +394,34 @@ function cloneStyle(style) {
     }
     return clonedStyle;
 }
-function computeFullScreenStyle(zIndex) {
-    const fullScreenStyle = safeDocument().createElement("div").style, radix = 10, style = {
-        width: "100%",
-        height: "100%",
-        margin: "0",
-        padding: "0",
-        borderWidth: "0",
-        position: "fixed",
-        zIndex: zIndex.toString(radix),
-        "z-index": zIndex.toString(radix),
-        top: "0",
-        left: "0",
-        "pointer-events": "none",
-    };
-    for (const key in style) {
-        const value = style[key];
-        if (value === undefined) {
-            continue;
+let _cachedZIndex, _cachedStyle;
+function getFullScreenStyle(zIndex) {
+    if (_cachedZIndex !== zIndex || !_cachedStyle) {
+        _cachedZIndex = zIndex;
+        const fullScreenStyle = safeDocument().createElement("div").style, radix = 10, style = {
+            width: "100%",
+            height: "100%",
+            margin: "0",
+            padding: "0",
+            borderWidth: "0",
+            position: "fixed",
+            zIndex: zIndex.toString(radix),
+            "z-index": zIndex.toString(radix),
+            top: "0",
+            left: "0",
+            "pointer-events": "none",
+        };
+        for (const key in style) {
+            const value = style[key];
+            if (value === undefined) {
+                continue;
+            }
+            fullScreenStyle.setProperty(key, value);
         }
-        fullScreenStyle.setProperty(key, value);
+        _cachedStyle = fullScreenStyle;
     }
-    return fullScreenStyle;
+    return _cachedStyle;
 }
-const getFullScreenStyle = memoize(computeFullScreenStyle);
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
@@ -833,7 +748,7 @@ class Engine {
         return this.#domArray;
     }
     get version() {
-        return "4.1.3";
+        return "4.2.1";
     }
     addEventListener(type, listener) {
         this.#eventDispatcher.addEventListener(type, listener);
@@ -868,7 +783,7 @@ class Engine {
         if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
             domSourceElement = params.element;
         }
-        const { Container } = await Promise.resolve().then(function () { return require('./Container-0BqPfTsu.js'); }), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
+        const { Container } = await Promise.resolve().then(function () { return require('./Container-BIhHE6mu.js'); }), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
             dispatchCallback: (eventType, args) => {
                 this.dispatchEvent(eventType, args);
             },
@@ -930,6 +845,14 @@ var RotateDirection;
     RotateDirection["random"] = "random";
 })(RotateDirection || (RotateDirection = {}));
 
+var AnimationMode;
+(function (AnimationMode) {
+    AnimationMode["auto"] = "auto";
+    AnimationMode["increase"] = "increase";
+    AnimationMode["decrease"] = "decrease";
+    AnimationMode["random"] = "random";
+})(AnimationMode || (AnimationMode = {}));
+
 exports.LimitMode = void 0;
 (function (LimitMode) {
     LimitMode["delete"] = "delete";
@@ -951,6 +874,13 @@ exports.AlterType = void 0;
     AlterType["enlighten"] = "enlighten";
 })(exports.AlterType || (exports.AlterType = {}));
 
+var DestroyType;
+(function (DestroyType) {
+    DestroyType["none"] = "none";
+    DestroyType["max"] = "max";
+    DestroyType["min"] = "min";
+})(DestroyType || (DestroyType = {}));
+
 var GradientType;
 (function (GradientType) {
     GradientType["linear"] = "linear";
@@ -965,51 +895,18 @@ exports.ParticleOutType = void 0;
     ParticleOutType["outside"] = "outside";
 })(exports.ParticleOutType || (exports.ParticleOutType = {}));
 
-var EasingType;
-(function (EasingType) {
-    EasingType["easeInBack"] = "ease-in-back";
-    EasingType["easeInBounce"] = "ease-in-bounce";
-    EasingType["easeInCirc"] = "ease-in-circ";
-    EasingType["easeInCubic"] = "ease-in-cubic";
-    EasingType["easeInElastic"] = "ease-in-elastic";
-    EasingType["easeInExpo"] = "ease-in-expo";
-    EasingType["easeInGaussian"] = "ease-in-gaussian";
-    EasingType["easeInLinear"] = "ease-in-linear";
-    EasingType["easeInQuad"] = "ease-in-quad";
-    EasingType["easeInQuart"] = "ease-in-quart";
-    EasingType["easeInQuint"] = "ease-in-quint";
-    EasingType["easeInSigmoid"] = "ease-in-sigmoid";
-    EasingType["easeInSine"] = "ease-in-sine";
-    EasingType["easeInSmoothstep"] = "ease-in-smoothstep";
-    EasingType["easeOutBack"] = "ease-out-back";
-    EasingType["easeOutBounce"] = "ease-out-bounce";
-    EasingType["easeOutCirc"] = "ease-out-circ";
-    EasingType["easeOutCubic"] = "ease-out-cubic";
-    EasingType["easeOutElastic"] = "ease-out-elastic";
-    EasingType["easeOutExpo"] = "ease-out-expo";
-    EasingType["easeOutGaussian"] = "ease-out-gaussian";
-    EasingType["easeOutLinear"] = "ease-out-linear";
-    EasingType["easeOutQuad"] = "ease-out-quad";
-    EasingType["easeOutQuart"] = "ease-out-quart";
-    EasingType["easeOutQuint"] = "ease-out-quint";
-    EasingType["easeOutSigmoid"] = "ease-out-sigmoid";
-    EasingType["easeOutSine"] = "ease-out-sine";
-    EasingType["easeOutSmoothstep"] = "ease-out-smoothstep";
-    EasingType["easeInOutBack"] = "ease-in-out-back";
-    EasingType["easeInOutBounce"] = "ease-in-out-bounce";
-    EasingType["easeInOutCirc"] = "ease-in-out-circ";
-    EasingType["easeInOutCubic"] = "ease-in-out-cubic";
-    EasingType["easeInOutElastic"] = "ease-in-out-elastic";
-    EasingType["easeInOutExpo"] = "ease-in-out-expo";
-    EasingType["easeInOutGaussian"] = "ease-in-out-gaussian";
-    EasingType["easeInOutLinear"] = "ease-in-out-linear";
-    EasingType["easeInOutQuad"] = "ease-in-out-quad";
-    EasingType["easeInOutQuart"] = "ease-in-out-quart";
-    EasingType["easeInOutQuint"] = "ease-in-out-quint";
-    EasingType["easeInOutSigmoid"] = "ease-in-out-sigmoid";
-    EasingType["easeInOutSine"] = "ease-in-out-sine";
-    EasingType["easeInOutSmoothstep"] = "ease-in-out-smoothstep";
-})(EasingType || (EasingType = {}));
+var StartValueType;
+(function (StartValueType) {
+    StartValueType["max"] = "max";
+    StartValueType["min"] = "min";
+    StartValueType["random"] = "random";
+})(StartValueType || (StartValueType = {}));
+
+var AnimationStatus;
+(function (AnimationStatus) {
+    AnimationStatus["increasing"] = "increasing";
+    AnimationStatus["decreasing"] = "decreasing";
+})(AnimationStatus || (AnimationStatus = {}));
 
 const tsParticles = initEngine();
 
@@ -1079,7 +976,6 @@ exports.degToRad = degToRad;
 exports.deleteCount = deleteCount;
 exports.double = double;
 exports.doublePI = doublePI;
-exports.empty = empty;
 exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
 exports.generatedAttribute = generatedAttribute;
 exports.getFullScreenStyle = getFullScreenStyle;
@@ -1110,6 +1006,7 @@ exports.lFactor = lFactor;
 exports.lMax = lMax;
 exports.lMin = lMin;
 exports.manageListener = manageListener;
+exports.maxNits = maxNits;
 exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.minCount = minCount;
 exports.minFpsLimit = minFpsLimit;

package/dist/cjs/{index-B2lLThjb.js → index-BjS63OiI.js}

@@ -84,6 +84,7 @@ var registerHost = (hostElement, cmpMeta) => {
   hostElement.__stencil__getHostRef = () => ref;
   return ref;
 };
+var isMemberInElement = (elm, memberName) => memberName in elm;
 var consoleError = (e, el) => (0, console.error)(e, el);
 
 // src/client/client-load-module.ts
@@ -291,6 +292,25 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
+var getElement = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
+};
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -300,6 +320,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
   if (oldValue === newValue) {
     return;
   }
+  let isProp = isMemberInElement(elm, memberName);
   memberName.toLowerCase();
   if (memberName === "style") {
     {
@@ -326,7 +347,70 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     if (newValue) {
       queueRefAttachment(newValue, elm);
     }
-  } else ;
+  } else if (memberName[0] === "a" && memberName.startsWith("attr:")) {
+    const propName = memberName.slice(5);
+    let attrName;
+    {
+      const hostRef = getHostRef(elm);
+      if (hostRef && hostRef.$cmpMeta$ && hostRef.$cmpMeta$.$members$) {
+        const memberMeta = hostRef.$cmpMeta$.$members$[propName];
+        if (memberMeta && memberMeta[1]) {
+          attrName = memberMeta[1];
+        }
+      }
+    }
+    if (!attrName) {
+      attrName = propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(attrName) === "") {
+        elm.removeAttribute(attrName);
+      }
+    } else {
+      elm.setAttribute(attrName, newValue === true ? "" : newValue);
+    }
+    return;
+  } else if (memberName[0] === "p" && memberName.startsWith("prop:")) {
+    const propName = memberName.slice(5);
+    try {
+      elm[propName] = newValue;
+    } catch (e) {
+    }
+    return;
+  } else {
+    const isComplex = isComplexType(newValue);
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+      try {
+        if (!elm.tagName.includes("-")) {
+          const n = newValue == null ? "" : newValue;
+          if (memberName === "list") {
+            isProp = false;
+          } else if (oldValue == null || elm[memberName] !== n) {
+            if (typeof elm.__lookupSetter__(memberName) === "function") {
+              elm[memberName] = n;
+            } else {
+              elm.setAttribute(memberName, n);
+            }
+          }
+        } else if (elm[memberName] !== newValue) {
+          elm[memberName] = newValue;
+        }
+      } catch (e) {
+      }
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
+        {
+          elm.removeAttribute(memberName);
+        }
+      }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      {
+        elm.setAttribute(memberName, newValue);
+      }
+    }
+  }
 };
 
 // src/runtime/vdom/update-element.ts
@@ -341,7 +425,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
           elm,
           memberName,
           oldVnodeAttrs[memberName],
-          void 0);
+          void 0,
+          isSvgMode2,
+          newVnode.$flags$);
       }
     }
   }
@@ -350,7 +436,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
       elm,
       memberName,
       oldVnodeAttrs[memberName],
-      newVnodeAttrs[memberName]);
+      newVnodeAttrs[memberName],
+      isSvgMode2,
+      newVnode.$flags$);
   }
 };
 function sortedAttrNames(attrNames) {
@@ -363,6 +451,7 @@ function sortedAttrNames(attrNames) {
   );
 }
 var hostTagName;
+var isSvgMode = false;
 var refCallbacksToRemove = [];
 var refCallbacksToAttach = [];
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
@@ -378,7 +467,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       newVNode2.$tag$
     );
     {
-      updateElement(null, newVNode2);
+      updateElement(null, newVNode2, isSvgMode);
     }
     if (newVNode2.$children$) {
       const appendTarget = newVNode2.$tag$ === "template" ? elm.content : elm;
@@ -524,7 +613,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const newChildren = newVNode2.$children$;
   {
     {
-      updateElement(oldVNode, newVNode2);
+      updateElement(oldVNode, newVNode2, isSvgMode);
     }
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
@@ -1223,6 +1312,7 @@ function transformTag(tag) {
 }
 
 exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bw7g3biq.js');
+var index = require('./index-BIoj1BEO.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-B2lLThjb.js');
+var index = require('./index-BjS63OiI.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["stencil-particles.cjs",[[0,"stencil-particles",{"options":[16],"url":[1],"init":[16]},null,{"options":[{"onPropsChange":0}],"url":[{"onPropsChange":0}],"init":[{"onPropsChange":0}]}]]]], options);
+  return index.bootstrapLazy([["stencil-particles.cjs",[[0,"stencil-particles",{"options":[16],"url":[1],"init":[16],"containerId":[1,"container-id"],"theme":[1]},null,{"options":[{"onPropsChange":0}],"url":[{"onPropsChange":0}],"init":[{"onPropsChange":0}],"containerId":[{"onPropsChange":0}],"theme":[{"onThemeChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/stencil-particles.cjs.entry.js

@@ -1,11 +1,12 @@
 'use strict';
 
-var index = require('./index-B2lLThjb.js');
-var index$1 = require('./index-Bw7g3biq.js');
+var index = require('./index-BjS63OiI.js');
+var index$1 = require('./index-BIoj1BEO.js');
 
 const StencilParticles = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.particlesLoaded = index.createEvent(this, "particlesLoaded");
         this.renderId = 0;
     }
     async componentDidLoad() {
@@ -20,8 +21,14 @@ const StencilParticles = class {
     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");
@@ -40,8 +47,8 @@ const StencilParticles = class {
                 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 index$1.tsParticles.load(loadParams);
         }
         catch (error) {
@@ -54,9 +61,13 @@ const StencilParticles = class {
             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 (index.h("div", { key: '870e2cc222aed94f8bbfa274dc3c047392ed8b1a', ref: el => {
+        return (index.h("div", { key: 'f5fe33d147a1a606a75fe0d1ee385bacaf0e0b7d', id: this.containerId, ref: el => {
                 this.containerElement = el;
             }, style: { width: "100%", height: "100%" } }));
     }
@@ -69,6 +80,12 @@ const StencilParticles = class {
             }],
         "init": [{
                 "onPropsChange": 0
+            }],
+        "containerId": [{
+                "onPropsChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
             }]
     }; }
 };

package/dist/cjs/tsparticlesstencil.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2lLThjb.js');
+var index = require('./index-BjS63OiI.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["stencil-particles.cjs",[[0,"stencil-particles",{"options":[16],"url":[1],"init":[16]},null,{"options":[{"onPropsChange":0}],"url":[{"onPropsChange":0}],"init":[{"onPropsChange":0}]}]]]], options);
+  return index.bootstrapLazy([["stencil-particles.cjs",[[0,"stencil-particles",{"options":[16],"url":[1],"init":[16],"containerId":[1,"container-id"],"theme":[1]},null,{"options":[{"onPropsChange":0}],"url":[{"onPropsChange":0}],"init":[{"onPropsChange":0}],"containerId":[{"onPropsChange":0}],"theme":[{"onThemeChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;