@mapvx/web-components 0.0.21 → 0.0.22

package/dist/es/assets/{components-BX-NvkMO.js → components-BGe90NOX.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, t as t$1, T } from './route-view-totems-Cu8sG0kp.js';
+import { R as RouteAnimationController, M as MarkerController } from './utils-4sQ3ZnpP.js';
 
 /**
  * @license
@@ -42,11 +42,11 @@ 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 __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])
@@ -105,6 +105,7 @@ let CustomMap = class extends i$2 {
     }
   }
   async updated() {
+    this.updateAttributes();
     if (!this.sdkData?.sdk) return;
     const {
       sdk,
@@ -228,6 +229,22 @@ 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);
+    }
+  }
   render() {
     return x`<div id="map"></div>
       <div id="modal" style="display: ${this.modalData ? "flex" : "none"}">
@@ -238,11 +255,97 @@ let CustomMap = class extends i$2 {
       </div>`;
   }
 };
-CustomMap.styles = [r(style$3)];
-__decorateClass$3([
+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;
+      }
+    `
+];
+__decorateClass$4([
   c({ context: sdkContext, subscribe: true })
 ], CustomMap.prototype, "sdkData", 2);
-CustomMap = __decorateClass$3([
+CustomMap = __decorateClass$4([
   t$1("custom-map")
 ], CustomMap);
 
@@ -264,20 +367,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 +409,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 +446,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 +458,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 +3782,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-BGe90NOX.js.map

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

@@ -0,0 +1,274 @@
+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-Cu8sG0kp.js';
+import { S as SDKController } from './utils-4sQ3ZnpP.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;
+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);
+    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, _);
+  }
+  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}
+          @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}
+                ></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();
+__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);
+MapViewWithModal = __decorateClass([
+  t("map-view-with-modal")
+], MapViewWithModal);
+
+export { MapViewWithModal as M };
+//# sourceMappingURL=map-view-with-modal-CwE9e04X.js.map

package/dist/es/assets/{route-view-totems-DXCPYztz.js → route-view-totems-Cu8sG0kp.js}

@@ -1,4 +1,4 @@
-import { S as SDKController } from './utils-FyhZTuD9.js';
+import { S as SDKController } from './utils-4sQ3ZnpP.js';
 
 /**
  * @license
@@ -184,10 +184,11 @@ class AnalyticsController {
   }
 }
 
-const loadCustomMap = () => import('./components-BX-NvkMO.js').then(n => n.c);
-const loadFloorSelector = () => import('./components-BX-NvkMO.js').then(n => n.f);
-const loadQrModal = () => import('./components-BX-NvkMO.js').then(n => n.q);
-const loadRouteOptions = () => import('./components-BX-NvkMO.js').then(n => n.r);
+const loadCustomMap = () => import('./components-BGe90NOX.js').then(n => n.c);
+const loadFloorSelector = () => import('./components-BGe90NOX.js').then(n => n.f);
+const loadCompactFloorSelector = () => import('./compact-floor-selector-D-LPjNVW.js');
+const loadQrModal = () => import('./components-BGe90NOX.js').then(n => n.q);
+const loadRouteOptions = () => import('./components-BGe90NOX.js').then(n => n.r);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -411,5 +412,5 @@ RouteViewTotems = __decorateClass([
   t("route-view-totems")
 ], RouteViewTotems);
 
-export { AnalyticsController as A, RollbarController as R, T, i$3 as a, RouteViewTotems as b, i, loadCustomMap as l, n, r$3 as r, t, x };
-//# sourceMappingURL=route-view-totems-DXCPYztz.js.map
+export { AnalyticsController as A, RollbarController as R, T, i$3 as a, loadCompactFloorSelector as b, RouteViewTotems as c, i, loadCustomMap as l, n, r$3 as r, t, x };
+//# sourceMappingURL=route-view-totems-Cu8sG0kp.js.map

package/dist/es/assets/{utils-FyhZTuD9.js → utils-4sQ3ZnpP.js}

@@ -1,5 +1,5 @@
-import { i, s as sdkContext } from './components-BX-NvkMO.js';
-import { R as RollbarController } from './route-view-totems-DXCPYztz.js';
+import { i, s as sdkContext } from './components-BGe90NOX.js';
+import { R as RollbarController } from './route-view-totems-Cu8sG0kp.js';
 
 var dist = {exports: {}};
 
@@ -12548,8 +12548,11 @@ class SDKController {
     this.loadRoute(originId, destinationId, !!accessibleRoute);
   }
   setFloor(floorId) {
-    const { parentPlace } = this.contextProvider.value;
+    const { parentPlace, currentFloor } = this.contextProvider.value;
     if (!parentPlace) return;
+    if (currentFloor?.key === floorId) {
+      return;
+    }
     const floor = parentPlace.innerFloors.find((floor2) => floor2.key === floorId);
     if (!floor) return;
     this.contextProvider.setValue({
@@ -12593,7 +12596,7 @@ class SDKController {
   }
 }
 
-const popupCSS = "@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.popup{background:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.2));padding:15px;border-radius:10px;border:1px solid #cccccc;min-width:180px;position:relative;transform:translateY(-50%)}.popup:after{content:\"\";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid white;z-index:1}.popup:before{content:\"\";position:absolute;bottom:-11px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #cccccc;z-index:0}.popup-content{display:flex;flex-direction:column;gap:4px}.popup-logo{width:100%;object-fit:contain;object-position:center;height:60px;overflow:hidden;align-self:center;max-width:100%}.popup-name{position:relative;color:#000;text-align:center;letter-spacing:-1.1719905853px;margin-top:10px;max-width:250px;font:700 23px/23px Poppins,-apple-system,Roboto,Helvetica,sans-serif}.popup-category{color:#555;position:relative;color:#000;text-align:center;letter-spacing:-.5859952927px;white-space:nowrap;margin:5px 0 20px;font:400 12px/14px Poppins,-apple-system,Roboto,Helvetica,sans-serif}@media (max-width: 991px){.popup-category{margin-bottom:40px;white-space:initial}}";
+const popupCSS = "@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.popup{background:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.2));padding:15px;border-radius:10px;border:1px solid #cccccc;min-width:180px;position:relative;transform:translateY(-50%)}@media (max-width: 768px){.popup{padding:8px 0;min-width:160px;border-radius:8px}}.popup:after{content:\"\";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid white;z-index:1}.popup:before{content:\"\";position:absolute;bottom:-11px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #cccccc;z-index:0}.popup-content{display:flex;flex-direction:column;gap:4px}.popup-logo{width:100%;object-fit:contain;object-position:center;height:60px;overflow:hidden;align-self:center;max-width:250px;max-height:100px}@media (max-width: 768px){.popup-logo{max-height:40px;max-width:120px}}.popup-name{position:relative;color:#000;text-align:center;letter-spacing:-1.1719905853px;margin-top:10px;max-width:250px;font:700 23px/23px Poppins,-apple-system,Roboto,Helvetica,sans-serif}@media (max-width: 768px){.popup-name{font-size:18px;line-height:18px;margin-top:6px;max-width:200px}}.popup-category{color:#555;position:relative;color:#000;text-align:center;letter-spacing:-.5859952927px;white-space:nowrap;margin:5px 0 20px;font:400 12px/14px Poppins,-apple-system,Roboto,Helvetica,sans-serif}@media (max-width: 991px){.popup-category{margin-bottom:40px;white-space:initial}}@media (max-width: 768px){.popup-category{margin-bottom:10px;white-space:initial;font-size:11px;line-height:13px}}";
 
 class PopupFactory {
   static create(data) {
@@ -12747,7 +12750,7 @@ class MarkerController {
     });
     this.map?.setPlacesAsSelected(
       this.markersIds.map((m) => m.id),
-      "#3146bc"
+      "#3A0D7F"
     );
     const currentFloor = this.map?.getCurrentFloor();
     const coordinates = this.markersIds.filter((m) => m.floorId === currentFloor).map((m) => m.coordinate);
@@ -12947,4 +12950,4 @@ class RouteAnimationController {
 }
 
 export { MarkerController as M, RouteAnimationController as R, SDKController as S };
-//# sourceMappingURL=utils-FyhZTuD9.js.map
+//# sourceMappingURL=utils-4sQ3ZnpP.js.map

package/dist/es/index.js

@@ -1,3 +1,3 @@
-export { b as RouteViewTotems } from './assets/route-view-totems-DXCPYztz.js';
-export { M as MapViewWithModal } from './assets/map-view-with-modal-Dpg6IjBv.js';
+export { c as RouteViewTotems } from './assets/route-view-totems-Cu8sG0kp.js';
+export { M as MapViewWithModal } from './assets/map-view-with-modal-CwE9e04X.js';
 //# sourceMappingURL=index.js.map

package/dist/es/route-view-totems.js

@@ -1,3 +1,3 @@
-export { b as RouteViewTotems } from './assets/route-view-totems-DXCPYztz.js';
-import './assets/utils-FyhZTuD9.js';
+export { c as RouteViewTotems } from './assets/route-view-totems-Cu8sG0kp.js';
+import './assets/utils-4sQ3ZnpP.js';
 //# sourceMappingURL=route-view-totems.js.map