webcimes-modal 2.0.1 → 2.1.0

package/README.md

@@ -36,7 +36,7 @@ You can use an importmap to resolve the arbitrary module names to complete paths
 Then import javascript module:
 
 ```javascript
-import { CreateWebcimesModal } from 'webcimes-modal';
+import { createWebcimesModal } from 'webcimes-modal';
 ```
 
 Or you can also set the full path directly in the import:
@@ -47,7 +47,7 @@ Or you can also set the full path directly in the import:
         ...
         <script type="module">
             // Import webcimes-modal
-            import { CreateWebcimesModal } from "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js";
+            import { createWebcimesModal } from "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js";
             ...
         </script>
     </head>
@@ -58,7 +58,7 @@ Or you can also set the full path directly in the import:
 Or with JS bundlers (like Webpack) you can call directly the module :
 
 ```javascript
-import { CreateWebcimesModal } from 'webcimes-modal';
+import { createWebcimesModal } from 'webcimes-modal';
 ```
 
 ### UDM
@@ -86,19 +86,21 @@ You can directly load the udm module in the script tag:
 
 ## Usage
 
-### Call `CreateWebcimesModal()` to create modal:
+### Call `createWebcimesModal()` to create modal:
 
 ```javascript
-// Wait for dom content loaded or call CreateWebcimesModal before the end of body
+// Wait for dom content loaded or call createWebcimesModal before the end of body
 document.addEventListener('DOMContentLoaded', function () {
     // Create modal
-    const myModal = CreateWebcimesModal({
+    const myModal = createWebcimesModal({
         setId: null, // set a specific id on the modal. default "null"
         setClass: null, // set a specific class on the modal, default "null"
         width: 'auto', // width (specify unit), default "auto"
         height: 'auto', // height (specify unit), default "auto"
+        headerHtml: null, // html for header (overrides titleHtml), default "null"
         titleHtml: 'My title', // html for title, default "null"
         bodyHtml: 'My Body', // html for body, default "null"
+        footerHtml: null, // html for footer (overrides buttonCancelHtml and buttonConfirmHtml), default "null"
         buttonCancelHtml: 'Cancel', // html for cancel button, default "null"
         buttonConfirmHtml: 'Confirm', // html for confirm button, default "null"
         closeOnCancelButton: false, // close modal after trigger cancel button, default "true"
@@ -169,28 +171,72 @@ After a creating a modal, the basic html structure look like this:
 
 All parameters are optionnal, but to set the base message on the modal you can use `titleHtml` to create the title, `bodyHtml` contain the main message of the modal, and `buttonCancelHtml` & `buttonConfirmHtml` contain the html for each button.
 
-For these 4 fields you can just directly write the text or define tags, or call html from an element like this :
+For these fields you can provide:
+
+- **String**: Plain text or HTML tags
+- **HTMLElement**: A DOM element
+- **Function**: A function that returns an HTMLElement (useful for dynamic content or lazy loading)
 
 ```javascript
-const myModal = CreateWebcimesModal({
+const myModal = createWebcimesModal({
     titleHtml: "My title <span style='color:red'>with red color</span>", // directly put an html tag or attribute like span and style
-    bodyHtml: document.querySelector('#myID').outerHTML, // set html from an HTML element
-    buttonCancelHtml: "Cancel <img src='my-url' alt=''>", // put the img tag
+    bodyHtml: document.querySelector('#myID'), // set HTMLElement directly
+    buttonCancelHtml: () => {
+        const btn = document.createElement('span');
+        btn.textContent = 'Cancel';
+        btn.style.fontWeight = 'bold';
+        return btn;
+    }, // use a function that returns an HTMLElement
     buttonConfirmHtml: 'Confirm', // or just text
 });
 ```
 
-if any of these 4 fields is set to null (the default), it will not appear on the modal
+### Advanced: Full control with headerHtml and footerHtml
+
+For complete customization, you can use `headerHtml` and `footerHtml` which override their respective simple options:
+
+- `headerHtml` overrides `titleHtml`
+- `footerHtml` overrides `buttonCancelHtml` and `buttonConfirmHtml`
+
+```javascript
+const myModal = createWebcimesModal({
+    headerHtml: () => {
+        const header = document.createElement('div');
+        header.innerHTML = '<h2>Custom Header</h2><p>Subtitle here</p>';
+        return header;
+    },
+    showCloseButton: true, // Close button will still be added
+    footerHtml: () => {
+        const footer = document.createElement('div');
+        footer.innerHTML = '<button class="webcimes-modal__close">Custom Close</button>';
+        return footer;
+    },
+});
+```
+
+**Note**: Any element with the class `webcimes-modal__close` will automatically close the modal when clicked.
+
+if any of these fields is set to null (the default), it will not appear on the modal
 
 ### Remove specific structure of the modal:
 
-If you want to completely remove `webcimes-modal__header`, `webcimes-modal__body` or `webcimes-modal__footer` you need:
+Modal sections are automatically hidden when all their content properties are empty or disabled:
+
+**To remove `webcimes-modal__header`:** set `headerHtml` to `null`, `titleHtml` to `null` and `showCloseButton` to `false`
+
+**To remove `webcimes-modal__body`:** set `bodyHtml` to `null`
 
-To remove `webcimes-modal__header`: set `titleHtml` to `null` and `showCloseButton` to `false`
+**To remove `webcimes-modal__footer`:** set `footerHtml` to `null`, `buttonCancelHtml` to `null` and `buttonConfirmHtml` to `null`
 
-To remove `webcimes-modal__body`: set `bodyHtml` to `null`
+Example:
 
-To remove `webcimes-modal__footer`: set `buttonCancelHtml` to `null` and `buttonConfirmHtml` to `null`
+```javascript
+const myModal = createWebcimesModal({
+    bodyHtml: 'My message', // Only body will be displayed
+    // header is removed (all null/false)
+    // footer is removed (all null)
+});
+```
 
 ### Scale the modal:
 
@@ -199,7 +245,7 @@ By default the `height` and `width` are set to `auto`, the modal will also be si
 You can also set the determined `height` or `width` by indicating the value with a number and a unit.
 
 ```javascript
-const myModal = CreateWebcimesModal({
+const myModal = createWebcimesModal({
     width: '80vm',
     height: '200px',
 });
@@ -210,7 +256,7 @@ const myModal = CreateWebcimesModal({
 Below are the different options for customize the modal behavior.
 
 ```javascript
-const myModal = CreateWebcimesModal({
+const myModal = createWebcimesModal({
     closeOnCancelButton: false, // close modal after triggering cancel button, default "true"
     closeOnConfirmButton: false, // close modal after triggering confirm button, default "true"
     showCloseButton: true, // show close button, default "true"
@@ -229,7 +275,7 @@ const myModal = CreateWebcimesModal({
 You can define the style of the modal with `css`, but you can also use the style property which allows to directly add an additional style to the modal.
 
 ```javascript
-const myModal = CreateWebcimesModal({
+const myModal = createWebcimesModal({
     style: 'background:black; color:#fff; text-align:center;',
 });
 ```
@@ -245,7 +291,7 @@ For `animationOnDestroy` you can choose between `animDropUp` or `animFadeOut`
 And you can set the duration of all animation by setting `animationDuration` with a number in ms.
 
 ```javascript
-const myModal = CreateWebcimesModal({
+const myModal = createWebcimesModal({
     animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
     animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
     animationDuration: 500, // anim duration in ms, default "500"
@@ -258,7 +304,7 @@ You can get the dom element of the current modal like this:
 
 ```javascript
 // Get the instance
-const myModal = CreateWebcimesModal(...);
+const myModal = createWebcimesModal(...);
 
 // Things
 
@@ -270,7 +316,7 @@ Or you can get the global container of all modals like this:
 
 ```javascript
 // Get the instance
-const myModal = CreateWebcimesModal(...);
+const myModal = createWebcimesModal(...);
 
 // Things
 
@@ -283,7 +329,7 @@ myModal.modals;
 Multiple events exist, which allow to interact with the modal at each step. You can use all events below:
 
 ```javascript
-const myModal = CreateWebcimesModal({
+const myModal = createWebcimesModal({
     beforeShow: () => {
         console.log('before show');
     }, // callback before show modal
@@ -309,7 +355,7 @@ You can also use `addEventListener` for get the events from the instance like th
 
 ```javascript
 // Get the instance
-const myModal = CreateWebcimesModal(...);
+const myModal = createWebcimesModal(...);
 
 // Create an event on the current modal
 myModal.modal.addEventListener("afterDestroy", () => {
@@ -331,7 +377,7 @@ To destroy the modal, you have several ways:
 
 ```javascript
 // Get the instance
-const myModal = CreateWebcimesModal(...);
+const myModal = createWebcimesModal(...);
 
 // Things
 

package/demo/script_esm.js

@@ -1,15 +1,18 @@
 // Import webcimes-modal
-import { CreateWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
+import { createWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
 
 // Wait for dom content loaded
 document.addEventListener('DOMContentLoaded', function () {
-    const myModal = CreateWebcimesModal({
+    // Example 1: Full options with string content
+    const myModal = createWebcimesModal({
         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"
+        headerHtml: null, // html for header (overrides titleHtml), default "null"
         titleHtml: 'My title', // html for title, default "null"
         bodyHtml: 'My Body', // html for body, default "null"
+        footerHtml: null, // html for footer (overrides buttonCancelHtml and buttonConfirmHtml), 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"
@@ -46,9 +49,10 @@ document.addEventListener('DOMContentLoaded', function () {
         }, // callback after trigger confirm button
     });
 
-    const myModal2 = CreateWebcimesModal({
+    // Example 2: Modal with HTMLElement from DOM
+    const myModal2 = createWebcimesModal({
         titleHtml: 'My title', // html for title, default "null"
-        bodyHtml: document.querySelector('.test').outerHTML, // html for body, default "null"
+        bodyHtml: document.querySelector('.test'), // pass HTMLElement directly
         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"
@@ -60,4 +64,48 @@ document.addEventListener('DOMContentLoaded', function () {
             myModal2.destroy();
         }, // callback after trigger confirm button
     });
+
+    // Example 3: Modal with custom header and footer using functions
+    createWebcimesModal({
+        headerHtml: () => {
+            const header = document.createElement('div');
+            header.innerHTML =
+                '<h2 style="margin: 0; color: #333;">Custom Header</h2><p style="margin: 5px 0 0; font-size: 14px; color: #666;">With dynamic content</p>';
+            return header;
+        },
+        bodyHtml: () => {
+            const body = document.createElement('div');
+            body.innerHTML =
+                '<p>This modal demonstrates custom header and footer.</p><p>The close button is automatically added after the header content.</p>';
+            return body;
+        },
+        footerHtml: () => {
+            const footer = document.createElement('div');
+            footer.style.display = 'flex';
+            footer.style.gap = '10px';
+            footer.style.justifyContent = 'flex-end';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.textContent = 'Custom Cancel';
+            cancelBtn.className = 'webcimes-modal__close';
+            cancelBtn.style.padding = '8px 16px';
+            cancelBtn.style.cursor = 'pointer';
+
+            const confirmBtn = document.createElement('button');
+            confirmBtn.textContent = 'Custom Confirm';
+            confirmBtn.className = 'webcimes-modal__close';
+            confirmBtn.style.padding = '8px 16px';
+            confirmBtn.style.cursor = 'pointer';
+            confirmBtn.style.background = '#007bff';
+            confirmBtn.style.color = 'white';
+            confirmBtn.style.border = 'none';
+            confirmBtn.style.borderRadius = '4px';
+
+            footer.appendChild(cancelBtn);
+            footer.appendChild(confirmBtn);
+            return footer;
+        },
+        showCloseButton: true, // Close button will be added after headerHtml content
+        allowCloseOutside: true,
+    });
 });

package/demo/script_udm.js

@@ -1,12 +1,15 @@
 // Wait for dom content loaded
 document.addEventListener('DOMContentLoaded', function () {
-    const myModal = CreateWebcimesModal({
+    // Example 1: Full options with string content
+    const myModal = createWebcimesModal({
         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"
+        headerHtml: null, // html for header (overrides titleHtml), default "null"
         titleHtml: 'My title', // html for title, default "null"
         bodyHtml: 'My Body', // html for body, default "null"
+        footerHtml: null, // html for footer (overrides buttonCancelHtml and buttonConfirmHtml), 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"
@@ -43,9 +46,10 @@ document.addEventListener('DOMContentLoaded', function () {
         }, // callback after trigger confirm button
     });
 
-    const myModal2 = CreateWebcimesModal({
+    // Example 2: Modal with HTMLElement from DOM
+    const myModal2 = createWebcimesModal({
         titleHtml: 'My title', // html for title, default "null"
-        bodyHtml: document.querySelector('.test').outerHTML, // html for body, default "null"
+        bodyHtml: document.querySelector('.test'), // pass HTMLElement directly
         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"
@@ -57,4 +61,48 @@ document.addEventListener('DOMContentLoaded', function () {
             myModal2.destroy();
         }, // callback after trigger confirm button
     });
+
+    // Example 3: Modal with custom header and footer using functions
+    createWebcimesModal({
+        headerHtml: () => {
+            const header = document.createElement('div');
+            header.innerHTML =
+                '<h2 style="margin: 0; color: #333;">Custom Header</h2><p style="margin: 5px 0 0; font-size: 14px; color: #666;">With dynamic content</p>';
+            return header;
+        },
+        bodyHtml: () => {
+            const body = document.createElement('div');
+            body.innerHTML =
+                '<p>This modal demonstrates custom header and footer.</p><p>The close button is automatically added after the header content.</p>';
+            return body;
+        },
+        footerHtml: () => {
+            const footer = document.createElement('div');
+            footer.style.display = 'flex';
+            footer.style.gap = '10px';
+            footer.style.justifyContent = 'flex-end';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.textContent = 'Custom Cancel';
+            cancelBtn.className = 'webcimes-modal__close';
+            cancelBtn.style.padding = '8px 16px';
+            cancelBtn.style.cursor = 'pointer';
+
+            const confirmBtn = document.createElement('button');
+            confirmBtn.textContent = 'Custom Confirm';
+            confirmBtn.className = 'webcimes-modal__close';
+            confirmBtn.style.padding = '8px 16px';
+            confirmBtn.style.cursor = 'pointer';
+            confirmBtn.style.background = '#007bff';
+            confirmBtn.style.color = 'white';
+            confirmBtn.style.border = 'none';
+            confirmBtn.style.borderRadius = '4px';
+
+            footer.appendChild(cancelBtn);
+            footer.appendChild(confirmBtn);
+            return footer;
+        },
+        showCloseButton: true, // Close button will be added after headerHtml content
+        allowCloseOutside: true,
+    });
 });

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

@@ -29,14 +29,18 @@ export interface Options {
     width: string;
     /** height (specify unit), default "auto" */
     height: string;
+    /** html for header (overrides titleHtml), default "null" */
+    headerHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for title, default "null" */
-    titleHtml: string | null;
+    titleHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for body, default "null" */
-    bodyHtml: string | null;
+    bodyHtml: string | HTMLElement | (() => HTMLElement) | null;
+    /** html for footer (overrides buttonCancelHtml and buttonConfirmHtml), default "null" */
+    footerHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for cancel button, default "null" */
-    buttonCancelHtml: string | null;
+    buttonCancelHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for confirm button, default "null" */
-    buttonConfirmHtml: string | null;
+    buttonConfirmHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** close modal after trigger cancel button, default "true" */
     closeOnCancelButton: boolean;
     /** close modal after trigger confirm button, default "true" */
@@ -93,5 +97,5 @@ export interface WebcimesModal {
 /**
  * Factory function to create a WebcimesModal instance with proper typing
  */
-export declare function CreateWebcimesModal(options: Partial<Options>): WebcimesModal;
+export declare function createWebcimesModal(options: Partial<Options>): WebcimesModal;
 //# sourceMappingURL=webcimes-modal.d.ts.map

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

@@ -1,2 +1,2 @@
-var t={d:(o,e)=>{for(var s in e)t.o(e,s)&&!t.o(o,s)&&Object.defineProperty(o,s,{enumerable:!0,get:e[s]})},o:(t,o)=>Object.prototype.hasOwnProperty.call(t,o)},o={};t.d(o,{f:()=>s});class e{modals;modal;options;eventCancelButton=()=>{this.modal.dispatchEvent(new CustomEvent("onCancelButton")),"function"==typeof this.options.onCancelButton&&this.options.onCancelButton()};eventConfirmButton=()=>{this.modal.dispatchEvent(new CustomEvent("onConfirmButton")),"function"==typeof this.options.onConfirmButton&&this.options.onConfirmButton()};eventClickOutside=t=>{t.target==this.modals&&(this.options.allowCloseOutside?this.destroy():(this.modal.classList.add("animGrowShrink"),setTimeout((()=>{this.modal.classList.remove("animGrowShrink")}),this.options.animationDuration)))};eventClickCloseButton=()=>{this.destroy()};eventDragModalOnTop=t=>{if(!t.target.closest(".webcimes-modal__close")&&document.querySelectorAll(".webcimes-modal").length>1&&null!==this.modal.nextElementSibling){let t=this.modal.scrollTop;this.modals.insertAdjacentElement("beforeend",this.modal),this.modal.scrollTop=t}};position;offset;isDragging=!1;moveFromElements=[];eventDragStart=t=>{t.target.closest(".webcimes-modal__button")||(this.isDragging=!0,t.clientX?this.offset={x:this.modal.offsetLeft-t.clientX,y:this.modal.offsetTop-t.clientY}:t.touches&&(this.offset={x:this.modal.offsetLeft-t.touches[0].clientX,y:this.modal.offsetTop-t.touches[0].clientY}))};eventMove=t=>{this.isDragging&&(t.clientX?this.position={x:t.clientX,y:t.clientY}:t.touches&&(this.position={x:t.touches[0].clientX,y:t.touches[0].clientY}),this.modal.style.left=this.position.x+this.offset.x+"px",this.modal.style.top=this.position.y+this.offset.y+"px")};eventDragStop=()=>{this.isDragging=!1};eventPreventSelectText=t=>{this.isDragging&&t.preventDefault()};eventResize=()=>{this.modal.style.removeProperty("left"),this.modal.style.removeProperty("top")};constructor(t){this.options={setId:null,setClass:null,width:"auto",height:"auto",titleHtml:null,bodyHtml:null,buttonCancelHtml:null,buttonConfirmHtml:null,closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!0,stickyHeader:!0,stickyFooter:!0,style:null,animationOnShow:"animDropDown",animationOnDestroy:"animDropUp",animationDuration:500,beforeShow:()=>{},afterShow:()=>{},beforeDestroy:()=>{},afterDestroy:()=>{},onCancelButton:()=>{},onConfirmButton:()=>{},...t},this.init()}init(){if(document.querySelector(".webcimes-modals")?(this.modals=document.querySelector(".webcimes-modals"),this.modals.classList.remove("animFadeOut")):(document.body.insertAdjacentHTML("beforeend",'<div class="webcimes-modals animFadeIn"></div>'),this.modals=document.querySelector(".webcimes-modals"),this.modals.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modals.classList.remove("animFadeIn")}),this.options.animationDuration)),this.modals.insertAdjacentHTML("beforeend",'<div class="webcimes-modal '+(this.options.setClass?this.options.setClass:"")+" "+this.options.animationOnShow+'" '+(this.options.setId?'id="'+this.options.setId+'"':"")+">\n\t\t\t\t"+(this.options.titleHtml||this.options.showCloseButton?'<div class="webcimes-modal__header '+(this.options.stickyHeader?"webcimes-modal__header--is-sticky":"")+" "+(this.options.moveFromHeader?"webcimes-modal__header--is-movable":"")+'">\n\t\t\t\t\t\t'+(this.options.titleHtml?'<div class="webcimes-modal__title">'+this.options.titleHtml+"</div>":"")+"\n\t\t\t\t\t\t"+(this.options.showCloseButton?'<button class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"></button>':"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.bodyHtml?'<div class="webcimes-modal__body '+(this.options.moveFromBody?".webcimes-modal__body--is-movable":"")+'">\n\t\t\t\t\t\t'+this.options.bodyHtml+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.buttonCancelHtml||this.options.buttonConfirmHtml?'<div class="webcimes-modal__footer '+(this.options.stickyFooter?".webcimes-modal__footer--is-sticky":"")+" "+(this.options.moveFromFooter?"webcimes-modal__footer--is-movable":"")+'">\n\t\t\t\t\t\t'+(this.options.buttonCancelHtml?'<button class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel '+(this.options.closeOnCancelButton?"webcimes-modal__close":"")+'">'+this.options.buttonCancelHtml+"</button>":"")+"\n\t\t\t\t\t\t"+(this.options.buttonConfirmHtml?'<button class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm '+(this.options.closeOnConfirmButton?"webcimes-modal__close":"")+'">'+this.options.buttonConfirmHtml+"</button>":"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t</div>"),this.modal=this.modals.lastElementChild,setTimeout((()=>{this.modal.dispatchEvent(new CustomEvent("beforeShow")),"function"==typeof this.options.beforeShow&&this.options.beforeShow()}),0),this.modal.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modal.classList.remove(this.options.animationOnShow),this.modal.dispatchEvent(new CustomEvent("afterShow")),"function"==typeof this.options.afterShow&&this.options.afterShow()}),this.options.animationDuration),this.modal.style.setProperty("max-width","90%"),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),this.modal.style.setProperty("max-height","90%"),"auto"!=this.options.height&&this.options.height?this.modal.style.setProperty("height",this.options.height):this.modal.style.setProperty("height","max-content"),this.options.style){let t=this.modal.getAttribute("style")??"";this.modal.setAttribute("style",t+this.options.style)}this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.addEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.addEventListener("click",this.eventConfirmButton),this.modals.addEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.addEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.addEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(this.options.moveFromHeader&&this.modal.querySelector(".webcimes-modal__header")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__header")),this.options.moveFromBody&&this.modal.querySelector(".webcimes-modal__body")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__body")),this.options.moveFromFooter&&this.modal.querySelector(".webcimes-modal__footer")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__footer")),["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.addEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.addEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.addEventListener(t,this.eventDragStop)})),document.addEventListener("selectstart",this.eventPreventSelectText)),window.addEventListener("resize",this.eventResize)}destroy(){this.modal.getAttribute("data-destroying")||(this.modal.dispatchEvent(new CustomEvent("beforeDestroy")),"function"==typeof this.options.beforeDestroy&&this.options.beforeDestroy(),1==document.querySelectorAll(".webcimes-modal:not([data-destroying])").length&&this.modals.classList.add("animFadeOut"),this.modal.setAttribute("data-destroying","1"),this.modal.classList.add(this.options.animationOnDestroy),setTimeout((()=>{void 0!==this.modal&&(this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.removeEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.removeEventListener("click",this.eventConfirmButton),this.modals.removeEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.removeEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.removeEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.removeEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.removeEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.removeEventListener(t,this.eventDragStop)})),document.removeEventListener("selectstart",this.eventPreventSelectText)),window.removeEventListener("resize",this.eventResize),(document.querySelectorAll(".webcimes-modal").length>1?this.modal:this.modals).remove()),this.modal.dispatchEvent(new CustomEvent("afterDestroy")),"function"==typeof this.options.afterDestroy&&this.options.afterDestroy()}),this.options.animationDuration))}}function s(t){return new e(t)}var i=o.f;export{i as CreateWebcimesModal};
+var t={d:(e,o)=>{for(var s in o)t.o(o,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:o[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{H:()=>s});class o{modals;modal;options;eventCancelButton=()=>{this.modal.dispatchEvent(new CustomEvent("onCancelButton")),"function"==typeof this.options.onCancelButton&&this.options.onCancelButton()};eventConfirmButton=()=>{this.modal.dispatchEvent(new CustomEvent("onConfirmButton")),"function"==typeof this.options.onConfirmButton&&this.options.onConfirmButton()};eventClickOutside=t=>{t.target==this.modals&&(this.options.allowCloseOutside?this.destroy():(this.modal.classList.add("animGrowShrink"),setTimeout((()=>{this.modal.classList.remove("animGrowShrink")}),this.options.animationDuration)))};eventClickCloseButton=()=>{this.destroy()};eventDragModalOnTop=t=>{if(!t.target.closest(".webcimes-modal__close")&&document.querySelectorAll(".webcimes-modal").length>1&&null!==this.modal.nextElementSibling){let t=this.modal.scrollTop;this.modals.insertAdjacentElement("beforeend",this.modal),this.modal.scrollTop=t}};position;offset;isDragging=!1;moveFromElements=[];eventDragStart=t=>{t.target.closest(".webcimes-modal__button")||(this.isDragging=!0,t.clientX?this.offset={x:this.modal.offsetLeft-t.clientX,y:this.modal.offsetTop-t.clientY}:t.touches&&(this.offset={x:this.modal.offsetLeft-t.touches[0].clientX,y:this.modal.offsetTop-t.touches[0].clientY}))};eventMove=t=>{this.isDragging&&(t.clientX?this.position={x:t.clientX,y:t.clientY}:t.touches&&(this.position={x:t.touches[0].clientX,y:t.touches[0].clientY}),this.modal.style.left=this.position.x+this.offset.x+"px",this.modal.style.top=this.position.y+this.offset.y+"px")};eventDragStop=()=>{this.isDragging=!1};eventPreventSelectText=t=>{this.isDragging&&t.preventDefault()};eventResize=()=>{this.modal.style.removeProperty("left"),this.modal.style.removeProperty("top")};setElementContent(t,e){"string"==typeof e?t.innerHTML=e:"function"==typeof e?t.appendChild(e()):t.appendChild(e)}buildHeader(){if(!this.options.headerHtml&&!this.options.titleHtml&&!this.options.showCloseButton)return null;const t=document.createElement("div");if(t.className="webcimes-modal__header",this.options.stickyHeader&&t.classList.add("webcimes-modal__header--is-sticky"),this.options.moveFromHeader&&t.classList.add("webcimes-modal__header--is-movable"),this.options.headerHtml){if(this.setElementContent(t,this.options.headerHtml),this.options.showCloseButton){const e=document.createElement("button");e.className="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close",e.setAttribute("aria-label","Close modal"),t.appendChild(e)}return t}if(this.options.titleHtml){const e=document.createElement("div");e.className="webcimes-modal__title",this.setElementContent(e,this.options.titleHtml),t.appendChild(e)}if(this.options.showCloseButton){const e=document.createElement("button");e.className="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close",e.setAttribute("aria-label","Close modal"),t.appendChild(e)}return t}buildBody(){if(!this.options.bodyHtml)return null;const t=document.createElement("div");return t.className="webcimes-modal__body",this.options.moveFromBody&&t.classList.add("webcimes-modal__body--is-movable"),this.setElementContent(t,this.options.bodyHtml),t}buildFooter(){if(!this.options.footerHtml&&!this.options.buttonCancelHtml&&!this.options.buttonConfirmHtml)return null;const t=document.createElement("div");if(t.className="webcimes-modal__footer",this.options.stickyFooter&&t.classList.add("webcimes-modal__footer--is-sticky"),this.options.moveFromFooter&&t.classList.add("webcimes-modal__footer--is-movable"),this.options.footerHtml)return this.setElementContent(t,this.options.footerHtml),t;if(this.options.buttonCancelHtml){const e=document.createElement("button");e.className="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel",this.options.closeOnCancelButton&&e.classList.add("webcimes-modal__close"),this.setElementContent(e,this.options.buttonCancelHtml),t.appendChild(e)}if(this.options.buttonConfirmHtml){const e=document.createElement("button");e.className="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm",this.options.closeOnConfirmButton&&e.classList.add("webcimes-modal__close"),this.setElementContent(e,this.options.buttonConfirmHtml),t.appendChild(e)}return t}buildModal(){const t=document.createElement("div");t.className=`webcimes-modal ${this.options.animationOnShow}`,t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),this.options.setClass&&t.classList.add(this.options.setClass),this.options.setId&&(t.id=this.options.setId);const e=this.buildHeader();e&&t.appendChild(e);const o=this.buildBody();o&&t.appendChild(o);const s=this.buildFooter();return s&&t.appendChild(s),t}constructor(t){this.options={setId:null,setClass:null,width:"auto",height:"auto",headerHtml:null,titleHtml:null,bodyHtml:null,footerHtml:null,buttonCancelHtml:null,buttonConfirmHtml:null,closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!0,stickyHeader:!0,stickyFooter:!0,style:null,animationOnShow:"animDropDown",animationOnDestroy:"animDropUp",animationDuration:500,beforeShow:()=>{},afterShow:()=>{},beforeDestroy:()=>{},afterDestroy:()=>{},onCancelButton:()=>{},onConfirmButton:()=>{},...t},this.init()}init(){if(document.querySelector(".webcimes-modals")?(this.modals=document.querySelector(".webcimes-modals"),this.modals.classList.remove("animFadeOut")):(this.modals=document.createElement("div"),this.modals.className="webcimes-modals animFadeIn",this.modals.style.setProperty("animation-duration",this.options.animationDuration+"ms"),document.body.appendChild(this.modals),setTimeout((()=>{this.modals.classList.remove("animFadeIn")}),this.options.animationDuration)),this.modal=this.buildModal(),this.modals.appendChild(this.modal),setTimeout((()=>{this.modal.dispatchEvent(new CustomEvent("beforeShow")),"function"==typeof this.options.beforeShow&&this.options.beforeShow()}),0),this.modal.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modal.classList.remove(this.options.animationOnShow),this.modal.dispatchEvent(new CustomEvent("afterShow")),"function"==typeof this.options.afterShow&&this.options.afterShow()}),this.options.animationDuration),this.modal.style.setProperty("max-width","90%"),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),this.modal.style.setProperty("max-height","90%"),"auto"!=this.options.height&&this.options.height?this.modal.style.setProperty("height",this.options.height):this.modal.style.setProperty("height","max-content"),this.options.style){let t=this.modal.getAttribute("style")??"";this.modal.setAttribute("style",t+this.options.style)}this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.addEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.addEventListener("click",this.eventConfirmButton),this.modals.addEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.addEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.addEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(this.options.moveFromHeader&&this.modal.querySelector(".webcimes-modal__header")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__header")),this.options.moveFromBody&&this.modal.querySelector(".webcimes-modal__body")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__body")),this.options.moveFromFooter&&this.modal.querySelector(".webcimes-modal__footer")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__footer")),["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((e=>{e.addEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.addEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.addEventListener(t,this.eventDragStop)})),document.addEventListener("selectstart",this.eventPreventSelectText)),window.addEventListener("resize",this.eventResize)}destroy(){this.modal.getAttribute("data-destroying")||(this.modal.dispatchEvent(new CustomEvent("beforeDestroy")),"function"==typeof this.options.beforeDestroy&&this.options.beforeDestroy(),1==document.querySelectorAll(".webcimes-modal:not([data-destroying])").length&&this.modals.classList.add("animFadeOut"),this.modal.setAttribute("data-destroying","1"),this.modal.classList.add(this.options.animationOnDestroy),setTimeout((()=>{void 0!==this.modal&&(this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.removeEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.removeEventListener("click",this.eventConfirmButton),this.modals.removeEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.removeEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.removeEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((e=>{e.removeEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.removeEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.removeEventListener(t,this.eventDragStop)})),document.removeEventListener("selectstart",this.eventPreventSelectText)),window.removeEventListener("resize",this.eventResize),(document.querySelectorAll(".webcimes-modal").length>1?this.modal:this.modals).remove()),this.modal.dispatchEvent(new CustomEvent("afterDestroy")),"function"==typeof this.options.afterDestroy&&this.options.afterDestroy()}),this.options.animationDuration))}}function s(t){return new o(t)}var i=e.H;export{i as createWebcimesModal};
 //# sourceMappingURL=webcimes-modal.esm.js.map