webcimes-modal 1.1.3 → 1.1.4

package/demo/demo_esm.html

@@ -7,62 +7,7 @@
         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 		<title>Demo webcimes-modal ESM</title>
         <link rel="stylesheet" href="../dist/css/webcimes-modal.css">
-        <script type="importmap">
-        {
-            "imports": {
-                "webcimes-modal": "../dist/js/webcimes-modal.esm.js"
-            }
-        }
-        </script>
-		<script type="module">
-            // Import webcimes-modal
-            import {WebcimesModal} from "webcimes-modal";
-
-            // Wait for dom content loaded
-            document.addEventListener("DOMContentLoaded", function()
-            {
-                const myModal = new WebcimesModal({
-                    setId: null, // set specific id to the modal, default "null"
-                    setClass: null, // set specific class to the modal, default "null"
-                    width: 'auto', // width (specify the unit), default "auto"
-                    height: 'auto', // height (specify the unit), default "auto"
-                    titleHtml: "My title", // html for title, default "null"
-                    bodyHtml: "My Body", // html for body, default "null"
-                    buttonCancelHtml: "Cancel", // html for cancel button, default "null"
-                    buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
-                    closeOnCancelButton: true, // close the modal after trigger cancel button, default "true"
-                    closeOnConfirmButton: true, // close the modal after trigger confirm button, default "true"
-                    showCloseButton: true, // show the close button, default "true"
-                    allowCloseOutside: false, // allow to close modal when click outside, default "true"
-                    allowMovement: true, // possibility to move the modal, default "true"
-                    moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
-                    moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
-                    moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
-                    stickyHeader: true, // keep sticky (visible) the header when scrolling, default "true"
-                    stickyFooter: true, // keep sticky (visible) the footer when scrolling, default "true"
-                    style: null, // add extra style css to the modal, default null
-                    animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for enter animation, default "animDropDown"
-                    animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for end animation, default "animDropUp"
-                    animationDuration: 500, // anim duration in ms, default "500"
-                    beforeShow: () => {console.log("before show");}, // callback before show modal
-                    afterShow: () => {console.log("after show");}, // callback after destroy modal
-                    beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
-                    afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
-                    onCancelButton: () => {console.log("on cancel button");}, // callback after trigger cancel button
-                    onConfirmButton: () => {console.log("on confirm button");}, // callback after trigger confirm button
-                });
-
-                const myModal2 = new WebcimesModal({
-                    titleHtml: "My title", // html for title, default "null"
-                    bodyHtml: document.querySelector(".test").outerHTML, // html for body, default "null"
-                    buttonCancelHtml: "Cancel", // html for cancel button, default "null"
-                    buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
-                    closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
-                    afterShow: () => {console.log(myModal2.webcimesModals); console.log(myModal2.modal);}, // callback before show modal
-                    onConfirmButton: () => {myModal2.destroy();}, // callback after trigger confirm button
-                });
-            });
-		</script>
+		<script type="module" src="script_esm.js"></script>
     </head>
     <body>
         <div style="display:none;">

package/demo/demo_udm.html

@@ -8,52 +8,7 @@
 		<title>Demo webcimes-modal UDM</title>
         <link rel="stylesheet" href="../dist/css/webcimes-modal.css">
         <script src="../dist/js/webcimes-modal.udm.js" type="text/javascript"></script>
-		<script>
-            // Wait for dom content loaded
-            document.addEventListener("DOMContentLoaded", function()
-            {
-                const myModal = new WebcimesModal({
-                    setId: null, // set specific id to the modal, default "null"
-                    setClass: null, // set specific class to the modal, default "null"
-                    width: 'auto', // width (specify the unit), default "auto"
-                    height: 'auto', // height (specify the unit), default "auto"
-                    titleHtml: "My title", // html for title, default "null"
-                    bodyHtml: "My Body", // html for body, default "null"
-                    buttonCancelHtml: "Cancel", // html for cancel button, default "null"
-                    buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
-                    closeOnCancelButton: true, // close the modal after trigger cancel button, default "true"
-                    closeOnConfirmButton: true, // close the modal after trigger confirm button, default "true"
-                    showCloseButton: true, // show the close button, default "true"
-                    allowCloseOutside: false, // allow to close modal when click outside, default "true"
-                    allowMovement: true, // possibility to move the modal, default "true"
-                    moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
-                    moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
-                    moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
-                    stickyHeader: true, // keep sticky (visible) the header when scrolling, default "true"
-                    stickyFooter: true, // keep sticky (visible) the footer when scrolling, default "true"
-                    style: null, // add extra style css to the modal, default null
-                    animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for enter animation, default "animDropDown"
-                    animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for end animation, default "animDropUp"
-                    animationDuration: 500, // anim duration in ms, default "500"
-                    beforeShow: () => {console.log("before show");}, // callback before show modal
-                    afterShow: () => {console.log("after show");}, // callback after destroy modal
-                    beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
-                    afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
-                    onCancelButton: () => {console.log("on cancel button");}, // callback after trigger cancel button
-                    onConfirmButton: () => {console.log("on confirm button");}, // callback after trigger confirm button
-                });
-
-                const myModal2 = new WebcimesModal({
-                    titleHtml: "My title", // html for title, default "null"
-                    bodyHtml: document.querySelector(".test").outerHTML, // html for body, default "null"
-                    buttonCancelHtml: "Cancel", // html for cancel button, default "null"
-                    buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
-                    closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
-                    afterShow: () => {console.log(myModal2.webcimesModals); console.log(myModal2.modal);}, // callback before show modal
-                    onConfirmButton: () => {myModal2.destroy();}, // callback after trigger confirm button
-                });
-            });
-		</script>
+		<script type="text/javascript" src="script_udm.js"></script>
     </head>
     <body>
         <div style="display:none;">

package/demo/script_esm.js

@@ -0,0 +1,47 @@
+// Import webcimes-modal
+import { WebcimesModal } from "../dist/js/webcimes-modal.esm.js";
+
+// Wait for dom content loaded
+document.addEventListener("DOMContentLoaded", function()
+{
+    const myModal = new WebcimesModal({
+        setId: null, // set specific id to the modal, default "null"
+        setClass: null, // set specific class to the modal, default "null"
+        width: 'auto', // width (specify the unit), default "auto"
+        height: 'auto', // height (specify the unit), default "auto"
+        titleHtml: "My title", // html for title, default "null"
+        bodyHtml: "My Body", // html for body, default "null"
+        buttonCancelHtml: "Cancel", // html for cancel button, default "null"
+        buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
+        closeOnCancelButton: true, // close the modal after trigger cancel button, default "true"
+        closeOnConfirmButton: true, // close the modal after trigger confirm button, default "true"
+        showCloseButton: true, // show the close button, default "true"
+        allowCloseOutside: false, // allow to close modal when click outside, default "true"
+        allowMovement: true, // possibility to move the modal, default "true"
+        moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
+        moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
+        moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
+        stickyHeader: true, // keep sticky (visible) the header when scrolling, default "true"
+        stickyFooter: true, // keep sticky (visible) the footer when scrolling, default "true"
+        style: null, // add extra style css to the modal, default null
+        animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for enter animation, default "animDropDown"
+        animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for end animation, default "animDropUp"
+        animationDuration: 500, // anim duration in ms, default "500"
+        beforeShow: () => {console.log("before show");}, // callback before show modal
+        afterShow: () => {console.log("after show");}, // callback after destroy modal
+        beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
+        afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
+        onCancelButton: () => {console.log("on cancel button");}, // callback after trigger cancel button
+        onConfirmButton: () => {console.log("on confirm button");}, // callback after trigger confirm button
+    });
+
+    const myModal2 = new WebcimesModal({
+        titleHtml: "My title", // html for title, default "null"
+        bodyHtml: document.querySelector(".test").outerHTML, // html for body, default "null"
+        buttonCancelHtml: "Cancel", // html for cancel button, default "null"
+        buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
+        closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
+        afterShow: () => {console.log(myModal2.webcimesModals); console.log(myModal2.modal);}, // callback before show modal
+        onConfirmButton: () => {myModal2.destroy();}, // callback after trigger confirm button
+    });
+});

package/demo/script_udm.js

@@ -0,0 +1,45 @@
+
+// Wait for dom content loaded
+document.addEventListener("DOMContentLoaded", function()
+{
+    const myModal = new WebcimesModal({
+        setId: null, // set specific id to the modal, default "null"
+        setClass: null, // set specific class to the modal, default "null"
+        width: 'auto', // width (specify the unit), default "auto"
+        height: 'auto', // height (specify the unit), default "auto"
+        titleHtml: "My title", // html for title, default "null"
+        bodyHtml: "My Body", // html for body, default "null"
+        buttonCancelHtml: "Cancel", // html for cancel button, default "null"
+        buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
+        closeOnCancelButton: true, // close the modal after trigger cancel button, default "true"
+        closeOnConfirmButton: true, // close the modal after trigger confirm button, default "true"
+        showCloseButton: true, // show the close button, default "true"
+        allowCloseOutside: false, // allow to close modal when click outside, default "true"
+        allowMovement: true, // possibility to move the modal, default "true"
+        moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
+        moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
+        moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
+        stickyHeader: true, // keep sticky (visible) the header when scrolling, default "true"
+        stickyFooter: true, // keep sticky (visible) the footer when scrolling, default "true"
+        style: null, // add extra style css to the modal, default null
+        animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for enter animation, default "animDropDown"
+        animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for end animation, default "animDropUp"
+        animationDuration: 500, // anim duration in ms, default "500"
+        beforeShow: () => {console.log("before show");}, // callback before show modal
+        afterShow: () => {console.log("after show");}, // callback after destroy modal
+        beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
+        afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
+        onCancelButton: () => {console.log("on cancel button");}, // callback after trigger cancel button
+        onConfirmButton: () => {console.log("on confirm button");}, // callback after trigger confirm button
+    });
+
+    const myModal2 = new WebcimesModal({
+        titleHtml: "My title", // html for title, default "null"
+        bodyHtml: document.querySelector(".test").outerHTML, // html for body, default "null"
+        buttonCancelHtml: "Cancel", // html for cancel button, default "null"
+        buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
+        closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
+        afterShow: () => {console.log(myModal2.webcimesModals); console.log(myModal2.modal);}, // callback before show modal
+        onConfirmButton: () => {myModal2.destroy();}, // callback after trigger confirm button
+    });
+});

package/dist/js/webcimes-modal.esm.d.ts

@@ -116,4 +116,4 @@ export declare class WebcimesModal {
     destroy(): void;
 }
 export {};
-//# sourceMappingURL=webcimes-modal.d.ts.map
+//# sourceMappingURL=webcimes-modal.d.ts.map

package/dist/js/webcimes-modal.udm.d.ts

@@ -116,4 +116,4 @@ export declare class WebcimesModal {
     destroy(): void;
 }
 export {};
-//# sourceMappingURL=webcimes-modal.d.ts.map
+//# sourceMappingURL=webcimes-modal.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcimes-modal",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Simply create and animate modals. It works with vanilla javascript + html + css.",
   "main": "./dist/js/webcimes-modal.udm.js",
   "module": "./dist/js/webcimes-modal.esm.js",
@@ -31,12 +31,11 @@
   "devDependencies": {
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
+    "filemanager-webpack-plugin": "^8.0.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "remove-files-webpack-plugin": "^1.5.0",
     "ts-loader": "^9.4.4",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
-    "typescript-declaration-webpack-plugin": "^0.3.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   }

package/test/test.html

@@ -7,13 +7,6 @@
         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 		<title>Demo webcimes-modal ESM</title>
         <link rel="stylesheet" href="../dist/css/webcimes-modal.css">
-        <script type="importmap">
-        {
-            "imports": {
-                "webcimes-modal": "../dist/js/webcimes-modal.esm.js"
-            }
-        }
-        </script>
 		<script type="module" src="script.js"></script>
     </head>
     <body>

package/webpack.config.ts

@@ -3,8 +3,7 @@ import webpack from "webpack";
 import TerserPlugin from "terser-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
-import RemovePlugin from "remove-files-webpack-plugin";
-import TypescriptDeclarationPlugin from "typescript-declaration-webpack-plugin";
+import FileManagerPlugin from "filemanager-webpack-plugin";
 // const isProduction = process.env.NODE_ENV == "production";
 
 // Config UDM
@@ -38,10 +37,15 @@ const configUDM: webpack.Configuration = {
         ],
     },
     plugins: [
-        new TypescriptDeclarationPlugin({
-            out: "./js/webcimes-modal.udm.d.ts",
-            removeMergedDeclarations: false,
-            removeComments: false,
+        new FileManagerPlugin({
+            events: {
+                onEnd: {
+                    copy: [
+                        { source: "./src/ts/webcimes-modal.d.ts", destination: './dist/js/webcimes-modal.udm.d.ts' },
+                    ],
+
+                },
+            },
         }),
     ],
 };
@@ -80,10 +84,15 @@ const configESM: webpack.Configuration = {
         ],
     },
     plugins: [
-        new TypescriptDeclarationPlugin({
-            out: "./js/webcimes-modal.esm.d.ts",
-            removeMergedDeclarations: false,
-            removeComments: false,
+        new FileManagerPlugin({
+            events: {
+                onEnd: {
+                    copy: [
+                        { source: "./src/ts/webcimes-modal.d.ts", destination: './dist/js/webcimes-modal.esm.d.ts' },
+                    ],
+
+                },
+            },
         }),
     ],
 };
@@ -126,22 +135,20 @@ const configCSS: webpack.Configuration = {
     },
     plugins: [
         new MiniCssExtractPlugin({filename: "css/[name].css"}),
-        new RemovePlugin({
-            before: {
-                include: [
-                    './dist' // Delete dist folder before running webpack build
-                ]
+        new FileManagerPlugin({
+            events: {
+                onStart: {
+                    delete: [
+                        "./dist",
+                    ],
+                },
+                onEnd: {
+                    delete: [
+                        "./dist/css/webcimes-modal.js",
+                        "./dist/css/webcimes-modal.js.map",
+                    ],
+                }
             },
-            after: {
-                test: [
-                    {
-                        folder: './dist/css',
-                        method: (absoluteItemPath) => {
-                            return new RegExp(/(\.js|\.js\.map)$/, 'm').test(absoluteItemPath); // Delete extra empty js file (can't ouput directly css)
-                        },
-                    }
-                ],
-            }
         }),
     ],
 };