if(!customElements.get("remex-p2p-menu")){const t="dev"!=document.querySelector('meta[name="app-env"]')?.getAttribute("content"),e=document.querySelector('meta[name="x-cpl"]')?.getAttribute("content")||"1.0.0",n=async(n,o)=>new Promise(((r,i)=>{if(o&&customElements.get(o))r(!0);else{const a=document.createElement("script");o&&(a.tik=setInterval((()=>{customElements.get(o)&&(clearInterval(a.tik),r(!0))}),100)),a.src=`/cdn/${e}/${t?n.replace(".min.js","").replace(".js",".min.js"):n}`,a.async=!0,a.onload=()=>{a.tik&&clearInterval(a.tik),r(!0)},a.onerror=()=>{a.tik&&clearInterval(a.tik),i(!1)},document.head.appendChild(a)}}));n("microfronts/remex-icon//index.js","remex-icon");class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._i18n={}}async loadScript(t,e){return await n(t,e)}static get observedAttributes(){return["i18n"]}set i18n(t){this._i18n=t||{},this.render()}get i18n(){return this._i18n??{}}attributeChangedCallback(t,e,n){
"i18n"===t&&e!==n&&(this._i18n=JSON.parse(n),this.render())}trans(t,e){let n=void 0!==this._i18n[t]?(this._i18n[t]??t).trim():t.trim();if(void 0!==e)for(var t in e)n=n.replace(t,e[t]).trim();return n.trim()}async connectedCallback(){await this.render()}async render(){this.items=[{label:this.trans("Publicar anuncio"),route:"/p2p/announcements/new",icon:"plusSquare"},{label:this.trans("Mis anuncios"),route:"/p2p/my-announcements",icon:"bullhorn"},{label:this.trans("Medios de Cobranza"),route:"/p2p/payment-methods",icon:"userPaymentMethod"},{icon:"squareStar",label:this.trans("Mi perfil P2P"),route:"/p2p/profile/me"},{icon:"deal",label:this.trans("Mis Tratos"),route:"/p2p/deals"},{icon:"lifebuoy",label:this.trans("Asistencia"),action:()=>{document.querySelector("#zsiq_float")?document.querySelector("#zsiq_float").click():window.location.href="/ayuda"}}]
;const t=await this.isConnected(),e="undefined"!=typeof Telegram&&void 0!==Telegram.WebApp&&""!=getComputedStyle(document.documentElement).getPropertyValue("--tg-theme-bg-color").trim();this.loadScript("microfronts/remex-p2p/flexbox.js","remex-flexbox").then((()=>{
this.shadowRoot.innerHTML=`\n                <remex-flexbox></remex-flexbox>\n                <style>\n                    button {\n                        font-size: 1.2rem;\n                        height: 100px;\n                        border-color: #56c6e6 !important;\n                        border-style:dashed !important;\n                        background: transparent !important;\n                        color: var(--text-color,#000) !important;\n                        transform: none !important;\n                     }\n                    button.skin-btn{\n                        height: 50px !important;\n                    }\n                    button.active{\n                        background:var( --bg-gradient, linear-gradient(0deg, rgb(1 1 1 / 69%) 0%, rgb(9 69 87 / 16%) 82%)) ;\n                        border-bottom : 2px solid  #56c6e6 !important;\n                        text-weight: bold !important;\n                        box-shadow: 0 0 10px !important;\n                    }\n                    button:hover{\n                        border-color:#0c7d98 !important;\n                    }\n                        @media(max-width:768px){\n                            button.skin-btn{\n                                height: 60px !important;\n                                display: flex ;\n                                align-content: center;\n                                align-items: center;\n                                flex-wrap: nowrap;\n                                flex-direction: column;\n                                justify-content: space-around;\n                                font-size: 0.7rem !important;\n                            }\n                        }\n                </style>\n                <div class="col-12 row mx-0 px-0 py-2">\n                    ${this.items.map(((t,e)=>`\n                        <div class="col-12 col-lg-4 col-md-6 px-2 pb-2">\n                            <button class="btn btn-lg col-12  py-4 rounded btn-outline-white" tabindex="-1" index="${e}" ${null!=(t.route??null)?`route="${t.route}"`:""}   type="button">\n                                <remex-icon class="mr-1" size="1.2rem" icon="${t.icon}"></remex-icon>${t.label}\n                            </button>\n                        </div>\n                    `)).join("")} \n                     <div class="col-12 mx-0 p-2 row">\n                        <h3 class="mb-2 p-0">${this.trans("Apariencia")}</h3>\n                        <button skin="light" class="btn btn-sm skin-btn  ${"light"==(window.localStorage.getItem("skin")??"dark")?"active":""} col-${e?4:6} py-1 rounded btn-outline-white" tabindex="-1" type="button" style="border-top-right-radius:0px !important;border-bottom-right-radius:0px !important;"><remex-icon icon="sun" size="1rem"></remex-icon> ${this.trans("Modo Claro")}</button>\n                        <button skin="dark" class="btn btn-sm skin-btn ${"dark"==(window.localStorage.getItem("skin")??"dark")?"active":""} col-${e?4:6} py-1 rounded btn-outline-white" tabindex="-1" type="button" style="border-${e?"":"top-left-"}radius:0px !important;border-${e?"":"bottom-left-"}radius:0px !important;"><remex-icon icon="moon" size="1rem"></remex-icon>  ${this.trans("Modo Oscuro")}</button>\n                        ${e?`<button  skin="telegram" class="btn skin-btn btn-sm col-4 ${"telegram"==(window.localStorage.getItem("skin")??"dark")?"active":""} py-1 rounded btn-outline-white" tabindex="-1" type="button" style="border-top-left-radius:0px !important;border-bottom-left-radius:0px !important;"><remex-icon icon="telegram" size="1rem"></remex-icon> ${this.trans("Colores Telegram")}</button>`:""}\n                     </div>\n\n                      ${t?`<div class="col-12 mx-0 pt-3 px-2 row">\n                        <button style="height:50px"  class="btn btn-sm logout-btn col-12 rounded btn-info" tabindex="-1" type="button"><remex-icon icon="logout" size="1.2rem"></remex-icon> ${this.trans("CERRAR SESIÓN")}</button>\n                     </div>`:""}\n                </div>\n            `,
this.shadowRoot.querySelectorAll("button").forEach((t=>t.addEventListener("click",(t=>{t.currentTarget.classList.contains("skin-btn")&&(document.querySelector("#toggleMode")&&(document.querySelector("#toggleMode").checked="light"!=t.currentTarget.getAttribute("skin")),window.switchSkin(t.currentTarget.getAttribute("skin")),this.render()),t.currentTarget.classList.contains("logout-btn")?this.logout().then((()=>{this.dispatchEvent(new CustomEvent("forceauth",{bubbles:!0,composed:!0}))})):t.currentTarget.getAttribute("route")?this.dispatchEvent(new CustomEvent("choiced",{detail:t.currentTarget.getAttribute("route"),bubbles:!0,composed:!0})):this.items[t.currentTarget.getAttribute("index")].action()}))))}))}async isConnected(){if(window.auth?.isConnected())return!0;await window.auth.checkUserIsLogged();const t=new Promise(((t,e)=>{if(window.auth.remexAuth)setTimeout((()=>t(window.auth.isConnected())),500);else{const e=setInterval((()=>{window.auth.remexAuth&&(clearInterval(e),
t(window.auth.remexAuth.isConnected()&&window.auth?.user?.token))}),100)}}));return await t}async logout(){return new Promise((async(t,e)=>{if(void 0!==window.auth)await window.auth.logout();else{try{await fetch("/rest/v2/auth/logout",{method:"POST",headers:{"Content-Type":"application/json"}})}catch(t){}localStorage.removeItem("RemexAuthToken"),document.querySelector('meta[name="ub64"]')&&document.querySelector('meta[name="ub64"]').remove(),document.querySelector('meta[name="utk"]')&&document.querySelector('meta[name="utk"]').remove()}this.dispatchEvent(new CustomEvent("RemexAuthLogout",{bubbles:!0,composed:!0,detail:"Customer logout"})),t(!0)}))}}customElements.define("remex-p2p-menu",o)}