if(!customElements.get("remex-dialog")){class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._frozen=!1,this._files=[],this._i18n={},this.isTelegram="undefined"!=typeof Telegram&&Telegram.WebApp&&Telegram.WebApp.initData}trans(e,t){let n=void 0!==this._i18n[e]?(this._i18n[e]??e).trim():e.trim();if(void 0!==t)for(var e in t)n=n.replace(e,t[e]).trim();return n.trim()}set i18n(e){this._i18n=e||{},this.render().then((()=>this.setupEventListeners()))}get i18n(){return this._i18n??{}}get files(){return this._files}connectedCallback(){this.render().then((()=>this.setupEventListeners()))}static get observedAttributes(){return["bg","icon","btype","i18n","skipped"]}set mobileFullScreen(e){e?this.setAttribute("mobile-full-screen",e):this.removeAttribute("mobile-full-screen")}attributeChangedCallback(e,t,n){t!==n&&this.render().then((()=>0))}async loadScript(e,t){return new Promise(((n,i)=>{if(t&&customElements.get(t))n(!0);else{
const o="dev"!=document.querySelector('meta[name="app-env"]')?.getAttribute("content"),r=document.querySelector('meta[name="x-cpl"]')?.getAttribute("content")||"1.0.0",a=document.createElement("script");t&&(a.tik=setInterval((()=>{customElements.get(t)&&(clearInterval(a.tik),n(!0))}),100)),a.src=`/cdn/${r}/${o?e.replace(".min.js","").replace(".js",".min.js"):e}`,a.async=!0,a.onload=()=>{a.tik&&clearInterval(a.tik),n(!0)},a.onerror=()=>{a.tik&&clearInterval(a.tik),i(!1)},document.head.appendChild(a)}}))}async render(){const e=this.getAttribute("bgcolor")||"white",t=this.getAttribute("tcolor")||"#000",n=this.getAttribute("icon")||null,i=this.getAttribute("btype")||"none",o=JSON.parse(this.getAttribute("i18n")||'{"accept": "Aceptar", "cancel": "Cancelar"}');this.isTelegram="undefined"!=typeof Telegram&&Telegram.WebApp&&Telegram.WebApp.initData,n&&await this.loadScript("microfronts/remex-icon/index.js","remex-icon"),
this.shadowRoot.innerHTML=`\n                <style>\n                    :host {\n                        display: none;\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        width: 100%;\n                        height: 100%;\n                        max-width: 100vw;\n                        background: rgb(0 43 55 / 86%);\n                        justify-content: center;\n                        align-items: center;\n                        z-index: 10000;\n                    }\n                    :host([open]) {\n                        display: flex;  \n                    }\n                    \n                    remex-icon {\n                        margin: auto;\n                        display: block;\n                        text-align: center;\n                        margin-bottom: 20px;\n                    }\n                    .dialog {\n                        background: ${e};\n                        border: 1px solid #00000000;\n                        box-shadow: 1px 1px 10px ${t};\n                        color: ${t};\n                        padding: 0;\n                        border-radius: 10px; \n                        min-width: 340px;\n                        max-width: ${Math.min(500,window.innerWidth)}px;\n                        position: relative;\n                        animation: zoomIn 0.3s ease-out;\n                         -webkit-transition: all .5s;\n                        transition: all .5s;\n                        padding:0.75rem; \n                    }\n                    .dialog.mobile {\n                        animation: slideUp 0.3s ease-out;\n                    }  \n                    \n                     \n                   .buttons {\n                        display: flex;\n                        justify-content: flex-end;\n                        margin-top: 10px;\n                        padding:  0.75rem;\n                        padding-left: 0.4rem;\n                    }\n                    button {\n                        margin-left: 10px;\n                        padding: 10px 20px;\n                        border: none;\n                        border-radius: 25px;\n                        cursor: pointer;\n                        font-size: 1.2rem;\n                        text-transform: uppercase;\n                        ${"alert"==i?"flex: 0 0 98%":""}\n                    }\n                    button.accept {\n                        background-color: var(--text-primary-color,#3dbeda);\n                        color: white;\n                    }\n                    button.cancel {\n                        background-color: #b6226c;\n                        color: white;\n                    }\n                    :host([frozen]) .dialog button{ opacity:  0.5; }\n                    :host([frozen-accept]) .dialog button.accept{  opacity:  0.5;}\n                    @keyframes zoomIn {\n                        from { transform: scale(0.9); opacity: 0; }\n                        to { transform: scale(1); opacity: 1; }\n                    }\n                    @keyframes zoomOut {\n                        from { transform: scale(1); opacity: 1; }\n                        to { transform: scale(0); opacity: 0; }\n                    }\n                    @keyframes slideUp {\n                        from { transform: translateY(100%); opacity: 1;  }\n                        to { transform: translateY(0);}\n                    }\n                    @keyframes slideDown {\n                        from { transform: translateY(0);}\n                        to { transform: translateY(101%); }\n                    } \n                     ${"upload"==i?".drop-area {\n                            width: 400px;\n                            height: 200px;\n                            margin: 20px auto;\n                            text-align: center;\n                            line-height: 200px;\n                            border: 2px dashed #ccc;\n                            cursor: pointer;\n                            border-radius: 10px;\n                        }\n                        .drop-area.highlight {\n                            background-color: #11617559;\n                        }\n                        .preview-image {\n                            object-fit: cover;\n                            width: 100px;\n                            height: 100px;\n                            margin: 10px;\n                            border: 1px solid #ddd;\n                            border-radius: 10px;\n                        }\n\n                        .preview-container {\n                             text-align: center;\n                        }":""}\n                    @media (max-width: 768px) {\n                        \n                        :host([mobile-full-screen]) .dialog {\n                            transition: all 1s;\n                            max-width: 100%;\n                            height: 100vh;\n                        }\n                     ${"upload"==i?".drop-area {\n                            width: 98%;\n                            height: 140px;\n                            margin: 20px auto;\n                            text-align: center;\n                            line-height: 140px;\n                            border: 2px dashed #ccc;\n                            cursor: pointer;\n                        }\n                       \n\n                        .preview-container {\n                             text-align: center;\n                        }":""} \n                        .dialog {\n                            animation: slideUp 0.3s ease-out; \n                            position: fixed;\n                            bottom: 0;\n                            left: 0;\n                            right: 0; \n                            border-radius: 4px 4px 0 0;\n                            border: 0 none;\n                            box-shadow: 0 -2px 10px #0a4d5e;\n                            margin-left: auto;\n                            margin-right: auto; \n                             -webkit-transition: all .5s;\n                            transition: all .5s;\n                            overflow-y: auto;\n                            overflow-x: hidden; \n                            ${"none"==i?"":"padding-bottom: 100px;"}\n                            max-width: 100% !important;\n                            border-bottom: 66px solid var(--input-bg,#000);\n                            top:0;\n                            max-height: calc(100vh - 6.4rem );\n                            padding-top: var(--header-height,0px) !important; \n\n                        }\n                        .buttons{ text-align: center; justify-content: space-between;position: fixed; bottom: 0; left: 0; right: 0;  margin:auto; }\n                        .buttons button{\n                            flex: 0 0  ${"alert"==i?"98%":"48%"};\n                            border-radius: 8px;\n                            margin-left:auto;\n                            display: flex;\n                            justify-content: center;\n                             animation: slideUp 1s ease-out; \n                        } \n                    }\n                    ${"none"==i?".buttons { display: none; }":""}\n                </style>\n                <div class="dialog ${this.isMobile()?"mobile":""}">\n                    ${n?`<remex-icon icon="${n}" color="${t}" size="3rem" style=></remex-icon>`:""}\n                    <slot></slot>\n                    ${"upload"==i?`<div class="drop-area">\n                            ${o.dragAndDrop||"Arrastra y suelta tu archivo aquí"}\n                        </div>\n                        <input type="file" class="file-input" multiple hidden>\n                        <div class="preview-container"></div>`:""} \n                    <div class="buttons">\n                        ${"confirm"===i||"upload"===i?`<button class="cancel" type="button">${o.cancel}</button>`:""}\n                        ${"void"!==i?` <button class="accept" type="button">${o.accept}</button>`:""}\n                    </div>\n                </div>\n            `,
this.container=this.shadowRoot.querySelector(".dialog")}resetFx(){"upload"==(this.getAttribute("btype")||"none")&&(this.container.querySelector(".preview-container").innerHTML="",this.container.querySelector(".file-input").value="",acceptButton.setAttribute("disabled","disabled")),this.isTelegram&&(Telegram.WebApp.BackButton.offClick(this.cancelHandler.bind(this)),Telegram.WebApp.MainButton.offClick(this.acceptHandler.bind(this)),Telegram.WebApp.BackButton.hide(),Telegram.WebApp.MainButton.hide())}async showError(e){await this.loadScript("microfronts/remex-message/index.js","remex-message");const t=document.createElement("remex-message");return t.message=this.trans(e),t.duration=3e3,t.position="bottom-left",t.color="danger",document.body.appendChild(t),t}acceptHandler(){if(this._frozen||this._frozenAcept)return this.showError(this.trans("Los datos no son válidos."));this.handleButtonClick("accept"),setTimeout((()=>this.resetFx()),1e3)}cancelHandler(){this.handleButtonClick("cancel"),
this.resetFx()}setupEventListeners(){const e=this.shadowRoot.querySelector(".accept"),t=this.shadowRoot.querySelector(".cancel"),n=this.getAttribute("btype")||"none";if(e&&e.addEventListener("click",(e=>{e.preventDefault(),this.acceptHandler()})),t&&t.addEventListener("click",(e=>{e.preventDefault(),this.cancelHandler()})),this.shadowRoot.host.addEventListener("click",(e=>{e.target!==this.shadowRoot.host||this._frozen||""!=this.getAttribute("skipped")||(this.close("skip"),this.resetFx())})),"upload"==n){const t=this.container.querySelector(".drop-area"),n=this.container.querySelector(".file-input"),i=this.container.querySelector(".preview-container");e.setAttribute("disabled","disabled");const o=e=>{e.preventDefault(),e.stopPropagation()},r=()=>t.classList.add("highlight"),a=()=>t.classList.remove("highlight");["dragenter","dragover","dragleave","drop"].forEach((e=>{t.addEventListener(e,o,!1)})),["dragenter","dragover"].forEach((e=>{t.addEventListener(e,r,!1)})),
["dragleave","drop"].forEach((e=>{t.addEventListener(e,a,!1)}));const s=e=>["image/jpeg","image/png","image/gif"].includes(e.type),l=t=>{this._files.push(t);const n=new FileReader;n.readAsDataURL(t),n.onloadend=function(n){const o=document.createElement("img");s(t)&&(o.src=n.target.result),o.classList.add("preview-image"),i.appendChild(o),e.removeAttribute("disabled")}};t.addEventListener("click",(()=>n.click())),n.addEventListener("change",(()=>{const e=n.files;e.length>0&&[...e].forEach(l)})),t.addEventListener("drop",(e=>{e.preventDefault();const t=e.dataTransfer.files;t.length&&(n.files=t,[...t].forEach(l))}))}}handleButtonClick(e){this._frozen||"accept"===e&&this._frozenAcept||this.close(e)}open(){if(this.container&&(this.isMobile()?this.container.style.animation="slideUp 0.3s ease-out":this.container.style.animation="zoomIn 0.3s ease-out",this.setAttribute("open",""),this.bodyOverflowY=document.body.style.overflowY,this.bodyOverflowX=document.body.style.overflowX,
document.body.style.overflowY="hidden",document.body.style.overflowX="hidden",this.dispatchEvent(new CustomEvent("open")),document.querySelector(".zsiq_floatmain")&&(document.querySelector(".zsiq_floatmain").style.display="none"),this.isTelegram)){Telegram.WebApp.BackButton.offClick(this.cancelHandler.bind(this)),Telegram.WebApp.MainButton.offClick(this.acceptHandler.bind(this)),Telegram.WebApp.BackButton.onClick(this.cancelHandler.bind(this)),Telegram.WebApp.BackButton.show(),Telegram.WebApp.MainButton.onClick(this.acceptHandler.bind(this)),Telegram.WebApp.MainButton.text=this.shadowRoot.querySelector(".accept").textContent.toUpperCase(),Telegram.WebApp.MainButton.show(),this.shadowRoot.querySelector(".buttons").style.display="none";const e=setInterval((()=>{this.shadowRoot&&this.shadowRoot.querySelector(".dialog")&&this.setAttribute("open")||(clearInterval(e),Telegram.WebApp.BackButton.offClick(this.cancelHandler.bind(this)),Telegram.WebApp.BackButton.hide(),
Telegram.WebApp.MainButton.offClick(this.acceptHandler.bind(this)),Telegram.WebApp.MainButton.hide())}),1e3)}}close(e){this.isMobile()?this.container.style.animation="slideDown 0.3s ease-out":this.container.style.animation="zoomOut 0.3s ease-out",setTimeout((()=>{this.removeAttribute("open"),this._files?this.dispatchEvent(new CustomEvent("closed",{detail:{action:e??"void",files:[...this._files]}})):this.dispatchEvent(new CustomEvent("closed",{detail:{action:e??"void",files:[]}})),document.body.style.overflowY=this.bodyOverflowY??"auto",document.body.style.overflowX=this.bodyOverflowX,this._files=[]}),250)}freeze(){this._frozen=!0,this.setAttribute("frozen",""),this.isTelegram&&Telegram.WebApp.MainButton.disable()}unfreeze(){this._frozen=!1,this.removeAttribute("frozen"),this.isTelegram&&Telegram.WebApp.MainButton.enable()}freezeAccept(){this._frozenAcept=!0,this.setAttribute("frozen-accept",""),this.isTelegram&&Telegram.WebApp.MainButton.disable()}unfreezeAccept(){this._frozenAcept=!1,
this.removeAttribute("frozen-accept"),this.isTelegram&&Telegram.WebApp.MainButton.enable()}isMobile(){return window.innerWidth<=768}}customElements.define("remex-dialog",e)}