@mapsindoors/map-template 1.95.1 → 1.95.2

package/dist/mi-notification.entry.js

@@ -1,127 +1,137 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-7e9696f3.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-BZQHyS7V.js';
 
 var NotificationPosition;
 (function (NotificationPosition) {
-  NotificationPosition["TOP_LEFT"] = "top-left";
-  NotificationPosition["TOP_CENTER"] = "top-center";
-  NotificationPosition["TOP_RIGHT"] = "top-right";
-  NotificationPosition["BOTTOM_CENTER"] = "bottom-center";
-  NotificationPosition["BOTTOM_LEFT"] = "bottom-left";
-  NotificationPosition["BOTTOM_RIGHT"] = "bottom-right";
+    NotificationPosition["TOP_LEFT"] = "top-left";
+    NotificationPosition["TOP_CENTER"] = "top-center";
+    NotificationPosition["TOP_RIGHT"] = "top-right";
+    NotificationPosition["BOTTOM_CENTER"] = "bottom-center";
+    NotificationPosition["BOTTOM_LEFT"] = "bottom-left";
+    NotificationPosition["BOTTOM_RIGHT"] = "bottom-right";
 })(NotificationPosition || (NotificationPosition = {}));
 
 var NotificationType;
 (function (NotificationType) {
-  NotificationType["Error"] = "error";
-  NotificationType["Info"] = "info";
-  NotificationType["Success"] = "success";
-  NotificationType["Warning"] = "warning";
-  NotificationType["None"] = "none";
+    NotificationType["Error"] = "error";
+    NotificationType["Info"] = "info";
+    NotificationType["Success"] = "success";
+    NotificationType["Warning"] = "warning";
+    NotificationType["None"] = "none";
 })(NotificationType || (NotificationType = {}));
 
-const notificationCss = ":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}";
+const notificationCss = () => `: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}`;
 
 const Notification = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Where the notifications should be positioned.
+         *
+         * @type {NotificationPosition}
+         */
+        this.position = NotificationPosition.BOTTOM_RIGHT;
+        /**
+         * Time the notification should be visible. Default value is 3.
+         *
+         * @type {number} - Duration in seconds.
+         */
+        this.duration = 3;
+        /**
+         * List of currently displayed notifications.
+         *
+         * @type {NotificationMessage[]}
+         */
+        this.notifications = [];
+        /**
+         * Used for setting a unique identifier for each notification.
+         *
+         * @type {number}
+         */
+        this.notificationId = 0;
+    }
     /**
-     * List of currently displayed notifications.
+     * Show a notification.
      *
-     * @type {NotificationMessage[]}
+     * @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>}
      */
-    this.notifications = [];
+    async push(message, type = 'none', sticky = false) {
+        if (typeof message !== 'string' || message.length < 1) {
+            return;
+        }
+        // Check validity of type
+        const typeExist = Object.values(NotificationType)
+            .some((notificationType) => notificationType === type);
+        if (!typeExist) {
+            // eslint-disable-next-line no-console
+            console.error('Invalid notification type');
+            return;
+        }
+        const notificationMessage = {
+            id: this.notificationId,
+            message: message,
+            sticky: sticky,
+            type: type,
+        };
+        if (sticky === false) {
+            notificationMessage.timer = window.setTimeout(() => this.dismiss(notificationMessage.id), (this.duration * 1000));
+        }
+        this.notificationId++;
+        this.notifications.push(notificationMessage);
+        forceUpdate(this.hostElement);
+    }
     /**
-     * Used for setting a unique identifier for each notification.
+     * Clear all notifications.
      *
-     * @type {number}
+     * @returns {Promise<void>}
      */
-    this.notificationId = 0;
-    this.position = NotificationPosition.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(message, type = 'none', sticky = false) {
-    if (typeof message !== 'string' || message.length < 1) {
-      return;
-    }
-    // Check validity of type
-    const typeExist = Object.values(NotificationType)
-      .some((notificationType) => notificationType === type);
-    if (!typeExist) {
-      // eslint-disable-next-line no-console
-      console.error('Invalid notification type');
-      return;
+    async clearAll() {
+        this.notifications = [];
+        forceUpdate(this.hostElement);
     }
-    const notificationMessage = {
-      id: this.notificationId,
-      message: message,
-      sticky: sticky,
-      type: type,
-    };
-    if (sticky === false) {
-      notificationMessage.timer = window.setTimeout(() => this.dismiss(notificationMessage.id), (this.duration * 1000));
+    /**
+     * Dismiss a single notification.
+     *
+     * @param {number} id
+     */
+    dismiss(id) {
+        this.notifications = this.notifications.filter((notification) => notification.id !== id);
+        forceUpdate(this.hostElement);
     }
-    this.notificationId++;
-    this.notifications.push(notificationMessage);
-    forceUpdate(this.hostElement);
-  }
-  /**
-   * Clear all notifications.
-   *
-   * @returns {Promise<void>}
-   */
-  async clearAll() {
-    this.notifications = [];
-    forceUpdate(this.hostElement);
-  }
-  /**
-   * Dismiss a single notification.
-   *
-   * @param {number} id
-   */
-  dismiss(id) {
-    this.notifications = this.notifications.filter((notification) => notification.id !== id);
-    forceUpdate(this.hostElement);
-  }
-  render() {
-    return (h(Host, { class: this.position }, this.notifications.map((notification) => this.renderNotification(notification))));
-  }
-  /**
-   * Get JSX for notification.
-   *
-   * @param {NotificationMessage} { id, message }
-   * @returns {JSX.Element}
-   */
-  renderNotification({ id, message, type }) {
-    return (h("div", { class: "notification", role: "alert" }, type && type !== 'none' ? this.renderIcon(type) : null, h("p", { class: "label" }, message), h("button", { type: "button", "aria-label": "Dismiss notification", class: "btn", onClick: () => this.dismiss(id) }, h("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" }, h("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(type) {
-    if (type === NotificationType.Error) {
-      return (h("div", { class: "icon icon-type--error" }, h("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" }, h("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" }))));
+    render() {
+        return (h(Host, { key: 'df85a60b1ee91303adcae496907fb42839842de1', class: this.position }, this.notifications.map((notification) => this.renderNotification(notification))));
     }
-    else if (type === NotificationType.Success) {
-      return (h("div", { class: "icon icon-type--success" }, h("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" }, h("path", { d: "M5.99997 11.17L1.82997 7L0.409973 8.41L5.99997 14L18 2L16.59 0.59L5.99997 11.17Z", fill: "#FCFCFC" }))));
+    /**
+     * Get JSX for notification.
+     *
+     * @param {NotificationMessage} { id, message }
+     * @returns {JSX.Element}
+     */
+    renderNotification({ id, message, type }) {
+        return (h("div", { class: "notification", role: "alert" }, type && type !== 'none' ? this.renderIcon(type) : null, h("p", { class: "label" }, message), h("button", { type: "button", "aria-label": "Dismiss notification", class: "btn", onClick: () => this.dismiss(id) }, h("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" }, h("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" })))));
     }
-    else if (type === NotificationType.Warning) {
-      return (h("div", { class: "icon icon-type--warning" }, h("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" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22 19L11 0L0 19H22ZM10 16V14H12V16H10ZM10 12H12V8H10V12Z", fill: "#FCFCFC" }))));
+    /**
+     * Get JSX for type-icon.
+     *
+     * @param {NotificationType} type
+     * @returns {JSX.Element}
+     */
+    renderIcon(type) {
+        if (type === NotificationType.Error) {
+            return (h("div", { class: "icon icon-type--error" }, h("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" }, h("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" }))));
+        }
+        else if (type === NotificationType.Success) {
+            return (h("div", { class: "icon icon-type--success" }, h("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" }, h("path", { d: "M5.99997 11.17L1.82997 7L0.409973 8.41L5.99997 14L18 2L16.59 0.59L5.99997 11.17Z", fill: "#FCFCFC" }))));
+        }
+        else if (type === NotificationType.Warning) {
+            return (h("div", { class: "icon icon-type--warning" }, h("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" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22 19L11 0L0 19H22ZM10 16V14H12V16H10ZM10 12H12V8H10V12Z", fill: "#FCFCFC" }))));
+        }
+        return (h("div", { class: "icon icon-type--info" }, h("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" }, h("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" }))));
     }
-    return (h("div", { class: "icon icon-type--info" }, h("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" }, h("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 getElement(this); }
+    get hostElement() { return getElement(this); }
 };
-Notification.style = notificationCss;
+Notification.style = notificationCss();
 
 export { Notification as mi_notification };

package/dist/mi-route-instructions-heading.entry.js

@@ -1,73 +1,78 @@
-import { r as registerInstance, h } from './index-7e9696f3.js';
-import { R as RouteTravelMode } from './route-travel-mode.enum-7f4ce9c7.js';
-import { U as UnitSystem } from './unit-system.enum-eaefb53e.js';
+import { r as registerInstance, h } from './index-BZQHyS7V.js';
+import { R as RouteTravelMode } from './route-travel-mode.enum-BvqP1fpw.js';
+import { U as UnitSystem } from './unit-system.enum-BwPgAWqL.js';
 
-const routeInstructionsHeadingCss = ".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}";
+const routeInstructionsHeadingCss = () => `.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}`;
 
 const RouteInstructionsHeading = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.originName = undefined;
-    this.destinationName = undefined;
-    this.totalTravelTime = undefined;
-    this.totalWalkingDistance = undefined;
-    this.travelMode = RouteTravelMode.Walking;
-    this.unit = UnitSystem.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 RouteTravelMode.Walking: return this.translations.walk;
-      case RouteTravelMode.Driving: return this.translations.car;
-      case RouteTravelMode.Transit: return this.translations.transit;
-      case RouteTravelMode.Bicycling: return this.translations.bike;
-      default: return this.translations.walk;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Set preferred travel mode. Defaults to "walking".
+         *
+         * @type {RouteTravelMode} 'walking', 'bicycling', 'transit', 'driving'.
+         */
+        this.travelMode = RouteTravelMode.Walking;
+        /**
+         * Set 'imperial' or 'metric' as default unit system.
+         * @type {UnitSystem} 'imperial' or 'metric'
+         */
+        this.unit = UnitSystem.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 icon name for travel mode.
-   *
-   * @returns {string}
-   */
-  getTravelModeIconName() {
-    switch (this.travelMode) {
-      case RouteTravelMode.Walking: return 'walk';
-      case RouteTravelMode.Driving: return 'car';
-      case RouteTravelMode.Transit: return 'transit';
-      case RouteTravelMode.Bicycling: return 'bike';
-      default: return 'walk';
+    /**
+     * Get travel mode as a string. Eg. "Walking", "Driving", "Transit", "Bicycling".
+     *
+     * @returns {string}
+     */
+    getTravelModeString() {
+        switch (this.travelMode) {
+            case RouteTravelMode.Walking: return this.translations.walk;
+            case RouteTravelMode.Driving: return this.translations.car;
+            case RouteTravelMode.Transit: return this.translations.transit;
+            case RouteTravelMode.Bicycling: return this.translations.bike;
+            default: return this.translations.walk;
+        }
+    }
+    /**
+     * Get icon name for travel mode.
+     *
+     * @returns {string}
+     */
+    getTravelModeIconName() {
+        switch (this.travelMode) {
+            case RouteTravelMode.Walking: return 'walk';
+            case RouteTravelMode.Driving: return 'car';
+            case RouteTravelMode.Transit: return 'transit';
+            case RouteTravelMode.Bicycling: return 'bike';
+            default: return 'walk';
+        }
+    }
+    render() {
+        return (h("div", { key: '5d9148321941db7361dacfdf718c53a2da67db30', class: "directions" }, this.originName && this.destinationName ? this.renderWayPoints() : null, h("div", { key: 'bca5a290ac376323d54f7dabfcb6dad615e1a07c', class: "directions-details" }, this.totalTravelTime >= 0 || this.totalWalkingDistance >= 0 ?
+            h("div", { class: "directions-details-numbers" }, this.totalTravelTime >= 0 ? h("div", null, h("mi-time", { seconds: this.totalTravelTime })) : null, this.totalWalkingDistance >= 0 ? h("div", { class: "directions-details-numbers-distance" }, h("mi-distance", { meters: this.totalWalkingDistance }), " ", this.translations.walking.toLowerCase()) : null) :
+            null, h("a", { key: '5586c46b4ba42d150f34437ee8153239d9bfdf1f', href: "#", class: "directions-details-travel-mode-selector" }, this.getTravelModeString(), h("mi-icon", { key: 'ced88ceba183c370aa5e1e331596b0d5003d836c', "icon-name": this.getTravelModeIconName() })))));
+    }
+    /**
+     * Render direction way points.
+     *
+     * @returns {JSX.Element}
+     */
+    renderWayPoints() {
+        return (h("div", { class: "directions-way-points" }, h("span", null, this.translations.to, " ", this.destinationName), h("span", null, this.translations.from, " ", h("a", { href: "#" }, this.originName))));
     }
-  }
-  render() {
-    return (h("div", { class: "directions" }, this.originName && this.destinationName ? this.renderWayPoints() : null, h("div", { class: "directions-details" }, this.totalTravelTime >= 0 || this.totalWalkingDistance >= 0 ?
-      h("div", { class: "directions-details-numbers" }, this.totalTravelTime >= 0 ? h("div", null, h("mi-time", { seconds: this.totalTravelTime })) : null, this.totalWalkingDistance >= 0 ? h("div", { class: "directions-details-numbers-distance" }, h("mi-distance", { meters: this.totalWalkingDistance }), " ", this.translations.walking.toLowerCase()) : null) :
-      null, h("a", { href: "#", class: "directions-details-travel-mode-selector" }, this.getTravelModeString(), h("mi-icon", { "icon-name": this.getTravelModeIconName() })))));
-  }
-  /**
-   * Render direction way points.
-   *
-   * @returns {JSX.Element}
-   */
-  renderWayPoints() {
-    return (h("div", { class: "directions-way-points" }, h("span", null, this.translations.to, " ", this.destinationName), h("span", null, this.translations.from, " ", h("a", { href: "#" }, this.originName))));
-  }
 };
-RouteInstructionsHeading.style = routeInstructionsHeadingCss;
+RouteInstructionsHeading.style = routeInstructionsHeadingCss();
 
 export { RouteInstructionsHeading as mi_route_instructions_heading };

package/dist/mi-route-instructions-maneuver-legacy.entry.js

@@ -1,82 +1,86 @@
-import { r as registerInstance, h, H as Host } from './index-7e9696f3.js';
-import { U as UnitSystem } from './unit-system.enum-eaefb53e.js';
+import { r as registerInstance, h, H as Host } from './index-BZQHyS7V.js';
+import { U as UnitSystem } from './unit-system.enum-BwPgAWqL.js';
 
-const routeInstructionsManeuverLegacyCss = ":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}";
+const routeInstructionsManeuverLegacyCss = () => `: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}`;
 
 const RouteInstructionsManeuverLegacy = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.maneuver = undefined;
-    this.maneuverData = undefined;
-    this.translations = undefined;
-    this.translationsData = undefined;
-    this.unit = UnitSystem.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(maneuver) {
-    if (maneuver.includes('straight'))
-      return 'straight';
-    if (maneuver.includes('sharp right'))
-      return 'sharp-right';
-    if (maneuver.includes('sharp left'))
-      return 'sharp-left';
-    if (maneuver.includes('slight right'))
-      return 'slight-right';
-    if (maneuver.includes('slight left'))
-      return 'slight-left';
-    if (maneuver.includes('right'))
-      return 'right';
-    if (maneuver.includes('left'))
-      return 'left';
-    if (maneuver.includes('uturn'))
-      return 'u-turn';
-    if (maneuver.includes('depart'))
-      return 'straight';
-  }
-  render() {
-    return (this.maneuverData && this.translationsData ? this.renderManeuver() : null);
-  }
-  /**
-   * Render step.
-   *
-   * @returns {JSX.Element}
-   */
-  renderManeuver() {
-    const maneuverStrings = {
-      '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'
-    };
-    const maneuver = this.getManeuverName(this.maneuverData.maneuver.toLowerCase());
-    const iconName = `arrow-${maneuver}`;
-    // Check if the instructions property has a value otherwise fallback to maneuver property
-    const translatedManeuver = this.maneuverData.instructions ? this.maneuverData.instructions : maneuverStrings[maneuver];
-    return (h(Host, null, h("div", { class: "icon" }, maneuver ? h("mi-icon", { part: "maneuver-icon", "icon-name": iconName }) : null), h("div", { class: "description" }, h("p", { part: "maneuver-description" }, translatedManeuver), h("div", { class: "description__distance" }, h("mi-distance", { part: "maneuver-description-distance", meters: this.maneuverData.distance.value, unit: this.unit }), h("span", { part: "maneuver-description-distance-border", class: "description__distance-border" })))));
-  }
-  static get watchers() { return {
-    "maneuver": ["parseManeuverProp"],
-    "translations": ["parseTranslationsProp"]
-  }; }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Set imperial or metric as default unit system.
+         * @type {UnitSystem} 'imperial' or 'metric'
+         */
+        this.unit = UnitSystem.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(maneuver) {
+        if (maneuver.includes('straight'))
+            return 'straight';
+        if (maneuver.includes('sharp right'))
+            return 'sharp-right';
+        if (maneuver.includes('sharp left'))
+            return 'sharp-left';
+        if (maneuver.includes('slight right'))
+            return 'slight-right';
+        if (maneuver.includes('slight left'))
+            return 'slight-left';
+        if (maneuver.includes('right'))
+            return 'right';
+        if (maneuver.includes('left'))
+            return 'left';
+        if (maneuver.includes('uturn'))
+            return 'u-turn';
+        if (maneuver.includes('depart'))
+            return 'straight';
+    }
+    render() {
+        return (this.maneuverData && this.translationsData ? this.renderManeuver() : null);
+    }
+    /**
+     * Render step.
+     *
+     * @returns {JSX.Element}
+     */
+    renderManeuver() {
+        const maneuverStrings = {
+            'straight': this.translationsData.continueStraightAhead, // 'Continue straight ahead',
+            'left': `${this.translationsData.goLeft} ${this.translationsData.andContinue}`, // 'Go left and continue',
+            'sharp-left': `${this.translationsData.goSharpLeft} ${this.translationsData.andContinue}`, // 'Go sharp left and continue',
+            'slight-left': `${this.translationsData.goSlightLeft} ${this.translationsData.andContinue}`, // 'Go slight left and continue',
+            'right': `${this.translationsData.goRight} ${this.translationsData.andContinue}`, // 'Go right and continue',
+            'sharp-right': `${this.translationsData.goSharpRight} ${this.translationsData.andContinue}`, // 'Go sharp right and continue',
+            'slight-right': `${this.translationsData.goSlightRight} ${this.translationsData.andContinue}`, // 'Go slight right and continue',
+            'u-turn': `${this.translationsData.turnAround} ${this.translationsData.andContinue}`, // 'Turn around and continue'
+        };
+        const maneuver = this.getManeuverName(this.maneuverData.maneuver.toLowerCase());
+        const iconName = `arrow-${maneuver}`;
+        // Check if the instructions property has a value otherwise fallback to maneuver property
+        const translatedManeuver = this.maneuverData.instructions ? this.maneuverData.instructions : maneuverStrings[maneuver];
+        return (h(Host, null, h("div", { class: "icon" }, maneuver ? h("mi-icon", { part: "maneuver-icon", "icon-name": iconName }) : null), h("div", { class: "description" }, h("p", { part: "maneuver-description" }, translatedManeuver), h("div", { class: "description__distance" }, h("mi-distance", { part: "maneuver-description-distance", meters: this.maneuverData.distance.value, unit: this.unit }), h("span", { part: "maneuver-description-distance-border", class: "description__distance-border" })))));
+    }
+    static get watchers() { return {
+        "maneuver": [{
+                "parseManeuverProp": 0
+            }],
+        "translations": [{
+                "parseTranslationsProp": 0
+            }]
+    }; }
 };
-RouteInstructionsManeuverLegacy.style = routeInstructionsManeuverLegacyCss;
+RouteInstructionsManeuverLegacy.style = routeInstructionsManeuverLegacyCss();
 
 export { RouteInstructionsManeuverLegacy as mi_route_instructions_maneuver_legacy };