if(!customElements.get("remex-router")){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),
this.shadowRoot.innerHTML="\n          <style>\n            :host { \n              display: none;\n              opacity: 0;\n              transform: none;\n              transition: opacity 0.25s ease, transform 0.25s ease;\n              position: relative;\n            }\n             :host(.active) {\n              display: block;\n              opacity: 1;\n            }\n             :host(.animate-in-fade) {\n              animation: fadeIn 0.25s ease forwards;\n            }\n            :host(.animate-in-zoom) {\n              animation: zoomIn 0.25s ease forwards;\n            }\n            :host(.animate-in-slideLeft) {\n              animation: slideInLeft 0.25s ease forwards;\n            }\n            :host(.animate-in-slideRight) {\n              animation: slideInRight 0.25s ease forwards;\n            }\n            /* Animaciones CSS de salida */\n            :host(.animate-out-fade) {\n              animation: fadeOut 0.25s ease forwards;\n            }\n            :host(.animate-out-zoom) {\n              animation: zoomOut 0.25s ease forwards;\n            }\n            :host(.animate-out-slideLeft) {\n              animation: slideOutLeft 0.25s ease forwards;\n            }\n            :host(.animate-out-slideRight) {\n              animation: slideOutRight 0.25s ease forwards;\n            }\n             @keyframes fadeIn {\n              from { opacity: 0; }\n              to { opacity: 1; }\n            }\n            @keyframes fadeOut {\n              from { opacity: 1; }\n              to { opacity: 0; }\n            }\n             @keyframes zoomIn {\n              from { transform: scale(0.8); 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.8); opacity: 0; }\n            }\n             @keyframes slideInLeft {\n              from { transform: translateX(-100%); opacity: 0; }\n              to { transform: translateX(0); opacity: 1; }\n            }\n            @keyframes slideOutLeft {\n              from { transform: translateX(0); opacity: 1; }\n              to { transform: translateX(-100%); opacity: 0; }\n            }\n             @keyframes slideInRight {\n              from { transform: translateX(100%); opacity: 0; }\n              to { transform: translateX(0); opacity: 1; }\n            }\n            @keyframes slideOutRight {\n              from { transform: translateX(0); opacity: 1; }\n              to { transform: translateX(100%); opacity: 0; }\n            }\n          </style>\n          <slot></slot>\n        ",
this.route=null,this.params={}}connectedCallback(){this.route=this.getAttribute("route"),this.checkActiveRoute()}checkActiveRoute(){const e=window.location.pathname;this.matchRoute(e)?t.activeRoute&&t.activeRoute!==this?t.activeRoute.hide().then((()=>{this.show().then((()=>t.activeRoute=this)),this.dispatchEvent(new CustomEvent("route-activated",{bubbles:!0,detail:{route:this.route,params:this.params}}))})):(this.show().then((()=>t.activeRoute=this)),this.dispatchEvent(new CustomEvent("route-activated",{bubbles:!0,detail:{route:this.route,params:this.params}}))):t.activeRoute===this?this.hide().then((()=>t.activeRoute=null)):this.hide()}matchRoute(t){const e=this.route.replace(/\//g,"\\/").replace(/:\w+/g,"([^\\/]+)"),a=new RegExp(`^${e}$`),s=t.match(a);if(s){const t=this.route.match(/:\w+/g)||[];return this.params={},t.forEach(((t,e)=>{this.params[t.slice(1)]=s[e+1]})),!0}return!1}show(){const t=this.getAttribute("transition-in")||"fade";return new Promise((e=>{
this.style.display="block",this.classList.remove("animate-out-"+t),this.offsetWidth,this.classList.add("animate-in-"+t),this.classList.add("active"),this.setAttribute("active",""),setTimeout((()=>{this.classList.remove("animate-in-"+t),e()}),251)}))}hide(){const t=this.getAttribute("transition-out")||"fade";return new Promise((e=>{this.hasAttribute("active")?(this.classList.remove("animate-in-"+t),this.offsetWidth,this.classList.add("animate-out-"+t),setTimeout((()=>{this.classList.remove("animate-out-"+t),this.classList.remove("active"),this.removeAttribute("active"),this.style.display="none",e()}),251)):e()}))}}t.activeRoute=null,customElements.define("remex-router",t)}