@mapsindoors/map-template 1.93.2 → 1.94.0

package/dist/mi-notification.entry.js

@@ -0,0 +1,127 @@
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-7e9696f3.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 || (NotificationPosition = {}));
+
+var NotificationType;
+(function (NotificationType) {
+  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 Notification = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * List of currently displayed notifications.
+     *
+     * @type {NotificationMessage[]}
+     */
+    this.notifications = [];
+    /**
+     * Used for setting a unique identifier for each notification.
+     *
+     * @type {number}
+     */
+    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;
+    }
+    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);
+  }
+  /**
+   * 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" }))));
+    }
+    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" }))));
+  }
+  get hostElement() { return getElement(this); }
+};
+Notification.style = notificationCss;
+
+export { Notification as mi_notification };

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

@@ -0,0 +1,73 @@
+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';
+
+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;
+    }
+  }
+  /**
+   * 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", { 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;
+
+export { RouteInstructionsHeading as mi_route_instructions_heading };

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

@@ -0,0 +1,82 @@
+import { r as registerInstance, h, H as Host } from './index-7e9696f3.js';
+import { U as UnitSystem } from './unit-system.enum-eaefb53e.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 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"]
+  }; }
+};
+RouteInstructionsManeuverLegacy.style = routeInstructionsManeuverLegacyCss;
+
+export { RouteInstructionsManeuverLegacy as mi_route_instructions_maneuver_legacy };

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

@@ -0,0 +1,82 @@
+import { r as registerInstance, h, H as Host } from './index-7e9696f3.js';
+import { U as UnitSystem } from './unit-system.enum-eaefb53e.js';
+
+const routeInstructionsManeuverCss = ":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}";
+
+const RouteInstructionsManeuver = 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("div", { class: "description__text" }, translatedManeuver), h("mi-distance", { part: "maneuver-description-distance", meters: this.maneuverData.distance.value, unit: this.unit }))));
+  }
+  static get watchers() { return {
+    "maneuver": ["parseManeuverProp"],
+    "translations": ["parseTranslationsProp"]
+  }; }
+};
+RouteInstructionsManeuver.style = routeInstructionsManeuverCss;
+
+export { RouteInstructionsManeuver as mi_route_instructions_maneuver };