@mapvx/web-components 0.9.0-dev.4 → 0.9.0-dev.5

package/dist/types/utils/qr-card-size.d.cts

@@ -0,0 +1,78 @@
+/**
+ * Sizing contract of the QR card that `<route-view-totems>` renders under the route panel
+ * (`<qr-modal>`, MFE-520).
+ *
+ * The two custom properties are the integrator's handle on the card: custom properties inherit
+ * across shadow roots, so setting them on `<route-view-totems>` or on `:root` reaches the card two
+ * shadow roots down without any attribute forwarding. `src/styles/qr-modal.css` reads both by name,
+ * with these defaults as fallbacks. A stylesheet cannot import a constant, so the spellings are kept
+ * in step by hand and the `qr-modal` unit test checks the stylesheet still consumes each name with
+ * its default; a mismatch would not fail loudly, the host's value would simply be ignored.
+ *
+ * Kept apart from the component so the Playwright spec can import it: the component module pulls in
+ * Vite-only imports (`?raw`, `?inline`) that the Playwright runner cannot resolve.
+ */
+/**
+ * @description Caps the card's width. With the full panel the card is as wide as the panel and
+ * this is unset by default; with `panel-variant="compact"` the card fills the panel column up to
+ * this value ({@link DEFAULT_QR_CARD_MAX_WIDTH_PX}), and up to the ceiling `route-options.css`
+ * gives it: the compact panel's 480px, or the room left of the vertical floor bar in narrow
+ * containers.
+ *
+ * @example
+ * ```html
+ * <route-view-totems style="--mvx-qr-card-max-width: 320px;"></route-view-totems>
+ * ```
+ */
+export declare const QR_CARD_MAX_WIDTH_PROPERTY = "--mvx-qr-card-max-width";
+/**
+ * @description Rendered size of the QR code itself. The bitmap is generated at
+ * {@link QR_BITMAP_SIZE_PX}, so values up to that stay sharp on 2x displays. The code keeps this
+ * size while the card is at least 40px wider (its 4px frame and the card's 16px padding, both
+ * sides); in a narrower card it shrinks to the card.
+ *
+ * @example
+ * ```html
+ * <route-view-totems style="--mvx-qr-code-size: 120px;"></route-view-totems>
+ * ```
+ */
+export declare const QR_CODE_SIZE_PROPERTY = "--mvx-qr-code-size";
+/**
+ * @description Default of {@link QR_CARD_MAX_WIDTH_PROPERTY} under the compact panel, in px. Room
+ * for the 40px icon, five lines of the invitation text and the 158px code box in one row, and well
+ * under the 415px minimum the card used to force on a portrait totem. Under the full panel there is
+ * no default cap: the card is as wide as the panel. `qr-modal.css` spells it as the variable's
+ * fallback.
+ *
+ * @example
+ * ```css
+ * :host(.compact) .card {
+ *   max-width: var(--mvx-qr-card-max-width, 360px);
+ * }
+ * ```
+ */
+export declare const DEFAULT_QR_CARD_MAX_WIDTH_PX = 360;
+/**
+ * @description Default of {@link QR_CODE_SIZE_PROPERTY}, in px: the size the code has always
+ * rendered at. `qr-modal.css` spells it as the variable's fallback.
+ *
+ * @example
+ * ```css
+ * .qr-code img {
+ *   width: var(--mvx-qr-code-size, 150px);
+ * }
+ * ```
+ */
+export declare const DEFAULT_QR_CODE_SIZE_PX = 150;
+/**
+ * @description Width of the generated bitmap, in px: twice the rendered default, so the code stays
+ * crisp on DPR 2 totems and when a host enlarges it through {@link QR_CODE_SIZE_PROPERTY}. At the
+ * default size it renders at the same 150 CSS px as before.
+ *
+ * @example
+ * ```ts
+ * // How qr-modal generates the code; its stylesheet scales the image to --mvx-qr-code-size.
+ * const dataUrl = await toDataURL(url, { type: 'image/webp', width: QR_BITMAP_SIZE_PX });
+ * ```
+ */
+export declare const QR_BITMAP_SIZE_PX: number;

package/dist/types/utils/qr-card-size.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Sizing contract of the QR card that `<route-view-totems>` renders under the route panel
+ * (`<qr-modal>`, MFE-520).
+ *
+ * The two custom properties are the integrator's handle on the card: custom properties inherit
+ * across shadow roots, so setting them on `<route-view-totems>` or on `:root` reaches the card two
+ * shadow roots down without any attribute forwarding. `src/styles/qr-modal.css` reads both by name,
+ * with these defaults as fallbacks. A stylesheet cannot import a constant, so the spellings are kept
+ * in step by hand and the `qr-modal` unit test checks the stylesheet still consumes each name with
+ * its default; a mismatch would not fail loudly, the host's value would simply be ignored.
+ *
+ * Kept apart from the component so the Playwright spec can import it: the component module pulls in
+ * Vite-only imports (`?raw`, `?inline`) that the Playwright runner cannot resolve.
+ */
+/**
+ * @description Caps the card's width. With the full panel the card is as wide as the panel and
+ * this is unset by default; with `panel-variant="compact"` the card fills the panel column up to
+ * this value ({@link DEFAULT_QR_CARD_MAX_WIDTH_PX}), and up to the ceiling `route-options.css`
+ * gives it: the compact panel's 480px, or the room left of the vertical floor bar in narrow
+ * containers.
+ *
+ * @example
+ * ```html
+ * <route-view-totems style="--mvx-qr-card-max-width: 320px;"></route-view-totems>
+ * ```
+ */
+export declare const QR_CARD_MAX_WIDTH_PROPERTY = "--mvx-qr-card-max-width";
+/**
+ * @description Rendered size of the QR code itself. The bitmap is generated at
+ * {@link QR_BITMAP_SIZE_PX}, so values up to that stay sharp on 2x displays. The code keeps this
+ * size while the card is at least 40px wider (its 4px frame and the card's 16px padding, both
+ * sides); in a narrower card it shrinks to the card.
+ *
+ * @example
+ * ```html
+ * <route-view-totems style="--mvx-qr-code-size: 120px;"></route-view-totems>
+ * ```
+ */
+export declare const QR_CODE_SIZE_PROPERTY = "--mvx-qr-code-size";
+/**
+ * @description Default of {@link QR_CARD_MAX_WIDTH_PROPERTY} under the compact panel, in px. Room
+ * for the 40px icon, five lines of the invitation text and the 158px code box in one row, and well
+ * under the 415px minimum the card used to force on a portrait totem. Under the full panel there is
+ * no default cap: the card is as wide as the panel. `qr-modal.css` spells it as the variable's
+ * fallback.
+ *
+ * @example
+ * ```css
+ * :host(.compact) .card {
+ *   max-width: var(--mvx-qr-card-max-width, 360px);
+ * }
+ * ```
+ */
+export declare const DEFAULT_QR_CARD_MAX_WIDTH_PX = 360;
+/**
+ * @description Default of {@link QR_CODE_SIZE_PROPERTY}, in px: the size the code has always
+ * rendered at. `qr-modal.css` spells it as the variable's fallback.
+ *
+ * @example
+ * ```css
+ * .qr-code img {
+ *   width: var(--mvx-qr-code-size, 150px);
+ * }
+ * ```
+ */
+export declare const DEFAULT_QR_CODE_SIZE_PX = 150;
+/**
+ * @description Width of the generated bitmap, in px: twice the rendered default, so the code stays
+ * crisp on DPR 2 totems and when a host enlarges it through {@link QR_CODE_SIZE_PROPERTY}. At the
+ * default size it renders at the same 150 CSS px as before.
+ *
+ * @example
+ * ```ts
+ * // How qr-modal generates the code; its stylesheet scales the image to --mvx-qr-code-size.
+ * const dataUrl = await toDataURL(url, { type: 'image/webp', width: QR_BITMAP_SIZE_PX });
+ * ```
+ */
+export declare const QR_BITMAP_SIZE_PX: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapvx/web-components",
   "description": "MapVX Web Components is a web components library that provides interactive and accessible mapping solutions. Built with Lit, it offers a modern, lightweight, and framework-agnostic way to integrate maps into any web application.",
-  "version": "0.9.0-dev.4",
+  "version": "0.9.0-dev.5",
   "type": "module",
   "author": "Mapvx",
   "homepage": "https://docs.mapvx.app/web-components/",

package/dist/cjs/route-options-cUf4NVxm.cjs

@@ -1,138 +0,0 @@
-"use strict";
-!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="95247f94-8aaf-5c10-86e3-4087fdd9f974")}catch(e){}}();
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./consume-DRfK7CRo.cjs"),t=require("./enable-3d-attribute-BVi1YNhn.cjs"),i=require("./route-panel-variant-BfIrlzjD.cjs");var o,s,n,r,a,c,l,p=Object.defineProperty,d=Object.getOwnPropertyDescriptor,u=e=>{throw TypeError(e)},h=(e,t,i,o)=>{for(var s,n=o>1?void 0:o?d(t,i):t,r=e.length-1;r>=0;r--)(s=e[r])&&(n=(o?s(t,i,n):s(n))||n);return o&&n&&p(t,i,n),n},g=(e,t,i)=>t.has(e)||u("Cannot "+i),f=(e,t,i)=>(g(e,t,"read from private field"),i?i.call(e):t.get(e)),b=(e,t,i)=>t.has(e)?u("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),m=(e,t,i,o)=>(g(e,t,"write to private field"),t.set(e,i),i);exports.RouteOptions=class extends t.i$1{constructor(){super(),b(this,o,!1),b(this,s,!1),b(this,n,!1),b(this,r,!1),b(this,a,!1),b(this,c,!1),b(this,l,i.DEFAULT_ROUTE_PANEL_VARIANT),this.assets=null,this._loadAssets()}get hideBack(){return f(this,o)}set hideBack(e){m(this,o,e)}get hideRepeatRoute(){return f(this,s)}set hideRepeatRoute(e){m(this,s,e)}get hideRouteInputs(){return f(this,n)}set hideRouteInputs(e){m(this,n,e)}get hideAccessibilitySwitch(){return f(this,r)}set hideAccessibilitySwitch(e){m(this,r,e)}get hideGenerateRoute(){return f(this,a)}set hideGenerateRoute(e){m(this,a,e)}get autoGenerateRoute(){return f(this,c)}set autoGenerateRoute(e){m(this,c,e)}get panelVariant(){return f(this,l)}set panelVariant(e){m(this,l,e)}async _loadAssets(){this.assets=await(async()=>{const[e,t,i,o,s,n]=await Promise.all([Promise.resolve().then(()=>require("./accessibility-DWoi6we_.cjs")),Promise.resolve().then(()=>require("./back_arrow-DNrh84z6.cjs")),Promise.resolve().then(()=>require("./icon-destination-point-C8Bl9rvO.cjs")),Promise.resolve().then(()=>require("./icon-origin-point-B0FLE42C.cjs")),Promise.resolve().then(()=>require("./repeat_icon-DBYc7GBB.cjs")),Promise.resolve().then(()=>require("./walking-CDbgxjU4.cjs"))]);return{accessibilityIcon:e.default,backIcon:t.default,destinationPoint:i.default,originPoint:o.default,repeatIcon:s.default,walkingIcon:n.default}})(),this.requestUpdate()}handleBack(){this.dispatchEvent(new CustomEvent("back",{detail:{},bubbles:!0,composed:!0}))}handleAccessibility(){this.dispatchEvent(new CustomEvent("accessibilityChange",{detail:!this.sdkData?.accessibleRoute,bubbles:!0,composed:!0}))}handleRepeatRoute(){this.dispatchEvent(new CustomEvent("repeatRoute",{detail:!0,bubbles:!0,composed:!0}))}handleGenerateRoute(){this.dispatchEvent(new CustomEvent("generateRoute",{detail:{accessible:!!this.sdkData?.accessibleRoute},bubbles:!0,composed:!0}))}_dismissError(){t.AnalyticsController.getInstance().trackEvent("error_modal_dismissed",{error_message:this.sdkData?.routeError,origin_id:this.sdkData?.originId,destination_id:this.sdkData?.destinationId}),this.dispatchEvent(new CustomEvent("dismissRouteError",{bubbles:!0,composed:!0}))}render(){if(!this.sdkData)return t.b``;const{destination:e,accessibleRoute:o,parentPlace:s,origin:n,route:r,isRouteAnimating:a,isLoading:c,loadingRoute:l,isNetworkError:p}=this.sdkData,d=(o?this.assets?.accessibilityIcon:this.assets?.walkingIcon)??"",u=e?.title??"",h=s?.innerFloors??[],g=(n&&"function"==typeof n.inFloor?n.inFloor(h):void 0)?.name??"",f=(e&&"function"==typeof e.inFloor?e.inFloor(h):void 0)?.name??"",b=a??!1;let m="";r&&r.legs&&r.legs.length>0&&r.legs[0].distance&&(m=`• ${r.legs[0].distance.toFixed(0)} mts`);const x="compact"===i.toRoutePanelVariant(this.panelVariant)?this._renderCompactPanel(u,f,m,d):this._renderFullPanel({destinationName:u,destinationFloor:f,originFloor:g,distance:m,defaultIcon:d,hasRoute:!!r,isAnimating:b});return t.b`
-      ${x}
-      <qr-modal></qr-modal>
-      ${c||l?t.b`
-            <div class="loading-overlay">
-              <div class="loading-spinner"></div>
-              <p class="loading-text">${l?"Generando ruta...":"Cargando..."}</p>
-            </div>
-          `:""}
-      ${this.sdkData?.routeError?this._renderErrorModal(this.sdkData.routeError,!!p):""}
-    `}_showGenerateRoute(){const{route:e,loadingRoute:t,isLoading:i,routeFailed:o,placesFailed:s,origin:n,destination:r}=this.sdkData??{};return!e&&(!this.autoGenerateRoute&&!this.hideGenerateRoute||!t&&!i&&(!(!o&&!s)||!this.hideGenerateRoute&&!(!n||!r)))}_renderFullPanel(e){const{destinationName:i,destinationFloor:o,originFloor:s,distance:n,defaultIcon:r,hasRoute:a,isAnimating:c}=e,l=!this.hideRouteInputs||!this.hideAccessibilitySwitch;return t.b`
-      <div class="route-panel">
-        <div class="flex flex-col h-full">
-          ${this.hideBack?t.A:t.b`
-                <div class="back-panel" @click=${this.handleBack}>
-                  <div class="back-content">
-                    <span .innerHTML=${this.assets?.backIcon??""}></span>
-                    <span class="back-text">Volver</span>
-                  </div>
-                </div>
-              `}
-
-          <div class="route-modal">
-            <div class="entrance-name d-flex align-items-center">
-              <div class="icon_switcher_user_type">
-                <span .innerHTML=${r}></span>
-              </div>
-              <span class="justify-content-center place-name"> ${i} </span>
-              ${a&&!this.hideRepeatRoute?t.b`
-                    <button class="repeat-route-btn" @click=${this.handleRepeatRoute} ?disabled=${c}>
-                      <span .innerHTML=${this.assets?.repeatIcon??""}></span>
-                      <span>Repetir ruta</span>
-                    </button>
-                  `:t.A}
-            </div>
-            <div class="floor-specs">
-              <span class="floor-name">${o}</span>
-              <span class="route-distance">${n}</span>
-            </div>
-            ${l?t.b`
-                  <div class="d-flex flex-wrap container-controls">
-                    ${this.hideRouteInputs?t.A:t.b`
-                          <div class="flex-fill route-input-wrapper">
-                            <div class="c-route-input c-route-input-from">
-                              <div class="c-route-input-icon">
-                                <img src=${t.o(this.assets?.originPoint)} alt="" class="icon-point" />
-                              </div>
-                              Desde mi ubicación
-                              <span>${s}</span>
-                            </div>
-                            <div class="c-route-input" @click=${this.hideBack?t.A:this.handleBack}>
-                              <div class="c-route-input-icon">
-                                <img src=${t.o(this.assets?.destinationPoint)} alt="" class="icon-point" />
-                              </div>
-                              ${i}
-                              <span>${o}</span>
-                            </div>
-                          </div>
-                        `}
-                    ${this._renderAccessibilitySwitch()}
-                  </div>
-                `:t.A}
-            ${this._showGenerateRoute()?this._renderGenerateRoute():t.A}
-          </div>
-        </div>
-      </div>
-    `}_renderCompactPanel(e,i,o,s){return t.b`
-      <div class="route-panel compact" data-testid="route-panel-compact">
-        <div class="route-modal compact-modal">
-          <div class="compact-info">
-            <div class="entrance-name d-flex align-items-center">
-              <div class="icon_switcher_user_type">
-                <span .innerHTML=${s}></span>
-              </div>
-              <span class="place-name" title=${e}>${e}</span>
-            </div>
-            <div class="floor-specs">
-              <span class="floor-name">${i}</span>
-              <span class="route-distance">${o}</span>
-            </div>
-          </div>
-          ${this._renderAccessibilitySwitch()}
-        </div>
-        ${this._showGenerateRoute()?t.b`<div class="compact-generate-route">${this._renderGenerateRoute()}</div>`:t.A}
-      </div>
-    `}_renderAccessibilitySwitch(){if(this.hideAccessibilitySwitch)return t.A;const e=!!this.sdkData?.accessibleRoute;return t.b`
-      <div
-        class="accessibility-switch ${e?"accessible":""}"
-        data-testid="accessibility-switch"
-        @click=${this.handleAccessibility}
-      >
-        <div class="accessibility-switch-icon ${e?"":"active"}">
-          <span .innerHTML=${this.assets?.walkingIcon??""}></span>
-        </div>
-        <div class="accessibility-switch-icon ${e?"active":""}">
-          <span .innerHTML=${this.assets?.accessibilityIcon??""}></span>
-        </div>
-      </div>
-    `}_renderGenerateRoute(){return t.b`
-      <div class="generate-route-container d-flex justify-content-center align-items-center mt-3">
-        <button class="generate-route-btn" @click=${this.handleGenerateRoute}>
-          <span> Generar ruta</span>
-        </button>
-      </div>
-    `}_renderErrorModal(e,i){return t.b`
-      <div class="error-modal-overlay">
-        <div class="error-modal">
-          <div class="error-icon ${i?"network-error":""}">
-            ${i?t.b`
-                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    />
-                    <path d="M8 8L16 16M16 8L8 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-                  </svg>
-                `:t.b`
-                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    />
-                    <path d="M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-                    <circle cx="12" cy="16" r="1" fill="currentColor" />
-                  </svg>
-                `}
-          </div>
-          <p class="error-message">${e}</p>
-          <button class="error-btn" @click=${this._dismissError}>Aceptar</button>
-        </div>
-      </div>
-    `}},o=new WeakMap,s=new WeakMap,n=new WeakMap,r=new WeakMap,a=new WeakMap,c=new WeakMap,l=new WeakMap,exports.RouteOptions.styles=[t.r(":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:var(--mvx-accessibility-switch-active-color, #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%}.route-panel.compact{width:auto;min-width:0;max-width:480px}@container (max-width: 1100px){.route-panel.compact{max-width:min(calc(100cqw - var(--floor-selector-inline-size, 102px) - 1rem),480px)}}.compact-modal{display:flex;align-items:center;gap:16px;padding:16px 16px 16px 24px}.compact-info{flex:1 1 auto;min-width:0}.compact .place-name{font-size:26px;letter-spacing:-1.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact .floor-specs{margin-top:6px;font-size:14px}.compact .accessibility-switch{flex:0 0 auto;min-width:88px;height:44px}.compact .accessibility-switch:after{clip-path:circle(19px)}.compact .accessibility-switch-icon{width:44px}.compact-generate-route{padding:0 16px 16px}.compact-generate-route .generate-route-container{margin-top:0!important}.compact-generate-route .generate-route-btn{height:48px}.mt-3{margin-top:1rem!important}.align-items-center{align-items:center!important}.justify-content-center{justify-content:center!important}.error-modal-overlay{position:fixed;inset:0;background:#00000080;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000}.error-modal{background:#fff;color:#11032b;border-radius:24px;padding:32px;text-align:center;max-width:350px;box-shadow:0 0 24px #0000004d;animation:fadeInScale .2s ease-out}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.error-icon{margin-bottom:16px;color:#11032b}.error-message{font-size:18px;margin:0 0 24px;line-height:1.4;font-weight:500}.error-btn{background:#11032b;color:#fff;border:none;border-radius:30px;padding:12px 40px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s ease}.error-btn:hover{background:#1a0540}.loading-overlay{position:fixed;inset:0;background:#ffffffd9;backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}.loading-spinner{width:60px;height:60px;border:4px solid #f3f3f3;border-top:4px solid #11032b;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{margin-top:16px;font-size:18px;font-weight:600;color:#11032b}.error-icon.network-error{color:#e74c3c}")],h([e.c({context:t.sdkContext,subscribe:!0})],exports.RouteOptions.prototype,"sdkData",2),h([t.n({type:Boolean,attribute:"hide-back"})],exports.RouteOptions.prototype,"hideBack",1),h([t.n({type:Boolean,attribute:"hide-repeat-route"})],exports.RouteOptions.prototype,"hideRepeatRoute",1),h([t.n({type:Boolean,attribute:"hide-route-inputs"})],exports.RouteOptions.prototype,"hideRouteInputs",1),h([t.n({type:Boolean,attribute:"hide-accessibility-switch"})],exports.RouteOptions.prototype,"hideAccessibilitySwitch",1),h([t.n({type:Boolean,attribute:"hide-generate-route"})],exports.RouteOptions.prototype,"hideGenerateRoute",1),h([t.n({type:Boolean,attribute:"auto-generate-route"})],exports.RouteOptions.prototype,"autoGenerateRoute",1),h([t.n({type:String,attribute:"panel-variant"})],exports.RouteOptions.prototype,"panelVariant",1),exports.RouteOptions=h([t.t("route-options")],exports.RouteOptions);
-
-//# debugId=95247f94-8aaf-5c10-86e3-4087fdd9f974