webcimes-modal 1.1.1 → 1.1.3

package/src/ts/webcimes-modal.ts

@@ -6,6 +6,21 @@
 
 "use strict";
 
+/**
+ * Global
+ */
+declare global {
+	/** Events */
+	interface GlobalEventHandlersEventMap {
+		beforeShow: CustomEvent;
+		afterShow: CustomEvent;
+		beforeDestroy: CustomEvent;
+		afterDestroy: CustomEvent;
+		onCancelButton: CustomEvent;
+		onConfirmButton: CustomEvent;
+	}
+}
+
 /**
  * Options
  */
@@ -73,23 +88,33 @@ interface Options {
  */
 export class WebcimesModal
 {
+	/** Get the dom element containing all modals */
 	public webcimesModals: HTMLElement;
+
+	/** Get the dom element of the current modal */
 	public modal: HTMLElement;
+
+	/** Options of the current modal */
 	private options: Options;
+
 	private eventCancelButton: () => void = () => {
 		// Callback on cancel button
+		this.modal.dispatchEvent(new CustomEvent("onCancelButton"));
 		if(typeof this.options.onCancelButton === 'function')
 		{
 			this.options.onCancelButton();
 		}
 	};
+
 	private eventConfirmButton: () => void = () => {
 		// Callback on confirm button
+		this.modal.dispatchEvent(new CustomEvent("onConfirmButton"));
 		if(typeof this.options.onConfirmButton === 'function')
 		{
 			this.options.onConfirmButton();
 		}
 	};
+
 	private eventClickOutside: (e: Event) => void = (e) => {
 		if(e.target == this.webcimesModals)
 		{
@@ -110,10 +135,12 @@ export class WebcimesModal
 			}
 		}
 	};
+
 	private eventClickCloseButton: () => void = () => {
 		// Destroy modal
 		this.destroy();
 	};
+
 	private eventDragModalOnTop: (e: Event) => void = (e) => {
 		// Only if target is not close button (for bug in chrome)
 		if(!(<HTMLElement>e.target).closest(".close"))
@@ -127,10 +154,15 @@ export class WebcimesModal
 			}
 		}
 	};
+
 	private position: {x: number, y: number};
+
 	private offset: {x: number, y: number};
+
 	private isDragging: boolean = false;
+
 	private moveFromElements: HTMLElement[] = [];
+
 	private eventDragStart: (e: Event) => void = (e) => {
 		// Start drag only if it's not a button
 		if(!(<HTMLElement>e.target).closest("button"))
@@ -155,6 +187,7 @@ export class WebcimesModal
 			}
 		}
 	};
+
 	private eventMove: (e: Event) => void = (e) => {
 		if(this.isDragging)
 		{
@@ -178,15 +211,18 @@ export class WebcimesModal
 			this.modal.style.top  = (this.position.y + this.offset.y)+'px';
 		}
 	};
+
 	private eventDragStop: () => void = () => {
 		this.isDragging = false;
 	};
+	
 	private eventPreventSelectText: (e: Event) => void = (e) => {
 		if(this.isDragging)
 		{
 			e.preventDefault();
 		}
 	};
+
 	private eventResize: () => void = () => {
 		this.modal.style.removeProperty("left");
 		this.modal.style.removeProperty("top");
@@ -195,35 +231,6 @@ export class WebcimesModal
 
 	/**
 	 * Create modal
-	 * @param {Object} options
-	 * @param {string | null} options.setId - set a specific id on the modal. default "null" 
-	 * @param {string | null} options.setClass - set a specific class on the modal, default "null"
-	 * @param {string} options.width - width (specify unit), default "auto"
-	 * @param {string} options.height - height (specify unit), default "auto"
-	 * @param {string | null} options.titleHtml - html for title, default "null"
-	 * @param {string | null} options.bodyHtml - html for body, default "null"
-	 * @param {string | null} options.buttonCancelHtml - html for cancel button, default "null"
-	 * @param {string | null} options.buttonConfirmHtml - html for confirm button, default "null"
-	 * @param {boolean} options.closeOnCancelButton - close modal after trigger cancel button, default "true"
-	 * @param {boolean} options.closeOnConfirmButton - close modal after trigger confirm button, default "true"
-	 * @param {boolean} options.showCloseButton - show close button, default "true"
-	 * @param {boolean} options.allowCloseOutside - allow the modal to close when clicked outside, default "true"
-	 * @param {boolean} options.allowMovement - ability to move modal, default "true"
-	 * @param {boolean} options.moveFromHeader - if allowMovement is set to "true", ability to move modal from header, default "true"
-	 * @param {boolean} options.moveFromBody - if allowMovement is set to "true", ability to move modal from body, default "false"
-	 * @param {boolean} options.moveFromFooter - if allowMovement is set to "true", ability to move modal from footer, default "true"
-	 * @param {boolean} options.stickyHeader - keep header sticky (visible) when scrolling, default "true"
-	 * @param {boolean} options.stickyFooter - keep footer sticky (visible) when scrolling, default "true"
-	 * @param {string | null} options.style - add extra css style to modal, default null
-	 * @param {"animDropDown" | "animFadeIn"} options.animationOnShow - "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
-	 * @param {"animDropUp" | "animFadeOut"} options.animationOnDestroy - "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
-	 * @param {number} options.animationDuration - animation duration in ms, default "500"
-	 * @param {() => void} options.beforeShow - callback before show modal
-	 * @param {() => void} options.afterShow - callback after show modal
-	 * @param {() => void} options.beforeDestroy - callback before destroy modal
-	 * @param {() => void} options.afterDestroy - callback after destroy modal
-	 * @param {() => void} options.onCancelButton - callback after triggering cancel button
-	 * @param {() => void} options.onConfirmButton - callback after triggering confirm button
 	 */
 	constructor(options: Options)
 	{
@@ -265,9 +272,9 @@ export class WebcimesModal
 	}
 
 	/**
-	 * Init modal
+	 * Initialization of the current modal
 	 */
-    init()
+    private init()
 	{
 		// Create webcimesModals
 		if(!document.querySelector(".webcimesModals"))
@@ -286,7 +293,11 @@ export class WebcimesModal
 		}
 		else
 		{
+			// Get webcimesModals
 			this.webcimesModals = <HTMLElement>document.querySelector(".webcimesModals");
+
+			// Remove animFadeOut in case of create new modal after destroy the last one before (during animation duration)
+			this.webcimesModals.classList.remove("animFadeOut");
 		}
 	
 		// Create modal
@@ -313,14 +324,14 @@ export class WebcimesModal
 		);
 		this.modal = <HTMLElement>this.webcimesModals.lastElementChild;
 		
-		// Callback before show modal
-		if(typeof this.options.beforeShow === 'function')
-		{
-			// Set a timeout of zero, to wait for some dom to load
-			setTimeout(() => {
-				this.options.beforeShow();
-			}, 0);
-		}
+		// Callback before show modal (set a timeout of zero, to wait for some dom to load)
+		setTimeout(() => {
+			this.modal.dispatchEvent(new CustomEvent("beforeShow"));
+			if(typeof this.options.beforeShow === 'function')
+			{
+					this.options.beforeShow();
+			}
+		}, 0);
 		
 		// Set animation duration for modal
 		this.modal.style.setProperty("animation-duration", this.options.animationDuration+"ms");
@@ -330,6 +341,7 @@ export class WebcimesModal
 			this.modal.classList.remove(this.options.animationOnShow);
 	
 			// Callback after show modal
+			this.modal.dispatchEvent(new CustomEvent("afterShow"));
 			if(typeof this.options.afterShow === 'function')
 			{
 				this.options.afterShow();
@@ -430,14 +442,15 @@ export class WebcimesModal
     }
 
 	/**
-	 * Destroy modal
+	 * Destroy current modal
 	 */
-	destroy()
+	public destroy()
 	{
 		// If modal is not already destroying
 		if(!this.modal.getAttribute("data-destroying"))
 		{
 			// Callback before destroy modal
+			this.modal.dispatchEvent(new CustomEvent("beforeDestroy"));
 			if(typeof this.options.beforeDestroy === 'function')
 			{
 				this.options.beforeDestroy();
@@ -505,6 +518,7 @@ export class WebcimesModal
 				}
 
 				// Callback after destroy modal
+				this.modal.dispatchEvent(new CustomEvent("afterDestroy"));
 				if(typeof this.options.afterDestroy === 'function')
 				{
 					this.options.afterDestroy();

package/test/script.js

@@ -0,0 +1,29 @@
+// Import webcimes-modal
+import {WebcimesModal} from "../dist/js/webcimes-modal.esm.js";
+
+// Wait for dom content loaded
+document.addEventListener("DOMContentLoaded", function()
+{
+    let modal1 = new WebcimesModal({
+        titleHtml: "My title",
+        bodyHtml: "My Body",
+        afterDestroy: () => {
+            console.log("destroy modal 1");
+        },
+    });
+
+    document.querySelector(".modalBody")?.addEventListener("click", (e) => {
+
+        modal1.modal.addEventListener("afterDestroy", () => {
+            console.log("event");
+        });
+
+        new WebcimesModal({
+            titleHtml: "My title 2",
+            bodyHtml: "My Body 2",
+            afterDestroy: () => {
+                console.log("after destroy modal 2");
+            },
+        });
+    });
+});

package/test/test.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="Author" content="WebCimes">
+        <meta name="Copyright" content="© https://webcimes.com">
+        <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>
+        <div style="display:none;">
+            <div class="test">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+                <br>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
+            </div>
+		</div>
+    </body>
+</html>

package/tsconfig.json

@@ -3,11 +3,14 @@
         "module": "ESNext",
         "target": "ESNext",
         "removeComments": false,
+        "declaration": true,
+        "declarationMap": true,
         "sourceMap": true,
         "noImplicitAny": true,
         "strictNullChecks": true,
         "allowSyntheticDefaultImports": true,
-        "esModuleInterop": true
+        "esModuleInterop": true,
+        "moduleResolution": "node",
     },
     "ts-node": {
         "compilerOptions": {

package/webpack.config.ts

@@ -1,39 +1,34 @@
-// Generated using webpack-cli https://github.com/webpack/webpack-cli
-
-import path from 'path';
+import path from "path";
 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";
-
-const isProduction = process.env.NODE_ENV == 'production';
+import TypescriptDeclarationPlugin from "typescript-declaration-webpack-plugin";
+// const isProduction = process.env.NODE_ENV == "production";
 
 // Config UDM
 const configUDM: webpack.Configuration = {
-    mode: (isProduction ? "production" : "development"),
-    // devtool: (isProduction ? false : "source-map"),
+    mode: "production",
     devtool: "source-map",
     entry: {
         "webcimes-modal.udm": "./src/ts/webcimes-modal.ts",
-        "webcimes-modal.udm.min": "./src/ts/webcimes-modal.ts",
+    },
+    output: {
+        filename: "js/[name].js",
+        path: path.resolve(__dirname, "dist"),
+        libraryTarget: "umd",
+        clean: false, // Clean the output directory before emit.
     },
     optimization: {
         minimize: true,
         minimizer: [
             new TerserPlugin({
-                test: /\.min\.js$/i,
+                test: /\.js$/i,
                 extractComments: false,
             }),
         ],
     },
-    output: {
-        filename: "js/udm/[name].js",
-        path: path.resolve(__dirname, "dist"),
-        // publicPath: "/dist/",
-        libraryTarget: "umd",
-        clean: false, // Clean the output directory before emit.
-    },
     module: {
         rules: [
             {
@@ -42,22 +37,27 @@ const configUDM: webpack.Configuration = {
             },
         ],
     },
+    plugins: [
+        new TypescriptDeclarationPlugin({
+            out: "./js/webcimes-modal.udm.d.ts",
+            removeMergedDeclarations: false,
+            removeComments: false,
+        }),
+    ],
 };
 
 // Config ESM
 const configESM: webpack.Configuration = {
-    mode: (isProduction ? "production" : "development"),
-    // devtool: (isProduction ? false : "source-map"),
+    mode: "production",
     devtool: "source-map",
     entry: {
         "webcimes-modal.esm": "./src/ts/webcimes-modal.ts",
-        "webcimes-modal.esm.min": "./src/ts/webcimes-modal.ts",
     },
     optimization: {
         minimize: true,
         minimizer: [
             new TerserPlugin({
-                test: /\.min\.js$/i,
+                test: /\.js$/i,
                 extractComments: false,
             }),
         ],
@@ -66,9 +66,8 @@ const configESM: webpack.Configuration = {
         outputModule: true,
     },
     output: {
-        filename: "js/esm/[name].js",
+        filename: "js/[name].js",
         path: path.resolve(__dirname, "dist"),
-        // publicPath: "/dist/",
         libraryTarget: "module",
         clean: false, // Clean the output directory before emit.
     },
@@ -80,29 +79,33 @@ const configESM: webpack.Configuration = {
             },
         ],
     },
+    plugins: [
+        new TypescriptDeclarationPlugin({
+            out: "./js/webcimes-modal.esm.d.ts",
+            removeMergedDeclarations: false,
+            removeComments: false,
+        }),
+    ],
 };
 
 // Config CSS + Remove plugin
 const configCSS: webpack.Configuration = {
-    mode: (isProduction ? "production" : "development"),
-    // devtool: (isProduction ? false : "source-map"),
+    mode: "production",
     devtool: "source-map",
     entry: {
         "webcimes-modal": "./src/css/webcimes-modal.css",
-        "webcimes-modal.min": "./src/css/webcimes-modal.css",
     },
     optimization: {
         minimize: true,
         minimizer: [
             new CssMinimizerPlugin({
-                test: /\.min\.css$/i,
+                test: /\.css$/i,
             }),
         ],
     },
     output: {
         filename: "css/[name].js",
         path: path.resolve(__dirname, "dist"),
-        // publicPath: "/dist/",
         clean: false, // Clean the output directory before emit.
     },
     module: {

package/dist/css/webcimes-modal.min.css

@@ -1,2 +0,0 @@
-.webcimesModals,.webcimesModals *,.webcimesModals :after,.webcimesModals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimesModals{--webcimes-modals-background:rgba(0,0,0,.8);--webcimes-modals-z-index:5;align-items:center;background:var(--webcimes-modals-background);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--webcimes-modals-z-index)}.webcimesModals>.modal{--modal-color:inherit;--modal-background:#fff;--modal-border-color:#ddd;--modal-box-shadow:1px 1px 3px 0px #444;--modal-title-font-size:24px;--modal-button-cancel-background:#666;--modal-button-cancel-background-hover:hsla(0,0%,40%,.7);--modal-button-cancel-color:#fff;--modal-button-cancel-color-hover:#fff;--modal-button-confirm-background:#000;--modal-button-confirm-background-hover:rgba(0,0,0,.7);--modal-button-confirm-color:#fff;--modal-button-confirm-color-hover:#fff;background:var(--modal-background);border-radius:5px;-webkit-box-shadow:var(--modal-box-shadow);-moz-box-shadow:var(--modal-box-shadow);-o-box-shadow:var(--modal-box-shadow);box-shadow:var(--modal-box-shadow);color:var(--modal-color);overflow:auto;position:absolute}.webcimesModals>.modal button{background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit}.webcimesModals>.modal>.modalHeader{align-items:center;background:var(--modal-background);border-bottom:1px solid var(--modal-border-color);display:flex;padding:20px 40px;position:relative}.webcimesModals>.modal>.modalHeader.sticky{position:sticky;top:0}.webcimesModals>.modal>.modalHeader.movable{cursor:move;touch-action:none}.webcimesModals>.modal>.modalHeader>.title{flex:1;font-size:var(--modal-title-font-size);overflow:hidden;text-overflow:ellipsis}.webcimesModals>.modal>.modalHeader>.close{background-image:url(../images/times.svg);cursor:pointer;height:20px;margin-top:-10px;opacity:1;position:absolute;right:15px;top:50%;-webkit-transition:opacity .6s ease 0s;-moz-transition:opacity .6s ease 0s;-o-transition:opacity .6s ease 0s;transition:opacity .6s ease 0s;width:12px}.webcimesModals>.modal>.modalHeader>.close:hover{opacity:.5}.webcimesModals>.modal>.modalBody{padding:20px 40px}.webcimesModals>.modal>.modalBody.movable{cursor:move}.webcimesModals>.modal>.modalFooter{background:var(--modal-background);border-top:1px solid var(--modal-border-color);display:flex;flex-wrap:wrap;justify-content:flex-end;padding:20px 40px}.webcimesModals>.modal>.modalFooter.sticky{bottom:0;position:sticky}.webcimesModals>.modal>.modalFooter.movable{cursor:move;touch-action:none}.webcimesModals>.modal>.modalFooter button{border-radius:5px;cursor:pointer;flex:0 0 auto;margin:5px;max-width:100%;overflow:hidden;padding:10px 30px;text-overflow:ellipsis;-webkit-transition:color .6s ease 0s,background .6s ease 0s;-moz-transition:color .6s ease 0s,background .6s ease 0s;-o-transition:color .6s ease 0s,background .6s ease 0s;transition:color .6s ease 0s,background .6s ease 0s}.webcimesModals>.modal>.modalFooter button.cancel{background:var(--modal-button-cancel-background);color:var(--modal-button-cancel-color)}.webcimesModals>.modal>.modalFooter button.cancel:hover{background:var(--modal-button-cancel-background-hover);color:var(--modal-button-cancel-color-hover)}.webcimesModals>.modal>.modalFooter button.confirm{background:var(--modal-button-confirm-background);color:var(--modal-button-confirm-color)}.webcimesModals>.modal>.modalFooter button.confirm:hover{background:var(--modal-button-confirm-background-hover);color:var(--modal-button-confirm-color-hover)}@-webkit-keyframes animFadeIn{0%{opacity:0}to{opacity:1}}@keyframes animFadeIn{0%{opacity:0}to{opacity:1}}.animFadeIn{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animFadeIn;animation-name:animFadeIn}@-webkit-keyframes animFadeOut{0%{opacity:1}to{opacity:0}}@keyframes animFadeOut{0%{opacity:1}to{opacity:0}}.animFadeOut{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animFadeOut;animation-name:animFadeOut}@-webkit-keyframes animDropDown{0%{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@keyframes animDropDown{0%{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}.animDropDown{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animDropDown;animation-name:animDropDown}@-webkit-keyframes animDropUp{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}}@keyframes animDropUp{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}}.animDropUp{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animDropUp;animation-name:animDropUp}@-webkit-keyframes animGrowShrink{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes animGrowShrink{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.animGrowShrink{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animGrowShrink;animation-name:animGrowShrink}
-/*# sourceMappingURL=webcimes-modal.min.css.map*/

package/dist/css/webcimes-modal.min.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"css/webcimes-modal.min.css","mappings":"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","sources":["webpack://webcimes-modal/./src/css/webcimes-modal.css"],"sourcesContent":["/**\r\n * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)\r\n * MIT License - https://choosealicense.com/licenses/mit/\r\n * Date: 2023-03-25\r\n */\r\n\r\n/*\r\n-----------------------\r\n    WEBCIMES MODAL\r\n-----------------------\r\n*/\r\n\r\n.webcimesModals,\r\n.webcimesModals *,\r\n.webcimesModals *::before,\r\n.webcimesModals *::after\r\n{ \r\n\t-webkit-box-sizing: border-box;\r\n\t-moz-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n}\r\n.webcimesModals\r\n{\r\n\t--webcimes-modals-background: rgba(0,0,0,0.8);\r\n\t--webcimes-modals-z-index: 5;\r\n\r\n\tposition: fixed;\r\n\tbackground: var(--webcimes-modals-background);\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tz-index: var(--webcimes-modals-z-index);\r\n}\r\n.webcimesModals > .modal\r\n{\r\n\t--modal-color: inherit;\r\n\t--modal-background: #fff;\r\n\t--modal-border-color: #ddd;\r\n\t--modal-box-shadow: 1px 1px 3px 0px #444;\r\n\t--modal-title-font-size: 24px;\r\n\t--modal-button-cancel-background: rgba(102,102,102,1);\r\n\t--modal-button-cancel-background-hover: rgba(102,102,102,0.7);\r\n\t--modal-button-cancel-color: #fff;\r\n\t--modal-button-cancel-color-hover: #fff;\r\n\t--modal-button-confirm-background: rgba(0,0,0,1);\r\n\t--modal-button-confirm-background-hover: rgba(0,0,0,0.7);\r\n\t--modal-button-confirm-color: #fff;\r\n\t--modal-button-confirm-color-hover: #fff;\r\n\t\r\n\tposition: absolute;\r\n\tborder-radius: 5px;\r\n\toverflow:auto;\r\n\tcolor: var(--modal-color);\r\n\tbackground: var(--modal-background);\r\n\t-webkit-box-shadow: var(--modal-box-shadow);\r\n\t-moz-box-shadow: var(--modal-box-shadow);\r\n\t-o-box-shadow: var(--modal-box-shadow);\r\n\tbox-shadow: var(--modal-box-shadow);\r\n}\r\n.webcimesModals > .modal button\r\n{\r\n\tfont-family: inherit;\r\n\tfont-size: inherit;\r\n\tfont-weight: inherit;\r\n\tborder: none;\r\n\tbackground: none;\r\n}\r\n.webcimesModals > .modal > .modalHeader\r\n{\r\n\tposition: relative;\r\n\tbackground: var(--modal-background);\r\n\tpadding: 20px 40px;\r\n\tborder-bottom: 1px solid var(--modal-border-color);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.webcimesModals > .modal > .modalHeader.sticky\r\n{\r\n\tposition: sticky;\r\n\ttop: 0;\r\n}\r\n.webcimesModals > .modal > .modalHeader.movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimesModals > .modal > .modalHeader > .title\r\n{\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\tfont-size: var(--modal-title-font-size);\r\n}\r\n.webcimesModals > .modal > .modalHeader > .close\r\n{\r\n\tposition: absolute;\r\n\theight: 20px;\r\n\twidth: 12px;\r\n\tright: 15px;\r\n\ttop: 50%;\r\n\tmargin-top: -10px;\r\n\tbackground-image: url(\"../images/times.svg\");\r\n    cursor: pointer;\r\n\topacity: 1;\r\n    -webkit-transition: opacity 0.6s ease 0s;\r\n    -moz-transition: opacity 0.6s ease 0s;\r\n    -o-transition: opacity 0.6s ease 0s;\r\n    transition: opacity 0.6s ease 0s;\r\n}\r\n.webcimesModals > .modal > .modalHeader > .close:hover\r\n{\r\n\topacity: 0.5;\r\n}\r\n.webcimesModals > .modal > .modalBody\r\n{\r\n\tpadding: 20px 40px;\r\n}\r\n.webcimesModals > .modal > .modalBody.movable\r\n{\r\n\tcursor: move;\r\n}\r\n.webcimesModals > .modal > .modalFooter\r\n{\r\n\tbackground: var(--modal-background);\r\n\tpadding: 20px 40px;\r\n\tborder-top: 1px solid var(--modal-border-color);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tflex-wrap: wrap;\r\n}\r\n.webcimesModals > .modal > .modalFooter.sticky\r\n{\r\n\tposition: sticky;\r\n\tbottom: 0;\r\n}\r\n.webcimesModals > .modal > .modalFooter.movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimesModals > .modal > .modalFooter button\r\n{\r\n\tmax-width: 100%;\r\n\tflex: 0 0 auto;\r\n\tborder-radius: 5px;\r\n\tpadding: 10px 30px;\r\n\tmargin: 5px;\r\n\tcursor: pointer;\r\n\ttext-overflow: ellipsis;\r\n\toverflow: hidden;\r\n    -webkit-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n    -moz-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n    -o-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n    transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n}\r\n.webcimesModals > .modal > .modalFooter button.cancel\r\n{\r\n\tbackground: var(--modal-button-cancel-background);\r\n\tcolor: var(--modal-button-cancel-color);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.cancel:hover\r\n{\r\n\tbackground: var(--modal-button-cancel-background-hover);\r\n\tcolor: var(--modal-button-cancel-color-hover);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.confirm\r\n{\r\n\tbackground: var(--modal-button-confirm-background);\r\n\tcolor: var(--modal-button-confirm-color);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.confirm:hover\r\n{\r\n\tbackground: var(--modal-button-confirm-background-hover);\r\n\tcolor: var(--modal-button-confirm-color-hover);\r\n}\r\n\r\n/* ANIMATIONS */\r\n\r\n@-webkit-keyframes animFadeIn\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n@keyframes animFadeIn\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity:0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity:1;\r\n\t}\r\n}\r\n.animFadeIn\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animFadeIn;\r\n\tanimation-name: animFadeIn;\r\n}\r\n\r\n@-webkit-keyframes animFadeOut\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n@keyframes animFadeOut\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n.animFadeOut\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animFadeOut;\r\n\tanimation-name: animFadeOut;\r\n}\r\n\r\n@-webkit-keyframes animDropDown\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n@keyframes animDropDown\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n.animDropDown\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animDropDown;\r\n\tanimation-name: animDropDown;\r\n}\r\n\r\n@-webkit-keyframes animDropUp\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animDropUp\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n.animDropUp\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animDropUp;\r\n\tanimation-name: animDropUp;\r\n}\r\n\r\n@-webkit-keyframes animGrowShrink\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t50%\r\n\t{\r\n\t\t-webkit-transform: scale(1.2);\r\n\t\t-moz-transform: scale(1.2);\r\n\t\t-ms-transform: scale(1.2);\r\n\t\t-o-transform: scale(1.2);\r\n\t\ttransform: scale(1.2);\r\n\t}\r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n\r\n@keyframes animGrowShrink\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t50%\r\n\t{\r\n\t\t-webkit-transform: scale(1.1);\r\n\t\t-moz-transform: scale(1.1);\r\n\t\t-ms-transform: scale(1.1);\r\n\t\t-o-transform: scale(1.1);\r\n\t\ttransform: scale(1.1);\r\n\t}\r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n.animGrowShrink\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animGrowShrink;\r\n\tanimation-name: animGrowShrink;\r\n}"],"names":[],"sourceRoot":""}