@mapvx/web-components 0.0.23 → 0.0.25

package/dist/es/assets/{map-view-with-modal-C-vcHaJc.js → map-view-with-modal-SkmapEWH.js}

@@ -1,5 +1,5 @@
-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';
+import { i, n, a as i$1, A as AnalyticsController, l as loadCustomMap, b as loadCompactFloorSelector, R as RollbarController, x, t } from './route-view-totems-eQTxU-id.js';
+import { S as SDKController } from './utils-CWtvoL4a.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -18,49 +18,10 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 {
+var _apiKey, _parentPlaceId, _locale, _placeId, _compactMode, _zoomButtonSize, _showFloorSelector, _floorSelectorPosition, _floorSelectorDisabled;
+let MapViewWithModal = class extends i$1 {
   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");
@@ -69,11 +30,7 @@ let MapViewWithModal = class extends i {
     __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 = "";
@@ -126,36 +83,12 @@ let MapViewWithModal = class extends i {
   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()]);
   }
@@ -228,8 +161,16 @@ let MapViewWithModal = class extends i {
           class="map-container"
           ?compact-mode=${this.compactMode}
           zoom-size=${this.zoomButtonSize}
-          zoom-border-color=${this.zoomButtonBorderColor}
-          zoom-border-width=${this.zoomButtonBorderWidth}
+          style="
+            /* Forward theme to custom-map */
+            --zoom-border-color: var(--mvx-zoom-border-color, var(--mvx-border-color));
+            --zoom-border-width: var(--mvx-zoom-border-width, var(--mvx-border-width));
+            --zoom-shadow: var(--mvx-zoom-shadow, var(--mvx-shadow));
+            --zoom-divider-color: var(--mvx-zoom-divider-color, var(--mvx-zoom-border-color, var(--mvx-border-color)));
+            --zoom-divider-width: var(--mvx-zoom-divider-width, var(--mvx-zoom-border-width, var(--mvx-border-width)));
+            --zoom-icon-size: var(--mvx-zoom-icon-size, 18px);
+            --zoom-icon-color: var(--mvx-zoom-icon-color, var(--mvx-primary-color));
+          "
           @mapReady=${this._mapReadyHandler}
           @cameraInitialized=${this._cameraInitializedHandler}
           @floorChange=${this._updateFloorHandler}
@@ -240,9 +181,21 @@ let MapViewWithModal = class extends i {
               <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}
+                  style="
+                    /* Forward theme to floor selector */
+                    --floor-selector-surface: var(--mvx-surface-color);
+                    --floor-selector-color: var(--mvx-on-surface-color);
+                    --floor-selector-border-color: var(--mvx-floor-selector-border-color, var(--mvx-border-color));
+                    --floor-selector-border-width: var(--mvx-floor-selector-border-width, var(--mvx-border-width));
+                    --floor-selector-radius: var(--mvx-radius);
+                    --floor-selector-shadow: var(--mvx-floor-selector-shadow, var(--mvx-shadow));
+                    --floor-selector-hover-accent: var(--mvx-primary-color);
+                    --floor-selector-active-bg: #f3e7ff;
+                    --floor-selector-font-family: var(--mvx-font-family);
+                    --floor-selector-font-size: var(--mvx-floor-selector-font-size, 14px);
+                    --floor-selector-font-weight: var(--mvx-floor-selector-font-weight, 500);
+                  "
                 ></compact-floor-selector>
               </div>
             ` : ""}
@@ -258,11 +211,42 @@ _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();
+MapViewWithModal.styles = [
+  i`
+      :host {
+        display: block;
+        height: 100%;
+        width: 100%;
+
+        /* THEME: Base colors */
+        --mvx-primary-color: #251660;
+        --mvx-surface-color: #ffffff;
+        --mvx-on-surface-color: #251660;
+
+        /* THEME: Border and elevation */
+        --mvx-border-color: var(--mvx-primary-color);
+        --mvx-border-width: 1px;
+        --mvx-radius: 8px;
+        --mvx-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+        /* THEME: Typography */
+        --mvx-font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+      }
+    `,
+  i`
+      .map-container {
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  i`
+      :host([compact-mode]) .map-container {
+        border-radius: 12px;
+        overflow: hidden;
+      }
+    `
+];
 __decorateClass([
   n({ type: String })
 ], MapViewWithModal.prototype, "apiKey", 1);
@@ -276,10 +260,10 @@ __decorateClass([
   n({ type: String })
 ], MapViewWithModal.prototype, "placeId", 1);
 __decorateClass([
-  n({ type: Boolean })
+  n({ type: Boolean, attribute: "compact-mode", reflect: true })
 ], MapViewWithModal.prototype, "compactMode", 1);
 __decorateClass([
-  n({ type: String })
+  n({ type: String, attribute: "zoom-size", reflect: true })
 ], MapViewWithModal.prototype, "zoomButtonSize", 1);
 __decorateClass([
   n({ type: Boolean })
@@ -287,24 +271,12 @@ __decorateClass([
 __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
+//# sourceMappingURL=map-view-with-modal-SkmapEWH.js.map

package/dist/es/assets/{route-view-totems-z3hCCsGS.js → route-view-totems-eQTxU-id.js}

@@ -1,4 +1,4 @@
-import { S as SDKController } from './utils-HInBaX5h.js';
+import { S as SDKController } from './utils-CWtvoL4a.js';
 
 /**
  * @license
@@ -184,11 +184,11 @@ class AnalyticsController {
   }
 }
 
-const loadCustomMap = () => import('./components-C542vOSv.js').then(n => n.c);
-const loadFloorSelector = () => import('./components-C542vOSv.js').then(n => n.f);
-const loadCompactFloorSelector = () => import('./compact-floor-selector-BLLR7mXQ.js');
-const loadQrModal = () => import('./components-C542vOSv.js').then(n => n.q);
-const loadRouteOptions = () => import('./components-C542vOSv.js').then(n => n.r);
+const loadCustomMap = () => import('./components-BQGHQSdV.js').then(n => n.c);
+const loadFloorSelector = () => import('./components-BQGHQSdV.js').then(n => n.f);
+const loadCompactFloorSelector = () => import('./compact-floor-selector-CoQYAD6z.js');
+const loadQrModal = () => import('./components-BQGHQSdV.js').then(n => n.q);
+const loadRouteOptions = () => import('./components-BQGHQSdV.js').then(n => n.r);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -334,6 +334,11 @@ let RouteViewTotems = class extends i {
           @mapReady=${this._mapReadyHandler}
           @cameraInitialized=${this._cameraInitializedHandler}
           @floorChange=${this._updateFloorHandler}
+          style="
+            /* Forward theme to custom-map */
+            --zoom-border-color: #000;
+            --zoom-border-width: 3px;
+          "
         ></custom-map>
         <floor-selector @floorChange=${this._updateFloorHandler}></floor-selector>
         <route-options></route-options>
@@ -412,5 +417,5 @@ RouteViewTotems = __decorateClass([
   t("route-view-totems")
 ], RouteViewTotems);
 
-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-z3hCCsGS.js.map
+export { AnalyticsController as A, RollbarController as R, T, i as a, loadCompactFloorSelector as b, RouteViewTotems as c, i$3 as i, loadCustomMap as l, n, r$3 as r, t, x };
+//# sourceMappingURL=route-view-totems-eQTxU-id.js.map

package/dist/es/assets/{utils-HInBaX5h.js → utils-CWtvoL4a.js}

@@ -1,5 +1,5 @@
-import { i, s as sdkContext } from './components-C542vOSv.js';
-import { R as RollbarController } from './route-view-totems-z3hCCsGS.js';
+import { i, s as sdkContext } from './components-BQGHQSdV.js';
+import { R as RollbarController } from './route-view-totems-eQTxU-id.js';
 
 var dist = {exports: {}};
 
@@ -12950,4 +12950,4 @@ class RouteAnimationController {
 }
 
 export { MarkerController as M, RouteAnimationController as R, SDKController as S };
-//# sourceMappingURL=utils-HInBaX5h.js.map
+//# sourceMappingURL=utils-CWtvoL4a.js.map

package/dist/es/index.js

@@ -1,3 +1,3 @@
-export { c as RouteViewTotems } from './assets/route-view-totems-z3hCCsGS.js';
-export { M as MapViewWithModal } from './assets/map-view-with-modal-C-vcHaJc.js';
+export { c as RouteViewTotems } from './assets/route-view-totems-eQTxU-id.js';
+export { M as MapViewWithModal } from './assets/map-view-with-modal-SkmapEWH.js';
 //# sourceMappingURL=index.js.map

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

@@ -1,3 +1,3 @@
-export { c as RouteViewTotems } from './assets/route-view-totems-z3hCCsGS.js';
-import './assets/utils-HInBaX5h.js';
+export { c as RouteViewTotems } from './assets/route-view-totems-eQTxU-id.js';
+import './assets/utils-CWtvoL4a.js';
 //# sourceMappingURL=route-view-totems.js.map