@mapsindoors/map-template 1.0.0-rc.1

package/dist/mi-route-instructions-step-legacy.entry-785cb60b.mjs

@@ -0,0 +1,199 @@
+import { r as n, c as r, h as e } from "./webcomponent-a10be1e6.mjs";
+import { U as o } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
+import { c as l } from "./utils-ae714467-b07fc3be.mjs";
+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 s = null;
+    t.target.dataset.maneuverIndex !== void 0 && (s = parseInt(t.target.dataset.maneuverIndex)), this.stepClicked.emit({ maneuverIndex: s });
+  }
+  /**
+   * 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 e("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 e("span", { part: "step-travel-mode", class: `step__travel-mode step__travel-mode--${this.stepData.travel_mode.toUpperCase() === "TRANSIT" ? "solid" : "dotted"}` }, e("span", { class: "step__travel-mode-icon" }, e("mi-icon", { part: "step-travel-mode-icon", "icon-name": t })));
+  }
+  /**
+   * Get icon name for transit vehicle.
+   *
+   * @returns {string}
+   */
+  getTransitVehicleIconName() {
+    var t, s;
+    const i = (s = (t = this.stepData.transit_information) === null || t === void 0 ? void 0 : t.line.vehicle) === null || s === void 0 ? void 0 : s.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 ? e("div", { class: "step__substeps" }, this.stepData.steps.map((t, s) => e("mi-route-instructions-maneuver", {
+      "data-maneuver-index": s,
+      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 : e("span", { class: `step__toggle ${this.substepsAreOpen ? "step__toggle--open" : ""}`, onClick: () => this.toggleSubsteps() }, this.isInternetExplorer ? "▼" : e("mi-icon", { part: "step-toggle", "icon-name": "toggle" }));
+  }
+  /**
+   * Render time and distance part.
+   *
+   * @returns {JSX.Element}
+   */
+  renderTimeAndDistance() {
+    return e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", e("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), e("br", null));
+  }
+  /**
+   * Render a driving step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderDrivingStep() {
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "car" })), e("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.translationsData.drive, e("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Get display heading.
+   *
+   * @returns {string}
+   */
+  getStepHeading() {
+    var t;
+    const s = {
+      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 : s[this.stepData.travel_mode.toLowerCase()];
+  }
+  /**
+   * Render a walking step.
+   *
+   *
+   * @returns {JSX.Element}
+   */
+  renderWalkingStep() {
+    let t, s;
+    return this.stepData.parking === !0 ? (t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}`, s = "park") : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? (t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`, s = "stairs") : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? (t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`, s = "ladder") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? (t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`, s = "escalator") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? (t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-ramp") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? (t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-lift") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? (t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`, s = "elevator") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? (t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context), s = "exit") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? (t = this.fromTransitStop, s = "transit-stop") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? (t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context), s = "enter") : (t = this.fromRouteContext, s = "circle"), e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : e("span", { class: `step__action-icon ${s !== "circle" ? "step__action-icon--circled" : ""}` }, e("mi-icon", { "icon-name": s })), e("h3", { part: "step-heading", class: "step__heading" }, t), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.translationsData.walk, e("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, s) {
+    return s && (s.building ? t += ` ${s.building.buildingInfo.name} ${this.translationsData.building}` : s.venue && (t += ` ${s.venue.venueInfo.name} ${this.translationsData.venue}`)), t;
+  }
+  /**
+   * Render a bicycling step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderBicyclingStep() {
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "bike" })), e("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.translationsData.bike, e("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Render a transit step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderTransitStep() {
+    var t, s;
+    return e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "transit-stop" })), e("h3", { part: "step-heading", class: "step__heading" }, this.stepData.instructions), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.stepData.transit_information.line.short_name ? e("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: !((s = this.stepData.transit_information.line) === null || s === void 0) && s.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, e("br", null), e("span", { part: "step-info", class: "step__distance-duration" }, e("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
+};

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

@@ -0,0 +1,201 @@
+import { r as n, c as r, h as e } from "./reactcomponent-2f9f051f.mjs";
+import { U as o } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
+import { c as l } from "./utils-ae714467-b07fc3be.mjs";
+import "react";
+import "react-dom";
+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 s = null;
+    t.target.dataset.maneuverIndex !== void 0 && (s = parseInt(t.target.dataset.maneuverIndex)), this.stepClicked.emit({ maneuverIndex: s });
+  }
+  /**
+   * 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 e("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 e("span", { part: "step-travel-mode", class: `step__travel-mode step__travel-mode--${this.stepData.travel_mode.toUpperCase() === "TRANSIT" ? "solid" : "dotted"}` }, e("span", { class: "step__travel-mode-icon" }, e("mi-icon", { part: "step-travel-mode-icon", "icon-name": t })));
+  }
+  /**
+   * Get icon name for transit vehicle.
+   *
+   * @returns {string}
+   */
+  getTransitVehicleIconName() {
+    var t, s;
+    const i = (s = (t = this.stepData.transit_information) === null || t === void 0 ? void 0 : t.line.vehicle) === null || s === void 0 ? void 0 : s.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 ? e("div", { class: "step__substeps" }, this.stepData.steps.map((t, s) => e("mi-route-instructions-maneuver", {
+      "data-maneuver-index": s,
+      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 : e("span", { class: `step__toggle ${this.substepsAreOpen ? "step__toggle--open" : ""}`, onClick: () => this.toggleSubsteps() }, this.isInternetExplorer ? "▼" : e("mi-icon", { part: "step-toggle", "icon-name": "toggle" }));
+  }
+  /**
+   * Render time and distance part.
+   *
+   * @returns {JSX.Element}
+   */
+  renderTimeAndDistance() {
+    return e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-time", { seconds: this.stepData.duration.value, translations: `{"days":"${this.translationsData.days}","hours":"${this.translationsData.hours}","minutes":"${this.translationsData.minutes}"}` }), " · ", e("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), e("br", null));
+  }
+  /**
+   * Render a driving step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderDrivingStep() {
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "car" })), e("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.translationsData.drive, e("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Get display heading.
+   *
+   * @returns {string}
+   */
+  getStepHeading() {
+    var t;
+    const s = {
+      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 : s[this.stepData.travel_mode.toLowerCase()];
+  }
+  /**
+   * Render a walking step.
+   *
+   *
+   * @returns {JSX.Element}
+   */
+  renderWalkingStep() {
+    let t, s;
+    return this.stepData.parking === !0 ? (t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}`, s = "park") : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? (t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`, s = "stairs") : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? (t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`, s = "ladder") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? (t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`, s = "escalator") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? (t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-ramp") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? (t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-lift") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? (t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`, s = "elevator") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? (t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context), s = "exit") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? (t = this.fromTransitStop, s = "transit-stop") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? (t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context), s = "enter") : (t = this.fromRouteContext, s = "circle"), e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : e("span", { class: `step__action-icon ${s !== "circle" ? "step__action-icon--circled" : ""}` }, e("mi-icon", { "icon-name": s })), e("h3", { part: "step-heading", class: "step__heading" }, t), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.translationsData.walk, e("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, s) {
+    return s && (s.building ? t += ` ${s.building.buildingInfo.name} ${this.translationsData.building}` : s.venue && (t += ` ${s.venue.venueInfo.name} ${this.translationsData.venue}`)), t;
+  }
+  /**
+   * Render a bicycling step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderBicyclingStep() {
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "bike" })), e("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.translationsData.bike, e("br", null), this.renderTimeAndDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Render a transit step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderTransitStep() {
+    var t, s;
+    return e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "transit-stop" })), e("h3", { part: "step-heading", class: "step__heading" }, this.stepData.instructions), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.stepData.transit_information.line.short_name ? e("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: !((s = this.stepData.transit_information.line) === null || s === void 0) && s.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, e("br", null), e("span", { part: "step-info", class: "step__distance-duration" }, e("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
+};

package/dist/mi-route-instructions-step.entry-272e3c84.mjs

@@ -0,0 +1,199 @@
+import { r, c as o, h as e } from "./webcomponent-a10be1e6.mjs";
+import { U as a } from "./unit-system.enum-eaefb53e-0f424da4.mjs";
+import { c as l } from "./utils-ae714467-b07fc3be.mjs";
+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;gap:8px;justify-items:center}.step__info{display:grid;grid-auto-flow:column;gap:8px;align-items:center}.step__action-icon--circled{position:relative}.step__action-icon mi-icon{display:block;width:40px;height:40px}.step__heading{font-size:1.25rem;margin:0}.step__heading>span{font-size:0.875rem;color:#6b7280}.step__travel-mode{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__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{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{grid-area:substeps}', d = class {
+  constructor(t) {
+    r(this, t), this.stepClicked = o(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 = navigator.language === "en-US" ? a.Imperial : a.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 s = null;
+    t.target.dataset.maneuverIndex !== void 0 && (s = parseInt(t.target.dataset.maneuverIndex)), this.stepClicked.emit({ maneuverIndex: s });
+  }
+  /**
+   * 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 e("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 e("span", { part: "step-travel-mode", class: `step__travel-mode step__travel-mode--${this.stepData.travel_mode.toUpperCase() === "TRANSIT" ? "solid" : "dotted"}` }, e("span", { class: "step__travel-mode-icon" }, e("mi-icon", { part: "step-travel-mode-icon", "icon-name": t })));
+  }
+  /**
+   * Get icon name for transit vehicle.
+   *
+   * @returns {string}
+   */
+  getTransitVehicleIconName() {
+    var t, s;
+    const i = (s = (t = this.stepData.transit_information) === null || t === void 0 ? void 0 : t.line.vehicle) === null || s === void 0 ? void 0 : s.type.toLowerCase();
+    return i && ["boat", "bus", "railway", "train", "subway"].some((n) => n === 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 ? e("div", { class: "step__substeps" }, this.stepData.steps.map((t, s) => e("mi-route-instructions-maneuver", {
+      "data-maneuver-index": s,
+      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 : e("span", { class: `step__toggle ${this.substepsAreOpen ? "step__toggle--open" : ""}`, onClick: () => this.toggleSubsteps() }, this.isInternetExplorer ? "▼" : e("mi-icon", { part: "step-toggle", "icon-name": "toggle" }));
+  }
+  /**
+   * Render distance part.
+   *
+   * @returns {JSX.Element}
+   */
+  renderDistance() {
+    return e("span", { part: "step-info", class: "step__distance-duration" }, e("mi-distance", { meters: this.stepData.distance.value, unit: this.unit }), e("br", null));
+  }
+  /**
+   * Render a driving step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderDrivingStep() {
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "car" })), e("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.translationsData.drive, e("br", null), this.renderDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Get display heading.
+   *
+   * @returns {string}
+   */
+  getStepHeading() {
+    var t;
+    const s = {
+      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 : s[this.stepData.travel_mode.toLowerCase()];
+  }
+  /**
+   * Render a walking step.
+   *
+   *
+   * @returns {JSX.Element}
+   */
+  renderWalkingStep() {
+    let t, s;
+    return this.stepData.parking === !0 ? (t = `${this.translationsData.park} ${this.stepData.label ? ` ${this.translationsData.at} ` + this.stepData.label : ""}`, s = "park") : this.stepData.highway && this.stepData.highway.toUpperCase() === "STEPS" ? (t = `${this.translationsData.takeStaircaseToLevel} ${this.stepData.end_location.floor_name}`, s = "stairs") : this.stepData.highway && this.stepData.highway.toUpperCase() === "LADDER" ? (t = `${this.translationsData.takeLadderToLevel} ${this.stepData.end_location.floor_name}`, s = "ladder") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ESCALATOR" ? (t = `${this.translationsData.takeEscalatorToLevel} ${this.stepData.end_location.floor_name}`, s = "escalator") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRRAMP" ? (t = `${this.translationsData.takeWheelchairRampToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-ramp") : this.stepData.highway && this.stepData.highway.toUpperCase() === "WHEELCHAIRLIFT" ? (t = `${this.translationsData.takeWheelchairLiftToLevel} ${this.stepData.end_location.floor_name}`, s = "wheelchair-lift") : this.stepData.highway && this.stepData.highway.toUpperCase() === "ELEVATOR" ? (t = `${this.translationsData.takeElevatorToLevel} ${this.stepData.end_location.floor_name}`, s = "elevator") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "Outside" ? (t = this.addStepContextNameToHeading(this.translationsData.exit, this.stepData.start_context), s = "exit") : this.fromRouteContext === "InsideBuilding" && this.stepData.route_context === "InsideBuilding" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" && this.fromTravelMode.toUpperCase() === "TRANSIT" ? (t = this.fromTransitStop, s = "transit-stop") : this.fromRouteContext === "Outside" && this.stepData.route_context === "Outside" ? (t = this.getStepHeading(), s = "walk") : this.fromRouteContext === "Outside" && this.stepData.route_context === "InsideBuilding" ? (t = this.addStepContextNameToHeading(this.translationsData.enter, this.stepData.end_context), s = "enter") : (t = this.fromRouteContext, s = "circle"), e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, e("div", { part: "step-description", class: "step__description" }, this.renderDistance()), e("div", { class: "step__info" }, this.isInternetExplorer ? null : e("span", { class: `step__action-icon ${s !== "circle" ? "step__action-icon--circled" : ""}` }, e("mi-icon", { "icon-name": s })), e("div", { part: "step-heading", class: "step__heading" }, t)));
+  }
+  /**
+   * Add building or venue name to the step heading
+   * @param {string} heading
+   * @param {StepContext} stepContext
+   * @returns
+   */
+  addStepContextNameToHeading(t, s) {
+    return s && (s.building ? t += ` ${s.building.buildingInfo.name} ${this.translationsData.building}` : s.venue && (t += ` ${s.venue.venueInfo.name} ${this.translationsData.venue}`)), t;
+  }
+  /**
+   * Render a bicycling step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderBicyclingStep() {
+    return e("div", { class: "step", onClick: (t) => this.stepClickHandler(t) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "bike" })), e("h3", { part: "step-heading", class: "step__heading" }, this.getStepHeading()), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.translationsData.bike, e("br", null), this.renderDistance()), this.renderToggleButton(), this.renderSubsteps());
+  }
+  /**
+   * Render a transit step.
+   *
+   * @returns {JSX.Element}
+   */
+  renderTransitStep() {
+    var t, s;
+    return e("div", { class: "step", onClick: (i) => this.stepClickHandler(i) }, this.isInternetExplorer ? null : e("span", { class: "step__action-icon step__action-icon--circled" }, e("mi-icon", { "icon-name": "transit-stop" })), e("h3", { part: "step-heading", class: "step__heading" }, this.stepData.instructions), this.renderTravelMode(), e("div", { part: "step-description", class: "step__description" }, this.stepData.transit_information.line.short_name ? e("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: !((s = this.stepData.transit_information.line) === null || s === void 0) && s.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, e("br", null), e("span", { part: "step-info", class: "step__distance-duration" }, e("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
+};