@rsltda/components 1.0.11

package/dist/rs-components.iife.js

@@ -0,0 +1,411 @@
+var RSComponents=(function(b){"use strict";var G=Object.defineProperty;var H=(b,y,E)=>y in b?G(b,y,{enumerable:!0,configurable:!0,writable:!0,value:E}):b[y]=E;var s=(b,y,E)=>H(b,typeof y!="symbol"?y+"":y,E);function y(D,q){customElements.get(D)||customElements.define(D,q)}const E="#1e88e5",L="/assets/fontawesome/css/all.min.css",F="https://cdn.rsltda.cl/logos/marker/",Z="https://ap2.rs-shop.cl/web/PuntosMapas",U={ktm:"#ff6600"},z={sucursal:0,distribuidor:1},O=["norte","rm","centro","sur"],R={norte:"Zona Norte",rm:"RM",centro:"Zona Centro",sur:"Zona Sur"},M={0:"Sucursales",1:"Distribuidores"},T=720*60*60*1e3,$="rs-map-cache",k="points",B={"region de arica y parinacota":"norte","arica y parinacota":"norte","region de tarapaca":"norte",tarapaca:"norte","region de antofagasta":"norte",antofagasta:"norte","region de atacama":"norte",atacama:"norte","region de coquimbo":"norte",coquimbo:"norte","region de valparaiso":"centro",valparaiso:"centro","region del libertador general bernardo o higgins":"centro","region del libertador general bernardo o'higgins":"centro","libertador bernardo o'higgins":"centro",ohiggins:"centro","region del maule":"centro",maule:"centro","region de nuble":"centro",nuble:"centro","region del biobio":"centro",biobio:"centro","region metropolitana de santiago":"rm","region metropolitana":"rm",rm:"rm",santiago:"rm","region de la araucania":"sur",araucania:"sur","region de los rios":"sur","los rios":"sur","region de los lagos":"sur","los lagos":"sur","region de aysen del general carlos ibanez del campo":"sur","region de aysen":"sur",aysen:"sur","region de magallanes y la antartica chilena":"sur",magallanes:"sur"},m=class m extends HTMLElement{constructor(){super();s(this,"root");s(this,"mapEl");s(this,"map");s(this,"markers",[]);s(this,"marca","");s(this,"marcaKey","default");s(this,"tipo","");s(this,"tipoCode",null);s(this,"pointsController");s(this,"points",[]);s(this,"pointsByZone",{norte:[],rm:[],centro:[],sur:[]});s(this,"initialViewApplied",!1);s(this,"zonesContainer");s(this,"componentMessageEl");s(this,"mapLayoutEl");s(this,"zoneButtons",[]);s(this,"nearestButton");s(this,"panelTitleEl");s(this,"activeZone","all");s(this,"mapHeight","");s(this,"googleMapsApiKey","");s(this,"pointsApiUrl",Z);s(this,"markerIconBaseUrl",F);s(this,"defaultMarkerIconUrl","");s(this,"pointsCacheTtlMs",T);s(this,"panAnimationFrame",null);s(this,"highlightTimeout",null);s(this,"isSyncingInitialAttributes",!1);s(this,"refreshQueued",!1);s(this,"handleZoneButtonClick",e=>{const n=e.currentTarget.dataset.zone;n&&(this.setActiveZone(n),this.scrollToZoneSection(n))});s(this,"handleNearestClick",()=>{if(!navigator.geolocation){alert("La geolocalizacion no esta soportada en este navegador.");return}navigator.geolocation.getCurrentPosition(e=>{const{latitude:t,longitude:n}=e.coords,a=this.findNearestPoint(t,n);a?(this.centerMapOnPoint(Number(a.lat),Number(a.lng)),this.scrollToPointCard(a.id)):alert("No hay puntos disponibles para calcular la tienda cercana.")},()=>{alert("No se pudo obtener tu ubicacion.")})});m.ensureFontAwesome(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+      <link rel="stylesheet" href="${L}" />
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: var(--map-height, 520px);
+          --rs-map-accent: ${E};
+        }
+        .map-layout {
+          display: grid;
+          grid-template-columns: minmax(0, 2.5fr) minmax(220px, 1fr);
+          gap: 16px;
+          width: 100%;
+          height: 100%;
+        }
+        .map-panel,
+        #map {
+          width: 100%;
+          height: 100%;
+          animation: mapSlide 90s infinite;
+            animation-timing-function: ease-in-out; 
+        }
+        .map-panel {
+          border-radius: 8px;
+          overflow: hidden;
+          border: 2px solid var(--rs-map-accent);
+        }
+        #map {
+          background: #f5f5f5;
+        }
+        .component-shell {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+        }
+        .component-message {
+          margin: 0;
+          font-size: 1rem;
+          color: #555;
+          text-align: center;
+          padding: 24px 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex: 1;
+        }
+        .component-message[hidden] {
+          display: none;
+        }
+        .map-layout[hidden] {
+          display: none;
+        }
+        .points-panel {
+          border: 1px solid #e0e0e0;
+          border-radius: 8px;
+          border-top: 4px solid var(--rs-map-accent);
+          padding: 16px;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+          background: #fff;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+        .panel-message {
+          margin: 0;
+          font-size: 0.95rem;
+          color: #555;
+          text-align: center;
+          padding: 32px 12px;
+        }
+        .panel-content[hidden] {
+          display: none;
+        }
+        .points-panel h2 {
+          margin: 0 0 8px;
+          font-size: 1rem;
+          color: var(--rs-map-accent);
+        }
+        .zone-filters {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 12px;
+          overflow-x: auto;
+          padding-bottom: 8px;
+          flex-wrap: nowrap;
+        }
+        .zone-button {
+          border: 1px solid var(--rs-map-accent);
+          border-radius: 999px;
+          padding: 6px 12px;
+          font-size: 0.85rem;
+          background: transparent;
+          color: var(--rs-map-accent);
+          cursor: pointer;
+          transition: background 0.2s ease, color 0.2s ease;
+          text-align: center;
+          white-space: nowrap;
+        }
+        .zone-button:hover,
+        .zone-button:focus-visible {
+          background: var(--rs-map-accent);
+          color: #fff;
+        }
+        .zone-button.is-active {
+          background: var(--rs-map-accent);
+          color: #fff;
+        }
+        .zone-button--secondary {
+          flex-shrink: 0;
+          border-color: #444;
+          color: #444;
+        }
+        .zone-button--secondary i {
+          margin-right: 6px;
+        }
+        .panel-header {
+          margin-bottom: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 12px;
+        }
+        .panel-header h2[data-panel-title] {
+          margin: 0;
+          font-size: 1.25rem;
+        }
+        .zones-container {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          flex: 1;
+          overflow-y: auto;
+        }
+        .zone-section {
+          border-top: 2px solid #eee;
+          padding-top: 12px;
+        }
+        .zone-section[hidden] {
+          display: none;
+        }
+        .zone-section__header {
+          display: flex;
+          align-items: baseline;
+          justify-content: space-between;
+          margin: 0 0 8px;
+          font-weight: 600;
+          color: #333;
+        }
+        .zone-section__empty {
+          margin: 0;
+          font-size: 0.85rem;
+          color: #777;
+        }
+        .zone-section__list {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        }
+        .point-card {
+          border: 1px solid #e6e6e6;
+          border-radius: 8px;
+          padding: 10px;
+          background: #fff;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          overflow: hidden;
+          transition: border 0.2s ease, box-shadow 0.2s ease;
+        }
+        .point-card--highlight {
+          border: 2px solid var(--rs-map-accent);
+          box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.2);
+          animation: highlightFade 3s forwards;
+        }
+        @keyframes highlightFade {
+          0% {
+            border-color: var(--rs-map-accent);
+            box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.2);
+          }
+          80% {
+            border-color: #111;
+            box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.2);
+          }
+          100% {
+            border-color: #e6e6e6;
+            box-shadow: none;
+          }
+        }
+        .point-card__title {
+          margin: -10px -10px 8px;
+          padding: 10px;
+          font-size: 0.95rem;
+          font-weight: 600;
+          text-align: center;
+          color: #fff;
+          background: var(--rs-map-accent);
+        }
+        .point-card__focus {
+          border: 1px solid var(--rs-map-accent);
+          border-radius: 999px;
+          padding: 4px 12px;
+          font-size: 0.8rem;
+          background: transparent;
+          color: var(--rs-map-accent);
+          cursor: pointer;
+          align-self: flex-start;
+          margin-top: 8px;
+        }
+        .point-card__focus:hover,
+        .point-card__focus:focus-visible {
+          background: var(--rs-map-accent);
+          color: #fff;
+        }
+        @media (max-width: 768px) {
+          .map-layout {
+            grid-template-columns: 1fr;
+          }
+          .map-panel {
+            display: none;
+          }
+          .panel-header {
+            flex-direction: column;
+            align-items: stretch;
+          }
+          .zone-filters {
+            flex-wrap: wrap;
+          }
+          .point-card__focus {
+            display: none;
+          }
+        }
+        .point-card__address,
+        .point-card__meta,
+        .point-card__contact {
+          margin: 0;
+          font-size: 0.85rem;
+          color: #555;
+        }
+        .point-card__contact {
+          margin: 0 0 6px;
+          font-size: 0.85rem;
+          color: #555;
+        }
+        .point-card__contact-title {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-weight: 600;
+          color: #333;
+          margin-bottom: 4px;
+        }
+        .point-card__phone-list {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+        .point-card__phone-item {
+          display: flex;
+          gap: 8px;
+          align-items: flex-start;
+        }
+        .point-card__phone-icon {
+          width: 16px;
+          display: inline-flex;
+          justify-content: center;
+          color: var(--rs-map-accent);
+          font-size: 0.85rem;
+        }
+        .point-card__phone-content {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+        }
+        .point-card__phone-name {
+          font-weight: 600;
+          color: #333;
+        }
+        .point-card__phone-number {
+          font-family: 'Segoe UI', system-ui, sans-serif;
+          font-size: 0.85rem;
+        }
+        .point-card__phone-number--link {
+          color: var(--rs-map-accent);
+          text-decoration: none;
+        }
+        .point-card__phone-number--link:hover,
+        .point-card__phone-number--link:focus-visible {
+          text-decoration: underline;
+        }
+        .point-card__address-block {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+        }
+        .point-card__details {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          margin-top: 6px;
+        }
+        .point-card__details[hidden] {
+          display: none;
+        }
+        .point-card__toggle {
+          border: 1px solid var(--rs-map-accent);
+          border-radius: 16px;
+          padding: 4px 10px;
+          background: transparent;
+          color: var(--rs-map-accent);
+          font-size: 0.8rem;
+          cursor: pointer;
+          align-self: flex-start;
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+        }
+        .point-card__toggle:hover,
+        .point-card__toggle:focus-visible {
+          background: var(--rs-map-accent);
+          color: #fff;
+        }
+        .point-card__actions {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 6px;
+          margin-top: 8px;
+        }
+        .point-card__action {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 0.8rem;
+        }
+        .point-card__actions a.point-card__action {
+          color: var(--rs-map-accent);
+          text-decoration: none;
+          border-bottom: 1px solid transparent;
+        }
+        .point-card__actions a.point-card__action:hover,
+        .point-card__actions a.point-card__action:focus-visible {
+          border-color: currentColor;
+        }
+        .point-card__actions .point-card__action i {
+          font-size: 0.85rem;
+        }
+        .point-card__actions .point-card__action--text {
+          color: #444;
+        }
+        .point-card__extra {
+          margin: 0;
+          font-size: 0.8rem;
+          color: #444;
+        }
+        .point-card__extra a {
+          color: var(--rs-map-accent);
+          text-decoration: none;
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+        }
+        .point-card__extra a:hover,
+        .point-card__extra a:focus-visible {
+          color: #444;
+          text-decoration: underline;
+        }
+        .point-card__extra-icon {
+          font-size: 0.75rem;
+        }
+        .empty-state {
+          margin: 0;
+          font-size: 0.9rem;
+          color: #777;
+          text-align: center;
+        }
+        .points-panel p {
+          margin: 0;
+          color: #666;
+          font-size: 0.9rem;
+        }
+      </style>
+      <div class="component-shell">
+        <p class="component-message" data-component-message>Cargando puntos...</p>
+        <div class="map-layout" data-map-layout hidden>
+          <div class="map-panel">
+            <div id="map"></div>
+          </div>
+          <aside class="points-panel" aria-live="polite">
+            <div class="zone-filters" role="group" aria-label="Filtrar por zona">
+              <button class="zone-button" type="button" data-zone="norte" data-label="Zona Norte" aria-pressed="false">Zona Norte</button>
+              <button class="zone-button" type="button" data-zone="rm" data-label="RM" aria-pressed="false">RM</button>
+              <button class="zone-button" type="button" data-zone="centro" data-label="Zona Centro" aria-pressed="false">Zona Centro</button>
+              <button class="zone-button" type="button" data-zone="sur" data-label="Zona Sur" aria-pressed="false">Zona Sur</button>
+            </div>
+            <div class="panel-header">
+              <h2 data-panel-title>Puntos del mapa</h2>
+              <button class="zone-button zone-button--secondary" type="button" data-action="nearest">
+                <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
+                Buscar tienda cercana
+              </button>
+            </div>
+            <div class="zones-container" data-zone-container></div>
+          </aside>
+        </div>
+      </div>
+    `}static get observedAttributes(){return["marca","tipo","height","google-maps-key","points-api-url","cache-days","marker-icon-base","marker-icon-default"]}connectedCallback(){this.mapEl=this.root.querySelector("#map"),this.panelTitleEl=this.root.querySelector("[data-panel-title]"),this.zonesContainer=this.root.querySelector("[data-zone-container]"),this.componentMessageEl=this.root.querySelector("[data-component-message]"),this.mapLayoutEl=this.root.querySelector("[data-map-layout]"),this.zoneButtons=Array.from(this.root.querySelectorAll("[data-zone]")),this.nearestButton=this.root.querySelector('[data-action="nearest"]'),this.zoneButtons.forEach(e=>e.addEventListener("click",this.handleZoneButtonClick)),this.nearestButton&&this.nearestButton.addEventListener("click",this.handleNearestClick),this.updateZoneButtons(),this.setMapHeight(this.getAttribute("height")),this.setComponentState("loading"),this.syncAttributesToState()}disconnectedCallback(){var e;(e=this.pointsController)==null||e.abort(),this.zoneButtons.forEach(t=>t.removeEventListener("click",this.handleZoneButtonClick)),this.nearestButton&&this.nearestButton.removeEventListener("click",this.handleNearestClick)}attributeChangedCallback(e,t,n){e==="marca"?this.setMarca(n!=null?n:""):e==="tipo"?this.setTipo(n!=null?n:""):e==="height"?this.setMapHeight(n):e==="google-maps-key"?this.setGoogleMapsKey(n):e==="points-api-url"?this.setPointsApiUrl(n):e==="cache-days"?this.setCacheDays(n):e==="marker-icon-base"?this.setMarkerIconBase(n):e==="marker-icon-default"&&this.setDefaultMarkerIcon(n)}loadGoogleMaps(){return window._rsGoogleMapsLoaded?Promise.resolve().then(()=>{this.initMap()}):this.googleMapsApiKey?(m.googleMapsLoaderPromise||(m.googleMapsLoaderPromise=new Promise((e,t)=>{const n=document.querySelector('script[data-rs-google-maps="true"]');if(n){n.addEventListener("load",()=>e(),{once:!0}),n.addEventListener("error",()=>t(new Error("Error al cargar la API de Google Maps")),{once:!0});return}const a=document.createElement("script"),r=new URLSearchParams({key:this.googleMapsApiKey,v:"weekly"});a.src=`https://maps.googleapis.com/maps/api/js?${r.toString()}`,a.async=!0,a.defer=!0,a.dataset.rsGoogleMaps="true",a.onload=()=>{window._rsGoogleMapsLoaded=!0,e()},a.onerror=()=>{m.googleMapsLoaderPromise=null,t(new Error("Error al cargar la API de Google Maps"))},document.head.appendChild(a)})),m.googleMapsLoaderPromise.then(()=>{window._rsGoogleMapsLoaded=!0,this.initMap()}).catch(e=>{console.error(e instanceof Error?e.message:"Error al cargar la API de Google Maps")})):(console.error('Falta la clave de Google Maps. Define el atributo "google-maps-key" en <rs-map>.'),Promise.resolve())}initMap(){const e=window.google;if(!e){console.error("Google Maps aun no esta disponible.");return}const t=this.getInitialCenter();this.map=new e.maps.Map(this.mapEl,{center:t,zoom:14,mapTypeId:"roadmap"}),this.points.length&&this.updateMarkers(this.points)}getInitialCenter(){const e=this.getFirstValidPoint();return e||{lat:-33.4489,lng:-70.6693}}getFirstValidPoint(){for(const e of this.points){const t=Number(e.lat),n=Number(e.lng);if(Number.isFinite(t)&&Number.isFinite(n))return{lat:t,lng:n}}return null}syncAttributesToState(){var e,t;this.isSyncingInitialAttributes=!0,this.setMarca((e=this.getAttribute("marca"))!=null?e:""),this.setTipo((t=this.getAttribute("tipo"))!=null?t:""),this.setGoogleMapsKey(this.getAttribute("google-maps-key")),this.setPointsApiUrl(this.getAttribute("points-api-url")),this.setCacheDays(this.getAttribute("cache-days")),this.setMarkerIconBase(this.getAttribute("marker-icon-base")),this.setDefaultMarkerIcon(this.getAttribute("marker-icon-default")),this.isSyncingInitialAttributes=!1,this.queueRefreshPoints()}setMapHeight(e){const t=(e!=null?e:"").trim();if(!t){this.mapHeight="",this.style.removeProperty("--map-height");return}this.mapHeight=t,this.style.setProperty("--map-height",t)}setGoogleMapsKey(e){this.googleMapsApiKey=(e!=null?e:"").trim(),this.googleMapsApiKey&&this.isConnected&&this.loadGoogleMaps()}setPointsApiUrl(e){const t=(e!=null?e:"").trim();this.pointsApiUrl=t||Z,this.pointsApiUrl&&this.isConnected&&!this.isSyncingInitialAttributes&&this.queueRefreshPoints()}setCacheDays(e){const t=(e!=null?e:"").trim();if(!t){this.pointsCacheTtlMs=T;return}const n=Number(t);if(!Number.isFinite(n)||n<0){this.pointsCacheTtlMs=T;return}this.pointsCacheTtlMs=n*24*60*60*1e3}setMarkerIconBase(e){const t=(e!=null?e:"").trim();if(!t){this.markerIconBaseUrl=F;return}this.markerIconBaseUrl=t.endsWith("/")?t:`${t}/`}setDefaultMarkerIcon(e){this.defaultMarkerIconUrl=(e!=null?e:"").trim()}setMarca(e){this.marca=e.trim(),this.marcaKey=this.normalizeBrandKey(this.marca),this.applyBrandColor(),this.isSyncingInitialAttributes||this.queueRefreshPoints()}setTipo(e){this.tipo=e.trim(),this.tipoCode=this.normalizeTipo(this.tipo),this.updatePanelTitle(),this.isSyncingInitialAttributes||this.queueRefreshPoints()}queueRefreshPoints(){this.refreshQueued||(this.refreshQueued=!0,queueMicrotask(()=>{this.refreshQueued=!1,this.refreshPoints()}))}get marcaFilter(){return this.marca}get tipoFilter(){return this.tipo}updatePanelTitle(){if(!this.panelTitleEl)return;const e=this.getTipoLabel();this.panelTitleEl.textContent=e!=null?e:"Puntos del mapa"}getTipoLabel(){if(this.tipoCode!==null&&this.tipoCode in M)return M[this.tipoCode];const e=this.tipo.trim().toLowerCase(),t=e&&e in z?z[e]:null;return t!==null&&t in M?M[t]:null}applyBrandColor(){var t;const e=(t=U[this.marcaKey])!=null?t:E;this.style.setProperty("--rs-map-accent",e)}normalizeTipo(e){if(!e)return null;const t=e.trim().toLowerCase();if(t in z)return z[t];const n=Number(t);return Number.isFinite(n)&&(n===0||n===1)?n:null}async refreshPoints(){var h;if(!this.isConnected||!this.marca||this.tipoCode===null)return;if(!this.pointsApiUrl){console.error('Falta la URL de la API de puntos. Define el atributo "points-api-url" en <rs-map>.'),this.setComponentState("error");return}(h=this.pointsController)==null||h.abort();const e=new AbortController;this.pointsController=e;const t=new URLSearchParams({marca:this.marca,tipo:String(this.tipoCode)}),n=this.pointsApiUrl.includes("?"),a=n&&!/[?&]$/.test(this.pointsApiUrl),r=n?a?"&":"":"?",c=`${this.pointsApiUrl}${r}${t.toString()}`,i=this.getPointsCacheKey(c),l=await this.readPointsCache(i),d=l&&Date.now()-l.timestamp<this.pointsCacheTtlMs;if(l){if(this.applyPointsPayload(l.data),this.setComponentState("ready"),d)return}else this.setComponentState("loading");try{const p=await fetch(c,{signal:e.signal});if(!p.ok)throw new Error(`Respuesta ${p.status}`);const u=await p.json();if(!Array.isArray(u))throw new Error("La respuesta de puntos no es valida.");const _=u;await this.writePointsCache(i,_),this.applyPointsPayload(_),this.setComponentState("ready")}catch(p){if(p instanceof DOMException&&p.name==="AbortError")return;if(l){console.warn("Se mantienen puntos cacheados por error al refrescar el mapa",p);return}console.error("No se pudieron cargar los puntos del mapa",p),this.setComponentState("error")}}applyPointsPayload(e){this.points=this.transformPoints(e),this.renderPoints(this.points),this.initialViewApplied=!1,this.updateMarkers(this.points)}getPointsCacheKey(e){return`rs-map:points:${e}`}async readPointsCache(e){const t=await this.readPointsCacheFromIndexedDb(e);if(t)return t;try{const n=window.localStorage.getItem(e);if(!n)return null;const a=JSON.parse(n);return!a||!Array.isArray(a.data)||!Number.isFinite(a.timestamp)?(window.localStorage.removeItem(e),null):a}catch{return null}}async writePointsCache(e,t){const n={timestamp:Date.now(),data:t};await this.writePointsCacheToIndexedDb(e,n);try{window.localStorage.setItem(e,JSON.stringify(n))}catch{}}async readPointsCacheFromIndexedDb(e){const t=await m.openPointsCacheDb();return t?new Promise(n=>{const c=t.transaction(k,"readonly").objectStore(k).get(e);c.onsuccess=()=>{const i=c.result;if(!i||!Array.isArray(i.data)||!Number.isFinite(i.timestamp)){n(null);return}n({timestamp:i.timestamp,data:i.data})},c.onerror=()=>n(null)}):null}async writePointsCacheToIndexedDb(e,t){const n=await m.openPointsCacheDb();n&&await new Promise(a=>{const i=n.transaction(k,"readwrite").objectStore(k).put({key:e,timestamp:t.timestamp,data:t.data});i.onsuccess=()=>a(),i.onerror=()=>a()})}static openPointsCacheDb(){return typeof window=="undefined"||!("indexedDB"in window)?Promise.resolve(null):(m.pointsCacheDbPromise||(m.pointsCacheDbPromise=new Promise(e=>{const t=window.indexedDB.open($,1);t.onupgradeneeded=()=>{const n=t.result;n.objectStoreNames.contains(k)||n.createObjectStore(k,{keyPath:"key"})},t.onsuccess=()=>e(t.result),t.onerror=()=>e(null)})),m.pointsCacheDbPromise)}transformPoints(e){return e.map(t=>({...t,zone:this.getZoneForPoint(t)}))}renderPoints(e){if(!this.zonesContainer)return;const t=this.groupPoints(e);this.pointsByZone=t,this.updateZoneButtonCounts();const n=document.createDocumentFragment();O.forEach(a=>{const r=document.createElement("section");r.className="zone-section",r.dataset.zoneSection=a;const c=document.createElement("div");c.className="zone-section__header";const i=document.createElement("span");if(i.textContent=R[a],c.appendChild(i),r.appendChild(c),t[a].length===0){const l=document.createElement("p");l.className="zone-section__empty",l.textContent="Sin puntos en esta zona.",r.appendChild(l)}else{const l=document.createElement("div");l.className="zone-section__list",t[a].forEach(d=>{l.appendChild(this.createPointCard(d))}),r.appendChild(l)}n.appendChild(r)}),this.zonesContainer.replaceChildren(n),this.updateZoneVisibility()}groupPoints(e){const t={norte:[],rm:[],centro:[],sur:[]};return e.forEach(n=>{t[n.zone].push(n)}),t}createPointCard(e){var _;const t=document.createElement("article");t.className="point-card",t.dataset.pointId=String(e.id);const n=document.createElement("h3");n.className="point-card__title",n.textContent=e.titulo||"Sin nombre",t.appendChild(n);const a=document.createElement("div");a.className="point-card__address-block";const r=document.createElement("p");if(r.className="point-card__address",r.textContent=e.direccion||"Sin direccion",a.appendChild(r),e.comuna_name){const o=document.createElement("p");o.className="point-card__meta",o.textContent=e.comuna_name,a.appendChild(o)}if(e.provincia_name){const o=document.createElement("p");o.className="point-card__meta",o.textContent=e.provincia_name,a.appendChild(o)}if(e.region_name){const o=document.createElement("p");o.className="point-card__meta",o.textContent=e.region_name,a.appendChild(o)}t.appendChild(a);let c=null;const i=Number(e.lat),l=Number(e.lng);if(Number.isFinite(i)&&Number.isFinite(l)){c=document.createElement("button"),c.type="button",c.className="point-card__focus";const o=this.createIconElement("fa-solid fa-location-crosshairs");c.appendChild(o),c.appendChild(document.createTextNode(" Ver en el mapa")),c.addEventListener("click",()=>{this.focusPointWithZoom(i,l),this.scrollToPointCard(e.id)})}const d=document.createElement("div");d.className="point-card__details",d.hidden=!0;let h=!1;const p=document.createElement("div");p.className="point-card__actions";let u=null;if(e.url&&e.url!=="#"){const o=document.createElement("a");o.href=e.url,o.target="_blank",o.rel="noopener noreferrer",o.className="point-card__action";const g=this.createIconElement("fa-solid fa-globe");o.appendChild(g),o.appendChild(document.createTextNode("Sitio web")),p.appendChild(o)}if(e.email){const o=document.createElement("a");o.href=`mailto:${e.email}`,o.target="_blank",o.rel="noopener noreferrer",o.className="point-card__action point-card__action--text";const g=this.createIconElement("fa-solid fa-envelope");o.appendChild(g),o.appendChild(document.createTextNode(e.email)),p.appendChild(o)}if(p.childElementCount&&(d.appendChild(p),h=!0),(_=e.telefonos)!=null&&_.length){const o=document.createElement("div");o.className="point-card__contact";const g=document.createElement("div");g.className="point-card__contact-title";const f=this.createIconElement("fa-solid fa-phone");g.appendChild(f),g.appendChild(document.createTextNode("Telefonos")),o.appendChild(g);const x=document.createElement("ul");x.className="point-card__phone-list",e.telefonos.slice().sort((C,w)=>C.orden-w.orden).forEach(C=>{const w=document.createElement("li");w.className="point-card__phone-item";const N=document.createElement("span");if(N.className="point-card__phone-icon",C.whatsapp){const S=this.createIconElement("fa-brands fa-whatsapp");N.appendChild(S)}else N.textContent="-";w.appendChild(N);const v=document.createElement("div");v.className="point-card__phone-content";const I=document.createElement("span");I.className="point-card__phone-name",I.textContent=C.nombre,v.appendChild(I);const P=C.whatsapp?document.createElement("a"):document.createElement("span");if(P.className="point-card__phone-number",C.whatsapp){const S=this.getWhatsappLink(C.telefono);S&&(P.href=S,P.target="_blank",P.rel="noopener noreferrer",P.classList.add("point-card__phone-number--link"))}P.textContent=C.telefono,v.appendChild(P),w.appendChild(v),x.appendChild(w)}),o.appendChild(x),d.appendChild(o),h=!0}if(e.adicional){const o=document.createElement("p");o.className="point-card__extra",o.innerHTML=e.adicional,o.querySelectorAll("a").forEach(g=>{g.classList.add("point-card__extra-link");const f=this.createIconElement("fa-solid fa-arrow-up-right-from-square");f.classList.add("point-card__extra-icon"),g.appendChild(f)}),d.appendChild(o),h=!0}if(e.googlelink){u=document.createElement("a"),u.href=e.googlelink,u.target="_blank",u.rel="noopener noreferrer",u.className="point-card__action";const o=this.createIconElement("fa-solid fa-map-location-dot");u.appendChild(o),u.appendChild(document.createTextNode("Google Maps"))}if(u){const o=document.createElement("div");o.className="point-card__actions",o.appendChild(u),d.appendChild(o),h=!0}if(h){const o=document.createElement("button");o.type="button",o.className="point-card__toggle";const g=this.createIconElement("fa-solid fa-circle-info"),f=document.createElement("span");f.textContent="Mas informacion",o.appendChild(g),o.appendChild(f),o.addEventListener("click",()=>{const x=d.hidden;d.hidden=!x,f.textContent=x?"Ocultar informacion":"Mas informacion",g.className=x?"fa-solid fa-circle-xmark":"fa-solid fa-circle-info"}),t.appendChild(o),t.appendChild(d)}return c&&t.appendChild(c),t}getZoneForPoint(e){const t=this.normalizeRegionName(e.region_name||"");return t&&t in B?B[t]:t.includes("metropolitana")?"rm":t.includes("araucania")||t.includes("rios")||t.includes("lagos")||t.includes("aysen")||t.includes("magallanes")?"sur":t.includes("arica")||t.includes("tarapaca")||t.includes("antofagasta")||t.includes("atacama")||t.includes("coquimbo")?"norte":"centro"}normalizeRegionName(e){return e.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").trim()}normalizeBrandKey(e){return e&&e.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[^a-z0-9]+/g,"")||"default"}getMarkerIcon(){const e=this.marcaKey||"default";return this.markerIconBaseUrl?`${this.markerIconBaseUrl}${e}.png`:this.defaultMarkerIconUrl?this.defaultMarkerIconUrl:null}updateMarkers(e){const t=window.google;if(!t||!this.map)return;this.markers.forEach(i=>i.setMap(null)),this.markers=[];const n=e.filter(i=>{const l=Number(i.lat),d=Number(i.lng);return Number.isFinite(l)&&Number.isFinite(d)});if(!n.length)return;const a=new t.maps.LatLngBounds,r=this.getMarkerIcon(),c=r&&this.map?{url:r,scaledSize:new t.maps.Size(36,36),anchor:new t.maps.Point(18,36)}:void 0;if(n.forEach(i=>{const l=Number(i.lat),d=Number(i.lng),h=new t.maps.Marker({map:this.map,position:{lat:l,lng:d},title:i.titulo,icon:c});this.markers.push(h);const p=h.getPosition();p&&a.extend(p)}),!this.initialViewApplied&&this.markers.length){const i=this.markers[0].getPosition();if(i){this.map.setCenter(i),this.map.setZoom(14),this.initialViewApplied=!0;return}}if(this.markers.length===1){const i=this.markers[0].getPosition();i&&this.map.setCenter(i),this.map.setZoom(14)}else this.map.fitBounds(a)}setActiveZone(e){}scrollToZoneSection(e){if(!this.zonesContainer)return;const t=this.zonesContainer.querySelector(`[data-zone-section="${e}"]`);t&&t.scrollIntoView({behavior:"smooth",block:"start"})}updateZoneButtons(){this.zoneButtons.forEach(e=>{const t=e.dataset.zone,n=this.activeZone===t;e.classList.toggle("is-active",n),e.setAttribute("aria-pressed",String(n))})}updateZoneButtonCounts(){this.zoneButtons.forEach(e=>{e.dataset.zone;const t=e.dataset.label||e.textContent||"";e.textContent=t})}updateZoneVisibility(){if(!this.zonesContainer)return;this.zonesContainer.querySelectorAll("[data-zone-section]").forEach(t=>{t.removeAttribute("hidden")})}findNearestPoint(e,t){if(!this.points.length)return null;let n=null,a=1/0;return this.points.forEach(r=>{const c=Number(r.lat),i=Number(r.lng);if(!Number.isFinite(c)||!Number.isFinite(i))return;const l=this.haversine(e,t,c,i);l<a&&(a=l,n=r)}),n}haversine(e,t,n,a){const r=p=>p*Math.PI/180,i=r(n-e),l=r(a-t),d=Math.sin(i/2)*Math.sin(i/2)+Math.cos(r(e))*Math.cos(r(n))*Math.sin(l/2)*Math.sin(l/2);return 6371e3*(2*Math.atan2(Math.sqrt(d),Math.sqrt(1-d)))}scrollToPointCard(e){if(!this.zonesContainer)return;const t=this.zonesContainer.querySelector(`[data-point-id="${e}"]`);t&&(t.scrollIntoView({behavior:"smooth",block:"center"}),this.highlightPointCard(t))}highlightPointCard(e){var t;this.highlightTimeout!==null&&(clearTimeout(this.highlightTimeout),this.highlightTimeout=null),(t=this.zonesContainer)==null||t.querySelectorAll(".point-card--highlight").forEach(n=>{n.classList.remove("point-card--highlight")}),e.classList.add("point-card--highlight"),this.highlightTimeout=window.setTimeout(()=>{e.classList.remove("point-card--highlight"),this.highlightTimeout=null},3500)}setComponentState(e){if(!(!this.componentMessageEl||!this.mapLayoutEl))if(e==="ready")this.componentMessageEl.setAttribute("hidden",""),this.mapLayoutEl.removeAttribute("hidden");else{const t=e==="loading"?"Cargando puntos...":"Mapa temporalmente no disponible";this.componentMessageEl.textContent=t,this.componentMessageEl.removeAttribute("hidden"),this.mapLayoutEl.setAttribute("hidden","")}}centerMapOnPoint(e,t,n=14){if(!window.google||!this.map||!Number.isFinite(e)||!Number.isFinite(t))return;const r=typeof this.map.getZoom=="function"?this.map.getZoom():null,c=!r||r<n;this.animateMapPan(e,t,()=>{c&&this.map.setZoom(n)})}async focusPointWithZoom(e,t){!window.google||!this.map||!Number.isFinite(e)||!Number.isFinite(t)||(await this.animateZoomTo(8,800),await this.wait(500),await new Promise(a=>{this.animateMapPan(e,t,a)}),await this.wait(500),await this.animateZoomTo(18,800))}wait(e){return new Promise(t=>{window.setTimeout(t,e)})}async animateZoomTo(e,t=600){if(!window.google||!this.map||typeof this.map.getZoom!="function"||typeof this.map.setZoom!="function")return;const a=this.map.getZoom();if(!Number.isFinite(a)){this.map.setZoom(e);return}const r=e-a;if(Math.abs(r)<.01){this.map.setZoom(e);return}await new Promise(c=>{const i=performance.now(),l=h=>1-Math.pow(1-h,3),d=h=>{const p=h-i,u=Math.min(p/t,1),_=l(u),o=a+r*_;this.map.setZoom(Math.round(o*100)/100),u<1?requestAnimationFrame(d):(this.map.setZoom(e),c())};requestAnimationFrame(d)})}animateMapPan(e,t,n){if(!window.google||!this.map)return;this.panAnimationFrame!==null&&(cancelAnimationFrame(this.panAnimationFrame),this.panAnimationFrame=null);const r=this.map.getCenter();if(!r){this.map.setCenter({lat:e,lng:t}),n==null||n();return}const c=r.lat(),i=r.lng(),l=e-c,d=t-i,h=600,p=performance.now(),u=o=>1-Math.pow(1-o,3),_=o=>{const g=o-p,f=Math.min(g/h,1),x=u(f),C=c+l*x,w=i+d*x;this.map.setCenter({lat:C,lng:w}),f<1?this.panAnimationFrame=requestAnimationFrame(_):(this.panAnimationFrame=null,n==null||n())};this.panAnimationFrame=requestAnimationFrame(_)}static ensureFontAwesome(){if(m.fontAwesomeAttached)return;if(document.querySelector(`link[href="${L}"]`)){m.fontAwesomeAttached=!0;return}const t=document.createElement("link");t.rel="stylesheet",t.href=L,t.crossOrigin="anonymous",t.referrerPolicy="no-referrer",t.addEventListener("load",()=>{m.fontAwesomeAttached=!0}),document.head.appendChild(t)}createIconElement(e){const t=document.createElement("i");return t.className=e,t.setAttribute("aria-hidden","true"),t}getWhatsappLink(e){const t=e.replace(/\D+/g,"");return t?`https://wa.me/${t}`:null}};s(m,"tag","rs-map"),s(m,"googleMapsLoaderPromise",null),s(m,"pointsCacheDbPromise",null),s(m,"fontAwesomeAttached",!1);let A=m;return y(A.tag,A),b.RsMap=A,b.safeDefine=y,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"}),b})({});
+//# sourceMappingURL=rs-components.iife.js.map