@mapsindoors/map-template 1.66.2 → 1.66.3

package/dist/mi-notification.entry-7facb24f.mjs

@@ -0,0 +1,91 @@
+import { r as c, f as r, h as i, H as f, g as d } from "./reactcomponent-fed5da4c.mjs";
+import "react";
+import "react-dom";
+(function() {
+  try {
+    var t = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, e = new t.Error().stack;
+    e && (t._sentryDebugIds = t._sentryDebugIds || {}, t._sentryDebugIds[e] = "df413ede-37ba-4e7f-8003-b95f35f0ba3d", t._sentryDebugIdIdentifier = "sentry-dbid-df413ede-37ba-4e7f-8003-b95f35f0ba3d");
+  } catch {
+  }
+})();
+var l;
+(function(t) {
+  t.TOP_LEFT = "top-left", t.TOP_CENTER = "top-center", t.TOP_RIGHT = "top-right", t.BOTTOM_CENTER = "bottom-center", t.BOTTOM_LEFT = "bottom-left", t.BOTTOM_RIGHT = "bottom-right";
+})(l || (l = {}));
+var n;
+(function(t) {
+  t.Error = "error", t.Info = "info", t.Success = "success", t.Warning = "warning", t.None = "none";
+})(n || (n = {}));
+const h = ':host{padding:16px;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";position:fixed;z-index:1000;display:flex;flex-direction:column}:host(.top-left){top:0;left:0}:host(.top-center){top:0;align-items:center;left:50%;transform:translate(-50%, 0)}:host(.top-right){top:0;right:0;align-items:flex-end}:host(.bottom-left){bottom:0;left:0}:host(.bottom-center){bottom:0;align-items:center;left:50%;transform:translate(-50%, 0)}:host(.bottom-right){bottom:0;right:0;align-items:flex-end}.notification{margin-top:16px;display:flex;flex-direction:row;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.16), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 1px 1px rgba(0, 0, 0, 0.2);border-radius:2px;background-color:#fcfcfc;overflow:hidden}.notification .icon{width:48px;display:flex;justify-content:center;align-items:center}.notification .icon-type--error{background-color:#ef4444}.notification .icon-type--success{background-color:#22c55e}.notification .icon-type--warning{background-color:#f59e0b}.notification .icon-type--info{background-color:#6b7280}.notification .label{padding-left:16px;flex:1;font-size:0.875rem}.notification .btn{padding-left:24px;padding-right:16px;display:flex;align-items:center;border:none;background-color:#fcfcfc}.notification .btn:focus{outline:none;box-shadow:none}', g = class {
+  constructor(t) {
+    c(this, t), this.notifications = [], this.notificationId = 0, this.position = l.BOTTOM_RIGHT, this.duration = 3;
+  }
+  /**
+   * Show a notification.
+   *
+   * @param {string} message - Message to display.
+   * @param {string} [type='none'] - Type of notification. Available types: 'info', 'warning', 'success', 'error' and 'none'.
+   * @param {boolean} [sticky=false] - Set message as sticky to prevent it from disappearing.
+   * @returns {Promise<void>}
+   */
+  async push(t, e = "none", o = !1) {
+    if (typeof t != "string" || t.length < 1)
+      return;
+    if (!Object.values(n).some((a) => a === e)) {
+      console.error("Invalid notification type");
+      return;
+    }
+    const s = {
+      id: this.notificationId,
+      message: t,
+      sticky: o,
+      type: e
+    };
+    o === !1 && (s.timer = window.setTimeout(() => this.dismiss(s.id), this.duration * 1e3)), this.notificationId++, this.notifications.push(s), r(this.hostElement);
+  }
+  /**
+   * Clear all notifications.
+   *
+   * @returns {Promise<void>}
+   */
+  async clearAll() {
+    this.notifications = [], r(this.hostElement);
+  }
+  /**
+   * Dismiss a single notification.
+   *
+   * @param {number} id
+   */
+  dismiss(t) {
+    this.notifications = this.notifications.filter((e) => e.id !== t), r(this.hostElement);
+  }
+  render() {
+    return i(f, { class: this.position }, this.notifications.map((t) => this.renderNotification(t)));
+  }
+  /**
+   * Get JSX for notification.
+   *
+   * @param {NotificationMessage} { id, message }
+   * @returns {JSX.Element}
+   */
+  renderNotification({ id: t, message: e, type: o }) {
+    return i("div", { class: "notification", role: "alert" }, o && o !== "none" ? this.renderIcon(o) : null, i("p", { class: "label" }, e), i("button", { type: "button", "aria-label": "Dismiss notification", class: "btn", onClick: () => this.dismiss(t) }, i("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", fill: "#1E2025" }))));
+  }
+  /**
+   * Get JSX for type-icon.
+   *
+   * @param {NotificationType} type
+   * @returns {JSX.Element}
+   */
+  renderIcon(t) {
+    return t === n.Error ? i("div", { class: "icon icon-type--error" }, i("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM9 15V13H11V15H9ZM9 5V11H11V5H9Z", fill: "#FCFCFC" }))) : t === n.Success ? i("div", { class: "icon icon-type--success" }, i("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { d: "M5.99997 11.17L1.82997 7L0.409973 8.41L5.99997 14L18 2L16.59 0.59L5.99997 11.17Z", fill: "#FCFCFC" }))) : t === n.Warning ? i("div", { class: "icon icon-type--warning" }, i("svg", { width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22 19L11 0L0 19H22ZM10 16V14H12V16H10ZM10 12H12V8H10V12Z", fill: "#FCFCFC" }))) : i("div", { class: "icon icon-type--info" }, i("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", focusable: "false" }, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM9 15V9H11V15H9ZM9 5V7H11V5H9Z", fill: "#FCFCFC" })));
+  }
+  get hostElement() {
+    return d(this);
+  }
+};
+g.style = h;
+export {
+  g as mi_notification
+};
+//# sourceMappingURL=mi-notification.entry-7facb24f.mjs.map

package/dist/mi-route-instructions-heading.entry-e11004f5.mjs

@@ -0,0 +1,82 @@
+import { r as s, h as t } from "./reactcomponent-fed5da4c.mjs";
+import { R as i } from "./route-travel-mode.enum-7f4ce9c7-0da65b8e.mjs";
+import { U as a } from "./unit-system.enum-eaefb53e-5d1cf129.mjs";
+import "react";
+import "react-dom";
+(function() {
+  try {
+    var e = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, n = new e.Error().stack;
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "32742bb1-c7a0-4c08-a187-1eed64116611", e._sentryDebugIdIdentifier = "sentry-dbid-32742bb1-c7a0-4c08-a187-1eed64116611");
+  } catch {
+  }
+})();
+const r = '.directions{border-bottom:1px solid #d1d5db;color:#1c1917;font-size:1rem;font-weight:400;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.directions-way-points{padding-top:24px;padding-bottom:24px;padding-left:16px;padding-right:16px;border-bottom:1px solid #f3f4f6}.directions-way-points span{display:block}.directions-way-points span:first-child{font-size:1.25rem;font-weight:500;line-height:1.5rem}.directions-way-points span:last-child{color:#6b7280}.directions-way-points span:last-child a{color:#3b82f6;text-decoration:none}.directions-details{padding:16px;display:flex;flex-direction:row;justify-content:space-between}.directions-details-numbers mi-time{font-weight:500}.directions-details-numbers-distance{color:#6b7280;font-size:0.875rem;font-weight:400;text-transform:lowercase}.directions-details-travel-mode-selector{display:flex;align-items:center;color:#3b82f6;text-decoration:none}.directions-details-travel-mode-selector mi-icon{width:24px;height:24px;margin-left:8px;background-color:#3b82f6}', o = class {
+  constructor(e) {
+    s(this, e), this.originName = void 0, this.destinationName = void 0, this.totalTravelTime = void 0, this.totalWalkingDistance = void 0, this.travelMode = i.Walking, this.unit = a.Metric, this.translations = {
+      from: "From",
+      to: "To",
+      avoidStairs: "Avoid stairs",
+      walk: "Walk",
+      walking: "Walking",
+      bike: "Bike",
+      bicycling: "Bicycling",
+      transit: "Transit",
+      car: "Car",
+      driving: "Driving"
+    };
+  }
+  /**
+   * Get travel mode as a string. Eg. "Walking", "Driving", "Transit", "Bicycling".
+   *
+   * @returns {string}
+   */
+  getTravelModeString() {
+    switch (this.travelMode) {
+      case i.Walking:
+        return this.translations.walk;
+      case i.Driving:
+        return this.translations.car;
+      case i.Transit:
+        return this.translations.transit;
+      case i.Bicycling:
+        return this.translations.bike;
+      default:
+        return this.translations.walk;
+    }
+  }
+  /**
+   * Get icon name for travel mode.
+   *
+   * @returns {string}
+   */
+  getTravelModeIconName() {
+    switch (this.travelMode) {
+      case i.Walking:
+        return "walk";
+      case i.Driving:
+        return "car";
+      case i.Transit:
+        return "transit";
+      case i.Bicycling:
+        return "bike";
+      default:
+        return "walk";
+    }
+  }
+  render() {
+    return t("div", { class: "directions" }, this.originName && this.destinationName ? this.renderWayPoints() : null, t("div", { class: "directions-details" }, this.totalTravelTime >= 0 || this.totalWalkingDistance >= 0 ? t("div", { class: "directions-details-numbers" }, this.totalTravelTime >= 0 ? t("div", null, t("mi-time", { seconds: this.totalTravelTime })) : null, this.totalWalkingDistance >= 0 ? t("div", { class: "directions-details-numbers-distance" }, t("mi-distance", { meters: this.totalWalkingDistance }), " ", this.translations.walking.toLowerCase()) : null) : null, t("a", { href: "#", class: "directions-details-travel-mode-selector" }, this.getTravelModeString(), t("mi-icon", { "icon-name": this.getTravelModeIconName() }))));
+  }
+  /**
+   * Render direction way points.
+   *
+   * @returns {JSX.Element}
+   */
+  renderWayPoints() {
+    return t("div", { class: "directions-way-points" }, t("span", null, this.translations.to, " ", this.destinationName), t("span", null, this.translations.from, " ", t("a", { href: "#" }, this.originName)));
+  }
+};
+o.style = r;
+export {
+  o as mi_route_instructions_heading
+};
+//# sourceMappingURL=mi-route-instructions-heading.entry-e11004f5.mjs.map

package/dist/mi-route-instructions-maneuver-legacy.entry-e0a64029.mjs

@@ -0,0 +1,83 @@
+import { r as s, h as e, H as r } from "./reactcomponent-fed5da4c.mjs";
+import { U as o } from "./unit-system.enum-eaefb53e-5d1cf129.mjs";
+import "react";
+import "react-dom";
+(function() {
+  try {
+    var t = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, n = new t.Error().stack;
+    n && (t._sentryDebugIds = t._sentryDebugIds || {}, t._sentryDebugIds[n] = "31294eba-4a02-436e-9bae-42e24efb251f", t._sentryDebugIdIdentifier = "sentry-dbid-31294eba-4a02-436e-9bae-42e24efb251f");
+  } catch {
+  }
+})();
+const l = ':host{display:flex;padding-top:12px;padding-bottom:12px;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.icon{width:48px;display:flex;justify-content:center}.icon mi-icon{width:24px;height:24px}.description{display:flex;flex-direction:column;flex:1}.description p{margin:0;padding-right:16px;font-size:0.875rem;word-break:break-all}.description__distance{display:flex;align-items:center}.description__distance mi-distance{font-size:0.75rem;padding-right:12px}.description__distance-border{flex:1;width:100%;height:0;border-bottom:1px solid #e5e7eb}', d = class {
+  constructor(t) {
+    s(this, t), this.maneuver = void 0, this.maneuverData = void 0, this.translations = void 0, this.translationsData = void 0, this.unit = o.Metric;
+  }
+  parseManeuverProp() {
+    this.maneuverData = JSON.parse(this.maneuver);
+  }
+  parseTranslationsProp() {
+    this.translationsData = JSON.parse(this.translations);
+  }
+  componentWillLoad() {
+    this.parseManeuverProp(), this.parseTranslationsProp();
+  }
+  /**
+   * Get maneuver name.
+   *
+   * @returns {string}
+   */
+  getManeuverName(t) {
+    if (t.includes("straight"))
+      return "straight";
+    if (t.includes("sharp right"))
+      return "sharp-right";
+    if (t.includes("sharp left"))
+      return "sharp-left";
+    if (t.includes("slight right"))
+      return "slight-right";
+    if (t.includes("slight left"))
+      return "slight-left";
+    if (t.includes("right"))
+      return "right";
+    if (t.includes("left"))
+      return "left";
+    if (t.includes("uturn"))
+      return "u-turn";
+    if (t.includes("depart"))
+      return "straight";
+  }
+  render() {
+    return this.maneuverData && this.translationsData ? this.renderManeuver() : null;
+  }
+  /**
+   * Render step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderManeuver() {
+    const t = {
+      straight: this.translationsData.continueStraightAhead,
+      left: `${this.translationsData.goLeft} ${this.translationsData.andContinue}`,
+      "sharp-left": `${this.translationsData.goSharpLeft} ${this.translationsData.andContinue}`,
+      "slight-left": `${this.translationsData.goSlightLeft} ${this.translationsData.andContinue}`,
+      right: `${this.translationsData.goRight} ${this.translationsData.andContinue}`,
+      "sharp-right": `${this.translationsData.goSharpRight} ${this.translationsData.andContinue}`,
+      "slight-right": `${this.translationsData.goSlightRight} ${this.translationsData.andContinue}`,
+      "u-turn": `${this.translationsData.turnAround} ${this.translationsData.andContinue}`
+      // 'Turn around and continue'
+    }, n = this.getManeuverName(this.maneuverData.maneuver.toLowerCase()), i = `arrow-${n}`, a = this.maneuverData.instructions ? this.maneuverData.instructions : t[n];
+    return e(r, null, e("div", { class: "icon" }, n ? e("mi-icon", { part: "maneuver-icon", "icon-name": i }) : null), e("div", { class: "description" }, e("p", { part: "maneuver-description" }, a), e("div", { class: "description__distance" }, e("mi-distance", { part: "maneuver-description-distance", meters: this.maneuverData.distance.value, unit: this.unit }), e("span", { part: "maneuver-description-distance-border", class: "description__distance-border" }))));
+  }
+  static get watchers() {
+    return {
+      maneuver: ["parseManeuverProp"],
+      translations: ["parseTranslationsProp"]
+    };
+  }
+};
+d.style = l;
+export {
+  d as mi_route_instructions_maneuver_legacy
+};
+//# sourceMappingURL=mi-route-instructions-maneuver-legacy.entry-e0a64029.mjs.map

package/dist/mi-route-instructions-maneuver.entry-98953d3e.mjs

@@ -0,0 +1,83 @@
+import { r as e, h as a, H as r } from "./reactcomponent-fed5da4c.mjs";
+import { U as o } from "./unit-system.enum-eaefb53e-5d1cf129.mjs";
+import "react";
+import "react-dom";
+(function() {
+  try {
+    var t = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, n = new t.Error().stack;
+    n && (t._sentryDebugIds = t._sentryDebugIds || {}, t._sentryDebugIds[n] = "d2260c26-a96c-4f2b-ab01-f533de617a97", t._sentryDebugIdIdentifier = "sentry-dbid-d2260c26-a96c-4f2b-ab01-f533de617a97");
+  } catch {
+  }
+})();
+const u = ":host{display:grid;gap:24px;grid-auto-flow:column;align-items:center;grid-template-columns:24px 1fr;border-top:1px solid #e5e7eb;padding:16px}.icon{width:24px;height:24px}.description{font-size:16px;display:grid;gap:8px;height:-moz-fit-content;height:fit-content}.description__text{margin:0;font-size:16px;word-break:break-all}.description mi-distance{font-size:12px;color:#6b7280}", l = class {
+  constructor(t) {
+    e(this, t), this.maneuver = void 0, this.maneuverData = void 0, this.translations = void 0, this.translationsData = void 0, this.unit = o.Metric;
+  }
+  parseManeuverProp() {
+    this.maneuverData = JSON.parse(this.maneuver);
+  }
+  parseTranslationsProp() {
+    this.translationsData = JSON.parse(this.translations);
+  }
+  componentWillLoad() {
+    this.parseManeuverProp(), this.parseTranslationsProp();
+  }
+  /**
+   * Get maneuver name.
+   *
+   * @returns {string}
+   */
+  getManeuverName(t) {
+    if (t.includes("straight"))
+      return "straight";
+    if (t.includes("sharp right"))
+      return "sharp-right";
+    if (t.includes("sharp left"))
+      return "sharp-left";
+    if (t.includes("slight right"))
+      return "slight-right";
+    if (t.includes("slight left"))
+      return "slight-left";
+    if (t.includes("right"))
+      return "right";
+    if (t.includes("left"))
+      return "left";
+    if (t.includes("uturn"))
+      return "u-turn";
+    if (t.includes("depart"))
+      return "straight";
+  }
+  render() {
+    return this.maneuverData && this.translationsData ? this.renderManeuver() : null;
+  }
+  /**
+   * Render step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderManeuver() {
+    const t = {
+      straight: this.translationsData.continueStraightAhead,
+      left: `${this.translationsData.goLeft} ${this.translationsData.andContinue}`,
+      "sharp-left": `${this.translationsData.goSharpLeft} ${this.translationsData.andContinue}`,
+      "slight-left": `${this.translationsData.goSlightLeft} ${this.translationsData.andContinue}`,
+      right: `${this.translationsData.goRight} ${this.translationsData.andContinue}`,
+      "sharp-right": `${this.translationsData.goSharpRight} ${this.translationsData.andContinue}`,
+      "slight-right": `${this.translationsData.goSlightRight} ${this.translationsData.andContinue}`,
+      "u-turn": `${this.translationsData.turnAround} ${this.translationsData.andContinue}`
+      // 'Turn around and continue'
+    }, n = this.getManeuverName(this.maneuverData.maneuver.toLowerCase()), i = `arrow-${n}`, s = this.maneuverData.instructions ? this.maneuverData.instructions : t[n];
+    return a(r, null, a("div", { class: "icon" }, n ? a("mi-icon", { part: "maneuver-icon", "icon-name": i }) : null), a("div", { class: "description" }, a("div", { class: "description__text" }, s), a("mi-distance", { part: "maneuver-description-distance", meters: this.maneuverData.distance.value, unit: this.unit })));
+  }
+  static get watchers() {
+    return {
+      maneuver: ["parseManeuverProp"],
+      translations: ["parseTranslationsProp"]
+    };
+  }
+};
+l.style = u;
+export {
+  l as mi_route_instructions_maneuver
+};
+//# sourceMappingURL=mi-route-instructions-maneuver.entry-98953d3e.mjs.map

package/dist/mi-route-instructions-step-legacy.entry-05ac87cf.mjs

@@ -0,0 +1,209 @@
+import { r as n, c as r, h as s } from "./reactcomponent-fed5da4c.mjs";
+import { U as o } from "./unit-system.enum-eaefb53e-5d1cf129.mjs";
+import { c as l } from "./utils-ae714467-4f4e3a56.mjs";
+import "react";
+import "react-dom";
+(function() {
+  try {
+    var t = typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, e = new t.Error().stack;
+    e && (t._sentryDebugIds = t._sentryDebugIds || {}, t._sentryDebugIds[e] = "2251760d-9bc4-42dc-aa9f-5d7dad2122ac", t._sentryDebugIdIdentifier = "sentry-dbid-2251760d-9bc4-42dc-aa9f-5d7dad2122ac");
+  } catch {
+  }
+})();
+const p = ':host{display:block;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}.step{display:grid;grid-template-columns:40px 1fr 40px;grid-template-areas:"actionicon heading heading" "modeicon description toggle" "modeicon substeps substeps"}.step__action-icon{-ms-grid-row:1;-ms-grid-column:1;display:flex;justify-content:center;align-items:center;grid-area:actionicon}.step__action-icon--circled{position:relative}.step__action-icon--circled::before{position:absolute;width:24px;height:24px;border:1px solid #1c1917;content:"";border-radius:50%}.step__action-icon mi-icon{display:block;width:12px;height:12px}.step__heading{-ms-grid-row:1;-ms-grid-column:2;-ms-grid-column-span:2;grid-area:heading;font-size:1rem;margin:0;border-bottom:1px solid #DCDCDF;border-top:1px solid #DCDCDF;padding:12px}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{-ms-grid-row:2;-ms-grid-row-span:2;-ms-grid-column:1;grid-area:modeicon;display:flex;justify-content:center;align-items:center;position:relative;min-height:72px}.step__travel-mode::before{position:absolute;width:calc(50% - 2px);left:0;height:100%;content:""}.step__travel-mode--dotted::before{border-right:4px dotted #bfdbfe}.step__travel-mode--solid::before{border-right:4px solid #bfdbfe}.step__travel-mode-icon{position:absolute;left:50%;top:24px;transform:translateX(-50%);background-color:#fcfcfc;padding:3px;border-radius:4px}.step__travel-mode-icon mi-icon{width:16px;height:16px;background-color:#6b7280;display:block}.step__description{-ms-grid-row:2;-ms-grid-column:2;grid-area:description;padding:12px}.step__short-name{margin-right:4px;padding:2px 4px;font-size:0.875rem;color:#fcfcfc;background-color:#6b7280;border-radius:2px}.step__distance-duration{color:#6b7280;font-size:0.875rem}.step__toggle{-ms-grid-row:2;-ms-grid-column:3;grid-area:toggle;display:flex;justify-content:center;align-items:center;transition:transform 300ms;cursor:pointer}.step__toggle--open{transform:rotate(180deg)}.step__toggle mi-icon{width:16px;height:16px;display:block;background-color:#3b82f6}.step__substeps{-ms-grid-row:3;-ms-grid-column:2;-ms-grid-column-span:2;grid-area:substeps}', d = class {
+  constructor(t) {
+    n(this, t), this.stepClicked = r(this, "stepClicked", 7), this.isInternetExplorer = l(), this.step = void 0, this.stepData = void 0, this.hideIndoorSubsteps = !0, this.fromRouteContext = "", this.fromTravelMode = void 0, this.fromTransitStop = void 0, this.unit = o.Metric, this.translations = void 0, this.translationsData = void 0, this.substepsAreOpen = !1;
+  }
+  parseStepProp() {
+    this.step && (this.stepData = JSON.parse(this.step));
+  }
+  parseTranslationsProp() {
+    this.translations && (this.translationsData = JSON.parse(this.translations));
+  }
+  componentWillLoad() {
+    this.parseStepProp(), this.parseTranslationsProp();
+  }
+  /**
+   * Render if there is step data.
+   */
+  render() {
+    return this.stepData && this.translationsData ? this.renderStep() : null;
+  }
+  /**
+   * Emits stepClicked event (if click target is not related to an action)
+   * @param event Event
+   */
+  stepClickHandler(t) {
+    if (Array.from(t.target.classList).includes("icon-toggle"))
+      return;
+    let e = null;
+    t.target.dataset.maneuverIndex !== void 0 && (e = parseInt(t.target.dataset.maneuverIndex)), this.stepClicked.emit({ maneuverIndex: e });
+  }
+  /**
+   * Render step part depending on travel mode.
+   *
+   * @returns {JSX.Element}
+   */
+  renderStep() {
+    switch (this.stepData.travel_mode.toUpperCase()) {
+      case "DRIVING":
+        return this.renderDrivingStep();
+      case "WALKING":
+        return this.renderWalkingStep();
+      case "BICYCLING":
+        return this.renderBicyclingStep();
+      case "TRANSIT":
+        return this.renderTransitStep();
+      default:
+        return s("div", null, "Unknown travel mode: ", this.stepData.travel_mode);
+    }
+  }
+  /**
+   * Render the travel mode indicator and dotted/solid line.
+   *
+   * @returns {JSX.Element}
+   */
+  renderTravelMode() {
+    if (this.isInternetExplorer)
+      return null;
+    let t;
+    switch (this.stepData.travel_mode.toUpperCase()) {
+      case "DRIVING":
+        t = "car";
+        break;
+      case "WALKING":
+        t = "walk";
+        break;
+      case "BICYCLING":
+        t = "bike";
+        break;
+      case "TRANSIT":
+        t = this.getTransitVehicleIconName();
+        break;
+    }
+    return s("span", { part: "step-travel-mode", class: `step__travel-mode step__travel-mode--${this.stepData.travel_mode.toUpperCase() === "TRANSIT" ? "solid" : "dotted"}` }, s("span", { class: "step__travel-mode-icon" }, s("mi-icon", { part: "step-travel-mode-icon", "icon-name": t })));
+  }
+  /**
+   * Get icon name for transit vehicle.
+   *
+   * @returns {string}
+   */
+  getTransitVehicleIconName() {
+    var t, e;
+    const i = (e = (t = this.stepData.transit_information) === null || t === void 0 ? void 0 : t.line.vehicle) === null || e === void 0 ? void 0 : e.type.toLowerCase();
+    return i && ["boat", "bus", "railway", "train", "subway"].some((a) => a === i) ? i : "transit";
+  }
+  /**
+   * Toggles visibility of sub steps (steps in steps)
+   */
+  toggleSubsteps() {
+    this.substepsAreOpen = !this.substepsAreOpen;
+  }
+  /**
+   * Render substeps if they should be visible.
+   *
+   * @returns {JSX.Element}
+   */
+  renderSubsteps() {
+    return this.substepsAreOpen === !0 ? s("div", { class: "step__substeps" }, this.stepData.steps.map((t, e) => s("mi-route-instructions-maneuver-legacy", {
+      "data-maneuver-index": e,
+      maneuver: JSON.stringify(t),
+      translations: this.translations,
+      unit: this.unit,
+      // @ts-ignore
+      exportparts: `
+                        maneuver-icon,
+                        maneuver-description,
+                        maneuver-description-distance,
+                        maneuver-description-distance-border`
+    }))) : null;
+  }
+  /**
+   * Render the toggle button for the sub step expander.
+   *
+   * @returns {JSX.Element}
+   */
+  renderToggleButton() {
+    return this.stepData.steps.length <= 0 || this.hideIndoorSubsteps === !0 && this.stepData.route_context.toLowerCase() === "insidebuilding" ? null : s("span", { class: `step__toggle ${this.substepsAreOpen ? "step__toggle--open" : ""}`, onClick: () => this.toggleSubsteps() }, this.isInternetExplorer ? "▼" : s("mi-icon", { part: "step-toggle", "icon-name": "toggle" }));
+  }
+  /**
+   * Render time and distance part.
+   *
+   * @returns {JSX.Element}
+   */
+  renderTimeAndDistance() {
+    return s("span", { part: "step-info", class: "step__distance-duration" }, s("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", s("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), s("br", null));
+  }
+  /**
+   * Render a driving step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderDrivingStep() {
+    return s("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, this.isInternetExplorer ? null : s("span", { class: "step__action-icon step__action-icon--circled" }, s("mi-icon", { "icon-name": "car" })), s("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), s("div", { part: "step-description", class: "step__description" }, this.translationsData.drive, s("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Get display heading.
+   *
+   * @returns {string}
+   */
+  getStepHeading() {
+    var t;
+    const e = {
+      driving: this.translationsData.drive,
+      walking: this.translationsData.walk,
+      bicycling: this.translationsData.bike
+    };
+    return !((t = this.stepData.steps[0]) === null || t === void 0) && t.instructions ? this.stepData.steps[0].instructions : e[this.stepData.travel_mode.toLowerCase()];
+  }
+  /**
+   * Render a walking step.
+   *
+   *
+   * @returns {JSX.Element}
+   */
+  renderWalkingStep() {
+    let t, e;
+    return this.stepData.parking === !0 ? (t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}`, e = "park") : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? (t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`, e = "stairs") : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? (t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`, e = "ladder") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? (t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`, e = "escalator") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? (t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`, e = "wheelchair-ramp") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? (t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`, e = "wheelchair-lift") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? (t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`, e = "elevator") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? (t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context), e = "exit") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? (t = this.getStepHeading(), e = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? (t = this.fromTransitStop, e = "transit-stop") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? (t = this.getStepHeading(), e = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? (t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context), e = "enter") : (t = this.fromRouteContext, e = "circle"), s("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : s("span", { class: `step__action-icon ${e !== "circle" ? "step__action-icon--circled" : ""}` }, s("mi-icon", { "icon-name": e })), s("h3", { part: "step-heading", class: "step__heading" }, t), this.renderTravelMode(), s("div", { part: "step-description", class: "step__description" }, this.translationsData.walk, s("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Add building or venue name to the step heading
+   * @param {string} heading
+   * @param {StepContext} stepContext
+   * @returns
+   */
+  addStepContextNameToHeading(t, e) {
+    return e && (e.building ? t += ` ${e.building.buildingInfo.name} ${this.translationsData.building}` : e.venue && (t += ` ${e.venue.venueInfo.name} ${this.translationsData.venue}`)), t;
+  }
+  /**
+   * Render a bicycling step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderBicyclingStep() {
+    return s("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, this.isInternetExplorer ? null : s("span", { class: "step__action-icon step__action-icon--circled" }, s("mi-icon", { "icon-name": "bike" })), s("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), s("div", { part: "step-description", class: "step__description" }, this.translationsData.bike, s("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Render a transit step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderTransitStep() {
+    var t, e;
+    return s("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : s("span", { class: "step__action-icon step__action-icon--circled" }, s("mi-icon", { "icon-name": "transit-stop" })), s("h3", { part: "step-heading", class: "step__heading" }, this.stepData.instructions), this.renderTravelMode(), s("div", { part: "step-description", class: "step__description" }, this.stepData.transit_information.line.short_name ? s("span", { class: "step__short-name", style: {
+      backgroundColor: !((t = this.stepData.transit_information.line) === null || t === void 0) && t.color ? this.stepData.transit_information.line.color : null,
+      color: !((e = this.stepData.transit_information.line) === null || e === void 0) && e.text_color ? this.stepData.transit_information.line.text_color : null
+    } }, this.stepData.transit_information.line.short_name) : null, this.stepData.transit_information.headsign ? this.stepData.transit_information.headsign : null, s("br", null), s("span", { part: "step-info", class: "step__distance-duration" }, s("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", this.stepData.transit_information.num_stops ? this.stepData.transit_information.num_stops : null, " ", this.translationsData.stops ? this.translationsData.stops : null)), this.renderToggleButton(), this.renderSubsteps());
+  }
+  static get watchers() {
+    return {
+      step: ["parseStepProp"],
+      translations: ["parseTranslationsProp"]
+    };
+  }
+};
+d.style = p;
+export {
+  d as mi_route_instructions_step_legacy
+};
+//# sourceMappingURL=mi-route-instructions-step-legacy.entry-05ac87cf.mjs.map