@tsparticles/plugin-responsive 4.0.0-alpha.4

package/48.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 48.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_responsive=this.webpackChunk_tsparticles_plugin_responsive||[]).push([[48],{48(s,e,i){i.d(e,{ResponsivePlugin:()=>a});var n,t=i(303);!function(s){s.screen="screen",s.canvas="canvas"}(n||(n={}));class o{constructor(){this.maxWidth=1/0,this.options={},this.mode=n.canvas}load(s){(0,t.isNull)(s)||((0,t.isNull)(s.maxWidth)||(this.maxWidth=s.maxWidth),(0,t.isNull)(s.mode)||(s.mode===n.screen?this.mode=n.screen:this.mode=n.canvas),(0,t.isNull)(s.options)||(this.options=(0,t.deepExtend)({},s.options)))}}class a{constructor(){this.id="responsive"}async getPlugin(s){const{ResponsivePluginInstance:e}=await i.e(740).then(i.bind(i,740));return new e(s)}loadOptions(s,e,i){if(!this.needsPlugin(e)&&!this.needsPlugin(i))return;if(e.setResponsive=(s,i,t)=>{e.load(t);const o=e.responsive?.find((e=>e.mode===n.screen?e.maxWidth>screen.availWidth:e.maxWidth*i>s));return e.load(o?.options),o?.maxWidth},e.responsive??=[],void 0!==i?.responsive)for(const s of i.responsive){const i=new o;s&&i.load(s),e.responsive.push(i)}e.responsive.sort(((s,e)=>s.maxWidth-e.maxWidth))}needsPlugin(s){return!!s?.responsive?.length}}}}]);

package/48.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Responsive Plugin v4.0.0-alpha.4 by Matteo Bruni */

package/740.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 740.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_responsive=this.webpackChunk_tsparticles_plugin_responsive||[]).push([[740],{740(s,t,i){i.d(t,{ResponsivePluginInstance:()=>n});class n{constructor(s){this._container=s}updateActualOptions(){const s=this._container;s.actualOptions.responsive=[];const t=s.actualOptions.setResponsive?.(s.canvas.size.width,s.retina.pixelRatio,s.options);return s.responsiveMaxWidth!==t&&(s.responsiveMaxWidth=t,!0)}}}}]);

package/740.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Responsive Plugin v4.0.0-alpha.4 by Matteo Bruni */

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Responsive Plugin
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/plugin-responsive/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-responsive)
+[![npmjs](https://badge.fury.io/js/@tsparticles/plugin-responsive.svg)](https://www.npmjs.com/package/@tsparticles/plugin-responsive)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/plugin-responsive)](https://www.npmjs.com/package/@tsparticles/plugin-responsive) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/tsparticles/tsparticles) plugin for handling responsive feature.
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The CDN/Vanilla version JS has one required file in vanilla configuration:
+
+Including the `tsparticles.plugin.responsive.min.js` file will export the function to load the plugin:
+
+```javascript
+loadResponsivePlugin;
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the plugin like this:
+
+```javascript
+(async () => {
+  await loadResponsivePlugin(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      /* options */
+    },
+  });
+})();
+```
+
+### ESM / CommonJS
+
+This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
+
+```shell
+$ npm install @tsparticles/plugin-responsive
+```
+
+or
+
+```shell
+$ yarn add @tsparticles/plugin-responsive
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("@tsparticles/engine");
+const { loadResponsivePlugin } = require("@tsparticles/plugin-responsive");
+
+(async () => {
+  await loadResponsivePlugin(tsParticles);
+})();
+```
+
+or
+
+```javascript
+import { tsParticles } from "@tsparticles/engine";
+import { loadResponsivePlugin } from "@tsparticles/plugin-responsive";
+
+(async () => {
+  await loadResponsivePlugin(tsParticles);
+})();
+```

package/browser/Options/Classes/Responsive.js

@@ -0,0 +1,28 @@
+import { deepExtend, isNull, } from "@tsparticles/engine";
+import { ResponsiveMode } from "../../ResponsiveMode.js";
+export class Responsive {
+    constructor() {
+        this.maxWidth = Infinity;
+        this.options = {};
+        this.mode = ResponsiveMode.canvas;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (!isNull(data.maxWidth)) {
+            this.maxWidth = data.maxWidth;
+        }
+        if (!isNull(data.mode)) {
+            if (data.mode === ResponsiveMode.screen) {
+                this.mode = ResponsiveMode.screen;
+            }
+            else {
+                this.mode = ResponsiveMode.canvas;
+            }
+        }
+        if (!isNull(data.options)) {
+            this.options = deepExtend({}, data.options);
+        }
+    }
+}

package/browser/Options/Interfaces/IResponsive.js

@@ -0,0 +1 @@
+export {};

package/browser/ResponsiveMode.js

@@ -0,0 +1,5 @@
+export var ResponsiveMode;
+(function (ResponsiveMode) {
+    ResponsiveMode["screen"] = "screen";
+    ResponsiveMode["canvas"] = "canvas";
+})(ResponsiveMode || (ResponsiveMode = {}));

package/browser/ResponsivePlugin.js

@@ -0,0 +1,37 @@
+import { Responsive } from "./Options/Classes/Responsive.js";
+import { ResponsiveMode } from "./ResponsiveMode.js";
+export class ResponsivePlugin {
+    constructor() {
+        this.id = "responsive";
+    }
+    async getPlugin(container) {
+        const { ResponsivePluginInstance } = await import("./ResponsivePluginInstance.js");
+        return new ResponsivePluginInstance(container);
+    }
+    loadOptions(_container, options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        const setResponsive = (width, pxRatio, defaultOptions) => {
+            options.load(defaultOptions);
+            const responsiveOptions = options.responsive?.find(t => t.mode === ResponsiveMode.screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
+            options.load(responsiveOptions?.options);
+            return responsiveOptions?.maxWidth;
+        };
+        options.setResponsive = setResponsive;
+        options.responsive ??= [];
+        if (source?.responsive !== undefined) {
+            for (const responsive of source.responsive) {
+                const optResponsive = new Responsive();
+                if (responsive) {
+                    optResponsive.load(responsive);
+                }
+                options.responsive.push(optResponsive);
+            }
+        }
+        options.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
+    }
+    needsPlugin(options) {
+        return !!options?.responsive?.length;
+    }
+}

package/browser/ResponsivePluginInstance.js

@@ -0,0 +1,15 @@
+export class ResponsivePluginInstance {
+    constructor(container) {
+        this._container = container;
+    }
+    updateActualOptions() {
+        const container = this._container;
+        container.actualOptions.responsive = [];
+        const newMaxWidth = container.actualOptions.setResponsive?.(container.canvas.size.width, container.retina.pixelRatio, container.options);
+        if (container.responsiveMaxWidth === newMaxWidth) {
+            return false;
+        }
+        container.responsiveMaxWidth = newMaxWidth;
+        return true;
+    }
+}

package/browser/index.js

@@ -0,0 +1,7 @@
+export function loadResponsivePlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.4");
+    engine.register(async (e) => {
+        const { ResponsivePlugin } = await import("./ResponsivePlugin.js");
+        e.addPlugin(new ResponsivePlugin());
+    });
+}

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/cjs/Options/Classes/Responsive.js

@@ -0,0 +1,28 @@
+import { deepExtend, isNull, } from "@tsparticles/engine";
+import { ResponsiveMode } from "../../ResponsiveMode.js";
+export class Responsive {
+    constructor() {
+        this.maxWidth = Infinity;
+        this.options = {};
+        this.mode = ResponsiveMode.canvas;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (!isNull(data.maxWidth)) {
+            this.maxWidth = data.maxWidth;
+        }
+        if (!isNull(data.mode)) {
+            if (data.mode === ResponsiveMode.screen) {
+                this.mode = ResponsiveMode.screen;
+            }
+            else {
+                this.mode = ResponsiveMode.canvas;
+            }
+        }
+        if (!isNull(data.options)) {
+            this.options = deepExtend({}, data.options);
+        }
+    }
+}

package/cjs/Options/Interfaces/IResponsive.js

@@ -0,0 +1 @@
+export {};

package/cjs/ResponsiveMode.js

@@ -0,0 +1,5 @@
+export var ResponsiveMode;
+(function (ResponsiveMode) {
+    ResponsiveMode["screen"] = "screen";
+    ResponsiveMode["canvas"] = "canvas";
+})(ResponsiveMode || (ResponsiveMode = {}));

package/cjs/ResponsivePlugin.js

@@ -0,0 +1,37 @@
+import { Responsive } from "./Options/Classes/Responsive.js";
+import { ResponsiveMode } from "./ResponsiveMode.js";
+export class ResponsivePlugin {
+    constructor() {
+        this.id = "responsive";
+    }
+    async getPlugin(container) {
+        const { ResponsivePluginInstance } = await import("./ResponsivePluginInstance.js");
+        return new ResponsivePluginInstance(container);
+    }
+    loadOptions(_container, options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        const setResponsive = (width, pxRatio, defaultOptions) => {
+            options.load(defaultOptions);
+            const responsiveOptions = options.responsive?.find(t => t.mode === ResponsiveMode.screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
+            options.load(responsiveOptions?.options);
+            return responsiveOptions?.maxWidth;
+        };
+        options.setResponsive = setResponsive;
+        options.responsive ??= [];
+        if (source?.responsive !== undefined) {
+            for (const responsive of source.responsive) {
+                const optResponsive = new Responsive();
+                if (responsive) {
+                    optResponsive.load(responsive);
+                }
+                options.responsive.push(optResponsive);
+            }
+        }
+        options.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
+    }
+    needsPlugin(options) {
+        return !!options?.responsive?.length;
+    }
+}

package/cjs/ResponsivePluginInstance.js

@@ -0,0 +1,15 @@
+export class ResponsivePluginInstance {
+    constructor(container) {
+        this._container = container;
+    }
+    updateActualOptions() {
+        const container = this._container;
+        container.actualOptions.responsive = [];
+        const newMaxWidth = container.actualOptions.setResponsive?.(container.canvas.size.width, container.retina.pixelRatio, container.options);
+        if (container.responsiveMaxWidth === newMaxWidth) {
+            return false;
+        }
+        container.responsiveMaxWidth = newMaxWidth;
+        return true;
+    }
+}

package/cjs/index.js

@@ -0,0 +1,7 @@
+export function loadResponsivePlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.4");
+    engine.register(async (e) => {
+        const { ResponsivePlugin } = await import("./ResponsivePlugin.js");
+        e.addPlugin(new ResponsivePlugin());
+    });
+}

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/cjs/types.js

@@ -0,0 +1 @@
+export {};

package/dist_browser_ResponsivePluginInstance_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-alpha.4
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_responsive"] = this["webpackChunk_tsparticles_plugin_responsive"] || []).push([["dist_browser_ResponsivePluginInstance_js"],{
+
+/***/ "./dist/browser/ResponsivePluginInstance.js"
+/*!**************************************************!*\
+  !*** ./dist/browser/ResponsivePluginInstance.js ***!
+  \**************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ResponsivePluginInstance: () => (/* binding */ ResponsivePluginInstance)\n/* harmony export */ });\nclass ResponsivePluginInstance {\n  constructor(container) {\n    this._container = container;\n  }\n  updateActualOptions() {\n    const container = this._container;\n    container.actualOptions.responsive = [];\n    const newMaxWidth = container.actualOptions.setResponsive?.(container.canvas.size.width, container.retina.pixelRatio, container.options);\n    if (container.responsiveMaxWidth === newMaxWidth) {\n      return false;\n    }\n    container.responsiveMaxWidth = newMaxWidth;\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-responsive/./dist/browser/ResponsivePluginInstance.js?\n}");
+
+/***/ }
+
+}]);

package/dist_browser_ResponsivePlugin_js.js

@@ -0,0 +1,50 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-alpha.4
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_responsive"] = this["webpackChunk_tsparticles_plugin_responsive"] || []).push([["dist_browser_ResponsivePlugin_js"],{
+
+/***/ "./dist/browser/Options/Classes/Responsive.js"
+/*!****************************************************!*\
+  !*** ./dist/browser/Options/Classes/Responsive.js ***!
+  \****************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Responsive: () => (/* binding */ Responsive)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _ResponsiveMode_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../ResponsiveMode.js */ \"./dist/browser/ResponsiveMode.js\");\n\n\nclass Responsive {\n  constructor() {\n    this.maxWidth = Infinity;\n    this.options = {};\n    this.mode = _ResponsiveMode_js__WEBPACK_IMPORTED_MODULE_1__.ResponsiveMode.canvas;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (!(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data.maxWidth)) {\n      this.maxWidth = data.maxWidth;\n    }\n    if (!(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data.mode)) {\n      if (data.mode === _ResponsiveMode_js__WEBPACK_IMPORTED_MODULE_1__.ResponsiveMode.screen) {\n        this.mode = _ResponsiveMode_js__WEBPACK_IMPORTED_MODULE_1__.ResponsiveMode.screen;\n      } else {\n        this.mode = _ResponsiveMode_js__WEBPACK_IMPORTED_MODULE_1__.ResponsiveMode.canvas;\n      }\n    }\n    if (!(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data.options)) {\n      this.options = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.options);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-responsive/./dist/browser/Options/Classes/Responsive.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/ResponsiveMode.js"
+/*!****************************************!*\
+  !*** ./dist/browser/ResponsiveMode.js ***!
+  \****************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ResponsiveMode: () => (/* binding */ ResponsiveMode)\n/* harmony export */ });\nvar ResponsiveMode;\n(function (ResponsiveMode) {\n  ResponsiveMode[\"screen\"] = \"screen\";\n  ResponsiveMode[\"canvas\"] = \"canvas\";\n})(ResponsiveMode || (ResponsiveMode = {}));\n\n//# sourceURL=webpack://@tsparticles/plugin-responsive/./dist/browser/ResponsiveMode.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/ResponsivePlugin.js"
+/*!******************************************!*\
+  !*** ./dist/browser/ResponsivePlugin.js ***!
+  \******************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ResponsivePlugin: () => (/* binding */ ResponsivePlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_Responsive_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/Responsive.js */ \"./dist/browser/Options/Classes/Responsive.js\");\n/* harmony import */ var _ResponsiveMode_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ResponsiveMode.js */ \"./dist/browser/ResponsiveMode.js\");\n\n\nclass ResponsivePlugin {\n  constructor() {\n    this.id = \"responsive\";\n  }\n  async getPlugin(container) {\n    const {\n      ResponsivePluginInstance\n    } = await __webpack_require__.e(/*! import() */ \"dist_browser_ResponsivePluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ResponsivePluginInstance.js */ \"./dist/browser/ResponsivePluginInstance.js\"));\n    return new ResponsivePluginInstance(container);\n  }\n  loadOptions(_container, options, source) {\n    if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n      return;\n    }\n    const setResponsive = (width, pxRatio, defaultOptions) => {\n      options.load(defaultOptions);\n      const responsiveOptions = options.responsive?.find(t => t.mode === _ResponsiveMode_js__WEBPACK_IMPORTED_MODULE_1__.ResponsiveMode.screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);\n      options.load(responsiveOptions?.options);\n      return responsiveOptions?.maxWidth;\n    };\n    options.setResponsive = setResponsive;\n    options.responsive ??= [];\n    if (source?.responsive !== undefined) {\n      for (const responsive of source.responsive) {\n        const optResponsive = new _Options_Classes_Responsive_js__WEBPACK_IMPORTED_MODULE_0__.Responsive();\n        if (responsive) {\n          optResponsive.load(responsive);\n        }\n        options.responsive.push(optResponsive);\n      }\n    }\n    options.responsive.sort((a, b) => a.maxWidth - b.maxWidth);\n  }\n  needsPlugin(options) {\n    return !!options?.responsive?.length;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-responsive/./dist/browser/ResponsivePlugin.js?\n}");
+
+/***/ }
+
+}]);

package/esm/Options/Classes/Responsive.js

@@ -0,0 +1,28 @@
+import { deepExtend, isNull, } from "@tsparticles/engine";
+import { ResponsiveMode } from "../../ResponsiveMode.js";
+export class Responsive {
+    constructor() {
+        this.maxWidth = Infinity;
+        this.options = {};
+        this.mode = ResponsiveMode.canvas;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (!isNull(data.maxWidth)) {
+            this.maxWidth = data.maxWidth;
+        }
+        if (!isNull(data.mode)) {
+            if (data.mode === ResponsiveMode.screen) {
+                this.mode = ResponsiveMode.screen;
+            }
+            else {
+                this.mode = ResponsiveMode.canvas;
+            }
+        }
+        if (!isNull(data.options)) {
+            this.options = deepExtend({}, data.options);
+        }
+    }
+}

package/esm/Options/Interfaces/IResponsive.js

@@ -0,0 +1 @@
+export {};

package/esm/ResponsiveMode.js

@@ -0,0 +1,5 @@
+export var ResponsiveMode;
+(function (ResponsiveMode) {
+    ResponsiveMode["screen"] = "screen";
+    ResponsiveMode["canvas"] = "canvas";
+})(ResponsiveMode || (ResponsiveMode = {}));

package/esm/ResponsivePlugin.js

@@ -0,0 +1,37 @@
+import { Responsive } from "./Options/Classes/Responsive.js";
+import { ResponsiveMode } from "./ResponsiveMode.js";
+export class ResponsivePlugin {
+    constructor() {
+        this.id = "responsive";
+    }
+    async getPlugin(container) {
+        const { ResponsivePluginInstance } = await import("./ResponsivePluginInstance.js");
+        return new ResponsivePluginInstance(container);
+    }
+    loadOptions(_container, options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        const setResponsive = (width, pxRatio, defaultOptions) => {
+            options.load(defaultOptions);
+            const responsiveOptions = options.responsive?.find(t => t.mode === ResponsiveMode.screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
+            options.load(responsiveOptions?.options);
+            return responsiveOptions?.maxWidth;
+        };
+        options.setResponsive = setResponsive;
+        options.responsive ??= [];
+        if (source?.responsive !== undefined) {
+            for (const responsive of source.responsive) {
+                const optResponsive = new Responsive();
+                if (responsive) {
+                    optResponsive.load(responsive);
+                }
+                options.responsive.push(optResponsive);
+            }
+        }
+        options.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
+    }
+    needsPlugin(options) {
+        return !!options?.responsive?.length;
+    }
+}

package/esm/ResponsivePluginInstance.js

@@ -0,0 +1,15 @@
+export class ResponsivePluginInstance {
+    constructor(container) {
+        this._container = container;
+    }
+    updateActualOptions() {
+        const container = this._container;
+        container.actualOptions.responsive = [];
+        const newMaxWidth = container.actualOptions.setResponsive?.(container.canvas.size.width, container.retina.pixelRatio, container.options);
+        if (container.responsiveMaxWidth === newMaxWidth) {
+            return false;
+        }
+        container.responsiveMaxWidth = newMaxWidth;
+        return true;
+    }
+}

package/esm/index.js

@@ -0,0 +1,7 @@
+export function loadResponsivePlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.4");
+    engine.register(async (e) => {
+        const { ResponsivePlugin } = await import("./ResponsivePlugin.js");
+        e.addPlugin(new ResponsivePlugin());
+    });
+}

package/esm/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@tsparticles/plugin-responsive",
+  "version": "4.0.0-alpha.4",
+  "description": "tsParticles responsive plugin",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "directory": "plugins/responsive"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti",
+    "tsparticles-plugin"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tsparticles/tsparticles/issues"
+  },
+  "sideEffects": false,
+  "jsdelivr": "tsparticles.plugin.responsive.min.js",
+  "unpkg": "tsparticles.plugin.responsive.min.js",
+  "browser": "browser/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./browser/index.js",
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js",
+      "umd": "./umd/index.js",
+      "default": "./cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "4.0.0-alpha.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module"
+}