@rsltda/components 1.0.11

package/dist/rs-components.es.js

@@ -0,0 +1,1145 @@
+var D = Object.defineProperty;
+var q = (C, b, e) => b in C ? D(C, b, { enumerable: !0, configurable: !0, writable: !0, value: e }) : C[b] = e;
+var s = (C, b, e) => q(C, typeof b != "symbol" ? b + "" : b, e);
+function U(C, b) {
+  customElements.get(C) || customElements.define(C, b);
+}
+const I = "#1e88e5", L = "/assets/fontawesome/css/all.min.css", F = "https://cdn.rsltda.cl/logos/marker/", Z = "https://ap2.rs-shop.cl/web/PuntosMapas", O = {
+  ktm: "#ff6600"
+}, M = {
+  sucursal: 0,
+  distribuidor: 1
+}, R = ["norte", "rm", "centro", "sur"], $ = {
+  norte: "Zona Norte",
+  rm: "RM",
+  centro: "Zona Centro",
+  sur: "Zona Sur"
+}, N = {
+  0: "Sucursales",
+  1: "Distribuidores"
+}, T = 720 * 60 * 60 * 1e3, G = "rs-map-cache", P = "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: ${I};
+        }
+        .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 N)
+      return N[this.tipoCode];
+    const e = this.tipo.trim().toLowerCase(), t = e && e in M ? M[e] : null;
+    return t !== null && t in N ? N[t] : null;
+  }
+  applyBrandColor() {
+    var t;
+    const e = (t = O[this.marcaKey]) != null ? t : I;
+    this.style.setProperty("--rs-map-accent", e);
+  }
+  normalizeTipo(e) {
+    if (!e)
+      return null;
+    const t = e.trim().toLowerCase();
+    if (t in M)
+      return M[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 y = u;
+      await this.writePointsCache(i, y), this.applyPointsPayload(y), 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(P, "readonly").objectStore(P).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(P, "readwrite").objectStore(P).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(G, 1);
+      t.onupgradeneeded = () => {
+        const n = t.result;
+        n.objectStoreNames.contains(P) || n.createObjectStore(P, { 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();
+    R.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 = $[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 y;
+    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), (y = e.telefonos) != null && y.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 _ = document.createElement("ul");
+      _.className = "point-card__phone-list", e.telefonos.slice().sort((x, w) => x.orden - w.orden).forEach((x) => {
+        const w = document.createElement("li");
+        w.className = "point-card__phone-item";
+        const k = document.createElement("span");
+        if (k.className = "point-card__phone-icon", x.whatsapp) {
+          const z = this.createIconElement("fa-brands fa-whatsapp");
+          k.appendChild(z);
+        } else
+          k.textContent = "-";
+        w.appendChild(k);
+        const A = document.createElement("div");
+        A.className = "point-card__phone-content";
+        const S = document.createElement("span");
+        S.className = "point-card__phone-name", S.textContent = x.nombre, A.appendChild(S);
+        const E = x.whatsapp ? document.createElement("a") : document.createElement("span");
+        if (E.className = "point-card__phone-number", x.whatsapp) {
+          const z = this.getWhatsappLink(x.telefono);
+          z && (E.href = z, E.target = "_blank", E.rel = "noopener noreferrer", E.classList.add("point-card__phone-number--link"));
+        }
+        E.textContent = x.telefono, A.appendChild(E), w.appendChild(A), _.appendChild(w);
+      }), o.appendChild(_), 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 _ = d.hidden;
+        d.hidden = !_, f.textContent = _ ? "Ocultar informacion" : "Mas informacion", g.className = _ ? "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) < 0.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), y = l(u), o = a + r * y;
+        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), y = (o) => {
+      const g = o - p, f = Math.min(g / h, 1), _ = u(f), x = c + l * _, w = i + d * _;
+      this.map.setCenter({ lat: x, lng: w }), f < 1 ? this.panAnimationFrame = requestAnimationFrame(y) : (this.panAnimationFrame = null, n == null || n());
+    };
+    this.panAnimationFrame = requestAnimationFrame(y);
+  }
+  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 v = m;
+U(v.tag, v);
+export {
+  v as RsMap,
+  U as safeDefine
+};
+//# sourceMappingURL=rs-components.es.js.map