alert90s 1.0.9 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +28 -24
  2. package/dist/alert90s.min.js +1 -1
  3. package/package.json +1 -1
  4. package/src/index.js +86 -10
  5. package/src/styles.css +114 -0
package/README.md CHANGED
@@ -174,30 +174,34 @@ If you'd like to collaborate or just say hi, visit my [Portfolio Website](https:
174
174
 
175
175
  ## Advanced Options
176
176
 
177
- | Option | Type | Default | Description |
178
- | ----------------- | -------- | ----------- | ----------------------------------------------------------------- |
179
- | background | String | '' | Custom background color for the modal. |
180
- | color | String | '' | Custom text color for the modal body. |
181
- | titleColor | String | '' | Custom title color. |
182
- | iconColor | String | '' | Custom icon color (including SVG stroke). |
183
- | title | String | '' | The title of the alert. Supports HTML. |
184
- | text/message | String | '' | The message body of the alert. |
185
- | html | String | '' | A custom HTML description for the alert. |
186
- | icon | String | '' | Standard icons: `warning`, `error`, `info`, `success`, `question` |
187
- | iconHtml | String | '' | Custom HTML string for the icon. |
188
- | footer | String | '' | Custom HTML for the footer section. |
189
- | imageUrl | String | '' | URL for an image to display. |
190
- | input | String | null | Type of input: `text`, `password`, `email`, `textarea`, etc. |
191
- | dir | String | 'auto' | Text direction. Set `rtl` for Arabic/Hebrew. |
192
- | position | String | 'center' | `top`, `top-end`, `bottom-start`, etc. |
193
- | timer | Number | null | Auto close timer in milliseconds. |
194
- | timerProgressBar | Boolean | false | Display progress bar at the bottom. |
195
- | toast | Boolean | false | Display the alert as a non-blocking toast notification. |
196
- | loaderType | String | 'hourglass' | Type of loader: `hourglass`, `ascii`, `blinking`, `progress`. |
197
- | draggable | Boolean | false | Allow moving the modal dragging its header. |
198
- | showDenyButton | Boolean | false | Show the third middle deny button. |
199
- | preConfirm | Function | null | Async function executed before confirm executes. |
200
- | allowOutsideClick | Function | null | Async function executed before confirm executes. |
177
+ | Option | Type | Default | Description |
178
+ | ----------------- | -------- | ----------- | --------------------------------------------------------------------------------------------------------- |
179
+ | background | String | '' | Custom background color for the modal. |
180
+ | color | String | '' | Custom text color for the modal body. |
181
+ | titleColor | String | '' | Custom title color. |
182
+ | iconColor | String | '' | Custom icon color (including SVG stroke). |
183
+ | title | String | '' | The title of the alert. Supports HTML. |
184
+ | text/message | String | '' | The message body of the alert. |
185
+ | html | String | '' | A custom HTML description for the alert. |
186
+ | icon | String | '' | Standard icons: `warning`, `error`, `info`, `success`, `question` |
187
+ | iconHtml | String | '' | Custom HTML string for the icon. |
188
+ | footer | String | '' | Custom HTML for the footer section. |
189
+ | imageUrl | String | '' | URL for an image to display. |
190
+ | input | String | null | Generate an input: `'text'`, `'password'`, `'textarea'`, `'select'`, `'radio'`, `'checkbox'`, `'toggle'`. |
191
+ | inputPlaceholder | String | '' | Placeholder text or label for `checkbox`/`toggle`. |
192
+ | inputValue | String | '' | Initial value or checked state (for boolean inputs). |
193
+ | inputOptions | Object | {} | Object mapping `{value: 'Label'}` for `select`/`radio`. |
194
+ | inputAttributes | Object | {} | Custom HTML attributes for the input element. |
195
+ | dir | String | 'auto' | Text direction. Set `rtl` for Arabic/Hebrew. |
196
+ | position | String | 'center' | `top`, `top-end`, `bottom-start`, etc. |
197
+ | timer | Number | null | Auto close timer in milliseconds. |
198
+ | timerProgressBar | Boolean | false | Display progress bar at the bottom. |
199
+ | toast | Boolean | false | Display the alert as a non-blocking toast notification. |
200
+ | loaderType | String | 'hourglass' | Type of loader: `hourglass`, `ascii`, `blinking`, `progress`. |
201
+ | draggable | Boolean | false | Allow moving the modal dragging its header. |
202
+ | showDenyButton | Boolean | false | Show the third middle deny button. |
203
+ | preConfirm | Function | null | Async function executed before confirm executes. |
204
+ | allowOutsideClick | Function | null | Async function executed before confirm executes. |
201
205
 
202
206
  ## Methods
203
207
 
package/dist/alert90s.min.js CHANGED
@@ -1 +1 @@
1
- !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Alert90s=e()}(this,function(){"use strict";!function(t,e){void 0===e&&(e={});var o=e.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}@keyframes alert90s-toast-slide-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.alert90s-toast-container{display:flex;gap:10px;padding:10px;pointer-events:none;position:fixed;z-index:10000}.alert90s-toast-top-start{flex-direction:column;left:0;top:0}.alert90s-toast-top{flex-direction:column;left:50%;top:0;transform:translateX(-50%)}.alert90s-toast-top-end{flex-direction:column;right:0;top:0}.alert90s-toast-center-start{flex-direction:column;left:0;top:50%;transform:translateY(-50%)}.alert90s-toast-center{flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%)}.alert90s-toast-center-end{flex-direction:column;right:0;top:50%;transform:translateY(-50%)}.alert90s-toast-bottom-start{bottom:0;flex-direction:column-reverse;left:0}.alert90s-toast-bottom{bottom:0;flex-direction:column-reverse;left:50%;transform:translateX(-50%)}.alert90s-toast-bottom-end{bottom:0;flex-direction:column-reverse;right:0}.alert90s-box.alert90s-toast{align-items:stretch;bottom:auto!important;box-shadow:6px 6px 0 0 #000;flex-direction:row;left:auto!important;margin:0;max-width:100%;min-width:250px;padding:0;pointer-events:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}');class t{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const t=this.timerEnd-Date.now();return t>0?t:0}static isLoading(){const t=this.getPopup();if(!t)return!1;const e=t.querySelector(".alert90s-actions"),o=t.querySelector(".alert90s-loader");return e&&"none"===e.style.display||!!o}static showLoading(){const e=this.getPopup();if(e){const o=e.querySelector(".alert90s-actions");o&&(o.style.display="none");let r=e.querySelector(".alert90s-loader");if(!r){r=document.createElement("div"),r.className="alert90s-loader";const n=t.currentOptions&&t.currentOptions.loaderType||"hourglass";r.innerHTML="ascii"===n?'<div class="alert90s-spinner ascii"></div>':"blinking"===n?'<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>':"progress"===n?'<div class="alert90s-spinner progress"></div>':'<div class="alert90s-spinner hourglass">⏳</div>',o&&o.parentNode?o.parentNode.insertBefore(r,o):e.querySelector(".alert90s-body").appendChild(r)}}}static hideLoading(){const t=this.getPopup();if(t){const e=t.querySelector(".alert90s-actions");e&&(e.style.display="");const o=t.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(t){const e=this.getPopup();if(e){let o=e.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const t=e.querySelector(".alert90s-actions");t&&t.parentNode?t.parentNode.insertBefore(o,t):e.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=t,o.style.display="block"}}static resetValidationMessage(){const t=this.getPopup();if(t){const e=t.querySelector(".alert90s-validation-message");e&&(e.style.display="none")}}static getToastContainer(t){const e=`alert90s-toast-container alert90s-toast-${t}`;let o=document.querySelector(`.${e.replace(/ /g,".")}`);return o||(o=document.createElement("div"),o.className=e,document.body.appendChild(o)),o}static fire(t={}){return this.show(t)}static show(e={}){return new Promise(o=>{"string"==typeof e&&(e={title:e}),this.currentOptions=e;const r={title:void 0!==e.title?e.title:"",text:e.message||e.text||"",html:e.html||"",icon:e.type||e.icon||"",iconHtml:e.iconHtml||"",showConfirmButton:!1!==e.showConfirmButton,showCancelButton:e.showCancelButton||!1,showDenyButton:e.showDenyButton||!1,showCloseButton:void 0===e.showCloseButton||e.showCloseButton,loaderType:e.loaderType||"hourglass",confirmButtonText:e.confirmText||e.confirmButtonText||"OK",cancelButtonText:e.cancelText||e.cancelButtonText||"Cancel",denyButtonText:e.denyText||e.denyButtonText||"No",confirmButtonColor:e.confirmButtonColor||"",cancelButtonColor:e.cancelButtonColor||"",denyButtonColor:e.denyButtonColor||"",background:e.background||"",color:e.color||"",titleColor:e.titleColor||"",iconColor:e.iconColor||"",confirmButtonAriaLabel:e.confirmButtonAriaLabel||"",cancelButtonAriaLabel:e.cancelButtonAriaLabel||"",denyButtonAriaLabel:e.denyButtonAriaLabel||"",focusConfirm:!1!==e.focusConfirm,footer:e.footer||"",imageUrl:e.imageUrl||"",imageWidth:e.imageWidth||null,imageHeight:e.imageHeight||null,imageAlt:e.imageAlt||"",input:e.input||null,inputAttributes:e.inputAttributes||{},showLoaderOnConfirm:e.showLoaderOnConfirm||!1,preConfirm:e.preConfirm||null,toast:e.toast||!1,draggable:e.draggable||!1,position:e.position||(e.toast?"top-end":"center"),allowOutsideClick:void 0===e.allowOutsideClick||e.allowOutsideClick,dir:e.dir||"auto",showClass:e.showClass||{popup:"alert90s-pop-in"},hideClass:e.hideClass||{popup:"alert90s-fade-out"},timer:e.timer||null,timerProgressBar:e.timerProgressBar||!1,didOpen:e.didOpen||null,willClose:e.willClose||null};let n=null;r.toast||(n=document.createElement("div"),n.className=`alert90s-overlay alert90s-pos-${r.position}`,n.addEventListener("mousedown",t=>{if(t.target===n){("function"==typeof r.allowOutsideClick?r.allowOutsideClick():r.allowOutsideClick)&&h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}}));const i=document.createElement("div");i.className="alert90s-box",r.toast&&i.classList.add("alert90s-toast"),"rtl"===document.dir||"rtl"===r.dir||r.position.includes("start")?i.setAttribute("dir","auto"===r.dir?document.dir||"ltr":r.dir):i.setAttribute("dir",r.dir),r.showClass.popup&&"alert90s-pop-in"!==r.showClass.popup&&(i.style.animation="none",i.className=`alert90s-box ${r.showClass.popup}`),r.background&&(i.style.backgroundColor=r.background),r.color&&(i.style.color=r.color),r.draggable&&i.classList.add("is-draggable"),r.toast||(this.currentPopup=i);const s=document.createElement("div");s.className="alert90s-body";const a=document.createElement("div");a.className="alert90s-header",r.draggable&&a.classList.add("draggable");let l="";if(r.showCloseButton&&(l='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>&#10005;</span>\n </button>\n '),a.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${l}\n </div>\n `,r.draggable){let t,e,o,r,n=!1;a.addEventListener("mousedown",s=>{if(s.target.closest("#alert90s-close"))return;n=!0,t=s.clientX,e=s.clientY;const a=i.getBoundingClientRect();i.style.transform="none",i.style.animation="none",o=a.left,r=a.top,i.style.left=o+"px",i.style.top=r+"px",i.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",s=>{n&&(i.style.left=o+(s.clientX-t)+"px",i.style.top=r+(s.clientY-e)+"px")}),document.addEventListener("mouseup",()=>{n&&(n=!1,document.body.style.userSelect="")})}let d=null;if(r.timer&&r.timerProgressBar&&(d=document.createElement("div"),d.className="alert90s-progress-bar",d.style.animationDuration=`${r.timer}ms`,i.appendChild(d)),r.imageUrl){const t=document.createElement("div");t.className="alert90s-image-container";const e=document.createElement("img");e.src=r.imageUrl,r.imageAlt&&(e.alt=r.imageAlt);let o="";r.imageWidth&&(o+=`width: ${r.imageWidth}px; max-width: 100%; `),r.imageHeight&&(o+=`height: ${r.imageHeight}px; `),o&&t.setAttribute("style",o),t.appendChild(e),s.appendChild(t)}if(r.icon){const t=document.createElement("div"),e="error"===r.icon?"danger":r.icon;t.className=`alert90s-icon ${e}`;let o="";if(r.iconHtml?o=`<div class="alert90s-icon-custom">${r.iconHtml}</div>`:"warning"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===r.icon||"error"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===r.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),t.innerHTML=o,r.iconColor&&(t.style.color=r.iconColor,t.style.borderColor=r.iconColor,!r.iconHtml)){const e=t.querySelector("svg");e&&(e.style.stroke=r.iconColor)}o&&s.appendChild(t)}const c=document.createElement("div");if(c.className="alert90s-content-wrapper",r.title){const t=document.createElement("h2");t.className="alert90s-title",t.innerHTML=r.title,r.titleColor&&(t.style.color=r.titleColor),c.appendChild(t)}if(r.html){const t=document.createElement("div");t.className="alert90s-html",t.innerHTML=r.html,r.color&&(t.style.color=r.color),c.appendChild(t)}else if(r.text){const t=document.createElement("p");t.className="alert90s-message",t.textContent=r.text,r.color&&(t.style.color=r.color),c.appendChild(t)}if((r.title||r.html||r.text)&&s.appendChild(c),r.toast&&r.showCloseButton){const t=document.createElement("button");t.className="alert90s-toast-close",t.innerHTML="<span>&#10005;</span>",t.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),s.appendChild(t)}let p=null;if(r.input){const t=document.createElement("div");if(t.className="alert90s-input-container","textarea"===r.input?p=document.createElement("textarea"):(p=document.createElement("input"),p.type=r.input),p.className="alert90s-input",r.inputAttributes)for(const[t,e]of Object.entries(r.inputAttributes))p.setAttribute(t,e);t.appendChild(p),s.appendChild(t)}const m=document.createElement("div");m.className="alert90s-actions";let u=null,f=null;const h=t=>{f&&clearTimeout(f),r.willClose&&r.willClose(),i.style.animation="none","alert90s-fade-out"===r.hideClass.popup?(i.style.animation="alert90s-fade-out 0.2s forwards",n&&(n.style.transition="opacity 0.2s",n.style.opacity="0")):i.className=`alert90s-box ${r.hideClass.popup}`,setTimeout(()=>{r.toast?i.parentNode&&i.parentNode.removeChild(i):n&&document.body.contains(n)&&document.body.removeChild(n),o(t)},200)},g=async()=>{let e=!0;if(p&&(e=p.value),r.preConfirm){t.resetValidationMessage(),r.showLoaderOnConfirm&&t.showLoading();try{const o=await Promise.resolve(r.preConfirm(e));if(!1===o)return void t.hideLoading();void 0!==o&&o!==e&&(e=o);const n=i.querySelector(".alert90s-validation-message");if(n&&"block"===n.style.display)return void t.hideLoading()}catch(e){return t.showValidationMessage(`Request failed: ${e}`),void t.hideLoading()}}h({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:e})};if(r.showCancelButton){const t=document.createElement("button");t.className="alert90s-button cancel",t.innerHTML=r.cancelButtonText,r.cancelButtonAriaLabel&&t.setAttribute("aria-label",r.cancelButtonAriaLabel),r.cancelButtonColor&&(t.style.backgroundColor=r.cancelButtonColor),t.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),m.appendChild(t)}if(r.showDenyButton){const t=document.createElement("button");t.className="alert90s-button deny",t.innerHTML=r.denyButtonText,r.denyButtonAriaLabel&&t.setAttribute("aria-label",r.denyButtonAriaLabel),r.denyButtonColor&&(t.style.backgroundColor=r.denyButtonColor),t.onclick=()=>h({isConfirmed:!1,isDenied:!0,isDismissed:!1}),m.appendChild(t)}if(r.showConfirmButton){const t=document.createElement("button");t.className="alert90s-button confirm",t.innerHTML=r.confirmButtonText,r.confirmButtonAriaLabel&&t.setAttribute("aria-label",r.confirmButtonAriaLabel),r.confirmButtonColor&&(t.style.backgroundColor=r.confirmButtonColor),t.onclick=g,m.appendChild(t),u=t}if((r.showCancelButton||r.showDenyButton||r.showConfirmButton)&&s.appendChild(m),r.footer){const t=document.createElement("div");t.className="alert90s-footer",t.innerHTML=r.footer,s.appendChild(t)}if(i.appendChild(a),i.appendChild(s),r.toast){const e=t.getToastContainer(r.position);i.style.animation="alert90s-toast-slide-in 0.3s ease-out",e.appendChild(i)}else n.appendChild(i);if(r.showCloseButton&&!r.toast){const t=a.querySelector("#alert90s-close");t&&(t.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}r.toast||document.body.appendChild(n),r.focusConfirm&&u&&setTimeout(()=>{p?p.focus():u.focus()},50),r.didOpen&&setTimeout(()=>{r.didOpen()},0),r.timer&&(this.timerEnd=Date.now()+r.timer,f=setTimeout(()=>{h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},r.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(t){const e=t.target.closest("[data-alert90s-tooltip]");if(!e)return;const o=e.getAttribute("data-alert90s-tooltip");if(!o)return;const r=e.getAttribute("data-alert90s-position")||"top",n=e.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${r} c-${n} show`;const i=e.getBoundingClientRect(),s=this._tooltipEl.getBoundingClientRect(),a=10;let l=0,d=0;switch(r){case"top":l=i.top-s.height-a,d=i.left+i.width/2-s.width/2;break;case"bottom":l=i.bottom+a,d=i.left+i.width/2-s.width/2;break;case"left":l=i.top+i.height/2-s.height/2,d=i.left-s.width-a;break;case"right":l=i.top+i.height/2-s.height/2,d=i.right+a}d<a&&(d=a),l<a&&(l=a),d+s.width>window.innerWidth-a&&(d=window.innerWidth-s.width-a),this._tooltipEl.style.top=`${l+window.scrollY}px`,this._tooltipEl.style.left=`${d+window.scrollX}px`}static _handleTooltipMouseOut(t){const e=t.target.closest("[data-alert90s-tooltip]");e&&setTimeout(()=>{this._tooltipEl.matches(":hover")||e.matches(":hover")||e.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}}return"undefined"!=typeof window&&(window.Alert90s=t,document.addEventListener("DOMContentLoaded",()=>{t.initTooltips()})),t});
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Alert90s=t()}(this,function(){"use strict";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}select.alert90s-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#000 0),linear-gradient(135deg,#000 50%,transparent 0);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;cursor:pointer}.alert90s-radio-group{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;width:100%}.alert90s-radio-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-radio-label input[type=radio]{appearance:none;background-color:#f8fafc;border:4px solid #000;border-radius:50%;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-radio-label input[type=radio]:checked{background-color:#000;box-shadow:inset 0 0 0 4px #fff}.alert90s-checkbox-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-checkbox-label input[type=checkbox]{appearance:none;background-color:#f8fafc;border:4px solid #000;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-checkbox-label input[type=checkbox]:checked{background-color:#000}.alert90s-checkbox-label input[type=checkbox]:checked:after{color:#fff;content:"✔";font-size:.8rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.alert90s-toggle-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-toggle-label input[type=checkbox]{display:none}.alert90s-toggle-slider{background-color:#f87171;border:4px solid #000;box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);height:1.5rem;position:relative;transition:background-color .2s;width:3rem}.alert90s-toggle-slider:before{background-color:#fff;border-right:4px solid #000;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .2s;width:1rem}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider{background-color:#4ade80}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider:before{border-left:4px solid #000;transform:translateX(1.5rem)}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}@keyframes alert90s-toast-slide-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.alert90s-toast-container{display:flex;gap:10px;padding:10px;pointer-events:none;position:fixed;z-index:10000}.alert90s-toast-top-start{flex-direction:column;left:0;top:0}.alert90s-toast-top{flex-direction:column;left:50%;top:0;transform:translateX(-50%)}.alert90s-toast-top-end{flex-direction:column;right:0;top:0}.alert90s-toast-center-start{flex-direction:column;left:0;top:50%;transform:translateY(-50%)}.alert90s-toast-center{flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%)}.alert90s-toast-center-end{flex-direction:column;right:0;top:50%;transform:translateY(-50%)}.alert90s-toast-bottom-start{bottom:0;flex-direction:column-reverse;left:0}.alert90s-toast-bottom{bottom:0;flex-direction:column-reverse;left:50%;transform:translateX(-50%)}.alert90s-toast-bottom-end{bottom:0;flex-direction:column-reverse;right:0}.alert90s-box.alert90s-toast{align-items:stretch;bottom:auto!important;box-shadow:6px 6px 0 0 #000;flex-direction:row;left:auto!important;margin:0;max-width:100%;min-width:250px;padding:0;pointer-events:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}');class e{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const e=this.timerEnd-Date.now();return e>0?e:0}static isLoading(){const e=this.getPopup();if(!e)return!1;const t=e.querySelector(".alert90s-actions"),o=e.querySelector(".alert90s-loader");return t&&"none"===t.style.display||!!o}static showLoading(){const t=this.getPopup();if(t){const o=t.querySelector(".alert90s-actions");o&&(o.style.display="none");let r=t.querySelector(".alert90s-loader");if(!r){r=document.createElement("div"),r.className="alert90s-loader";const n=e.currentOptions&&e.currentOptions.loaderType||"hourglass";r.innerHTML="ascii"===n?'<div class="alert90s-spinner ascii"></div>':"blinking"===n?'<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>':"progress"===n?'<div class="alert90s-spinner progress"></div>':'<div class="alert90s-spinner hourglass">⏳</div>',o&&o.parentNode?o.parentNode.insertBefore(r,o):t.querySelector(".alert90s-body").appendChild(r)}}}static hideLoading(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-actions");t&&(t.style.display="");const o=e.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(e){const t=this.getPopup();if(t){let o=t.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const e=t.querySelector(".alert90s-actions");e&&e.parentNode?e.parentNode.insertBefore(o,e):t.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=e,o.style.display="block"}}static resetValidationMessage(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-validation-message");t&&(t.style.display="none")}}static getToastContainer(e){const t=`alert90s-toast-container alert90s-toast-${e}`;let o=document.querySelector(`.${t.replace(/ /g,".")}`);return o||(o=document.createElement("div"),o.className=t,document.body.appendChild(o)),o}static fire(e={}){return this.show(e)}static show(t={}){return new Promise(o=>{"string"==typeof t&&(t={title:t}),this.currentOptions=t;const r={title:void 0!==t.title?t.title:"",text:t.message||t.text||"",html:t.html||"",icon:t.type||t.icon||"",iconHtml:t.iconHtml||"",showConfirmButton:!1!==t.showConfirmButton,showCancelButton:t.showCancelButton||!1,showDenyButton:t.showDenyButton||!1,showCloseButton:void 0===t.showCloseButton||t.showCloseButton,loaderType:t.loaderType||"hourglass",confirmButtonText:t.confirmText||t.confirmButtonText||"OK",cancelButtonText:t.cancelText||t.cancelButtonText||"Cancel",denyButtonText:t.denyText||t.denyButtonText||"No",confirmButtonColor:t.confirmButtonColor||"",cancelButtonColor:t.cancelButtonColor||"",denyButtonColor:t.denyButtonColor||"",background:t.background||"",color:t.color||"",titleColor:t.titleColor||"",iconColor:t.iconColor||"",confirmButtonAriaLabel:t.confirmButtonAriaLabel||"",cancelButtonAriaLabel:t.cancelButtonAriaLabel||"",denyButtonAriaLabel:t.denyButtonAriaLabel||"",focusConfirm:!1!==t.focusConfirm,footer:t.footer||"",imageUrl:t.imageUrl||"",imageWidth:t.imageWidth||null,imageHeight:t.imageHeight||null,imageAlt:t.imageAlt||"",input:t.input||null,inputPlaceholder:t.inputPlaceholder||"",inputValue:t.inputValue||"",inputOptions:t.inputOptions||{},inputAttributes:t.inputAttributes||{},showLoaderOnConfirm:t.showLoaderOnConfirm||!1,preConfirm:t.preConfirm||null,toast:t.toast||!1,draggable:t.draggable||!1,position:t.position||(t.toast?"top-end":"center"),allowOutsideClick:void 0===t.allowOutsideClick||t.allowOutsideClick,dir:t.dir||"auto",showClass:t.showClass||{popup:"alert90s-pop-in"},hideClass:t.hideClass||{popup:"alert90s-fade-out"},timer:t.timer||null,timerProgressBar:t.timerProgressBar||!1,didOpen:t.didOpen||null,willClose:t.willClose||null};let n=null;r.toast||(n=document.createElement("div"),n.className=`alert90s-overlay alert90s-pos-${r.position}`,n.addEventListener("mousedown",e=>{if(e.target===n){("function"==typeof r.allowOutsideClick?r.allowOutsideClick():r.allowOutsideClick)&&h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}}));const a=document.createElement("div");a.className="alert90s-box",r.toast&&a.classList.add("alert90s-toast"),"rtl"===document.dir||"rtl"===r.dir||r.position.includes("start")?a.setAttribute("dir","auto"===r.dir?document.dir||"ltr":r.dir):a.setAttribute("dir",r.dir),r.showClass.popup&&"alert90s-pop-in"!==r.showClass.popup&&(a.style.animation="none",a.className=`alert90s-box ${r.showClass.popup}`),r.background&&(a.style.backgroundColor=r.background),r.color&&(a.style.color=r.color),r.draggable&&a.classList.add("is-draggable"),r.toast||(this.currentPopup=a);const i=document.createElement("div");i.className="alert90s-body";const s=document.createElement("div");s.className="alert90s-header",r.draggable&&s.classList.add("draggable");let l="";if(r.showCloseButton&&(l='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>&#10005;</span>\n </button>\n '),s.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${l}\n </div>\n `,r.draggable){let e,t,o,r,n=!1;s.addEventListener("mousedown",i=>{if(i.target.closest("#alert90s-close"))return;n=!0,e=i.clientX,t=i.clientY;const s=a.getBoundingClientRect();a.style.transform="none",a.style.animation="none",o=s.left,r=s.top,a.style.left=o+"px",a.style.top=r+"px",a.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",i=>{n&&(a.style.left=o+(i.clientX-e)+"px",a.style.top=r+(i.clientY-t)+"px")}),document.addEventListener("mouseup",()=>{n&&(n=!1,document.body.style.userSelect="")})}let c=null;if(r.timer&&r.timerProgressBar&&(c=document.createElement("div"),c.className="alert90s-progress-bar",c.style.animationDuration=`${r.timer}ms`,a.appendChild(c)),r.imageUrl){const e=document.createElement("div");e.className="alert90s-image-container";const t=document.createElement("img");t.src=r.imageUrl,r.imageAlt&&(t.alt=r.imageAlt);let o="";r.imageWidth&&(o+=`width: ${r.imageWidth}px; max-width: 100%; `),r.imageHeight&&(o+=`height: ${r.imageHeight}px; `),o&&e.setAttribute("style",o),e.appendChild(t),i.appendChild(e)}if(r.icon){const e=document.createElement("div"),t="error"===r.icon?"danger":r.icon;e.className=`alert90s-icon ${t}`;let o="";if(r.iconHtml?o=`<div class="alert90s-icon-custom">${r.iconHtml}</div>`:"warning"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===r.icon||"error"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===r.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),e.innerHTML=o,r.iconColor&&(e.style.color=r.iconColor,e.style.borderColor=r.iconColor,!r.iconHtml)){const t=e.querySelector("svg");t&&(t.style.stroke=r.iconColor)}o&&i.appendChild(e)}const d=document.createElement("div");if(d.className="alert90s-content-wrapper",r.title){const e=document.createElement("h2");e.className="alert90s-title",e.innerHTML=r.title,r.titleColor&&(e.style.color=r.titleColor),d.appendChild(e)}if(r.html){const e=document.createElement("div");e.className="alert90s-html",e.innerHTML=r.html,r.color&&(e.style.color=r.color),d.appendChild(e)}else if(r.text){const e=document.createElement("p");e.className="alert90s-message",e.textContent=r.text,r.color&&(e.style.color=r.color),d.appendChild(e)}if((r.title||r.html||r.text)&&i.appendChild(d),r.toast&&r.showCloseButton){const e=document.createElement("button");e.className="alert90s-toast-close",e.innerHTML="<span>&#10005;</span>",e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),i.appendChild(e)}let p=null;if(r.input){const e=document.createElement("div");if(e.className="alert90s-input-container","select"===r.input){if(p=document.createElement("select"),p.className="alert90s-input alert90s-select",r.inputPlaceholder){const e=document.createElement("option");e.value="",e.textContent=r.inputPlaceholder,e.disabled=!0,e.selected=!0,p.appendChild(e)}for(const[e,t]of Object.entries(r.inputOptions)){const o=document.createElement("option");o.value=e,o.textContent=t,e===r.inputValue&&(o.selected=!0),p.appendChild(o)}e.appendChild(p)}else if("radio"===r.input){const t=document.createElement("div");t.className="alert90s-radio-group";for(const[e,o]of Object.entries(r.inputOptions)){const n=document.createElement("label");n.className="alert90s-radio-label";const a=document.createElement("input");a.type="radio",a.name="alert90s-radio",a.value=e,e===r.inputValue&&(a.checked=!0);const i=document.createElement("span");i.textContent=o,n.appendChild(a),n.appendChild(i),t.appendChild(n)}p=t,e.appendChild(t)}else if("checkbox"===r.input||"toggle"===r.input){const t=document.createElement("label");if(t.className="toggle"===r.input?"alert90s-toggle-label":"alert90s-checkbox-label",p=document.createElement("input"),p.type="checkbox",p.checked=!!r.inputValue,"toggle"===r.input){const e=document.createElement("div");if(e.className="alert90s-toggle-slider",t.appendChild(p),t.appendChild(e),r.inputPlaceholder){const e=document.createElement("span");e.textContent=r.inputPlaceholder,t.appendChild(e)}}else{const e=document.createElement("span");e.textContent=r.inputPlaceholder||"Check me",t.appendChild(p),t.appendChild(e)}e.appendChild(t)}else"textarea"===r.input?(p=document.createElement("textarea"),p.className="alert90s-input",r.inputPlaceholder&&(p.placeholder=r.inputPlaceholder),r.inputValue&&(p.value=r.inputValue),e.appendChild(p)):(p=document.createElement("input"),p.type=r.input,p.className="alert90s-input",r.inputPlaceholder&&(p.placeholder=r.inputPlaceholder),r.inputValue&&(p.value=r.inputValue),e.appendChild(p));if(r.inputAttributes&&p&&!["radio"].includes(r.input))for(const[e,t]of Object.entries(r.inputAttributes))p.setAttribute(e,t);i.appendChild(e)}const m=document.createElement("div");m.className="alert90s-actions";let u=null,f=null;const h=e=>{f&&clearTimeout(f),r.willClose&&r.willClose(),a.style.animation="none","alert90s-fade-out"===r.hideClass.popup?(a.style.animation="alert90s-fade-out 0.2s forwards",n&&(n.style.transition="opacity 0.2s",n.style.opacity="0")):a.className=`alert90s-box ${r.hideClass.popup}`,setTimeout(()=>{r.toast?a.parentNode&&a.parentNode.removeChild(a):n&&document.body.contains(n)&&document.body.removeChild(n),o(e)},200)},g=async()=>{let t=!0;if("radio"===r.input){const e=p.querySelector('input[type="radio"]:checked');t=e?e.value:null}else"checkbox"===r.input||"toggle"===r.input?t=p.checked:p&&(t=p.value);if(r.preConfirm){e.resetValidationMessage(),r.showLoaderOnConfirm&&e.showLoading();try{const o=await Promise.resolve(r.preConfirm(t));if(!1===o)return void e.hideLoading();void 0!==o&&o!==t&&(t=o);const n=a.querySelector(".alert90s-validation-message");if(n&&"block"===n.style.display)return void e.hideLoading()}catch(t){return e.showValidationMessage(`Request failed: ${t}`),void e.hideLoading()}}h({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:t})};if(r.showCancelButton){const e=document.createElement("button");e.className="alert90s-button cancel",e.innerHTML=r.cancelButtonText,r.cancelButtonAriaLabel&&e.setAttribute("aria-label",r.cancelButtonAriaLabel),r.cancelButtonColor&&(e.style.backgroundColor=r.cancelButtonColor),e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),m.appendChild(e)}if(r.showDenyButton){const e=document.createElement("button");e.className="alert90s-button deny",e.innerHTML=r.denyButtonText,r.denyButtonAriaLabel&&e.setAttribute("aria-label",r.denyButtonAriaLabel),r.denyButtonColor&&(e.style.backgroundColor=r.denyButtonColor),e.onclick=()=>h({isConfirmed:!1,isDenied:!0,isDismissed:!1}),m.appendChild(e)}if(r.showConfirmButton){const e=document.createElement("button");e.className="alert90s-button confirm",e.innerHTML=r.confirmButtonText,r.confirmButtonAriaLabel&&e.setAttribute("aria-label",r.confirmButtonAriaLabel),r.confirmButtonColor&&(e.style.backgroundColor=r.confirmButtonColor),e.onclick=g,m.appendChild(e),u=e}if((r.showCancelButton||r.showDenyButton||r.showConfirmButton)&&i.appendChild(m),r.footer){const e=document.createElement("div");e.className="alert90s-footer",e.innerHTML=r.footer,i.appendChild(e)}if(a.appendChild(s),a.appendChild(i),r.toast){const t=e.getToastContainer(r.position);a.style.animation="alert90s-toast-slide-in 0.3s ease-out",t.appendChild(a)}else n.appendChild(a);if(r.showCloseButton&&!r.toast){const e=s.querySelector("#alert90s-close");e&&(e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}r.toast||document.body.appendChild(n),r.focusConfirm&&u&&setTimeout(()=>{p?p.focus():u.focus()},50),r.didOpen&&setTimeout(()=>{r.didOpen()},0),r.timer&&(this.timerEnd=Date.now()+r.timer,f=setTimeout(()=>{h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},r.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(e){const t=e.target.closest("[data-alert90s-tooltip]");if(!t)return;const o=t.getAttribute("data-alert90s-tooltip");if(!o)return;const r=t.getAttribute("data-alert90s-position")||"top",n=t.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${r} c-${n} show`;const a=t.getBoundingClientRect(),i=this._tooltipEl.getBoundingClientRect(),s=10;let l=0,c=0;switch(r){case"top":l=a.top-i.height-s,c=a.left+a.width/2-i.width/2;break;case"bottom":l=a.bottom+s,c=a.left+a.width/2-i.width/2;break;case"left":l=a.top+a.height/2-i.height/2,c=a.left-i.width-s;break;case"right":l=a.top+a.height/2-i.height/2,c=a.right+s}c<s&&(c=s),l<s&&(l=s),c+i.width>window.innerWidth-s&&(c=window.innerWidth-i.width-s),this._tooltipEl.style.top=`${l+window.scrollY}px`,this._tooltipEl.style.left=`${c+window.scrollX}px`}static _handleTooltipMouseOut(e){const t=e.target.closest("[data-alert90s-tooltip]");t&&setTimeout(()=>{this._tooltipEl.matches(":hover")||t.matches(":hover")||t.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}}return"undefined"!=typeof window&&(window.Alert90s=e,document.addEventListener("DOMContentLoaded",()=>{e.initTooltips()})),e});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "alert90s",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
4
4
  "description": "Neo Brutalism 90s style JS alert library",
5
5
  "main": "dist/alert90s.min.js",
6
6
  "files": [
package/src/index.js CHANGED
@@ -152,7 +152,10 @@ class Alert90s {
152
152
  imageAlt: options.imageAlt || '',
153
153
 
154
154
  // Input
155
- input: options.input || null, // 'text', 'email', 'password', 'number', 'tel', 'url', 'textarea'
155
+ input: options.input || null,
156
+ inputPlaceholder: options.inputPlaceholder || '',
157
+ inputValue: options.inputValue || '',
158
+ inputOptions: options.inputOptions || {},
156
159
  inputAttributes: options.inputAttributes || {},
157
160
  showLoaderOnConfirm: options.showLoaderOnConfirm || false,
158
161
  preConfirm: options.preConfirm || null,
@@ -398,27 +401,95 @@ class Alert90s {
398
401
 
399
402
  // Input form
400
403
  let inputEl = null;
404
+
401
405
  if (config.input) {
402
406
  const inputContainer = document.createElement('div');
403
407
  inputContainer.className = 'alert90s-input-container';
404
-
405
- if (config.input === 'textarea') {
408
+
409
+ if (config.input === 'select') {
410
+ inputEl = document.createElement('select');
411
+ inputEl.className = 'alert90s-input alert90s-select';
412
+ if (config.inputPlaceholder) {
413
+ const defaultOpt = document.createElement('option');
414
+ defaultOpt.value = '';
415
+ defaultOpt.textContent = config.inputPlaceholder;
416
+ defaultOpt.disabled = true;
417
+ defaultOpt.selected = true;
418
+ inputEl.appendChild(defaultOpt);
419
+ }
420
+ for (const [val, text] of Object.entries(config.inputOptions)) {
421
+ const opt = document.createElement('option');
422
+ opt.value = val;
423
+ opt.textContent = text;
424
+ if (val === config.inputValue) opt.selected = true;
425
+ inputEl.appendChild(opt);
426
+ }
427
+ inputContainer.appendChild(inputEl);
428
+ } else if (config.input === 'radio') {
429
+ const radioGroup = document.createElement('div');
430
+ radioGroup.className = 'alert90s-radio-group';
431
+ for (const [val, text] of Object.entries(config.inputOptions)) {
432
+ const label = document.createElement('label');
433
+ label.className = 'alert90s-radio-label';
434
+ const radio = document.createElement('input');
435
+ radio.type = 'radio';
436
+ radio.name = 'alert90s-radio';
437
+ radio.value = val;
438
+ if (val === config.inputValue) radio.checked = true;
439
+ const span = document.createElement('span');
440
+ span.textContent = text;
441
+ label.appendChild(radio);
442
+ label.appendChild(span);
443
+ radioGroup.appendChild(label);
444
+ }
445
+ inputEl = radioGroup; // Parent serves as reference
446
+ inputContainer.appendChild(radioGroup);
447
+ } else if (config.input === 'checkbox' || config.input === 'toggle') {
448
+ const label = document.createElement('label');
449
+ label.className = config.input === 'toggle' ? 'alert90s-toggle-label' : 'alert90s-checkbox-label';
450
+ inputEl = document.createElement('input');
451
+ inputEl.type = 'checkbox';
452
+ inputEl.checked = !!config.inputValue;
453
+
454
+ if (config.input === 'toggle') {
455
+ const slider = document.createElement('div');
456
+ slider.className = 'alert90s-toggle-slider';
457
+ label.appendChild(inputEl);
458
+ label.appendChild(slider);
459
+ if (config.inputPlaceholder) {
460
+ const span = document.createElement('span');
461
+ span.textContent = config.inputPlaceholder;
462
+ label.appendChild(span);
463
+ }
464
+ } else {
465
+ const span = document.createElement('span');
466
+ span.textContent = config.inputPlaceholder || 'Check me';
467
+ label.appendChild(inputEl);
468
+ label.appendChild(span);
469
+ }
470
+ inputContainer.appendChild(label);
471
+ } else if (config.input === 'textarea') {
406
472
  inputEl = document.createElement('textarea');
473
+ inputEl.className = 'alert90s-input';
474
+ if (config.inputPlaceholder) inputEl.placeholder = config.inputPlaceholder;
475
+ if (config.inputValue) inputEl.value = config.inputValue;
476
+ inputContainer.appendChild(inputEl);
407
477
  } else {
408
478
  inputEl = document.createElement('input');
409
479
  inputEl.type = config.input;
480
+ inputEl.className = 'alert90s-input';
481
+ if (config.inputPlaceholder) inputEl.placeholder = config.inputPlaceholder;
482
+ if (config.inputValue) inputEl.value = config.inputValue;
483
+ inputContainer.appendChild(inputEl);
410
484
  }
411
485
 
412
- inputEl.className = 'alert90s-input';
413
-
414
- // Apply custom attributes
415
- if (config.inputAttributes) {
486
+ // Apply custom attributes (for non-grouped inputs)
487
+ if (config.inputAttributes && inputEl && !['radio'].includes(config.input)) {
416
488
  for (const [key, val] of Object.entries(config.inputAttributes)) {
417
489
  inputEl.setAttribute(key, val);
418
490
  }
419
491
  }
420
492
 
421
- inputContainer.appendChild(inputEl);
422
493
  bodyContainer.appendChild(inputContainer);
423
494
  }
424
495
 
@@ -463,8 +534,13 @@ class Alert90s {
463
534
  const handleConfirm = async () => {
464
535
  let val = true;
465
536
 
466
- if (inputEl) {
467
- val = inputEl.value;
537
+ if (config.input === 'radio') {
538
+ const checked = inputEl.querySelector('input[type="radio"]:checked');
539
+ val = checked ? checked.value : null;
540
+ } else if (config.input === 'checkbox' || config.input === 'toggle') {
541
+ val = inputEl.checked;
542
+ } else if (inputEl) {
543
+ val = inputEl.value;
468
544
  }
469
545
 
470
546
  if (config.preConfirm) {
package/src/styles.css CHANGED
@@ -230,6 +230,120 @@ textarea.alert90s-input {
230
230
  resize: vertical;
231
231
  min-height: 100px;
232
232
  }
233
+
234
+ /* Select */
235
+ select.alert90s-select {
236
+ cursor: pointer;
237
+ appearance: none;
238
+ background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
239
+ background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
240
+ background-size: 5px 5px, 5px 5px;
241
+ background-repeat: no-repeat;
242
+ }
243
+
244
+ /* Radio Group */
245
+ .alert90s-radio-group {
246
+ display: flex;
247
+ flex-direction: column;
248
+ gap: 0.5rem;
249
+ align-items: flex-start;
250
+ width: 100%;
251
+ }
252
+ .alert90s-radio-label {
253
+ display: flex;
254
+ align-items: center;
255
+ gap: 0.75rem;
256
+ font-weight: bold;
257
+ cursor: pointer;
258
+ font-size: 1rem;
259
+ }
260
+ .alert90s-radio-label input[type="radio"] {
261
+ appearance: none;
262
+ width: 1.25rem;
263
+ height: 1.25rem;
264
+ border: 4px solid #000;
265
+ border-radius: 50%;
266
+ margin: 0;
267
+ cursor: pointer;
268
+ position: relative;
269
+ background-color: #f8fafc;
270
+ }
271
+ .alert90s-radio-label input[type="radio"]:checked {
272
+ background-color: #000;
273
+ box-shadow: inset 0 0 0 4px #fff;
274
+ }
275
+
276
+ /* Checkbox */
277
+ .alert90s-checkbox-label {
278
+ display: flex;
279
+ align-items: center;
280
+ gap: 0.75rem;
281
+ font-weight: bold;
282
+ cursor: pointer;
283
+ font-size: 1rem;
284
+ }
285
+ .alert90s-checkbox-label input[type="checkbox"] {
286
+ appearance: none;
287
+ width: 1.25rem;
288
+ height: 1.25rem;
289
+ border: 4px solid #000;
290
+ margin: 0;
291
+ cursor: pointer;
292
+ position: relative;
293
+ background-color: #f8fafc;
294
+ }
295
+ .alert90s-checkbox-label input[type="checkbox"]:checked {
296
+ background-color: #000;
297
+ }
298
+ .alert90s-checkbox-label input[type="checkbox"]:checked::after {
299
+ content: '✔';
300
+ position: absolute;
301
+ top: 50%;
302
+ left: 50%;
303
+ transform: translate(-50%, -50%);
304
+ color: #fff;
305
+ font-size: 0.8rem;
306
+ }
307
+
308
+ /* Toggle Switch */
309
+ .alert90s-toggle-label {
310
+ display: flex;
311
+ align-items: center;
312
+ gap: 0.75rem;
313
+ font-weight: bold;
314
+ cursor: pointer;
315
+ font-size: 1rem;
316
+ }
317
+ .alert90s-toggle-label input[type="checkbox"] {
318
+ display: none;
319
+ }
320
+ .alert90s-toggle-slider {
321
+ width: 3rem;
322
+ height: 1.5rem;
323
+ background-color: #f87171;
324
+ border: 4px solid #000;
325
+ position: relative;
326
+ transition: background-color 0.2s;
327
+ box-shadow: inset 3px 3px 0 0 rgba(0,0,0,0.1);
328
+ }
329
+ .alert90s-toggle-slider::before {
330
+ content: '';
331
+ position: absolute;
332
+ width: 1rem;
333
+ height: 100%;
334
+ background-color: #fff;
335
+ border-right: 4px solid #000;
336
+ top: 0;
337
+ left: 0;
338
+ transition: transform 0.2s;
339
+ }
340
+ .alert90s-toggle-label input[type="checkbox"]:checked + .alert90s-toggle-slider {
341
+ background-color: #4ade80;
342
+ }
343
+ .alert90s-toggle-label input[type="checkbox"]:checked + .alert90s-toggle-slider::before {
344
+ transform: translateX(1.5rem);
345
+ border-left: 4px solid #000;
346
+ }
233
347
  .alert90s-validation-message {
234
348
  display: none;
235
349
  width: 100%;