@mapvx/web-components 0.0.20 → 0.0.22

package/dist/es/assets/compact-floor-selector-D-LPjNVW.js

@@ -0,0 +1,253 @@
+import { x, a as i, n, t } from './route-view-totems-Cu8sG0kp.js';
+import { B as BaseFloorSelector, e } from './components-BGe90NOX.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 _borderColor, _borderWidth;
+let CompactFloorSelector = class extends BaseFloorSelector {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _borderColor, "#251660");
+    __privateAdd(this, _borderWidth, 1);
+    this.isOpen = false;
+    this._handleClickOutside = (event) => {
+      if (this.isOpen && !this.shadowRoot?.contains(event.target)) {
+        this.isOpen = false;
+        this.requestUpdate();
+      }
+    };
+  }
+  get borderColor() {
+    return __privateGet(this, _borderColor);
+  }
+  set borderColor(_) {
+    __privateSet(this, _borderColor, _);
+  }
+  get borderWidth() {
+    return __privateGet(this, _borderWidth);
+  }
+  set borderWidth(_) {
+    __privateSet(this, _borderWidth, _);
+  }
+  _toggleDropdown(event) {
+    event.stopPropagation();
+    this.isOpen = !this.isOpen;
+    this.requestUpdate();
+  }
+  _selectFloor(floorKey) {
+    this.selectFloor(floorKey);
+    this.isOpen = false;
+    this.requestUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this._handleClickOutside);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._handleClickOutside);
+  }
+  render() {
+    if (!this.sdkData) {
+      return x`<div>No data</div>`;
+    }
+    const floors = this.getFloors();
+    const currentFloor = this.getCurrentFloor();
+    const currentFloorName = currentFloor ? this.getFloorDisplayName(currentFloor) : "Seleccionar piso";
+    return x`
+      <div class="floor-dropdown">
+        <button
+          class=${e({
+      "floor-button": true,
+      active: !!currentFloor,
+      open: this.isOpen
+    })}
+          style="border: ${this.borderWidth}px solid ${this.borderColor};"
+          @click=${this._toggleDropdown}
+        >
+          <span>${currentFloorName}</span>
+          <div class="dropdown-arrow"></div>
+        </button>
+
+        <div
+          class=${e({
+      "floor-list": true,
+      open: this.isOpen
+    })}
+        >
+          ${floors.map((floor) => {
+      const isActive = this.isFloorActive(floor);
+      return x`
+              <div
+                class=${e({
+        "floor-option": true,
+        active: isActive
+      })}
+                @click=${() => this._selectFloor(floor.key)}
+              >
+                ${this.getFloorDisplayName(floor)}
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+};
+_borderColor = new WeakMap();
+_borderWidth = new WeakMap();
+CompactFloorSelector.styles = [
+  i`
+      :host {
+        display: block;
+        position: relative;
+        z-index: 1000;
+      }
+
+      .floor-dropdown {
+        position: relative;
+        display: inline-block;
+      }
+
+      .floor-button {
+        background: #fff;
+        border-radius: 8px;
+        padding: 8px 12px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #251660;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 120px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: all 0.2s ease;
+      }
+
+      .floor-button:hover {
+        border-color: #007bff;
+        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
+      }
+
+      .floor-button.active {
+        background: #fff;
+        color: #251660;
+        border-color: #251660;
+      }
+
+      .floor-button.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .dropdown-arrow {
+        width: 0;
+        height: 0;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        border-top: 4px solid currentColor;
+        transition: transform 0.2s ease;
+      }
+
+      .floor-button.open .dropdown-arrow {
+        transform: rotate(180deg);
+      }
+
+      .floor-list {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #fff;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        max-height: 200px;
+        overflow-y: auto;
+        z-index: 1001;
+        margin-top: 4px;
+        display: none;
+      }
+
+      .floor-list.open {
+        display: block;
+      }
+
+      .floor-option {
+        padding: 8px 12px;
+        cursor: pointer;
+        border-bottom: 1px solid #f0f0f0;
+        transition: background-color 0.2s ease;
+        font-size: 14px;
+        color: #251660;
+      }
+
+      .floor-option:last-child {
+        border-bottom: none;
+      }
+
+      .floor-option:hover {
+        background-color: #f8f9fa;
+      }
+
+      .floor-option.active {
+        background-color: #f3e7ff;
+        color: #251660;
+      }
+
+      .floor-option.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .floor-option.disabled:hover {
+        background-color: transparent;
+      }
+
+      /* Mobile styles */
+      @media (max-width: 768px) {
+        .floor-button {
+          font-size: 12px;
+          padding: 6px 10px;
+          min-width: 100px;
+        }
+
+        .floor-option {
+          font-size: 12px;
+          padding: 6px 10px;
+        }
+
+        .floor-list {
+          max-height: 150px;
+        }
+      }
+    `
+];
+__decorateClass([
+  n({ type: String })
+], CompactFloorSelector.prototype, "borderColor", 1);
+__decorateClass([
+  n({ type: Number })
+], CompactFloorSelector.prototype, "borderWidth", 1);
+CompactFloorSelector = __decorateClass([
+  t("compact-floor-selector")
+], CompactFloorSelector);
+
+export { CompactFloorSelector };
+//# sourceMappingURL=compact-floor-selector-D-LPjNVW.js.map

package/dist/es/assets/{components-y75xh-dL.js → components-BGe90NOX.js}

@@ -1,5 +1,5 @@
-import { i as i$2, x, r, t as t$1, T } from './route-view-totems-C8X6pCW7.js';
-import { R as RouteAnimationController, M as MarkerController } from './utils-C2SiQIHC.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{width:100vw;height:100vh}.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{max-height:100px;align-self:center}.maplibregl-marker:has(.popup){z-index:10}.maplibregl-marker:not(:has(.popup)){z-index:5}";
+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])
@@ -100,13 +100,24 @@ let CustomMap = class extends i$2 {
   async firstUpdated() {
     if (this.shadowRoot) {
       const style2 = document.createElement("style");
-      style2.textContent = (await import('./maplibre-gl-KgJ_zm92.js')).default;
+      style2.textContent = (await import('./maplibre-gl-BKzNcqp_.js')).default;
       this.shadowRoot.appendChild(style2);
     }
   }
   async updated() {
+    this.updateAttributes();
     if (!this.sdkData?.sdk) return;
-    const { sdk, parentPlace, locale, generalConfig, currentFloor, markers, route, isRouteAnimating } = this.sdkData;
+    const {
+      sdk,
+      parentPlace,
+      locale,
+      generalConfig,
+      currentFloor,
+      markers,
+      route,
+      isRouteAnimating,
+      cameraInitialized
+    } = this.sdkData;
     if (!this.lzMap && sdk && parentPlace && locale && this.shadowRoot && generalConfig) {
       this.routeAnimationController.setParentPlace(parentPlace);
       this.routeAnimationController.setLocale(locale);
@@ -150,9 +161,7 @@ let CustomMap = class extends i$2 {
     if (currentFloor && currentFloor.key !== this._currentMapFloor && this.mapReady) {
       this.setCurrentMapFloor(currentFloor.key);
     }
-    if (markers.some(
-      (marker) => !this.markerController.getMarkersIds().includes(marker.id) || markers.length !== this.markerController.getMarkersIds().length
-    )) {
+    if (markers.some((marker) => !this.markerController.getMarkersIds().includes(marker.id)) || markers.length !== this.markerController.getMarkersIds().length) {
       if (this.mapReady) {
         this.updateMarkers();
       } else {
@@ -162,7 +171,7 @@ let CustomMap = class extends i$2 {
     if (this.pendingUpdateMarkers && this.mapReady) {
       this.updateMarkers();
     }
-    if (this.pendingUpdateCamera && this.sdkData?.destination) {
+    if ((this.pendingUpdateCamera || !cameraInitialized && this.mapReady) && this.sdkData?.destination) {
       this._initializeCamera();
       this.pendingUpdateCamera = false;
     }
@@ -192,8 +201,20 @@ let CustomMap = class extends i$2 {
       bearing: this.config?.mapRotations?.[origin?.lazarilloId ?? ""]?.angle ?? 0,
       animate: false,
       pitch: this.config?.pitch ?? 0,
-      center
+      center,
+      zoom: this.config?.initialZoom ?? 17
     });
+    const floor = destination?.inFloors?.[0];
+    if (floor) {
+      this.lzMap?.updateFloor(floor);
+    }
+    this.dispatchEvent(
+      new CustomEvent("cameraInitialized", {
+        detail: {},
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   setCurrentMapFloor(floorId) {
     if (this._currentMapFloor === floorId || !this.lzMap) return;
@@ -208,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"}">
@@ -218,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);
 
@@ -244,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 24px;gap:8px;min-height:60px}.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){width:100%;height:100%;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:16px;padding:0 18px;border-radius:0 0 30px 30px;cursor:pointer;transition:all .2s ease;min-width:70px;height:100%;display:flex;align-items:center;justify-content:center;color:#000;z-index:1}.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}.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,
@@ -266,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
@@ -289,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>
           `;
@@ -301,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);
@@ -3386,7 +3540,7 @@ var browserExports = requireBrowser();
 
 const deviceIcon = "<svg width=\"63\" height=\"63\" viewBox=\"0 0 63 63\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_15_10760)\">\n<path d=\"M32.8125 55.125H21C19.6076 55.125 18.2723 54.5719 17.2877 53.5873C16.3031 52.6027 15.75 51.2674 15.75 49.875V13.125C15.75 11.7326 16.3031 10.3973 17.2877 9.41269C18.2723 8.42812 19.6076 7.875 21 7.875H42C43.3924 7.875 44.7277 8.42812 45.7123 9.41269C46.6969 10.3973 47.25 11.7326 47.25 13.125V28.875\" stroke=\"#DAEBF2\" stroke-width=\"5.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M28.8758 10.4992H34.1258\" stroke=\"#DAEBF2\" stroke-width=\"5.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M55.4418 52.8193C56.5434 51.7181 57.2937 50.3149 57.5977 48.7872C57.9018 47.2595 57.746 45.676 57.15 44.2369C56.554 42.7978 55.5447 41.5678 54.2496 40.7023C52.9545 39.8369 51.4318 39.375 49.8742 39.375C48.3166 39.375 46.7939 39.8369 45.4988 40.7023C44.2038 41.5678 43.1944 42.7978 42.5984 44.2369C42.0025 45.676 41.8466 47.2595 42.1507 48.7872C42.4548 50.3149 43.205 51.7181 44.3066 52.8193C45.4038 53.9192 47.2597 55.5624 49.8742 57.7517C52.6331 55.4154 54.4916 53.7722 55.4418 52.8193Z\" stroke=\"#DAEBF2\" stroke-width=\"5.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M49.8742 47.25V47.2757\" stroke=\"#DAEBF2\" stroke-width=\"5.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M31.5 44.6258V44.6515\" stroke=\"#DAEBF2\" stroke-width=\"5.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_15_10760\">\n<rect width=\"63\" height=\"63\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n";
 
-const style$1 = ":host{display:block;height:100%;width:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.card{margin-top:15px;background:#11032b;color:#fff;border-radius:24px;z-index:10;width:29.79vw;min-width:415px}.modal-content{display:flex;flex-direction:row;align-items:center;gap:16px;padding:16px}.pin-container{display:flex;align-items:center;gap:8px}.qr-text{margin:0;font-size:16px;font-weight:600;font-family:Poppins}.qr-code{display:flex;justify-content:center;align-items:center}.qr-code img{height:auto}";
+const style$1 = ":host{display:block;height:100%;width:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.card{margin-top:15px;background:#11032b;color:#fff;border-radius:24px;z-index:10;width:29.79vw;min-width:415px}.card.hidden{display:none}.modal-content{display:flex;flex-direction:row;align-items:center;gap:16px;padding:16px}.pin-container{display:flex;align-items:center;gap:8px}.qr-text{margin:0;font-size:1rem;font-weight:600;font-family:Poppins}.qr-code{display:flex;justify-content:center;align-items:center}.qr-code img{height:auto}.qr-container{background:#fff;padding:4px}";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -3424,8 +3578,9 @@ let QRModal = class extends i$2 {
     }
   }
   render() {
+    const { cameraInitialized } = this.sdkData ?? {};
     return x`
-      <div class="card">
+      <div class=${e({ card: true, hidden: !cameraInitialized })}>
         <div class="modal-content">
           <div class="pin-container">
             <span .innerHTML=${deviceIcon}></span>
@@ -3433,7 +3588,7 @@ let QRModal = class extends i$2 {
           <div class="qr-text">
             <span>Continúa la ruta en tu celular, escaneando el código QR</span>
           </div>
-          <div class="qr-code">
+          <div class="qr-code qr-container">
             <img id="qr" src="" alt="QR Code" />
           </div>
         </div>
@@ -3454,7 +3609,7 @@ const qrModal = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   get QRModal () { return QRModal; }
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const style = ":host{position:absolute;top:0;left:0;padding:1rem;z-index:10;font-family:Poppins!important;user-select:none}svg{vertical-align:middle}.back-panel{background-color:#11032b;color:#fff;margin-bottom:5px;padding-left:1.2rem;align-items:center;height:55px;position:relative}.back-content{margin:0;position:relative;top:50%;transform:translateY(-50%);font-size:22px;color:#fff;display:flex;align-items:center;gap:8px;cursor:pointer}.route-panel{width:29.79vw;min-width:415px;max-height:75vh;overflow-y:auto;overflow-x:hidden;border-radius:24px;background:#fff;box-shadow:0 0 24px #00000026}.back-text{font-size:18pt;font-weight:600}.back-content img{vertical-align:middle}.route-modal{padding:19px 13px 22px 32px}.icon_switcher_user_type{position:relative;color:#000}.d-flex{display:flex!important}.flex-fill{flex:1 1 auto!important}.place-name{font-weight:700;font-size:32px;line-height:1;letter-spacing:-1.6px;color:#333;margin-left:2px}.repeat-route-btn{display:flex;gap:10px;justify-content:center;align-items:center;text-align:center;background-color:#fff;border:2px solid #000000;border-radius:999px;margin-left:auto;margin-right:0;padding:12px 20px;font-size:20px;font-weight:700;line-height:20px;letter-spacing:-1px;color:#000;transition:background-color .3s ease,color .3s ease;cursor:pointer}.repeat-route-btn[disabled]{color:gray;border-color:gray;cursor:not-allowed;pointer-events:none}.floor-name{color:#427553}.floor-specs{font-family:Poppins;font-weight:600;line-height:14px;size:18px}.route-distance{color:#666}.container-controls{margin-top:16px;align-items:end;gap:11px}.c-route-input{color:#000;display:flex;padding:15px;font-size:16px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:-.8px;align-items:center;gap:9px;border-radius:30px;background:#fff;box-shadow:0 0 10px #0000001a;position:relative;margin-top:12px}.c-route-input .c-route-input-icon svg{width:22px;height:22px}.c-route-input-from{margin-top:0}.c-route-input-from:after{content:\"\";position:absolute;bottom:-50%;left:24px;width:3.998px;height:34.5px;z-index:1;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='38' viewBox='0 0 4 38' fill='none'%3E%3Cpath d='M-0.00028944 18.9386C-0.00028944 17.8347 0.894666 16.9397 1.99864 16.9397C3.10259 16.9397 3.99756 17.8347 3.99756 18.9386C3.99756 20.0426 3.10259 20.9375 1.99864 20.9375C0.894666 20.9375 -0.00028944 20.0426 -0.00028944 18.9386ZM-0.00028944 27.2198C-0.00028944 26.1159 0.894666 25.2209 1.99864 25.2209C3.10259 25.2209 3.99756 26.1159 3.99756 27.2198C3.99756 28.3238 3.10259 29.2188 1.99864 29.2188C0.894666 29.2188 -0.00028944 28.3238 -0.00028944 27.2198ZM-0.00028944 35.5011C-0.00028944 34.3971 0.894666 33.5021 1.99864 33.5021C3.10259 33.5021 3.99756 34.3971 3.99756 35.5011C3.99756 36.605 3.10259 37.5 1.99864 37.5C0.894666 37.5 -0.00028944 36.605 -0.00028944 35.5011Z' fill='%23D0D0D0'/%3E%3Cpath d='M1.99864 8.49999C0.894666 8.49999 -0.00028944 9.39496 -0.00028944 10.4989C-0.00028944 11.6029 0.894666 12.4978 1.99864 12.4978C3.10259 12.4978 3.99756 11.6029 3.99756 10.4989C3.99756 9.39496 3.10259 8.49999 1.99864 8.49999Z' fill='%23D0D0D0'/%3E%3Cpath d='M1.99864 0C0.894666 0 -0.00028944 0.894973 -0.00028944 1.99892C-0.00028944 3.10289 0.894666 3.99784 1.99864 3.99784C3.10259 3.99784 3.99756 3.10289 3.99756 1.99892C3.99756 0.894973 3.10259 0 1.99864 0Z' fill='%23D0D0D0'/%3E%3C/svg%3E\")}.c-route-input span{padding:0 6px;border-radius:15px;color:#454545;background:#f2f2f2;font-size:10px;font-style:normal;font-weight:600;line-height:14px;letter-spacing:-.5px}.accessibility-switch{display:flex;align-items:center;justify-content:center;min-width:100px;height:50px;border-radius:48px;background-color:#fff;box-shadow:0 0 15px #0003;position:relative}.accessibility-switch:before,.accessibility-switch:after{content:\"\";border-radius:50%;width:50%;height:100%;background:#000;position:absolute;bottom:0;left:0;background:linear-gradient(45.8deg,#f5a 10.03%,#b850c9 25.23%,#6572d6 48.67%,#4eaeb8 72.74%);z-index:0;transition:transform .5s ease}.accessibility-switch:after{background:#000;clip-path:circle(22px);z-index:1}.accessibility-switch.accessible:before,.accessibility-switch.accessible:after{transform:translate(100%)}.accessibility-switch-icon{width:50px;height:100%;display:grid;place-items:center;cursor:pointer;z-index:2;transition:color .5s ease;color:#000}.accessibility-switch-icon.active{color:#fff}.generate-route-btn{border-style:solid;width:100%;border-radius:30px;height:58px;background-color:#11032b;cursor:pointer}.generate-route-btn span{font-family:Poppins;font-size:16px;line-height:16px;font-weight:600;text-align:center;color:#fff}.generate-route-container{width:100%}.mt-3{margin-top:1rem!important}.align-items-center{align-items:center!important}.justify-content-center{justify-content:center!important}";
+const style = ":host{position:absolute;top:0;left:0;padding:1rem;z-index:10;font-family:Poppins!important;user-select:none}svg{vertical-align:middle}.back-panel{background-color:#11032b;color:#fff;margin-bottom:5px;padding-left:1.2rem;align-items:center;height:55px;position:relative}.back-content{margin:0;position:relative;top:50%;transform:translateY(-50%);font-size:22px;color:#fff;display:flex;align-items:center;gap:8px;cursor:pointer}.route-panel{width:29.79vw;min-width:415px;max-height:75vh;overflow-y:auto;overflow-x:hidden;border-radius:24px;background:#fff;box-shadow:0 0 24px #00000026}.back-text{font-size:24px;font-weight:600}.back-content img{vertical-align:middle}.route-modal{padding:19px 13px 22px 32px}.icon_switcher_user_type{position:relative;color:#000}.d-flex{display:flex!important}.flex-fill{flex:1 1 auto!important}.place-name{font-weight:700;font-size:32px;line-height:1;letter-spacing:-1.6px;color:#333;margin-left:2px}.repeat-route-btn{display:flex;gap:10px;justify-content:center;align-items:center;text-align:center;background-color:#fff;border:2px solid #000000;border-radius:999px;margin-left:auto;margin-right:0;padding:12px 20px;font-size:20px;font-weight:700;line-height:20px;letter-spacing:-1px;color:#000;transition:background-color .3s ease,color .3s ease;cursor:pointer}.repeat-route-btn[disabled]{color:gray;border-color:gray;cursor:not-allowed;pointer-events:none}.floor-name{font-size:1rem;color:#427553}.floor-specs{font-family:Poppins;font-weight:600;line-height:14px;size:18px}.route-distance{color:#666}.container-controls{margin-top:16px;align-items:end;gap:11px}.c-route-input{color:#000;display:flex;padding:15px;font-size:16px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:-.8px;align-items:center;gap:9px;border-radius:30px;background:#fff;box-shadow:0 0 10px #0000001a;position:relative;margin-top:12px}.c-route-input .c-route-input-icon svg{width:22px;height:22px}.c-route-input-from{margin-top:0}.c-route-input-from:after{content:\"\";position:absolute;bottom:-50%;left:24px;width:3.998px;height:34.5px;z-index:1;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='38' viewBox='0 0 4 38' fill='none'%3E%3Cpath d='M-0.00028944 18.9386C-0.00028944 17.8347 0.894666 16.9397 1.99864 16.9397C3.10259 16.9397 3.99756 17.8347 3.99756 18.9386C3.99756 20.0426 3.10259 20.9375 1.99864 20.9375C0.894666 20.9375 -0.00028944 20.0426 -0.00028944 18.9386ZM-0.00028944 27.2198C-0.00028944 26.1159 0.894666 25.2209 1.99864 25.2209C3.10259 25.2209 3.99756 26.1159 3.99756 27.2198C3.99756 28.3238 3.10259 29.2188 1.99864 29.2188C0.894666 29.2188 -0.00028944 28.3238 -0.00028944 27.2198ZM-0.00028944 35.5011C-0.00028944 34.3971 0.894666 33.5021 1.99864 33.5021C3.10259 33.5021 3.99756 34.3971 3.99756 35.5011C3.99756 36.605 3.10259 37.5 1.99864 37.5C0.894666 37.5 -0.00028944 36.605 -0.00028944 35.5011Z' fill='%23D0D0D0'/%3E%3Cpath d='M1.99864 8.49999C0.894666 8.49999 -0.00028944 9.39496 -0.00028944 10.4989C-0.00028944 11.6029 0.894666 12.4978 1.99864 12.4978C3.10259 12.4978 3.99756 11.6029 3.99756 10.4989C3.99756 9.39496 3.10259 8.49999 1.99864 8.49999Z' fill='%23D0D0D0'/%3E%3Cpath d='M1.99864 0C0.894666 0 -0.00028944 0.894973 -0.00028944 1.99892C-0.00028944 3.10289 0.894666 3.99784 1.99864 3.99784C3.10259 3.99784 3.99756 3.10289 3.99756 1.99892C3.99756 0.894973 3.10259 0 1.99864 0Z' fill='%23D0D0D0'/%3E%3C/svg%3E\")}.c-route-input span{padding:0 6px;border-radius:15px;color:#454545;background:#f2f2f2;font-size:10px;font-style:normal;font-weight:600;line-height:14px;letter-spacing:-.5px}.accessibility-switch{display:flex;align-items:center;justify-content:center;min-width:100px;height:50px;border-radius:48px;background-color:#fff;box-shadow:0 0 15px #0003;position:relative}.accessibility-switch:before,.accessibility-switch:after{content:\"\";border-radius:50%;width:50%;height:100%;background:#000;position:absolute;bottom:0;left:0;background:linear-gradient(45.8deg,#f5a 10.03%,#b850c9 25.23%,#6572d6 48.67%,#4eaeb8 72.74%);z-index:0;transition:transform .5s ease}.accessibility-switch:after{background:#000;clip-path:circle(22px);z-index:1}.accessibility-switch.accessible:before,.accessibility-switch.accessible:after{transform:translate(100%)}.accessibility-switch-icon{width:50px;height:100%;display:grid;place-items:center;cursor:pointer;z-index:2;transition:color .5s ease;color:#000}.accessibility-switch-icon.active{color:#fff}.generate-route-btn{border-style:solid;width:100%;border-radius:30px;height:58px;background-color:#11032b;cursor:pointer}.generate-route-btn span{font-family:Poppins;font-size:1rem;line-height:16px;font-weight:600;text-align:center;color:#fff}.generate-route-container{width:100%}.mt-3{margin-top:1rem!important}.align-items-center{align-items:center!important}.justify-content-center{justify-content:center!important}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -3469,7 +3624,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const loadAssets = async () => {
   const [accessibilityIcon, backIcon, destinationPoint, originPoint, repeatIcon, walkingIcon] = await Promise.all([
     import('./accessibility-Cnj-vwGM.js'),
-    import('./back_arrow-CUOAm8Zc.js'),
+    import('./back_arrow-B4vxoqtW.js'),
     import('./icon-destination-point-DY-ha1KN.js'),
     import('./icon-origin-point-v4_9Pmls.js'),
     import('./repeat_icon-CY61-fSZ.js'),
@@ -3506,7 +3661,7 @@ let RouteOptions = class extends i$2 {
   handleAccessibility() {
     this.dispatchEvent(
       new CustomEvent("accessibilityChange", {
-        detail: !!this.sdkData?.accessibleRoute,
+        detail: !this.sdkData?.accessibleRoute,
         bubbles: true,
         composed: true
       })
@@ -3627,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-y75xh-dL.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