webcimes-modal 2.1.0 → 2.2.0

package/README.md

@@ -103,6 +103,8 @@ document.addEventListener('DOMContentLoaded', function () {
         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"
@@ -111,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"
@@ -145,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>
 ```
@@ -205,7 +214,6 @@ const myModal = createWebcimesModal({
         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>';
@@ -222,7 +230,7 @@ if any of these fields is set to null (the default), it will not appear on the m
 
 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__header`:** set `headerHtml` to `null` and `titleHtml` to `null`
 
 **To remove `webcimes-modal__body`:** set `bodyHtml` to `null`
 
@@ -257,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"
@@ -265,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"
 });
 ```
 
@@ -399,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

@@ -15,6 +15,8 @@ document.addEventListener('DOMContentLoaded', function () {
         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"
@@ -23,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"

package/demo/script_udm.js

@@ -12,6 +12,8 @@ document.addEventListener('DOMContentLoaded', function () {
         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 +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"

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

@@ -41,6 +41,10 @@ export interface Options {
     buttonCancelHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for confirm button, default "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" */
@@ -57,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:(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};
+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

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

@@ -1 +1 @@
-{"version":3,"file":"js/webcimes-modal.esm.js","mappings":"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","sources":["webpack://webcimes-modal/webpack/bootstrap","webpack://webcimes-modal/webpack/runtime/define property getters","webpack://webcimes-modal/webpack/runtime/hasOwnProperty shorthand","webpack://webcimes-modal/./src/ts/webcimes-modal.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","/**\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'use strict';\r\n\r\n/**\r\n * Global\r\n */\r\ndeclare global {\r\n    /** Events */\r\n    interface GlobalEventHandlersEventMap {\r\n        beforeShow: CustomEvent;\r\n        afterShow: CustomEvent;\r\n        beforeDestroy: CustomEvent;\r\n        afterDestroy: CustomEvent;\r\n        onCancelButton: CustomEvent;\r\n        onConfirmButton: CustomEvent;\r\n    }\r\n}\r\n\r\n/**\r\n * Options\r\n */\r\nexport interface Options {\r\n    /** set a specific id on the modal. default \"null\" */\r\n    setId: string | null;\r\n    /** set a specific class on the modal, default \"null\" */\r\n    setClass: string | null;\r\n    /** width (specify unit), default \"auto\" */\r\n    width: string;\r\n    /** height (specify unit), default \"auto\" */\r\n    height: string;\r\n    /** html for header (overrides titleHtml), default \"null\" */\r\n    headerHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for title, default \"null\" */\r\n    titleHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for body, default \"null\" */\r\n    bodyHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for footer (overrides buttonCancelHtml and buttonConfirmHtml), default \"null\" */\r\n    footerHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for cancel button, default \"null\" */\r\n    buttonCancelHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for confirm button, default \"null\" */\r\n    buttonConfirmHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** close modal after trigger cancel button, default \"true\" */\r\n    closeOnCancelButton: boolean;\r\n    /** close modal after trigger confirm button, default \"true\" */\r\n    closeOnConfirmButton: boolean;\r\n    /** show close button, default \"true\" */\r\n    showCloseButton: boolean;\r\n    /** allow the modal to close when clicked outside, default \"true\" */\r\n    allowCloseOutside: boolean;\r\n    /** ability to move modal, default \"true\" */\r\n    allowMovement: boolean;\r\n    /** if allowMovement is set to \"true\", ability to move modal from header, default \"true\" */\r\n    moveFromHeader: boolean;\r\n    /** if allowMovement is set to \"true\", ability to move modal from body, default \"false\" */\r\n    moveFromBody: boolean;\r\n    /** if allowMovement is set to \"true\", ability to move modal from footer, default \"true\" */\r\n    moveFromFooter: boolean;\r\n    /** keep header sticky (visible) when scrolling, default \"true\" */\r\n    stickyHeader: boolean;\r\n    /** keep footer sticky (visible) when scrolling, default \"true\" */\r\n    stickyFooter: boolean;\r\n    /** add extra css style to modal, default null */\r\n    style: string | null;\r\n    /** \"animDropDown\" or \"animFadeIn\" for show animation, default \"animDropDown\" */\r\n    animationOnShow: 'animDropDown' | 'animFadeIn';\r\n    /** \"animDropUp\" or \"animFadeOut\" for destroy animation, default \"animDropUp\" */\r\n    animationOnDestroy: 'animDropUp' | 'animFadeOut';\r\n    /** animation duration in ms, default \"500\" */\r\n    animationDuration: number;\r\n    /** callback before show modal */\r\n    beforeShow: () => void;\r\n    /** callback after show modal */\r\n    afterShow: () => void;\r\n    /** callback before destroy modal */\r\n    beforeDestroy: () => void;\r\n    /** callback after destroy modal */\r\n    afterDestroy: () => void;\r\n    /** callback after triggering cancel button */\r\n    onCancelButton: () => void;\r\n    /** callback after triggering confirm button */\r\n    onConfirmButton: () => void;\r\n}\r\n\r\n/**\r\n * Public interface for WebcimesModal instances\r\n * This represents the actual accessible members of the instance\r\n */\r\nexport interface WebcimesModal {\r\n    /** Get the dom element containing all modals */\r\n    modals: HTMLElement;\r\n    /** Get the dom element of the current modal */\r\n    modal: HTMLElement;\r\n    /** Destroy the current modal */\r\n    destroy(): void;\r\n}\r\n\r\n/**\r\n * WebcimesModal implementation class\r\n */\r\nclass WebcimesModalImpl implements WebcimesModal {\r\n    /** Get the dom element containing all modals */\r\n    public modals: HTMLElement;\r\n\r\n    /** Get the dom element of the current modal */\r\n    public modal: HTMLElement;\r\n\r\n    /** Options of the current modal */\r\n    private options: Options;\r\n\r\n    private eventCancelButton: () => void = () => {\r\n        // Callback on cancel button\r\n        this.modal.dispatchEvent(new CustomEvent('onCancelButton'));\r\n        if (typeof this.options.onCancelButton === 'function') {\r\n            this.options.onCancelButton();\r\n        }\r\n    };\r\n\r\n    private eventConfirmButton: () => void = () => {\r\n        // Callback on confirm button\r\n        this.modal.dispatchEvent(new CustomEvent('onConfirmButton'));\r\n        if (typeof this.options.onConfirmButton === 'function') {\r\n            this.options.onConfirmButton();\r\n        }\r\n    };\r\n\r\n    private eventClickOutside: (e: Event) => void = (e) => {\r\n        if (e.target == this.modals) {\r\n            if (this.options.allowCloseOutside) {\r\n                // Destroy modal\r\n                this.destroy();\r\n            } else {\r\n                // Add animation for show modal who can't be close\r\n                this.modal.classList.add('animGrowShrink');\r\n\r\n                // Delete animation after the animation delay\r\n                setTimeout(() => {\r\n                    this.modal.classList.remove('animGrowShrink');\r\n                }, this.options.animationDuration);\r\n            }\r\n        }\r\n    };\r\n\r\n    private eventClickCloseButton: () => void = () => {\r\n        // Destroy modal\r\n        this.destroy();\r\n    };\r\n\r\n    private eventDragModalOnTop: (e: Event) => void = (e) => {\r\n        // Only if target is not close button (for bug in chrome)\r\n        if (!(<HTMLElement>e.target).closest('.webcimes-modal__close')) {\r\n            // If multiple modal, and modal not already on top (no next sibling), we place the current modal on the top\r\n            if (\r\n                document.querySelectorAll('.webcimes-modal').length > 1 &&\r\n                this.modal.nextElementSibling !== null\r\n            ) {\r\n                let oldScrollTop = this.modal.scrollTop;\r\n                this.modals.insertAdjacentElement('beforeend', this.modal);\r\n                this.modal.scrollTop = oldScrollTop;\r\n            }\r\n        }\r\n    };\r\n\r\n    private position: { x: number; y: number };\r\n\r\n    private offset: { x: number; y: number };\r\n\r\n    private isDragging: boolean = false;\r\n\r\n    private moveFromElements: HTMLElement[] = [];\r\n\r\n    private eventDragStart: (e: Event) => void = (e) => {\r\n        // Start drag only if it's not a button\r\n        if (!(<HTMLElement>e.target).closest('.webcimes-modal__button')) {\r\n            this.isDragging = true;\r\n\r\n            // Mouse\r\n            if ((<MouseEvent>e).clientX) {\r\n                this.offset = {\r\n                    x: this.modal.offsetLeft - (<MouseEvent>e).clientX,\r\n                    y: this.modal.offsetTop - (<MouseEvent>e).clientY,\r\n                };\r\n            }\r\n            // Touch device (use the first touch only)\r\n            else if ((<TouchEvent>e).touches) {\r\n                this.offset = {\r\n                    x: this.modal.offsetLeft - (<TouchEvent>e).touches[0].clientX,\r\n                    y: this.modal.offsetTop - (<TouchEvent>e).touches[0].clientY,\r\n                };\r\n            }\r\n        }\r\n    };\r\n\r\n    private eventMove: (e: Event) => void = (e) => {\r\n        if (this.isDragging) {\r\n            // Mouse\r\n            if ((<MouseEvent>e).clientX) {\r\n                this.position = {\r\n                    x: (<MouseEvent>e).clientX,\r\n                    y: (<MouseEvent>e).clientY,\r\n                };\r\n            }\r\n            // Touch device (use the first touch only)\r\n            else if ((<TouchEvent>e).touches) {\r\n                this.position = {\r\n                    x: (<TouchEvent>e).touches[0].clientX,\r\n                    y: (<TouchEvent>e).touches[0].clientY,\r\n                };\r\n            }\r\n            this.modal.style.left = this.position.x + this.offset.x + 'px';\r\n            this.modal.style.top = this.position.y + this.offset.y + 'px';\r\n        }\r\n    };\r\n\r\n    private eventDragStop: () => void = () => {\r\n        this.isDragging = false;\r\n    };\r\n\r\n    private eventPreventSelectText: (e: Event) => void = (e) => {\r\n        if (this.isDragging) {\r\n            e.preventDefault();\r\n        }\r\n    };\r\n\r\n    private eventResize: () => void = () => {\r\n        this.modal.style.removeProperty('left');\r\n        this.modal.style.removeProperty('top');\r\n    };\r\n\r\n    /**\r\n     * Helper method to set content on an element (string, HTMLElement, or function)\r\n     */\r\n    private setElementContent(\r\n        element: HTMLElement,\r\n        content: string | HTMLElement | (() => HTMLElement),\r\n    ): void {\r\n        if (typeof content === 'string') {\r\n            element.innerHTML = content;\r\n        } else if (typeof content === 'function') {\r\n            element.appendChild(content());\r\n        } else {\r\n            element.appendChild(content);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Build modal header with content\r\n     */\r\n    private buildHeader(): HTMLElement | null {\r\n        // Check if header should be created\r\n        if (!this.options.headerHtml && !this.options.titleHtml && !this.options.showCloseButton) {\r\n            return null;\r\n        }\r\n\r\n        // Create header element with common classes\r\n        const header = document.createElement('div');\r\n        header.className = 'webcimes-modal__header';\r\n\r\n        if (this.options.stickyHeader) {\r\n            header.classList.add('webcimes-modal__header--is-sticky');\r\n        }\r\n        if (this.options.moveFromHeader) {\r\n            header.classList.add('webcimes-modal__header--is-movable');\r\n        }\r\n\r\n        // If headerHtml is provided, use it directly (full control)\r\n        if (this.options.headerHtml) {\r\n            this.setElementContent(header, this.options.headerHtml);\r\n\r\n            // Add close button if requested\r\n            if (this.options.showCloseButton) {\r\n                const closeButton = document.createElement('button');\r\n                closeButton.className =\r\n                    'webcimes-modal__button webcimes-modal__header-close webcimes-modal__close';\r\n                closeButton.setAttribute('aria-label', 'Close modal');\r\n                header.appendChild(closeButton);\r\n            }\r\n\r\n            return header;\r\n        }\r\n\r\n        // Otherwise, create title and/or close button\r\n        if (this.options.titleHtml) {\r\n            const title = document.createElement('div');\r\n            title.className = 'webcimes-modal__title';\r\n            this.setElementContent(title, this.options.titleHtml);\r\n            header.appendChild(title);\r\n        }\r\n\r\n        if (this.options.showCloseButton) {\r\n            const closeButton = document.createElement('button');\r\n            closeButton.className =\r\n                'webcimes-modal__button webcimes-modal__header-close webcimes-modal__close';\r\n            closeButton.setAttribute('aria-label', 'Close modal');\r\n            header.appendChild(closeButton);\r\n        }\r\n\r\n        return header;\r\n    }\r\n\r\n    /**\r\n     * Build modal body with content\r\n     */\r\n    private buildBody(): HTMLElement | null {\r\n        if (!this.options.bodyHtml) {\r\n            return null;\r\n        }\r\n\r\n        const body = document.createElement('div');\r\n        body.className = 'webcimes-modal__body';\r\n\r\n        if (this.options.moveFromBody) {\r\n            body.classList.add('webcimes-modal__body--is-movable');\r\n        }\r\n\r\n        this.setElementContent(body, this.options.bodyHtml);\r\n\r\n        return body;\r\n    }\r\n\r\n    /**\r\n     * Build modal footer with content\r\n     */\r\n    private buildFooter(): HTMLElement | null {\r\n        // Check if footer should be created\r\n        if (\r\n            !this.options.footerHtml &&\r\n            !this.options.buttonCancelHtml &&\r\n            !this.options.buttonConfirmHtml\r\n        ) {\r\n            return null;\r\n        }\r\n\r\n        // Create footer element with common classes\r\n        const footer = document.createElement('div');\r\n        footer.className = 'webcimes-modal__footer';\r\n\r\n        if (this.options.stickyFooter) {\r\n            footer.classList.add('webcimes-modal__footer--is-sticky');\r\n        }\r\n        if (this.options.moveFromFooter) {\r\n            footer.classList.add('webcimes-modal__footer--is-movable');\r\n        }\r\n\r\n        // If footerHtml is provided, use it directly (full control)\r\n        if (this.options.footerHtml) {\r\n            this.setElementContent(footer, this.options.footerHtml);\r\n            return footer;\r\n        }\r\n\r\n        // Otherwise, create buttons\r\n        if (this.options.buttonCancelHtml) {\r\n            const cancelButton = document.createElement('button');\r\n            cancelButton.className =\r\n                'webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel';\r\n            if (this.options.closeOnCancelButton) {\r\n                cancelButton.classList.add('webcimes-modal__close');\r\n            }\r\n            this.setElementContent(cancelButton, this.options.buttonCancelHtml);\r\n            footer.appendChild(cancelButton);\r\n        }\r\n\r\n        if (this.options.buttonConfirmHtml) {\r\n            const confirmButton = document.createElement('button');\r\n            confirmButton.className =\r\n                'webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm';\r\n            if (this.options.closeOnConfirmButton) {\r\n                confirmButton.classList.add('webcimes-modal__close');\r\n            }\r\n            this.setElementContent(confirmButton, this.options.buttonConfirmHtml);\r\n            footer.appendChild(confirmButton);\r\n        }\r\n\r\n        return footer;\r\n    }\r\n\r\n    /**\r\n     * Build complete modal with content\r\n     */\r\n    private buildModal(): HTMLElement {\r\n        const modal = document.createElement('div');\r\n        modal.className = `webcimes-modal ${this.options.animationOnShow}`;\r\n\r\n        // ARIA attributes for accessibility\r\n        modal.setAttribute('role', 'dialog');\r\n        modal.setAttribute('aria-modal', 'true');\r\n\r\n        if (this.options.setClass) {\r\n            modal.classList.add(this.options.setClass);\r\n        }\r\n        if (this.options.setId) {\r\n            modal.id = this.options.setId;\r\n        }\r\n\r\n        const header = this.buildHeader();\r\n        if (header) {\r\n            modal.appendChild(header);\r\n        }\r\n\r\n        const body = this.buildBody();\r\n        if (body) {\r\n            modal.appendChild(body);\r\n        }\r\n\r\n        const footer = this.buildFooter();\r\n        if (footer) {\r\n            modal.appendChild(footer);\r\n        }\r\n\r\n        return modal;\r\n    }\r\n\r\n    /**\r\n     * Create modal\r\n     */\r\n    constructor(options: Partial<Options>) {\r\n        // Defaults\r\n        const defaults: Options = {\r\n            setId: null,\r\n            setClass: null,\r\n            width: 'auto',\r\n            height: 'auto',\r\n            headerHtml: null,\r\n            titleHtml: null,\r\n            bodyHtml: null,\r\n            footerHtml: null,\r\n            buttonCancelHtml: null,\r\n            buttonConfirmHtml: null,\r\n            closeOnCancelButton: true,\r\n            closeOnConfirmButton: true,\r\n            showCloseButton: true,\r\n            allowCloseOutside: true,\r\n            allowMovement: true,\r\n            moveFromHeader: true,\r\n            moveFromBody: false,\r\n            moveFromFooter: true,\r\n            stickyHeader: true,\r\n            stickyFooter: true,\r\n            style: null,\r\n            animationOnShow: 'animDropDown',\r\n            animationOnDestroy: 'animDropUp',\r\n            animationDuration: 500,\r\n            beforeShow: () => {},\r\n            afterShow: () => {},\r\n            beforeDestroy: () => {},\r\n            afterDestroy: () => {},\r\n            onCancelButton: () => {},\r\n            onConfirmButton: () => {},\r\n        };\r\n        this.options = { ...defaults, ...options };\r\n\r\n        // Call init method\r\n        this.init();\r\n    }\r\n\r\n    /**\r\n     * Initialization of the current modal\r\n     */\r\n    private init() {\r\n        // Create modals container\r\n        if (!document.querySelector('.webcimes-modals')) {\r\n            this.modals = document.createElement('div');\r\n            this.modals.className = 'webcimes-modals animFadeIn';\r\n\r\n            // Set animation duration for modals\r\n            this.modals.style.setProperty(\r\n                'animation-duration',\r\n                this.options.animationDuration + 'ms',\r\n            );\r\n\r\n            document.body.appendChild(this.modals);\r\n\r\n            // Delete enter animation after animation delay\r\n            setTimeout(() => {\r\n                this.modals.classList.remove('animFadeIn');\r\n            }, this.options.animationDuration);\r\n        } else {\r\n            // Get modals\r\n            this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n            // Remove animFadeOut in case of create new modal after destroy the last one before (during animation duration)\r\n            this.modals.classList.remove('animFadeOut');\r\n        }\r\n\r\n        // Create modal with content\r\n        this.modal = this.buildModal();\r\n        this.modals.appendChild(this.modal);\r\n\r\n        // Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n        setTimeout(() => {\r\n            this.modal.dispatchEvent(new CustomEvent('beforeShow'));\r\n            if (typeof this.options.beforeShow === 'function') {\r\n                this.options.beforeShow();\r\n            }\r\n        }, 0);\r\n\r\n        // Set animation duration for modal\r\n        this.modal.style.setProperty('animation-duration', this.options.animationDuration + 'ms');\r\n\r\n        // Delete animation of enter after the animation delay\r\n        setTimeout(() => {\r\n            this.modal.classList.remove(this.options.animationOnShow);\r\n\r\n            // Callback after show modal\r\n            this.modal.dispatchEvent(new CustomEvent('afterShow'));\r\n            if (typeof this.options.afterShow === 'function') {\r\n                this.options.afterShow();\r\n            }\r\n        }, this.options.animationDuration);\r\n\r\n        // Width of modal\r\n        this.modal.style.setProperty('max-width', '90%');\r\n        if (this.options.width != 'auto' && this.options.width) {\r\n            this.modal.style.setProperty('width', this.options.width);\r\n        } else {\r\n            // \"max-content\" is for keep size in \"auto\" and for maximum to max-width\r\n            this.modal.style.setProperty('width', 'max-content');\r\n        }\r\n\r\n        // Height of modal\r\n        this.modal.style.setProperty('max-height', '90%');\r\n        if (this.options.height != 'auto' && this.options.height) {\r\n            this.modal.style.setProperty('height', this.options.height);\r\n        } else {\r\n            // \"max-content\" is for keep size in \"auto\" and for maximum to max-height\r\n            this.modal.style.setProperty('height', 'max-content');\r\n        }\r\n\r\n        // Style\r\n        if (this.options.style) {\r\n            let oldStyle = this.modal.getAttribute('style') ?? '';\r\n            this.modal.setAttribute('style', oldStyle + this.options.style);\r\n        }\r\n\r\n        // Event on cancel button\r\n        if (this.options.buttonCancelHtml) {\r\n            this.modal\r\n                .querySelector('.webcimes-modal__footer-button--cancel')\r\n                ?.addEventListener('click', this.eventCancelButton);\r\n        }\r\n\r\n        // Event on confirm button\r\n        if (this.options.buttonConfirmHtml) {\r\n            this.modal\r\n                .querySelector('.webcimes-modal__footer-button--confirm')\r\n                ?.addEventListener('click', this.eventConfirmButton);\r\n        }\r\n\r\n        // Event click outside (on modals)\r\n        this.modals.addEventListener('click', this.eventClickOutside);\r\n\r\n        // Event close modal when click on close button\r\n        this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n            el.addEventListener('click', this.eventClickCloseButton);\r\n        });\r\n\r\n        // Place selected modal on top\r\n        ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n            this.modal.addEventListener(typeEvent, this.eventDragModalOnTop);\r\n        });\r\n\r\n        // Move modal\r\n        if (\r\n            this.options.allowMovement &&\r\n            (this.options.moveFromHeader ||\r\n                this.options.moveFromBody ||\r\n                this.options.moveFromFooter)\r\n        ) {\r\n            if (\r\n                this.options.moveFromHeader &&\r\n                this.modal.querySelector('.webcimes-modal__header')\r\n            ) {\r\n                this.moveFromElements.push(\r\n                    <HTMLElement>this.modal.querySelector('.webcimes-modal__header'),\r\n                );\r\n            }\r\n            if (this.options.moveFromBody && this.modal.querySelector('.webcimes-modal__body')) {\r\n                this.moveFromElements.push(\r\n                    <HTMLElement>this.modal.querySelector('.webcimes-modal__body'),\r\n                );\r\n            }\r\n            if (\r\n                this.options.moveFromFooter &&\r\n                this.modal.querySelector('.webcimes-modal__footer')\r\n            ) {\r\n                this.moveFromElements.push(\r\n                    <HTMLElement>this.modal.querySelector('.webcimes-modal__footer'),\r\n                );\r\n            }\r\n\r\n            ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n                this.moveFromElements.forEach((el) => {\r\n                    el.addEventListener(typeEvent, this.eventDragStart);\r\n                });\r\n            });\r\n\r\n            ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n                document.addEventListener(typeEvent, this.eventMove);\r\n            });\r\n\r\n            ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n                document.addEventListener(typeEvent, this.eventDragStop);\r\n            });\r\n\r\n            document.addEventListener('selectstart', this.eventPreventSelectText);\r\n        }\r\n\r\n        // When resizing window, reset modal position to center\r\n        window.addEventListener('resize', this.eventResize);\r\n    }\r\n\r\n    /**\r\n     * Destroy current modal\r\n     */\r\n    public destroy() {\r\n        // If modal is not already destroying\r\n        if (!this.modal.getAttribute('data-destroying')) {\r\n            // Callback before destroy modal\r\n            this.modal.dispatchEvent(new CustomEvent('beforeDestroy'));\r\n            if (typeof this.options.beforeDestroy === 'function') {\r\n                this.options.beforeDestroy();\r\n            }\r\n\r\n            // Close modals (according the number of modal not already destroying)\r\n            if (document.querySelectorAll('.webcimes-modal:not([data-destroying])').length == 1) {\r\n                this.modals.classList.add('animFadeOut');\r\n            }\r\n\r\n            // Close modal\r\n            this.modal.setAttribute('data-destroying', '1');\r\n            this.modal.classList.add(this.options.animationOnDestroy);\r\n\r\n            // Destroy all events from modal and remove modals or modal after animation duration\r\n            setTimeout(() => {\r\n                if (typeof this.modal !== 'undefined') {\r\n                    // Destroy all events from modal\r\n\r\n                    if (this.options.buttonCancelHtml) {\r\n                        this.modal\r\n                            .querySelector('.webcimes-modal__footer-button--cancel')\r\n                            ?.removeEventListener('click', this.eventCancelButton);\r\n                    }\r\n\r\n                    if (this.options.buttonConfirmHtml) {\r\n                        this.modal\r\n                            .querySelector('.webcimes-modal__footer-button--confirm')\r\n                            ?.removeEventListener('click', this.eventConfirmButton);\r\n                    }\r\n\r\n                    this.modals.removeEventListener('click', this.eventClickOutside);\r\n\r\n                    this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n                        el.removeEventListener('click', this.eventClickCloseButton);\r\n                    });\r\n\r\n                    ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n                        this.modal.removeEventListener(typeEvent, this.eventDragModalOnTop);\r\n                    });\r\n\r\n                    if (\r\n                        this.options.allowMovement &&\r\n                        (this.options.moveFromHeader ||\r\n                            this.options.moveFromBody ||\r\n                            this.options.moveFromFooter)\r\n                    ) {\r\n                        ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n                            this.moveFromElements.forEach((el) => {\r\n                                el.removeEventListener(typeEvent, this.eventDragStart);\r\n                            });\r\n                        });\r\n\r\n                        ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n                            document.removeEventListener(typeEvent, this.eventMove);\r\n                        });\r\n\r\n                        ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n                            document.removeEventListener(typeEvent, this.eventDragStop);\r\n                        });\r\n\r\n                        document.removeEventListener('selectstart', this.eventPreventSelectText);\r\n                    }\r\n\r\n                    window.removeEventListener('resize', this.eventResize);\r\n\r\n                    // Remove modals or modal according the number of modal\r\n                    (document.querySelectorAll('.webcimes-modal').length > 1\r\n                        ? this.modal\r\n                        : this.modals\r\n                    ).remove();\r\n                }\r\n\r\n                // Callback after destroy modal\r\n                this.modal.dispatchEvent(new CustomEvent('afterDestroy'));\r\n                if (typeof this.options.afterDestroy === 'function') {\r\n                    this.options.afterDestroy();\r\n                }\r\n            }, this.options.animationDuration);\r\n        }\r\n    }\r\n}\r\n\r\n/**\r\n * Factory function to create a WebcimesModal instance with proper typing\r\n */\r\nexport function createWebcimesModal(options: Partial<Options>): WebcimesModal {\r\n    return new WebcimesModalImpl(options);\r\n}\r\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","WebcimesModalImpl","modals","modal","options","eventCancelButton","this","dispatchEvent","CustomEvent","onCancelButton","eventConfirmButton","onConfirmButton","eventClickOutside","e","target","allowCloseOutside","destroy","classList","add","setTimeout","remove","animationDuration","eventClickCloseButton","eventDragModalOnTop","closest","document","querySelectorAll","length","nextElementSibling","oldScrollTop","scrollTop","insertAdjacentElement","position","offset","isDragging","moveFromElements","eventDragStart","clientX","x","offsetLeft","y","offsetTop","clientY","touches","eventMove","style","left","top","eventDragStop","eventPreventSelectText","preventDefault","eventResize","removeProperty","setElementContent","element","content","innerHTML","appendChild","buildHeader","headerHtml","titleHtml","showCloseButton","header","createElement","className","stickyHeader","moveFromHeader","closeButton","setAttribute","title","buildBody","bodyHtml","body","moveFromBody","buildFooter","footerHtml","buttonCancelHtml","buttonConfirmHtml","footer","stickyFooter","moveFromFooter","cancelButton","closeOnCancelButton","confirmButton","closeOnConfirmButton","buildModal","animationOnShow","setClass","setId","id","constructor","width","height","allowMovement","animationOnDestroy","beforeShow","afterShow","beforeDestroy","afterDestroy","init","querySelector","setProperty","oldStyle","getAttribute","addEventListener","forEach","el","typeEvent","push","window","removeEventListener","createWebcimesModal"],"sourceRoot":""}
+{"version":3,"file":"js/webcimes-modal.esm.js","mappings":"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","sources":["webpack://webcimes-modal/webpack/bootstrap","webpack://webcimes-modal/webpack/runtime/define property getters","webpack://webcimes-modal/webpack/runtime/hasOwnProperty shorthand","webpack://webcimes-modal/./src/ts/webcimes-modal.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","/**\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'use strict';\r\n\r\n/**\r\n * Global\r\n */\r\ndeclare global {\r\n    /** Events */\r\n    interface GlobalEventHandlersEventMap {\r\n        beforeShow: CustomEvent;\r\n        afterShow: CustomEvent;\r\n        beforeDestroy: CustomEvent;\r\n        afterDestroy: CustomEvent;\r\n        onCancelButton: CustomEvent;\r\n        onConfirmButton: CustomEvent;\r\n    }\r\n}\r\n\r\n/**\r\n * Options\r\n */\r\nexport interface Options {\r\n    /** set a specific id on the modal. default \"null\" */\r\n    setId: string | null;\r\n    /** set a specific class on the modal, default \"null\" */\r\n    setClass: string | null;\r\n    /** width (specify unit), default \"auto\" */\r\n    width: string;\r\n    /** height (specify unit), default \"auto\" */\r\n    height: string;\r\n    /** html for header (overrides titleHtml), default \"null\" */\r\n    headerHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for title, default \"null\" */\r\n    titleHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for body, default \"null\" */\r\n    bodyHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for footer (overrides buttonCancelHtml and buttonConfirmHtml), default \"null\" */\r\n    footerHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for cancel button, default \"null\" */\r\n    buttonCancelHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** html for confirm button, default \"null\" */\r\n    buttonConfirmHtml: string | HTMLElement | (() => HTMLElement) | null;\r\n    /** add extra css classes to cancel button, default \"[]\" */\r\n    buttonCancelClass: string[];\r\n    /** add extra css classes to confirm button, default \"[]\" */\r\n    buttonConfirmClass: string[];\r\n    /** close modal after trigger cancel button, default \"true\" */\r\n    closeOnCancelButton: boolean;\r\n    /** close modal after trigger confirm button, default \"true\" */\r\n    closeOnConfirmButton: boolean;\r\n    /** show close button, default \"true\" */\r\n    showCloseButton: boolean;\r\n    /** allow the modal to close when clicked outside, default \"true\" */\r\n    allowCloseOutside: boolean;\r\n    /** ability to move modal, default \"true\" */\r\n    allowMovement: boolean;\r\n    /** if allowMovement is set to \"true\", ability to move modal from header, default \"true\" */\r\n    moveFromHeader: boolean;\r\n    /** if allowMovement is set to \"true\", ability to move modal from body, default \"false\" */\r\n    moveFromBody: boolean;\r\n    /** if allowMovement is set to \"true\", ability to move modal from footer, default \"true\" */\r\n    moveFromFooter: boolean;\r\n    /** add extra css style to modal, default null */\r\n    style: string | null;\r\n    /** \"animDropDown\" or \"animFadeIn\" for show animation, default \"animDropDown\" */\r\n    animationOnShow: 'animDropDown' | 'animFadeIn';\r\n    /** \"animDropUp\" or \"animFadeOut\" for destroy animation, default \"animDropUp\" */\r\n    animationOnDestroy: 'animDropUp' | 'animFadeOut';\r\n    /** animation duration in ms, default \"500\" */\r\n    animationDuration: number;\r\n    /** callback before show modal */\r\n    beforeShow: () => void;\r\n    /** callback after show modal */\r\n    afterShow: () => void;\r\n    /** callback before destroy modal */\r\n    beforeDestroy: () => void;\r\n    /** callback after destroy modal */\r\n    afterDestroy: () => void;\r\n    /** callback after triggering cancel button */\r\n    onCancelButton: () => void;\r\n    /** callback after triggering confirm button */\r\n    onConfirmButton: () => void;\r\n}\r\n\r\n/**\r\n * Public interface for WebcimesModal instances\r\n * This represents the actual accessible members of the instance\r\n */\r\nexport interface WebcimesModal {\r\n    /** Get the dom element containing all modals */\r\n    modals: HTMLElement;\r\n    /** Get the dom element of the current modal */\r\n    modal: HTMLElement;\r\n    /** Destroy the current modal */\r\n    destroy(): void;\r\n}\r\n\r\n/**\r\n * WebcimesModal implementation class\r\n */\r\nclass WebcimesModalImpl implements WebcimesModal {\r\n    /** Get the dom element containing all modals */\r\n    public modals: HTMLElement;\r\n\r\n    /** Get the dom element of the current modal */\r\n    public modal: HTMLElement;\r\n\r\n    /** Options of the current modal */\r\n    private options: Options;\r\n\r\n    private eventCancelButton: () => void = () => {\r\n        // Callback on cancel button\r\n        this.modal.dispatchEvent(new CustomEvent('onCancelButton'));\r\n        if (typeof this.options.onCancelButton === 'function') {\r\n            this.options.onCancelButton();\r\n        }\r\n    };\r\n\r\n    private eventConfirmButton: () => void = () => {\r\n        // Callback on confirm button\r\n        this.modal.dispatchEvent(new CustomEvent('onConfirmButton'));\r\n        if (typeof this.options.onConfirmButton === 'function') {\r\n            this.options.onConfirmButton();\r\n        }\r\n    };\r\n\r\n    private eventClickOutside: (e: Event) => void = (e) => {\r\n        if (e.target == this.modals) {\r\n            if (this.options.allowCloseOutside) {\r\n                // Destroy modal\r\n                this.destroy();\r\n            } else {\r\n                // Add animation for show modal who can't be close\r\n                this.modal.classList.add('animGrowShrink');\r\n\r\n                // Delete animation after the animation delay\r\n                setTimeout(() => {\r\n                    this.modal.classList.remove('animGrowShrink');\r\n                }, this.options.animationDuration);\r\n            }\r\n        }\r\n    };\r\n\r\n    private eventClickCloseButton: () => void = () => {\r\n        // Destroy modal\r\n        this.destroy();\r\n    };\r\n\r\n    private eventDragModalOnTop: (e: Event) => void = (e) => {\r\n        // Only if target is not close button (for bug in chrome)\r\n        if (!(<HTMLElement>e.target).closest('.webcimes-modal__close')) {\r\n            // If multiple modal, and modal not already on top (no next sibling), we place the current modal on the top\r\n            if (\r\n                document.querySelectorAll('.webcimes-modal').length > 1 &&\r\n                this.modal.nextElementSibling !== null\r\n            ) {\r\n                let oldScrollTop = this.modal.scrollTop;\r\n                this.modals.insertAdjacentElement('beforeend', this.modal);\r\n                this.modal.scrollTop = oldScrollTop;\r\n            }\r\n        }\r\n    };\r\n\r\n    private position: { x: number; y: number };\r\n\r\n    private offset: { x: number; y: number };\r\n\r\n    private isDragging: boolean = false;\r\n\r\n    private moveFromElements: HTMLElement[] = [];\r\n\r\n    private eventDragStart: (e: Event) => void = (e) => {\r\n        // Start drag only if it's not a button\r\n        if (!(<HTMLElement>e.target).closest('.webcimes-modal__button')) {\r\n            this.isDragging = true;\r\n\r\n            // Mouse\r\n            if ((<MouseEvent>e).clientX) {\r\n                this.offset = {\r\n                    x: this.modal.offsetLeft - (<MouseEvent>e).clientX,\r\n                    y: this.modal.offsetTop - (<MouseEvent>e).clientY,\r\n                };\r\n            }\r\n            // Touch device (use the first touch only)\r\n            else if ((<TouchEvent>e).touches) {\r\n                this.offset = {\r\n                    x: this.modal.offsetLeft - (<TouchEvent>e).touches[0].clientX,\r\n                    y: this.modal.offsetTop - (<TouchEvent>e).touches[0].clientY,\r\n                };\r\n            }\r\n        }\r\n    };\r\n\r\n    private eventMove: (e: Event) => void = (e) => {\r\n        if (this.isDragging) {\r\n            // Mouse\r\n            if ((<MouseEvent>e).clientX) {\r\n                this.position = {\r\n                    x: (<MouseEvent>e).clientX,\r\n                    y: (<MouseEvent>e).clientY,\r\n                };\r\n            }\r\n            // Touch device (use the first touch only)\r\n            else if ((<TouchEvent>e).touches) {\r\n                this.position = {\r\n                    x: (<TouchEvent>e).touches[0].clientX,\r\n                    y: (<TouchEvent>e).touches[0].clientY,\r\n                };\r\n            }\r\n            this.modal.style.left = this.position.x + this.offset.x + 'px';\r\n            this.modal.style.top = this.position.y + this.offset.y + 'px';\r\n        }\r\n    };\r\n\r\n    private eventDragStop: () => void = () => {\r\n        this.isDragging = false;\r\n    };\r\n\r\n    private eventPreventSelectText: (e: Event) => void = (e) => {\r\n        if (this.isDragging) {\r\n            e.preventDefault();\r\n        }\r\n    };\r\n\r\n    private eventResize: () => void = () => {\r\n        this.modal.style.removeProperty('left');\r\n        this.modal.style.removeProperty('top');\r\n    };\r\n\r\n    /**\r\n     * Helper method to set content on an element (string, HTMLElement, or function)\r\n     */\r\n    private setElementContent(\r\n        element: HTMLElement,\r\n        content: string | HTMLElement | (() => HTMLElement),\r\n    ): void {\r\n        if (typeof content === 'string') {\r\n            element.innerHTML = content;\r\n        } else if (typeof content === 'function') {\r\n            element.appendChild(content());\r\n        } else {\r\n            element.appendChild(content);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Build modal header with content\r\n     */\r\n    private buildHeader(): HTMLElement | null {\r\n        // Check if header should be created\r\n        if (!this.options.headerHtml && !this.options.titleHtml) {\r\n            return null;\r\n        }\r\n\r\n        // Create header element with common classes\r\n        const header = document.createElement('div');\r\n        header.className = 'webcimes-modal__header';\r\n\r\n        if (this.options.moveFromHeader) {\r\n            header.classList.add('webcimes-modal__header--is-movable');\r\n        }\r\n\r\n        // If headerHtml is provided, use it directly (full control)\r\n        if (this.options.headerHtml) {\r\n            this.setElementContent(header, this.options.headerHtml);\r\n            return header;\r\n        }\r\n\r\n        // Otherwise, create title and/or close button\r\n        if (this.options.titleHtml) {\r\n            const title = document.createElement('div');\r\n            title.className = 'webcimes-modal__title';\r\n            this.setElementContent(title, this.options.titleHtml);\r\n            header.appendChild(title);\r\n        }\r\n\r\n        return header;\r\n    }\r\n\r\n    /**\r\n     * Build modal body with content\r\n     */\r\n    private buildBody(): HTMLElement | null {\r\n        if (!this.options.bodyHtml) {\r\n            return null;\r\n        }\r\n\r\n        const body = document.createElement('div');\r\n        body.className = 'webcimes-modal__body';\r\n\r\n        if (this.options.moveFromBody) {\r\n            body.classList.add('webcimes-modal__body--is-movable');\r\n        }\r\n\r\n        this.setElementContent(body, this.options.bodyHtml);\r\n\r\n        return body;\r\n    }\r\n\r\n    /**\r\n     * Build modal footer with content\r\n     */\r\n    private buildFooter(): HTMLElement | null {\r\n        // Check if footer should be created\r\n        if (\r\n            !this.options.footerHtml &&\r\n            !this.options.buttonCancelHtml &&\r\n            !this.options.buttonConfirmHtml\r\n        ) {\r\n            return null;\r\n        }\r\n\r\n        // Create footer element with common classes\r\n        const footer = document.createElement('div');\r\n        footer.className = 'webcimes-modal__footer';\r\n\r\n        if (this.options.moveFromFooter) {\r\n            footer.classList.add('webcimes-modal__footer--is-movable');\r\n        }\r\n\r\n        // If footerHtml is provided, use it directly (full control)\r\n        if (this.options.footerHtml) {\r\n            this.setElementContent(footer, this.options.footerHtml);\r\n            return footer;\r\n        }\r\n\r\n        // Otherwise, create buttons wrapper\r\n        const buttonsWrapper = document.createElement('div');\r\n        buttonsWrapper.className = 'webcimes-modal__footer-buttons';\r\n\r\n        if (this.options.buttonCancelHtml) {\r\n            const cancelButton = document.createElement('button');\r\n            cancelButton.className =\r\n                'webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel';\r\n            if (this.options.buttonCancelClass.length > 0) {\r\n                cancelButton.classList.add(...this.options.buttonCancelClass);\r\n            }\r\n            if (this.options.closeOnCancelButton) {\r\n                cancelButton.classList.add('webcimes-modal__close');\r\n            }\r\n            this.setElementContent(cancelButton, this.options.buttonCancelHtml);\r\n            buttonsWrapper.appendChild(cancelButton);\r\n        }\r\n\r\n        if (this.options.buttonConfirmHtml) {\r\n            const confirmButton = document.createElement('button');\r\n            confirmButton.className =\r\n                'webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm';\r\n            if (this.options.buttonConfirmClass.length > 0) {\r\n                confirmButton.classList.add(...this.options.buttonConfirmClass);\r\n            }\r\n            if (this.options.closeOnConfirmButton) {\r\n                confirmButton.classList.add('webcimes-modal__close');\r\n            }\r\n            this.setElementContent(confirmButton, this.options.buttonConfirmHtml);\r\n            buttonsWrapper.appendChild(confirmButton);\r\n        }\r\n\r\n        footer.appendChild(buttonsWrapper);\r\n\r\n        return footer;\r\n    }\r\n\r\n    /**\r\n     * Build close button\r\n     */\r\n    private buildCloseButton(): HTMLElement {\r\n        const closeButton = document.createElement('button');\r\n        closeButton.className =\r\n            'webcimes-modal__button webcimes-modal__close-button webcimes-modal__close';\r\n        closeButton.setAttribute('aria-label', 'Close modal');\r\n        closeButton.innerHTML =\r\n            '<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>';\r\n        return closeButton;\r\n    }\r\n\r\n    /**\r\n     * Build complete modal with content\r\n     */\r\n    private buildModal(): HTMLElement {\r\n        const modal = document.createElement('div');\r\n        modal.className = `webcimes-modal ${this.options.animationOnShow}`;\r\n\r\n        // ARIA attributes for accessibility\r\n        modal.setAttribute('role', 'dialog');\r\n        modal.setAttribute('aria-modal', 'true');\r\n\r\n        if (this.options.setClass) {\r\n            modal.classList.add(this.options.setClass);\r\n        }\r\n        if (this.options.setId) {\r\n            modal.id = this.options.setId;\r\n        }\r\n\r\n        const header = this.buildHeader();\r\n        if (header) {\r\n            modal.appendChild(header);\r\n        }\r\n\r\n        const body = this.buildBody();\r\n        if (body) {\r\n            modal.appendChild(body);\r\n        }\r\n\r\n        const footer = this.buildFooter();\r\n        if (footer) {\r\n            modal.appendChild(footer);\r\n        }\r\n\r\n        // Add close button at modal level (always present and independent)\r\n        if (this.options.showCloseButton) {\r\n            modal.appendChild(this.buildCloseButton());\r\n        }\r\n\r\n        return modal;\r\n    }\r\n\r\n    /**\r\n     * Create modal\r\n     */\r\n    constructor(options: Partial<Options>) {\r\n        // Defaults\r\n        const defaults: Options = {\r\n            setId: null,\r\n            setClass: null,\r\n            width: 'auto',\r\n            height: 'auto',\r\n            headerHtml: null,\r\n            titleHtml: null,\r\n            bodyHtml: null,\r\n            footerHtml: null,\r\n            buttonCancelHtml: null,\r\n            buttonConfirmHtml: null,\r\n            buttonCancelClass: [],\r\n            buttonConfirmClass: [],\r\n            closeOnCancelButton: true,\r\n            closeOnConfirmButton: true,\r\n            showCloseButton: true,\r\n            allowCloseOutside: true,\r\n            allowMovement: true,\r\n            moveFromHeader: true,\r\n            moveFromBody: false,\r\n            moveFromFooter: true,\r\n            style: null,\r\n            animationOnShow: 'animDropDown',\r\n            animationOnDestroy: 'animDropUp',\r\n            animationDuration: 500,\r\n            beforeShow: () => {},\r\n            afterShow: () => {},\r\n            beforeDestroy: () => {},\r\n            afterDestroy: () => {},\r\n            onCancelButton: () => {},\r\n            onConfirmButton: () => {},\r\n        };\r\n        this.options = { ...defaults, ...options };\r\n\r\n        // Call init method\r\n        this.init();\r\n    }\r\n\r\n    /**\r\n     * Initialization of the current modal\r\n     */\r\n    private init() {\r\n        // Create modals container\r\n        if (!document.querySelector('.webcimes-modals')) {\r\n            this.modals = document.createElement('div');\r\n            this.modals.className = 'webcimes-modals animFadeIn';\r\n\r\n            // Set animation duration for modals\r\n            this.modals.style.setProperty(\r\n                'animation-duration',\r\n                this.options.animationDuration + 'ms',\r\n            );\r\n\r\n            document.body.appendChild(this.modals);\r\n\r\n            // Delete enter animation after animation delay\r\n            setTimeout(() => {\r\n                this.modals.classList.remove('animFadeIn');\r\n            }, this.options.animationDuration);\r\n        } else {\r\n            // Get modals\r\n            this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n            // Remove animFadeOut in case of create new modal after destroy the last one before (during animation duration)\r\n            this.modals.classList.remove('animFadeOut');\r\n        }\r\n\r\n        // Create modal with content\r\n        this.modal = this.buildModal();\r\n        this.modals.appendChild(this.modal);\r\n\r\n        // Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n        setTimeout(() => {\r\n            this.modal.dispatchEvent(new CustomEvent('beforeShow'));\r\n            if (typeof this.options.beforeShow === 'function') {\r\n                this.options.beforeShow();\r\n            }\r\n        }, 0);\r\n\r\n        // Set animation duration for modal\r\n        this.modal.style.setProperty('animation-duration', this.options.animationDuration + 'ms');\r\n\r\n        // Delete animation of enter after the animation delay\r\n        setTimeout(() => {\r\n            this.modal.classList.remove(this.options.animationOnShow);\r\n\r\n            // Callback after show modal\r\n            this.modal.dispatchEvent(new CustomEvent('afterShow'));\r\n            if (typeof this.options.afterShow === 'function') {\r\n                this.options.afterShow();\r\n            }\r\n        }, this.options.animationDuration);\r\n\r\n        // Width of modal\r\n        if (this.options.width != 'auto' && this.options.width) {\r\n            this.modal.style.setProperty('width', this.options.width);\r\n        } else {\r\n            // \"max-content\" is for keep size in \"auto\" and for maximum to max-width\r\n            this.modal.style.setProperty('width', 'max-content');\r\n        }\r\n\r\n        // Height of modal\r\n        if (this.options.height != 'auto' && this.options.height) {\r\n            this.modal.style.setProperty('height', this.options.height);\r\n        } else {\r\n            // \"max-content\" is for keep size in \"auto\" and for maximum to max-height\r\n            this.modal.style.setProperty('height', 'max-content');\r\n        }\r\n\r\n        // Style\r\n        if (this.options.style) {\r\n            let oldStyle = this.modal.getAttribute('style') ?? '';\r\n            this.modal.setAttribute('style', oldStyle + this.options.style);\r\n        }\r\n\r\n        // Event on cancel button\r\n        if (this.options.buttonCancelHtml) {\r\n            this.modal\r\n                .querySelector('.webcimes-modal__footer-button--cancel')\r\n                ?.addEventListener('click', this.eventCancelButton);\r\n        }\r\n\r\n        // Event on confirm button\r\n        if (this.options.buttonConfirmHtml) {\r\n            this.modal\r\n                .querySelector('.webcimes-modal__footer-button--confirm')\r\n                ?.addEventListener('click', this.eventConfirmButton);\r\n        }\r\n\r\n        // Event click outside (on modals)\r\n        this.modals.addEventListener('click', this.eventClickOutside);\r\n\r\n        // Event close modal when click on close button\r\n        this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n            el.addEventListener('click', this.eventClickCloseButton);\r\n        });\r\n\r\n        // Place selected modal on top\r\n        ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n            this.modal.addEventListener(typeEvent, this.eventDragModalOnTop);\r\n        });\r\n\r\n        // Move modal\r\n        if (\r\n            this.options.allowMovement &&\r\n            (this.options.moveFromHeader ||\r\n                this.options.moveFromBody ||\r\n                this.options.moveFromFooter)\r\n        ) {\r\n            if (\r\n                this.options.moveFromHeader &&\r\n                this.modal.querySelector('.webcimes-modal__header')\r\n            ) {\r\n                this.moveFromElements.push(\r\n                    <HTMLElement>this.modal.querySelector('.webcimes-modal__header'),\r\n                );\r\n            }\r\n            if (this.options.moveFromBody && this.modal.querySelector('.webcimes-modal__body')) {\r\n                this.moveFromElements.push(\r\n                    <HTMLElement>this.modal.querySelector('.webcimes-modal__body'),\r\n                );\r\n            }\r\n            if (\r\n                this.options.moveFromFooter &&\r\n                this.modal.querySelector('.webcimes-modal__footer')\r\n            ) {\r\n                this.moveFromElements.push(\r\n                    <HTMLElement>this.modal.querySelector('.webcimes-modal__footer'),\r\n                );\r\n            }\r\n\r\n            ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n                this.moveFromElements.forEach((el) => {\r\n                    el.addEventListener(typeEvent, this.eventDragStart);\r\n                });\r\n            });\r\n\r\n            ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n                document.addEventListener(typeEvent, this.eventMove);\r\n            });\r\n\r\n            ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n                document.addEventListener(typeEvent, this.eventDragStop);\r\n            });\r\n\r\n            document.addEventListener('selectstart', this.eventPreventSelectText);\r\n        }\r\n\r\n        // When resizing window, reset modal position to center\r\n        window.addEventListener('resize', this.eventResize);\r\n    }\r\n\r\n    /**\r\n     * Destroy current modal\r\n     */\r\n    public destroy() {\r\n        // If modal is not already destroying\r\n        if (!this.modal.getAttribute('data-destroying')) {\r\n            // Callback before destroy modal\r\n            this.modal.dispatchEvent(new CustomEvent('beforeDestroy'));\r\n            if (typeof this.options.beforeDestroy === 'function') {\r\n                this.options.beforeDestroy();\r\n            }\r\n\r\n            // Close modals (according the number of modal not already destroying)\r\n            if (document.querySelectorAll('.webcimes-modal:not([data-destroying])').length == 1) {\r\n                this.modals.classList.add('animFadeOut');\r\n            }\r\n\r\n            // Close modal\r\n            this.modal.setAttribute('data-destroying', '1');\r\n            this.modal.classList.add(this.options.animationOnDestroy);\r\n\r\n            // Destroy all events from modal and remove modals or modal after animation duration\r\n            setTimeout(() => {\r\n                if (typeof this.modal !== 'undefined') {\r\n                    // Destroy all events from modal\r\n\r\n                    if (this.options.buttonCancelHtml) {\r\n                        this.modal\r\n                            .querySelector('.webcimes-modal__footer-button--cancel')\r\n                            ?.removeEventListener('click', this.eventCancelButton);\r\n                    }\r\n\r\n                    if (this.options.buttonConfirmHtml) {\r\n                        this.modal\r\n                            .querySelector('.webcimes-modal__footer-button--confirm')\r\n                            ?.removeEventListener('click', this.eventConfirmButton);\r\n                    }\r\n\r\n                    this.modals.removeEventListener('click', this.eventClickOutside);\r\n\r\n                    this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n                        el.removeEventListener('click', this.eventClickCloseButton);\r\n                    });\r\n\r\n                    ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n                        this.modal.removeEventListener(typeEvent, this.eventDragModalOnTop);\r\n                    });\r\n\r\n                    if (\r\n                        this.options.allowMovement &&\r\n                        (this.options.moveFromHeader ||\r\n                            this.options.moveFromBody ||\r\n                            this.options.moveFromFooter)\r\n                    ) {\r\n                        ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n                            this.moveFromElements.forEach((el) => {\r\n                                el.removeEventListener(typeEvent, this.eventDragStart);\r\n                            });\r\n                        });\r\n\r\n                        ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n                            document.removeEventListener(typeEvent, this.eventMove);\r\n                        });\r\n\r\n                        ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n                            document.removeEventListener(typeEvent, this.eventDragStop);\r\n                        });\r\n\r\n                        document.removeEventListener('selectstart', this.eventPreventSelectText);\r\n                    }\r\n\r\n                    window.removeEventListener('resize', this.eventResize);\r\n\r\n                    // Remove modals or modal according the number of modal\r\n                    (document.querySelectorAll('.webcimes-modal').length > 1\r\n                        ? this.modal\r\n                        : this.modals\r\n                    ).remove();\r\n                }\r\n\r\n                // Callback after destroy modal\r\n                this.modal.dispatchEvent(new CustomEvent('afterDestroy'));\r\n                if (typeof this.options.afterDestroy === 'function') {\r\n                    this.options.afterDestroy();\r\n                }\r\n            }, this.options.animationDuration);\r\n        }\r\n    }\r\n}\r\n\r\n/**\r\n * Factory function to create a WebcimesModal instance with proper typing\r\n */\r\nexport function createWebcimesModal(options: Partial<Options>): WebcimesModal {\r\n    return new WebcimesModalImpl(options);\r\n}\r\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","WebcimesModalImpl","modals","modal","options","eventCancelButton","this","dispatchEvent","CustomEvent","onCancelButton","eventConfirmButton","onConfirmButton","eventClickOutside","e","target","allowCloseOutside","destroy","classList","add","setTimeout","remove","animationDuration","eventClickCloseButton","eventDragModalOnTop","closest","document","querySelectorAll","length","nextElementSibling","oldScrollTop","scrollTop","insertAdjacentElement","position","offset","isDragging","moveFromElements","eventDragStart","clientX","x","offsetLeft","y","offsetTop","clientY","touches","eventMove","style","left","top","eventDragStop","eventPreventSelectText","preventDefault","eventResize","removeProperty","setElementContent","element","content","innerHTML","appendChild","buildHeader","headerHtml","titleHtml","header","createElement","className","moveFromHeader","title","buildBody","bodyHtml","body","moveFromBody","buildFooter","footerHtml","buttonCancelHtml","buttonConfirmHtml","footer","moveFromFooter","buttonsWrapper","cancelButton","buttonCancelClass","closeOnCancelButton","confirmButton","buttonConfirmClass","closeOnConfirmButton","buildCloseButton","closeButton","setAttribute","buildModal","animationOnShow","setClass","setId","id","showCloseButton","constructor","width","height","allowMovement","animationOnDestroy","beforeShow","afterShow","beforeDestroy","afterDestroy","init","querySelector","setProperty","oldStyle","getAttribute","addEventListener","forEach","el","typeEvent","push","window","removeEventListener","createWebcimesModal"],"sourceRoot":""}

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

@@ -41,6 +41,10 @@ export interface Options {
     buttonCancelHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for confirm button, default "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" */
@@ -57,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" */