@mapvx/web-components 0.0.21 → 0.0.23

package/dist/es/assets/{components-BX-NvkMO.js → components-C542vOSv.js}

@@ -1,5 +1,5 @@
-import { i as i$2, x, r, t as t$1, T } from './route-view-totems-DXCPYztz.js';
-import { R as RouteAnimationController, M as MarkerController } from './utils-FyhZTuD9.js';
+import { i as i$2, x, r, a as i$3, n as n$1, t as t$1, T } from './route-view-totems-z3hCCsGS.js';
+import { R as RouteAnimationController, M as MarkerController } from './utils-HInBaX5h.js';
 
 /**
  * @license
@@ -42,11 +42,14 @@ class s{get value(){return this.o}set value(s){this.setValue(s);}setValue(s,t=fa
 
 const sdkContext = n("lazarillo-sdk");
 
-const style$3 = ":host{display:block;height:100%;width:100%}#map,.maplibregl-canvas{width:100%;height:100%}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 20px 50px 0}.maplibregl-ctrl{bottom:80px;right:40px;border:3px solid #000;padding:0;border-radius:100px;background:#fff;overflow:hidden;display:flex;flex-direction:column;width:70px;height:129px}.maplibregl-ctrl button{background-color:transparent;box-shadow:none;border-radius:0;margin:0;font-size:31px;font-weight:400;width:100%;height:100%;color:#000;transition:background-color .4s ease,color .4s ease}.maplibregl-ctrl button:hover{background-color:#000!important;color:#fff}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in{border-bottom:3px solid #000}.maplibregl-ctrl-group .maplibregl-ctrl-icon{background:none!important;display:none!important}.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in:after{content:\"+\";display:block;font-size:32px;font-weight:600;line-height:1;text-align:center}.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out:after{content:\"–\";display:block;font-size:32px;font-weight:600;line-height:1;text-align:center}#modal{position:absolute;width:100%;height:100%;background:#0003;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;justify-items:center;top:0;left:0;z-index:100}.modal-content{min-width:100px;min-height:100px;background-color:#fff;border:1px solid #000;border-radius:10px;padding:10px;width:fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.modal-text{font-family:Poppins,sans-serif;font-size:20pt;font-weight:500;color:#000}.modal-icon{height:100px;align-self:center}.maplibregl-marker:has(.popup){z-index:10}.maplibregl-marker:not(:has(.popup)){z-index:5}.maplibregl-ctrl-compass{visibility:hidden;height:0px}";
+const style$3 = ":host{display:block;height:100%;width:100%}#map,.maplibregl-canvas{width:100%;height:100%}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 20px 50px 0}.maplibregl-ctrl{bottom:var(--zoom-button-margin, 80px);right:var(--zoom-button-margin, 40px);border:3px solid #000;padding:0;border-radius:100px;background:#fff;overflow:hidden;display:flex;flex-direction:column;width:var(--zoom-button-size, 70px);height:calc(var(--zoom-button-size, 70px) * 1.8)}.maplibregl-ctrl button{background-color:transparent;box-shadow:none;border-radius:0;margin:0;font-size:calc(var(--zoom-button-size, 70px) * .45);font-weight:400;width:100%;height:100%;color:#000;transition:background-color .4s ease,color .4s ease}.maplibregl-ctrl button:hover{background-color:#000!important;color:#fff}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in{border-bottom:3px solid #000}.maplibregl-ctrl-group .maplibregl-ctrl-icon{background:none!important;display:none!important}.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in:after{content:\"+\";display:block;font-size:calc(var(--zoom-button-size, 70px) * .46);font-weight:600;line-height:1;text-align:center}.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out:after{content:\"–\";display:block;font-size:calc(var(--zoom-button-size, 70px) * .46);font-weight:600;line-height:1;text-align:center}#modal{position:absolute;width:100%;height:100%;background:#0003;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;justify-items:center;top:0;left:0;z-index:100}.modal-content{min-width:100px;min-height:100px;background-color:#fff;border:1px solid #000;border-radius:10px;padding:10px;width:fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}@media (max-width: 768px){#modal{align-items:flex-start;padding-top:60px}.modal-content{max-width:90%;margin:0 auto;border-radius:12px;box-shadow:0 4px 12px #00000026}}:host([compact-mode]){border-radius:12px!important;overflow:hidden!important;box-shadow:0 4px 12px #00000026!important}:host([compact-mode]) #map{border-radius:12px}:host([compact-mode]) .maplibregl-canvas{border-radius:12px}.modal-text{font-family:Poppins,sans-serif;font-size:20pt;font-weight:500;color:#000}.modal-icon{height:100px;align-self:center}.maplibregl-marker:has(.popup){z-index:10}.maplibregl-marker:not(:has(.popup)){z-index:5}.maplibregl-ctrl-compass{visibility:hidden;height:0px}";
 
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$4 = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
@@ -54,9 +57,16 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$3(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _zoomBorderColor, _zoomBorderWidth;
 let CustomMap = class extends i$2 {
   constructor() {
     super();
+    __privateAdd(this, _zoomBorderColor, "#251660");
+    __privateAdd(this, _zoomBorderWidth, 1);
     this.mapReady = false;
     this.routeAnimationHandlers = {
       onRouteAnimationFinished: () => {
@@ -97,6 +107,18 @@ let CustomMap = class extends i$2 {
     this.routeAnimationController = new RouteAnimationController(this, this.routeAnimationHandlers);
     this.markerController = new MarkerController(this);
   }
+  get zoomBorderColor() {
+    return __privateGet(this, _zoomBorderColor);
+  }
+  set zoomBorderColor(_) {
+    __privateSet(this, _zoomBorderColor, _);
+  }
+  get zoomBorderWidth() {
+    return __privateGet(this, _zoomBorderWidth);
+  }
+  set zoomBorderWidth(_) {
+    __privateSet(this, _zoomBorderWidth, _);
+  }
   async firstUpdated() {
     if (this.shadowRoot) {
       const style2 = document.createElement("style");
@@ -105,6 +127,7 @@ let CustomMap = class extends i$2 {
     }
   }
   async updated() {
+    this.updateAttributes();
     if (!this.sdkData?.sdk) return;
     const {
       sdk,
@@ -228,6 +251,26 @@ let CustomMap = class extends i$2 {
       })
     );
   }
+  updateAttributes() {
+    const parentElement = this.closest("map-view-with-modal");
+    if (parentElement) {
+      const compactMode = parentElement.hasAttribute("compact-mode");
+      const zoomSize = parentElement.getAttribute("zoom-size") || "normal";
+      if (compactMode) {
+        this.setAttribute("compact-mode", "");
+        console.log("Modo compacto activado");
+      } else {
+        this.removeAttribute("compact-mode");
+        console.log("Modo compacto desactivado");
+      }
+      this.setAttribute("zoom-size", zoomSize);
+      console.log("Tamaño de zoom aplicado:", zoomSize);
+      const zoomBorderColor = this.getAttribute("zoom-border-color") || this.zoomBorderColor;
+      const zoomBorderWidth = parseInt(this.getAttribute("zoom-border-width") || this.zoomBorderWidth.toString());
+      this.style.setProperty("--zoom-border-color", zoomBorderColor);
+      this.style.setProperty("--zoom-border-width", `${zoomBorderWidth}px`);
+    }
+  }
   render() {
     return x`<div id="map"></div>
       <div id="modal" style="display: ${this.modalData ? "flex" : "none"}">
@@ -238,11 +281,125 @@ let CustomMap = class extends i$2 {
       </div>`;
   }
 };
-CustomMap.styles = [r(style$3)];
-__decorateClass$3([
+_zoomBorderColor = new WeakMap();
+_zoomBorderWidth = new WeakMap();
+CustomMap.styles = [
+  i$3`
+      :host {
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  r(style$3),
+  i$3`
+      :host([compact-mode]) {
+        border-radius: 12px !important;
+        overflow: hidden !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+        border: 2px solid #e9ecef !important;
+      }
+
+      :host([compact-mode]) #map {
+        border-radius: 12px !important;
+      }
+
+      :host([compact-mode]) .maplibregl-canvas {
+        border-radius: 12px !important;
+      }
+
+      :host([zoom-size='small']) {
+        --zoom-button-size: 32px;
+        --zoom-button-margin: 8px;
+      }
+
+      :host([zoom-size='normal']) {
+        --zoom-button-size: 40px;
+        --zoom-button-margin: 12px;
+      }
+
+      :host([zoom-size='large']) {
+        --zoom-button-size: 48px;
+        --zoom-button-margin: 16px;
+      }
+
+      /* Aplicar variables CSS a los botones de zoom */
+      :host([zoom-size='small']) .maplibregl-ctrl {
+        width: 32px !important;
+        height: 58px !important;
+        bottom: 8px !important;
+        right: 8px !important;
+      }
+
+      :host([zoom-size='normal']) .maplibregl-ctrl {
+        width: 40px !important;
+        height: 72px !important;
+        bottom: 12px !important;
+        right: 12px !important;
+      }
+
+      :host([zoom-size='large']) .maplibregl-ctrl {
+        width: 48px !important;
+        height: 86px !important;
+        bottom: 16px !important;
+        right: 16px !important;
+      }
+
+      /* Ajustar tamaño de fuente según el tamaño del botón */
+      :host([zoom-size='small']) .maplibregl-ctrl button {
+        font-size: 14px !important;
+      }
+
+      :host([zoom-size='normal']) .maplibregl-ctrl button {
+        font-size: 18px !important;
+      }
+
+      :host([zoom-size='large']) .maplibregl-ctrl button {
+        font-size: 22px !important;
+      }
+
+      :host([zoom-size='small']) .maplibregl-ctrl-group button::after {
+        font-size: 14px !important;
+      }
+
+      :host([zoom-size='normal']) .maplibregl-ctrl-group button::after {
+        font-size: 18px !important;
+      }
+
+      :host([zoom-size='large']) .maplibregl-ctrl-group button::after {
+        font-size: 22px !important;
+      }
+
+      /* Styles for zoom button border */
+      :host([zoom-border-color]) .maplibregl-ctrl {
+        border: var(--zoom-border-width, 1px) solid var(--zoom-border-color, #251660) !important;
+      }
+
+      :host([zoom-border-color]) .maplibregl-ctrl button {
+        border: none;
+        border-radius: unset;
+      }
+
+      /* Add divider between zoom buttons */
+      :host([zoom-border-color]) .maplibregl-ctrl button:first-child {
+        border-bottom: 1px solid var(--zoom-border-color, #251660) !important;
+      }
+
+      :host([zoom-border-color]) .maplibregl-ctrl button:hover {
+        background-color: var(--zoom-border-color, #251660) !important;
+        color: #fff !important;
+      }
+    `
+];
+__decorateClass$4([
   c({ context: sdkContext, subscribe: true })
 ], CustomMap.prototype, "sdkData", 2);
-CustomMap = __decorateClass$3([
+__decorateClass$4([
+  n$1({ type: String })
+], CustomMap.prototype, "zoomBorderColor", 1);
+__decorateClass$4([
+  n$1({ type: Number })
+], CustomMap.prototype, "zoomBorderWidth", 1);
+CustomMap = __decorateClass$4([
   t$1("custom-map")
 ], CustomMap);
 
@@ -264,20 +421,40 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
  * SPDX-License-Identifier: BSD-3-Clause
  */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
 
-const style$2 = ":host{position:absolute;top:0;right:10px}.floor-selector-container{display:flex;flex-direction:row;background:#fff;border-radius:0 0 30px 30px;box-shadow:0 0 15px #00000026;padding:0 6px;gap:8px;height:65px}.btn-floor{height:auto;width:100px;vertical-align:middle;font-size:small!important;word-wrap:break-word!important;font-family:Poppins;font-weight:600;font-size:16pt;border-radius:10px;border:0;box-shadow:0 0 15px #00000026}@media only screen and (max-width: 576px){.btn-floor{padding:6px;width:70px;height:auto;font-size:small!important}}.floor-btn-container:hover .floor-btn:not(.active):not(.disabled){border-radius:0 0 999px 999px;background:#000;color:#fff}.floor-btn{transition:background .2s ease,color .2s ease,transform .2s ease,opacity .2s ease;position:relative;background:transparent;border:none;outline:none;font-family:Poppins,sans-serif;font-weight:600;font-size:13px;border-radius:0 0 30px 30px;cursor:pointer;transition:all .2s ease;height:100%;min-width:65px;display:flex;align-items:center;justify-content:center;color:#000;z-index:1;span{min-width:50px}}.floor-btn.disabled{color:#c5c3c3;background:transparent;pointer-events:none;-webkit-tap-highlight-color:transparent;user-select:none}.floor-btn.active{color:#fff;background:transparent;z-index:2}.floor-btn.active:after{content:\"\";position:absolute;inset:0 2px;border-radius:0 0 999px 999px;background:#000;color:#fff;z-index:1}.floor-btn.active:before{content:\"\";position:absolute;inset:0 -3px -3px;border-radius:0 0 999px 999px;background:linear-gradient(45.8deg,#f5a 10.03%,#b850c9 25.23%,#6572d6 48.67%,#4eaeb8 72.74%);z-index:0}.floor-btn.active span{z-index:10}@media (max-width: 1100px){.floor-btn-container:hover .floor-btn:not(.active):not(.disabled){border-radius:999px 0 0 999px;background:#000;color:#fff}.floor-selector-container{right:0;position:fixed;top:50%;transform:translateY(-50%);display:flex;flex-direction:column-reverse;border-radius:30px 0 0 30px;min-width:87px;max-height:100%;height:auto;padding:0;gap:0}.floor-btn-container{padding:0;width:100%}.floor-btn{width:100%;padding:20px;border-radius:999px 0 0 999px}.floor-btn.active:after{position:absolute;inset:2px 0 2px 2px;border-radius:999px 0 0 999px}.floor-btn.active:before{inset:-3px 0 -3px -3px;border-radius:999px 0 0 999px}}";
-
 var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$2(target, key, result);
   return result;
 };
-let FloorSelector = class extends i$2 {
-  _selectFloor(floorKey) {
+class BaseFloorSelector extends i$2 {
+  getFloors() {
+    if (!this.sdkData) return [];
+    const { parentPlace, generalConfig } = this.sdkData;
+    let floors = parentPlace?.innerFloors || [];
+    if (generalConfig?.enabledFloors?.length > 0) {
+      floors = floors.filter((floor) => generalConfig.enabledFloors.includes(floor.key));
+    }
+    return floors;
+  }
+  getCurrentFloor() {
+    return this.sdkData?.currentFloor;
+  }
+  getEnabledFloors() {
+    return this.sdkData?.enabledFloors || [];
+  }
+  isFloorActive(floor) {
+    const currentFloor = this.getCurrentFloor();
+    return floor.key === currentFloor?.key;
+  }
+  isFloorEnabled(floor) {
+    const enabledFloors = this.getEnabledFloors();
+    return enabledFloors.some((f) => f.key === floor.key);
+  }
+  selectFloor(floorKey) {
     this.dispatchEvent(
       new CustomEvent("floorChange", {
         detail: floorKey,
@@ -286,21 +463,35 @@ let FloorSelector = class extends i$2 {
       })
     );
   }
+  getFloorDisplayName(floor) {
+    return floor.name || floor.title || floor.key;
+  }
+}
+__decorateClass$3([
+  c({ context: sdkContext, subscribe: true })
+], BaseFloorSelector.prototype, "sdkData");
+
+const style$2 = ":host{position:absolute;top:0;right:10px}.floor-selector-container{display:flex;flex-direction:row;background:#fff;border-radius:0 0 30px 30px;box-shadow:0 0 15px #00000026;padding:0 6px;gap:8px;height:65px}.btn-floor{height:auto;width:100px;vertical-align:middle;font-size:small!important;word-wrap:break-word!important;font-family:Poppins;font-weight:600;font-size:16pt;border-radius:10px;border:0;box-shadow:0 0 15px #00000026}@media only screen and (max-width: 576px){.btn-floor{padding:6px;width:70px;height:auto;font-size:small!important}}.floor-btn-container:hover .floor-btn:not(.active):not(.disabled){border-radius:0 0 999px 999px;background:#000;color:#fff}.floor-btn{transition:background .2s ease,color .2s ease,transform .2s ease,opacity .2s ease;position:relative;background:transparent;border:none;outline:none;font-family:Poppins,sans-serif;font-weight:600;font-size:13px;border-radius:0 0 30px 30px;cursor:pointer;transition:all .2s ease;height:100%;min-width:65px;display:flex;align-items:center;justify-content:center;color:#000;z-index:1;span{min-width:50px}}.floor-btn.disabled{color:#c5c3c3;background:transparent;pointer-events:none;-webkit-tap-highlight-color:transparent;user-select:none}.floor-btn.active{color:#fff;background:transparent;z-index:2}.floor-btn.active:after{content:\"\";position:absolute;inset:0 2px;border-radius:0 0 999px 999px;background:#000;color:#fff;z-index:1}.floor-btn.active:before{content:\"\";position:absolute;inset:0 -3px -3px;border-radius:0 0 999px 999px;background:linear-gradient(45.8deg,#f5a 10.03%,#b850c9 25.23%,#6572d6 48.67%,#4eaeb8 72.74%);z-index:0}.floor-btn.active span{z-index:10}@media (max-width: 1100px){.floor-btn-container:hover .floor-btn:not(.active):not(.disabled){border-radius:999px 0 0 999px;background:#000;color:#fff}.floor-selector-container{right:0;position:fixed;top:50%;transform:translateY(-50%);display:flex;flex-direction:column-reverse;border-radius:30px 0 0 30px;min-width:87px;max-height:100%;height:auto;padding:0;gap:0}.floor-btn-container{padding:0;width:100%}.floor-btn{width:100%;padding:20px;border-radius:999px 0 0 999px}.floor-btn.active:after{position:absolute;inset:2px 0 2px 2px;border-radius:999px 0 0 999px}.floor-btn.active:before{inset:-3px 0 -3px -3px;border-radius:999px 0 0 999px}}";
+
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(result)) || result;
+  return result;
+};
+let FloorSelector = class extends BaseFloorSelector {
   render() {
     if (!this.sdkData) {
       return x`<div>No data</div>`;
     }
-    const { currentFloor, parentPlace, enabledFloors } = this.sdkData;
-    let floors = parentPlace?.innerFloors || [];
-    const generalConfig = this.sdkData?.generalConfig?.enabledFloors || [];
-    if (generalConfig.length > 0) {
-      floors = floors.filter((floor) => generalConfig.includes(floor.key));
-    }
+    const floors = this.getFloors();
     return x`
       <div class="floor-selector-container">
         ${floors.map((floor) => {
-      const isActive = floor.key === currentFloor?.key;
-      const isEnabled = enabledFloors?.some((f) => f.key === floor.key) || false;
+      const isActive = this.isFloorActive(floor);
+      const isEnabled = this.isFloorEnabled(floor);
       return x`
             <div class="floor-btn-container">
               <button
@@ -309,9 +500,9 @@ let FloorSelector = class extends i$2 {
         active: isActive,
         disabled: !isActive && !isEnabled
       })}
-                @click=${() => isEnabled ? this._selectFloor(floor.key) : null}
+                @click=${() => isEnabled ? this.selectFloor(floor.key) : null}
               >
-                <span>${floor.name}</span>
+                <span>${this.getFloorDisplayName(floor)}</span>
               </button>
             </div>
           `;
@@ -321,9 +512,6 @@ let FloorSelector = class extends i$2 {
   }
 };
 FloorSelector.styles = [r(style$2)];
-__decorateClass$2([
-  c({ context: sdkContext, subscribe: true })
-], FloorSelector.prototype, "sdkData", 2);
 FloorSelector = __decorateClass$2([
   t$1("floor-selector")
 ], FloorSelector);
@@ -3648,5 +3836,5 @@ const routeOptions = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProper
   get RouteOptions () { return RouteOptions; }
 }, Symbol.toStringTag, { value: 'Module' }));
 
-export { customMap as c, floorSelector as f, i$1 as i, qrModal as q, routeOptions as r, sdkContext as s };
-//# sourceMappingURL=components-BX-NvkMO.js.map
+export { BaseFloorSelector as B, customMap as c, e, floorSelector as f, i$1 as i, qrModal as q, routeOptions as r, sdkContext as s };
+//# sourceMappingURL=components-C542vOSv.js.map

package/dist/es/assets/map-view-with-modal-C-vcHaJc.js

@@ -0,0 +1,310 @@
+import { i, a as i$1, A as AnalyticsController, l as loadCustomMap, b as loadCompactFloorSelector, R as RollbarController, x, n, t } from './route-view-totems-z3hCCsGS.js';
+import { S as SDKController } from './utils-HInBaX5h.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _apiKey, _parentPlaceId, _locale, _placeId, _compactMode, _zoomButtonSize, _showFloorSelector, _floorSelectorPosition, _floorSelectorBorderColor, _floorSelectorBorderWidth, _floorSelectorDisabled, _zoomButtonBorderColor, _zoomButtonBorderWidth;
+let MapViewWithModal = class extends i {
+  constructor() {
+    super(...arguments);
+    this.styles = [
+      i$1`
+      :host {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+      i$1`
+      .map-container {
+        height: 100%;
+        width: 100%;
+      }
+    `,
+      i$1`
+      :host([compact-mode]) .map-container {
+        border-radius: 12px;
+        overflow: hidden;
+      }
+    `,
+      i$1`
+      :host([zoom-size='small']) ::slotted(*) {
+        --zoom-button-size: 32px;
+        --zoom-button-margin: 8px;
+      }
+    `,
+      i$1`
+      :host([zoom-size='normal']) ::slotted(*) {
+        --zoom-button-size: 40px;
+        --zoom-button-margin: 12px;
+      }
+    `,
+      i$1`
+      :host([zoom-size='large']) ::slotted(*) {
+        --zoom-button-size: 48px;
+        --zoom-button-margin: 16px;
+      }
+    `
+    ];
+    __privateAdd(this, _apiKey, "");
+    __privateAdd(this, _parentPlaceId, "");
+    __privateAdd(this, _locale, "es");
+    __privateAdd(this, _placeId, "");
+    __privateAdd(this, _compactMode, false);
+    __privateAdd(this, _zoomButtonSize, "normal");
+    __privateAdd(this, _showFloorSelector, true);
+    __privateAdd(this, _floorSelectorPosition, "top-left");
+    __privateAdd(this, _floorSelectorBorderColor, "#251660");
+    __privateAdd(this, _floorSelectorBorderWidth, 1);
+    __privateAdd(this, _floorSelectorDisabled, false);
+    __privateAdd(this, _zoomButtonBorderColor, "#251660");
+    __privateAdd(this, _zoomButtonBorderWidth, 1);
+    this.sdkController = new SDKController(this);
+    this.analyticsController = AnalyticsController.getInstance();
+    this.currentFloorId = "";
+  }
+  get apiKey() {
+    return __privateGet(this, _apiKey);
+  }
+  set apiKey(_) {
+    __privateSet(this, _apiKey, _);
+  }
+  get parentPlaceId() {
+    return __privateGet(this, _parentPlaceId);
+  }
+  set parentPlaceId(_) {
+    __privateSet(this, _parentPlaceId, _);
+  }
+  get locale() {
+    return __privateGet(this, _locale);
+  }
+  set locale(_) {
+    __privateSet(this, _locale, _);
+  }
+  get placeId() {
+    return __privateGet(this, _placeId);
+  }
+  set placeId(_) {
+    __privateSet(this, _placeId, _);
+  }
+  get compactMode() {
+    return __privateGet(this, _compactMode);
+  }
+  set compactMode(_) {
+    __privateSet(this, _compactMode, _);
+  }
+  get zoomButtonSize() {
+    return __privateGet(this, _zoomButtonSize);
+  }
+  set zoomButtonSize(_) {
+    __privateSet(this, _zoomButtonSize, _);
+  }
+  get showFloorSelector() {
+    return __privateGet(this, _showFloorSelector);
+  }
+  set showFloorSelector(_) {
+    __privateSet(this, _showFloorSelector, _);
+  }
+  get floorSelectorPosition() {
+    return __privateGet(this, _floorSelectorPosition);
+  }
+  set floorSelectorPosition(_) {
+    __privateSet(this, _floorSelectorPosition, _);
+  }
+  get floorSelectorBorderColor() {
+    return __privateGet(this, _floorSelectorBorderColor);
+  }
+  set floorSelectorBorderColor(_) {
+    __privateSet(this, _floorSelectorBorderColor, _);
+  }
+  get floorSelectorBorderWidth() {
+    return __privateGet(this, _floorSelectorBorderWidth);
+  }
+  set floorSelectorBorderWidth(_) {
+    __privateSet(this, _floorSelectorBorderWidth, _);
+  }
+  get floorSelectorDisabled() {
+    return __privateGet(this, _floorSelectorDisabled);
+  }
+  set floorSelectorDisabled(_) {
+    __privateSet(this, _floorSelectorDisabled, _);
+  }
+  get zoomButtonBorderColor() {
+    return __privateGet(this, _zoomButtonBorderColor);
+  }
+  set zoomButtonBorderColor(_) {
+    __privateSet(this, _zoomButtonBorderColor, _);
+  }
+  get zoomButtonBorderWidth() {
+    return __privateGet(this, _zoomButtonBorderWidth);
+  }
+  set zoomButtonBorderWidth(_) {
+    __privateSet(this, _zoomButtonBorderWidth, _);
+  }
+  async _loadComponents() {
+    await Promise.all([loadCustomMap(), loadCompactFloorSelector()]);
+  }
+  async firstUpdated() {
+    await this._loadComponents();
+    {
+      this.analyticsController.initialize("map-view-with-modal");
+      RollbarController.initialize("map-view-with-modal");
+    }
+  }
+  _mapReadyHandler() {
+    this.sdkController.setMapReady(true);
+    this.analyticsController.trackEvent("map_ready", this.baseParams());
+  }
+  _cameraInitializedHandler() {
+    this.sdkController.setCameraInitialized(true);
+    this.analyticsController.trackEvent("camera_initialized", this.baseParams());
+  }
+  _updateFloorHandler(event) {
+    const floorId = event.detail;
+    if (this.currentFloorId === floorId) {
+      return;
+    }
+    this.currentFloorId = floorId;
+    this.sdkController.setFloor(floorId);
+    const params = this.baseParams();
+    params["floor_id"] = floorId;
+    this.analyticsController.trackEvent("floor_change", params);
+  }
+  baseParams() {
+    return {
+      apiKey: this.apiKey,
+      locale: this.locale,
+      parentPlaceId: this.parentPlaceId,
+      placeId: this.placeId,
+      host: window.location.host,
+      pathname: window.location.pathname,
+      search: window.location.search,
+      hash: window.location.hash,
+      referrer: document.referrer,
+      userAgent: navigator.userAgent,
+      screenWidth: window.innerWidth
+    };
+  }
+  getFloorSelectorPositionStyles() {
+    const positions = {
+      "top-left": "top: 20px; left: 20px;",
+      "top-center": "top: 20px; left: 50%; transform: translateX(-50%);",
+      "top-right": "top: 20px; right: 20px;",
+      "center-left": "top: 50%; left: 20px; transform: translateY(-50%);",
+      "center-right": "top: 50%; right: 20px; transform: translateY(-50%);",
+      "bottom-left": "bottom: 20px; left: 20px;",
+      "bottom-center": "bottom: 20px; left: 50%; transform: translateX(-50%);",
+      "bottom-right": "bottom: 20px; right: 20px;"
+    };
+    return positions[this.floorSelectorPosition] || positions["top-left"];
+  }
+  updated(changedProperties) {
+    if (this.apiKey && this.locale && this.parentPlaceId && (changedProperties.has("apiKey") || changedProperties.has("locale") || changedProperties.has("parentPlaceId"))) {
+      this.sdkController.initialize(this.apiKey, this.locale, this.parentPlaceId);
+    }
+    if (this.placeId && changedProperties.has("placeId")) {
+      this.sdkController.setOriginAndDestination("", this.placeId);
+    }
+  }
+  render() {
+    return x`
+      <div class="route-container" style="height: 100%; width: 100%; position: relative;">
+        <custom-map
+          class="map-container"
+          ?compact-mode=${this.compactMode}
+          zoom-size=${this.zoomButtonSize}
+          zoom-border-color=${this.zoomButtonBorderColor}
+          zoom-border-width=${this.zoomButtonBorderWidth}
+          @mapReady=${this._mapReadyHandler}
+          @cameraInitialized=${this._cameraInitializedHandler}
+          @floorChange=${this._updateFloorHandler}
+        ></custom-map>
+
+        ${this.showFloorSelector ? x`
+              <!-- Compact floor selector -->
+              <div style="position: absolute; ${this.getFloorSelectorPositionStyles()} z-index: 1000;">
+                <compact-floor-selector
+                  @floorChange=${this._updateFloorHandler}
+                  border-color=${this.floorSelectorBorderColor}
+                  border-width=${this.floorSelectorBorderWidth}
+                  ?disabled=${this.floorSelectorDisabled}
+                ></compact-floor-selector>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+_apiKey = /* @__PURE__ */ new WeakMap();
+_parentPlaceId = /* @__PURE__ */ new WeakMap();
+_locale = /* @__PURE__ */ new WeakMap();
+_placeId = /* @__PURE__ */ new WeakMap();
+_compactMode = /* @__PURE__ */ new WeakMap();
+_zoomButtonSize = /* @__PURE__ */ new WeakMap();
+_showFloorSelector = /* @__PURE__ */ new WeakMap();
+_floorSelectorPosition = /* @__PURE__ */ new WeakMap();
+_floorSelectorBorderColor = /* @__PURE__ */ new WeakMap();
+_floorSelectorBorderWidth = /* @__PURE__ */ new WeakMap();
+_floorSelectorDisabled = /* @__PURE__ */ new WeakMap();
+_zoomButtonBorderColor = /* @__PURE__ */ new WeakMap();
+_zoomButtonBorderWidth = /* @__PURE__ */ new WeakMap();
+__decorateClass([
+  n({ type: String })
+], MapViewWithModal.prototype, "apiKey", 1);
+__decorateClass([
+  n({ type: String })
+], MapViewWithModal.prototype, "parentPlaceId", 1);
+__decorateClass([
+  n({ type: String })
+], MapViewWithModal.prototype, "locale", 1);
+__decorateClass([
+  n({ type: String })
+], MapViewWithModal.prototype, "placeId", 1);
+__decorateClass([
+  n({ type: Boolean })
+], MapViewWithModal.prototype, "compactMode", 1);
+__decorateClass([
+  n({ type: String })
+], MapViewWithModal.prototype, "zoomButtonSize", 1);
+__decorateClass([
+  n({ type: Boolean })
+], MapViewWithModal.prototype, "showFloorSelector", 1);
+__decorateClass([
+  n({ type: String })
+], MapViewWithModal.prototype, "floorSelectorPosition", 1);
+__decorateClass([
+  n({ type: String })
+], MapViewWithModal.prototype, "floorSelectorBorderColor", 1);
+__decorateClass([
+  n({ type: Number })
+], MapViewWithModal.prototype, "floorSelectorBorderWidth", 1);
+__decorateClass([
+  n({ type: Boolean })
+], MapViewWithModal.prototype, "floorSelectorDisabled", 1);
+__decorateClass([
+  n({ type: String })
+], MapViewWithModal.prototype, "zoomButtonBorderColor", 1);
+__decorateClass([
+  n({ type: Number })
+], MapViewWithModal.prototype, "zoomButtonBorderWidth", 1);
+MapViewWithModal = __decorateClass([
+  t("map-view-with-modal")
+], MapViewWithModal);
+
+export { MapViewWithModal as M };
+//# sourceMappingURL=map-view-with-modal-C-vcHaJc.js.map