webcimes-modal 2.0.2 → 2.2.0

package/README.md

@@ -97,10 +97,14 @@ document.addEventListener('DOMContentLoaded', function () {
         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"
+        buttonCancelClass: [], // add extra css classes to cancel button, default "[]"
+        buttonConfirmClass: [], // add extra css classes to confirm button, default "[]"
         closeOnCancelButton: false, // close modal after trigger cancel button, default "true"
         closeOnConfirmButton: true, // close modal after trigger confirm button, default "true"
         showCloseButton: true, // show close button, default "true"
@@ -109,8 +113,6 @@ document.addEventListener('DOMContentLoaded', function () {
         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 header sticky (visible) when scrolling, default "true"
-        stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
         style: null, // add extra css style to modal, default null
         animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
         animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
@@ -143,24 +145,33 @@ After a creating a modal, the basic html structure look like this:
 
 ```html
 <div class="webcimes-modal">
+    <button
+        class="webcimes-modal__button webcimes-modal__close-button webcimes-modal__close"
+        aria-label="Close modal"
+    >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+            <path
+                d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"
+            />
+        </svg>
+    </button>
     <div class="webcimes-modal__header">
         <div class="webcimes-modal__title">My title</div>
-        <button
-            class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"
-        ></button>
     </div>
     <div class="webcimes-modal__body">My body</div>
     <div class="webcimes-modal__footer">
-        <button
-            class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel"
-        >
-            Cancel
-        </button>
-        <button
-            class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm"
-        >
-            Confirm
-        </button>
+        <div class="webcimes-modal__footer-buttons">
+            <button
+                class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel"
+            >
+                Cancel
+            </button>
+            <button
+                class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm"
+            >
+                Confirm
+            </button>
+        </div>
     </div>
 </div>
 ```
@@ -169,28 +180,71 @@ 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({
     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;
+    },
+    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` and `titleHtml` to `null`
+
+**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:
 
@@ -211,6 +265,8 @@ Below are the different options for customize the modal behavior.
 
 ```javascript
 const myModal = createWebcimesModal({
+    buttonCancelClass: ['btn-secondary', 'btn-lg'], // add extra css classes to cancel button, default "[]"
+    buttonConfirmClass: ['btn-danger', 'btn-lg'], // add extra css classes to confirm button, default "[]"
     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"
@@ -219,8 +275,6 @@ const myModal = createWebcimesModal({
     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 header sticky (visible) when scrolling, default "true"
-    stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
 });
 ```
 
@@ -353,7 +407,11 @@ You can style modal with the following field applying to the class of `.webcimes
     --modal-background: #fff;
     --modal-border-color: #ddd;
     --modal-box-shadow: 1px 1px 3px 0px #444;
+    --modal-header-padding: 20px 40px;
+    --modal-body-padding: 20px 40px;
+    --modal-footer-padding: 20px 40px;
     --modal-title-font-size: 24px;
+    --modal-title-font-weight: 600;
     --modal-button-cancel-background: rgba(102, 102, 102, 1);
     --modal-button-cancel-background-hover: rgba(102, 102, 102, 0.7);
     --modal-button-cancel-color: #fff;

package/demo/script_esm.js

@@ -3,15 +3,20 @@ import { createWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
 
 // Wait for dom content loaded
 document.addEventListener('DOMContentLoaded', function () {
+    // 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"
+        buttonCancelClass: ['my-custom-class'], // add extra css classes to cancel button, default "[]"
+        buttonConfirmClass: ['my-custom-class'], // add extra css classes to confirm button, default "[]"
         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"
@@ -20,8 +25,6 @@ document.addEventListener('DOMContentLoaded', function () {
         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"
@@ -46,9 +49,10 @@ document.addEventListener('DOMContentLoaded', function () {
         }, // callback after trigger confirm button
     });
 
+    // 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,14 +1,19 @@
 // Wait for dom content loaded
 document.addEventListener('DOMContentLoaded', function () {
+    // 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"
+        buttonCancelClass: ['my-custom-class'], // add extra css classes to cancel button, default "[]"
+        buttonConfirmClass: ['my-custom-class'], // add extra css classes to confirm button, default "[]"
         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"
@@ -17,8 +22,6 @@ document.addEventListener('DOMContentLoaded', function () {
         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"
@@ -43,9 +46,10 @@ document.addEventListener('DOMContentLoaded', function () {
         }, // callback after trigger confirm button
     });
 
+    // 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/css/webcimes-modal.css

@@ -1,2 +1,2 @@
-.webcimes-modals,.webcimes-modals *,.webcimes-modals :after,.webcimes-modals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimes-modals{--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)}.webcimes-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}.webcimes-modal__button{background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit}.webcimes-modal__header{align-items:center;background:var(--modal-background);border-bottom:1px solid var(--modal-border-color);display:flex;padding:20px 40px;position:relative}.webcimes-modal__header--is-sticky{position:sticky;top:0}.webcimes-modal__header--is-movable{cursor:move;touch-action:none}.webcimes-modal__title{flex:1;font-size:var(--modal-title-font-size);overflow:hidden;text-overflow:ellipsis}.webcimes-modal__header-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}.webcimes-modal__header-close:hover{opacity:.5}.webcimes-modal__body{padding:20px 40px}.webcimes-modal__body--is-movable{cursor:move}.webcimes-modal__footer{background:var(--modal-background);border-top:1px solid var(--modal-border-color);display:flex;flex-wrap:wrap;justify-content:center;padding:20px 40px}.webcimes-modal__footer--is-sticky{bottom:0;position:sticky}.webcimes-modal__footer--is-movable{cursor:move;touch-action:none}.webcimes-modal__footer-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}.webcimes-modal__footer-button--cancel{background:var(--modal-button-cancel-background);color:var(--modal-button-cancel-color)}.webcimes-modal__footer-button--cancel:hover{background:var(--modal-button-cancel-background-hover);color:var(--modal-button-cancel-color-hover)}.webcimes-modal__footer-button--confirm{background:var(--modal-button-confirm-background);color:var(--modal-button-confirm-color)}.webcimes-modal__footer-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}
+.webcimes-modals,.webcimes-modals *,.webcimes-modals :after,.webcimes-modals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimes-modals{--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)}.webcimes-modal{--modal-color:inherit;--modal-background:#fff;--modal-border-color:#ddd;--modal-box-shadow:1px 1px 3px 0px #444;--modal-header-padding:20px 40px;--modal-body-padding:20px 40px;--modal-footer-padding:20px 40px;--modal-title-font-size:24px;--modal-title-font-weight:600;--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);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;overflow:hidden;position:absolute}.webcimes-modal__button{background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit}.webcimes-modal__header{border-bottom:1px solid var(--modal-border-color);flex:0 0 auto;padding:var(--modal-header-padding);position:relative}.webcimes-modal__header--is-movable{cursor:move;touch-action:none}.webcimes-modal__title{font-size:var(--modal-title-font-size);font-weight:var(--modal-title-font-weight);overflow:hidden;text-overflow:ellipsis}.webcimes-modal__close-button{align-items:center;cursor:pointer;display:flex;height:20px;justify-content:center;opacity:1;padding:0;position:absolute;right:15px;top:15px;-webkit-transition:opacity .6s ease 0s;-moz-transition:opacity .6s ease 0s;-o-transition:opacity .6s ease 0s;transition:opacity .6s ease 0s;width:12.5px}.webcimes-modal__close-button:hover{opacity:.5}.webcimes-modal__close-button svg{fill:currentColor;height:100%;width:100%}.webcimes-modal__body{flex:1;overflow:auto;padding:var(--modal-body-padding)}.webcimes-modal__body--is-movable{cursor:move}.webcimes-modal__footer{border-top:1px solid var(--modal-border-color);flex:0 0 auto;padding:var(--modal-footer-padding)}.webcimes-modal__footer--is-movable{cursor:move;touch-action:none}.webcimes-modal__footer-buttons{display:flex;flex-wrap:wrap;justify-content:center}.webcimes-modal__footer-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}.webcimes-modal__footer-button--cancel{background:var(--modal-button-cancel-background);color:var(--modal-button-cancel-color)}.webcimes-modal__footer-button--cancel:hover{background:var(--modal-button-cancel-background-hover);color:var(--modal-button-cancel-color-hover)}.webcimes-modal__footer-button--confirm{background:var(--modal-button-confirm-background);color:var(--modal-button-confirm-color)}.webcimes-modal__footer-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.css.map*/

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

@@ -1 +1 @@
-{"version":3,"file":"css/webcimes-modal.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.webcimes-modals,\r\n.webcimes-modals *,\r\n.webcimes-modals *::before,\r\n.webcimes-modals *::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.webcimes-modals\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.webcimes-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.webcimes-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.webcimes-modal__header\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.webcimes-modal__header--is-sticky\r\n{\r\n\tposition: sticky;\r\n\ttop: 0;\r\n}\r\n.webcimes-modal__header--is-movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimes-modal__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.webcimes-modal__header-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.webcimes-modal__header-close:hover\r\n{\r\n\topacity: 0.5;\r\n}\r\n.webcimes-modal__body\r\n{\r\n\tpadding: 20px 40px;\r\n}\r\n.webcimes-modal__body--is-movable\r\n{\r\n\tcursor: move;\r\n}\r\n.webcimes-modal__footer\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: center;\r\n\tflex-wrap: wrap;\r\n}\r\n.webcimes-modal__footer--is-sticky\r\n{\r\n\tposition: sticky;\r\n\tbottom: 0;\r\n}\r\n.webcimes-modal__footer--is-movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimes-modal__footer-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.webcimes-modal__footer-button--cancel\r\n{\r\n\tbackground: var(--modal-button-cancel-background);\r\n\tcolor: var(--modal-button-cancel-color);\r\n}\r\n.webcimes-modal__footer-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.webcimes-modal__footer-button--confirm\r\n{\r\n\tbackground: var(--modal-button-confirm-background);\r\n\tcolor: var(--modal-button-confirm-color);\r\n}\r\n.webcimes-modal__footer-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":""}
+{"version":3,"file":"css/webcimes-modal.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.webcimes-modals,\r\n.webcimes-modals *,\r\n.webcimes-modals *::before,\r\n.webcimes-modals *::after {\r\n    -webkit-box-sizing: border-box;\r\n    -moz-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n.webcimes-modals {\r\n    --webcimes-modals-background: rgba(0, 0, 0, 0.8);\r\n    --webcimes-modals-z-index: 5;\r\n\r\n    position: fixed;\r\n    background: var(--webcimes-modals-background);\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: var(--webcimes-modals-z-index);\r\n}\r\n.webcimes-modal {\r\n    --modal-color: inherit;\r\n    --modal-background: #fff;\r\n    --modal-border-color: #ddd;\r\n    --modal-box-shadow: 1px 1px 3px 0px #444;\r\n    --modal-header-padding: 20px 40px;\r\n    --modal-body-padding: 20px 40px;\r\n    --modal-footer-padding: 20px 40px;\r\n    --modal-title-font-size: 24px;\r\n    --modal-title-font-weight: 600;\r\n    --modal-button-cancel-background: rgba(102, 102, 102, 1);\r\n    --modal-button-cancel-background-hover: rgba(102, 102, 102, 0.7);\r\n    --modal-button-cancel-color: #fff;\r\n    --modal-button-cancel-color-hover: #fff;\r\n    --modal-button-confirm-background: rgba(0, 0, 0, 1);\r\n    --modal-button-confirm-background-hover: rgba(0, 0, 0, 0.7);\r\n    --modal-button-confirm-color: #fff;\r\n    --modal-button-confirm-color-hover: #fff;\r\n\r\n    position: absolute;\r\n    border-radius: 5px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    max-width: 90vw;\r\n    max-height: 90vh;\r\n    overflow: hidden;\r\n    color: var(--modal-color);\r\n    background: var(--modal-background);\r\n    -webkit-box-shadow: var(--modal-box-shadow);\r\n    -moz-box-shadow: var(--modal-box-shadow);\r\n    -o-box-shadow: var(--modal-box-shadow);\r\n    box-shadow: var(--modal-box-shadow);\r\n}\r\n.webcimes-modal__button {\r\n    font-family: inherit;\r\n    font-size: inherit;\r\n    font-weight: inherit;\r\n    border: none;\r\n    background: none;\r\n}\r\n.webcimes-modal__header {\r\n    position: relative;\r\n    flex: 0 0 auto;\r\n    padding: var(--modal-header-padding);\r\n    border-bottom: 1px solid var(--modal-border-color);\r\n}\r\n.webcimes-modal__header--is-movable {\r\n    cursor: move;\r\n    touch-action: none;\r\n}\r\n.webcimes-modal__title {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    font-weight: var(--modal-title-font-weight);\r\n    font-size: var(--modal-title-font-size);\r\n}\r\n.webcimes-modal__close-button {\r\n    position: absolute;\r\n    height: 20px;\r\n    width: 12.5px;\r\n    right: 15px;\r\n    top: 15px;\r\n    cursor: pointer;\r\n    opacity: 1;\r\n    padding: 0;\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    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n.webcimes-modal__close-button:hover {\r\n    opacity: 0.5;\r\n}\r\n.webcimes-modal__close-button svg {\r\n    fill: currentColor;\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n.webcimes-modal__body {\r\n    flex: 1;\r\n    overflow: auto;\r\n    padding: var(--modal-body-padding);\r\n}\r\n.webcimes-modal__body--is-movable {\r\n    cursor: move;\r\n}\r\n.webcimes-modal__footer {\r\n    flex: 0 0 auto;\r\n    padding: var(--modal-footer-padding);\r\n    border-top: 1px solid var(--modal-border-color);\r\n}\r\n.webcimes-modal__footer--is-movable {\r\n    cursor: move;\r\n    touch-action: none;\r\n}\r\n.webcimes-modal__footer-buttons {\r\n    display: flex;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n}\r\n.webcimes-modal__footer-button {\r\n    max-width: 100%;\r\n    flex: 0 0 auto;\r\n    border-radius: 5px;\r\n    padding: 10px 30px;\r\n    margin: 5px;\r\n    cursor: pointer;\r\n    text-overflow: ellipsis;\r\n    overflow: hidden;\r\n    -webkit-transition:\r\n        color 0.6s ease 0s,\r\n        background 0.6s ease 0s;\r\n    -moz-transition:\r\n        color 0.6s ease 0s,\r\n        background 0.6s ease 0s;\r\n    -o-transition:\r\n        color 0.6s ease 0s,\r\n        background 0.6s ease 0s;\r\n    transition:\r\n        color 0.6s ease 0s,\r\n        background 0.6s ease 0s;\r\n}\r\n.webcimes-modal__footer-button--cancel {\r\n    background: var(--modal-button-cancel-background);\r\n    color: var(--modal-button-cancel-color);\r\n}\r\n.webcimes-modal__footer-button--cancel:hover {\r\n    background: var(--modal-button-cancel-background-hover);\r\n    color: var(--modal-button-cancel-color-hover);\r\n}\r\n.webcimes-modal__footer-button--confirm {\r\n    background: var(--modal-button-confirm-background);\r\n    color: var(--modal-button-confirm-color);\r\n}\r\n.webcimes-modal__footer-button--confirm:hover {\r\n    background: var(--modal-button-confirm-background-hover);\r\n    color: var(--modal-button-confirm-color-hover);\r\n}\r\n\r\n/* ANIMATIONS */\r\n\r\n@-webkit-keyframes animFadeIn {\r\n    0% {\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n    }\r\n}\r\n@keyframes animFadeIn {\r\n    0% {\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        opacity: 1;\r\n    }\r\n}\r\n.animFadeIn {\r\n    -webkit-animation-duration: 0.5s;\r\n    animation-duration: 0.5s;\r\n    -webkit-animation-fill-mode: both;\r\n    animation-fill-mode: both;\r\n    -webkit-animation-name: animFadeIn;\r\n    animation-name: animFadeIn;\r\n}\r\n\r\n@-webkit-keyframes animFadeOut {\r\n    0% {\r\n        opacity: 1;\r\n    }\r\n    100% {\r\n        opacity: 0;\r\n    }\r\n}\r\n@keyframes animFadeOut {\r\n    0% {\r\n        opacity: 1;\r\n    }\r\n    100% {\r\n        opacity: 0;\r\n    }\r\n}\r\n.animFadeOut {\r\n    -webkit-animation-duration: 0.5s;\r\n    animation-duration: 0.5s;\r\n    -webkit-animation-fill-mode: both;\r\n    animation-fill-mode: both;\r\n    -webkit-animation-name: animFadeOut;\r\n    animation-name: animFadeOut;\r\n}\r\n\r\n@-webkit-keyframes animDropDown {\r\n    0% {\r\n        -webkit-transform: translateY(-20vh);\r\n        -moz-transform: translateY(-20vh);\r\n        -ms-transform: translateY(-20vh);\r\n        -o-transform: translateY(-20vh);\r\n        transform: translateY(-20vh);\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        -webkit-transform: translateY(0);\r\n        -moz-transform: translateY(0);\r\n        -ms-transform: translateY(0);\r\n        -o-transform: translateY(0);\r\n        transform: translateY(0);\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes animDropDown {\r\n    0% {\r\n        -webkit-transform: translateY(-20vh);\r\n        -moz-transform: translateY(-20vh);\r\n        -ms-transform: translateY(-20vh);\r\n        -o-transform: translateY(-20vh);\r\n        transform: translateY(-20vh);\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        -webkit-transform: translateY(0);\r\n        -moz-transform: translateY(0);\r\n        -ms-transform: translateY(0);\r\n        -o-transform: translateY(0);\r\n        transform: translateY(0);\r\n        opacity: 1;\r\n    }\r\n}\r\n.animDropDown {\r\n    -webkit-animation-duration: 0.5s;\r\n    animation-duration: 0.5s;\r\n    -webkit-animation-fill-mode: both;\r\n    animation-fill-mode: both;\r\n    -webkit-animation-name: animDropDown;\r\n    animation-name: animDropDown;\r\n}\r\n\r\n@-webkit-keyframes animDropUp {\r\n    0% {\r\n        -webkit-transform: translateY(0);\r\n        -moz-transform: translateY(0);\r\n        -ms-transform: translateY(0);\r\n        -o-transform: translateY(0);\r\n        transform: translateY(0);\r\n        opacity: 1;\r\n    }\r\n    100% {\r\n        -webkit-transform: translateY(-20vh);\r\n        -moz-transform: translateY(-20vh);\r\n        -ms-transform: translateY(-20vh);\r\n        -o-transform: translateY(-20vh);\r\n        transform: translateY(-20vh);\r\n        opacity: 0;\r\n    }\r\n}\r\n\r\n@keyframes animDropUp {\r\n    0% {\r\n        -webkit-transform: translateY(0);\r\n        -moz-transform: translateY(0);\r\n        -ms-transform: translateY(0);\r\n        -o-transform: translateY(0);\r\n        transform: translateY(0);\r\n        opacity: 1;\r\n    }\r\n    100% {\r\n        -webkit-transform: translateY(-20vh);\r\n        -moz-transform: translateY(-20vh);\r\n        -ms-transform: translateY(-20vh);\r\n        -o-transform: translateY(-20vh);\r\n        transform: translateY(-20vh);\r\n        opacity: 0;\r\n    }\r\n}\r\n.animDropUp {\r\n    -webkit-animation-duration: 0.5s;\r\n    animation-duration: 0.5s;\r\n    -webkit-animation-fill-mode: both;\r\n    animation-fill-mode: both;\r\n    -webkit-animation-name: animDropUp;\r\n    animation-name: animDropUp;\r\n}\r\n\r\n@-webkit-keyframes animGrowShrink {\r\n    0% {\r\n        -webkit-transform: scale(1);\r\n        -moz-transform: scale(1);\r\n        -ms-transform: scale(1);\r\n        -o-transform: scale(1);\r\n        transform: scale(1);\r\n    }\r\n    50% {\r\n        -webkit-transform: scale(1.2);\r\n        -moz-transform: scale(1.2);\r\n        -ms-transform: scale(1.2);\r\n        -o-transform: scale(1.2);\r\n        transform: scale(1.2);\r\n    }\r\n    100% {\r\n        -webkit-transform: scale(1);\r\n        -moz-transform: scale(1);\r\n        -ms-transform: scale(1);\r\n        -o-transform: scale(1);\r\n        transform: scale(1);\r\n    }\r\n}\r\n\r\n@keyframes animGrowShrink {\r\n    0% {\r\n        -webkit-transform: scale(1);\r\n        -moz-transform: scale(1);\r\n        -ms-transform: scale(1);\r\n        -o-transform: scale(1);\r\n        transform: scale(1);\r\n    }\r\n    50% {\r\n        -webkit-transform: scale(1.1);\r\n        -moz-transform: scale(1.1);\r\n        -ms-transform: scale(1.1);\r\n        -o-transform: scale(1.1);\r\n        transform: scale(1.1);\r\n    }\r\n    100% {\r\n        -webkit-transform: scale(1);\r\n        -moz-transform: scale(1);\r\n        -ms-transform: scale(1);\r\n        -o-transform: scale(1);\r\n        transform: scale(1);\r\n    }\r\n}\r\n.animGrowShrink {\r\n    -webkit-animation-duration: 0.5s;\r\n    animation-duration: 0.5s;\r\n    -webkit-animation-fill-mode: both;\r\n    animation-fill-mode: both;\r\n    -webkit-animation-name: animGrowShrink;\r\n    animation-name: animGrowShrink;\r\n}\r\n"],"names":[],"sourceRoot":""}

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

@@ -29,14 +29,22 @@ 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;
+    /** add extra css classes to cancel button, default "[]" */
+    buttonCancelClass: string[];
+    /** add extra css classes to confirm button, default "[]" */
+    buttonConfirmClass: string[];
     /** close modal after trigger cancel button, default "true" */
     closeOnCancelButton: boolean;
     /** close modal after trigger confirm button, default "true" */
@@ -53,10 +61,6 @@ export interface Options {
     moveFromBody: boolean;
     /** if allowMovement is set to "true", ability to move modal from footer, default "true" */
     moveFromFooter: boolean;
-    /** keep header sticky (visible) when scrolling, default "true" */
-    stickyHeader: boolean;
-    /** keep footer sticky (visible) when scrolling, default "true" */
-    stickyFooter: boolean;
     /** add extra css style to modal, default null */
     style: string | null;
     /** "animDropDown" or "animFadeIn" for show animation, default "animDropDown" */

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,{H:()=>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.H;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)return null;const t=document.createElement("div");if(t.className="webcimes-modal__header",this.options.moveFromHeader&&t.classList.add("webcimes-modal__header--is-movable"),this.options.headerHtml)return this.setElementContent(t,this.options.headerHtml),t;if(this.options.titleHtml){const e=document.createElement("div");e.className="webcimes-modal__title",this.setElementContent(e,this.options.titleHtml),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.moveFromFooter&&t.classList.add("webcimes-modal__footer--is-movable"),this.options.footerHtml)return this.setElementContent(t,this.options.footerHtml),t;const e=document.createElement("div");if(e.className="webcimes-modal__footer-buttons",this.options.buttonCancelHtml){const t=document.createElement("button");t.className="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel",this.options.buttonCancelClass.length>0&&t.classList.add(...this.options.buttonCancelClass),this.options.closeOnCancelButton&&t.classList.add("webcimes-modal__close"),this.setElementContent(t,this.options.buttonCancelHtml),e.appendChild(t)}if(this.options.buttonConfirmHtml){const t=document.createElement("button");t.className="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm",this.options.buttonConfirmClass.length>0&&t.classList.add(...this.options.buttonConfirmClass),this.options.closeOnConfirmButton&&t.classList.add("webcimes-modal__close"),this.setElementContent(t,this.options.buttonConfirmHtml),e.appendChild(t)}return t.appendChild(e),t}buildCloseButton(){const t=document.createElement("button");return t.className="webcimes-modal__button webcimes-modal__close-button webcimes-modal__close",t.setAttribute("aria-label","Close modal"),t.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>',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),this.options.showCloseButton&&t.appendChild(this.buildCloseButton()),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,buttonCancelClass:[],buttonConfirmClass:[],closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!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),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),"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