@mapsindoors/map-template 1.0.0-rc.1

package/dist/mi-list-item-category.entry-b0f61751.mjs

@@ -0,0 +1,38 @@
+import { r as s, c as i, h as e, H as a } from "./reactcomponent-2f9f051f.mjs";
+import { m as o } from "./icon-b8d01d6f-ddfa2c17.mjs";
+import { b as c } from "./utils-ae714467-b07fc3be.mjs";
+import "react";
+import "react-dom";
+const h = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{color:#1c1917;transition:300ms ease;display:flex;align-items:center;cursor:pointer}:host img{-o-object-fit:cover;object-fit:cover}:host([orientation=horizontal]){width:100%;height:100%;float:left;flex-direction:column;justify-content:center}:host([orientation=horizontal]) img{width:48px;height:48px}:host([orientation=horizontal]) p{height:16px;overflow:visible;font-size:0.875rem;line-height:1rem;text-align:center}:host([orientation=vertical]){padding:16px;flex-direction:row;font-size:1rem;font-weight:500;line-height:1.25rem}:host([orientation=vertical]) img{width:24px;height:24px}:host([orientation=vertical]) p{margin:0;padding-left:16px}:host(:hover){background-color:#fcfcfc}", l = class {
+  constructor(t) {
+    s(this, t), this.categoryClicked = i(this, "categoryClicked", 7), this.listItemDidRender = i(this, "listItemDidRender", 7), this.category = void 0, this.orientation = "vertical";
+  }
+  componentDidRender() {
+    this.listItemDidRender.emit(), "objectFit" in document.documentElement.style || this.objectFitImage(this.image);
+  }
+  /**
+   * @description Emits the category object to event listeners.
+   * @private
+   * @param {*} category - Category object.
+   * @memberof ListItemCategory
+   */
+  categoryClickedHandler(t) {
+    this.categoryClicked.emit(t);
+  }
+  /**
+   * @description Set image as background image.
+   * @private
+   * @param {HTMLImageElement} image
+   */
+  objectFitImage(t) {
+    t.setAttribute("style", `background: no-repeat center center url("${this.category.iconUrl}"); background-size: cover;`), t.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${t.width}' height='${t.height}'%3E%3C/svg%3E`;
+  }
+  render() {
+    const t = this.orientation.toUpperCase() === "VERTICAL" ? parseInt(o.icon.size.medium.value) : parseInt(o.icon.size["xx-large"].value), r = c(this.category.iconUrl, t);
+    return e(a, { onClick: () => this.categoryClickedHandler(this.category) }, e("img", { ref: (n) => this.image = n, src: r }), e("p", null, this.category.name));
+  }
+};
+l.style = h;
+export {
+  l as mi_list_item_category
+};

package/dist/mi-list-item-category.entry-bcac342a.mjs

@@ -0,0 +1,36 @@
+import { r as s, c as i, h as e, H as a } from "./webcomponent-a10be1e6.mjs";
+import { m as o } from "./icon-b8d01d6f-ddfa2c17.mjs";
+import { b as c } from "./utils-ae714467-b07fc3be.mjs";
+const h = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{color:#1c1917;transition:300ms ease;display:flex;align-items:center;cursor:pointer}:host img{-o-object-fit:cover;object-fit:cover}:host([orientation=horizontal]){width:100%;height:100%;float:left;flex-direction:column;justify-content:center}:host([orientation=horizontal]) img{width:48px;height:48px}:host([orientation=horizontal]) p{height:16px;overflow:visible;font-size:0.875rem;line-height:1rem;text-align:center}:host([orientation=vertical]){padding:16px;flex-direction:row;font-size:1rem;font-weight:500;line-height:1.25rem}:host([orientation=vertical]) img{width:24px;height:24px}:host([orientation=vertical]) p{margin:0;padding-left:16px}:host(:hover){background-color:#fcfcfc}", l = class {
+  constructor(t) {
+    s(this, t), this.categoryClicked = i(this, "categoryClicked", 7), this.listItemDidRender = i(this, "listItemDidRender", 7), this.category = void 0, this.orientation = "vertical";
+  }
+  componentDidRender() {
+    this.listItemDidRender.emit(), "objectFit" in document.documentElement.style || this.objectFitImage(this.image);
+  }
+  /**
+   * @description Emits the category object to event listeners.
+   * @private
+   * @param {*} category - Category object.
+   * @memberof ListItemCategory
+   */
+  categoryClickedHandler(t) {
+    this.categoryClicked.emit(t);
+  }
+  /**
+   * @description Set image as background image.
+   * @private
+   * @param {HTMLImageElement} image
+   */
+  objectFitImage(t) {
+    t.setAttribute("style", `background: no-repeat center center url("${this.category.iconUrl}"); background-size: cover;`), t.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${t.width}' height='${t.height}'%3E%3C/svg%3E`;
+  }
+  render() {
+    const t = this.orientation.toUpperCase() === "VERTICAL" ? parseInt(o.icon.size.medium.value) : parseInt(o.icon.size["xx-large"].value), r = c(this.category.iconUrl, t);
+    return e(a, { onClick: () => this.categoryClickedHandler(this.category) }, e("img", { ref: (n) => this.image = n, src: r }), e("p", null, this.category.name));
+  }
+};
+l.style = h;
+export {
+  l as mi_list_item_category
+};

package/dist/mi-list-item-location.entry-15ec9c7e.mjs

@@ -0,0 +1,125 @@
+import { r, c as s, h as o, H as c } from "./webcomponent-a10be1e6.mjs";
+import { m as d } from "./icon-b8d01d6f-ddfa2c17.mjs";
+import { b as a } from "./utils-ae714467-b07fc3be.mjs";
+const l = 'html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{padding:16px;font-size:1rem;font-weight:500;line-height:1rem;transition:300ms ease;font-family:-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";border-radius:8px;background-color:#f9fafb;display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:16px;border:1px solid #e5e7eb}:host(:hover){background-color:#fcfcfc}.img-container{width:32px;height:32px;display:flex;justify-content:center;align-items:center}img{border-radius:8px;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details{padding-right:16px;flex:1;display:grid;gap:4px}.details-title{margin:0;padding:0}.distance{font-weight:400}mi-location-info{color:#6b7280}', h = class {
+  constructor(e) {
+    r(this, e), this.locationClicked = s(this, "locationClicked", 7), this.listItemDidRender = s(this, "listItemDidRender", 7), this.iconDisplaySize = parseInt(d.icon.size.medium.value), this.location = void 0, this.unit = void 0, this.icon = void 0, this.iconBadge = void 0, this.iconBadgeValue = void 0, this.iconURLToRender = void 0;
+  }
+  iconChanged() {
+    var e;
+    this.iconURLToRender = this.icon ? this.icon : (e = this.location) === null || e === void 0 ? void 0 : e.properties.imageURL, this.updateBadge();
+  }
+  iconBadgeChanged() {
+    this.updateBadge();
+  }
+  iconBadgeValueChanged() {
+    this.updateBadge();
+  }
+  /**
+   * @description Emits the location to event listeners.
+   * @param {*} location - Location object.
+   * @memberof List
+   */
+  locationClickedHandler(e) {
+    this.locationClicked.emit(e);
+  }
+  componentWillLoad() {
+    var e;
+    this.iconURLToRender = this.icon ? this.icon : (e = this.location) === null || e === void 0 ? void 0 : e.properties.imageURL, this.updateBadge();
+  }
+  componentDidRender() {
+    this.location && (this.infoElement.location = this.location, this.listItemDidRender.emit(), this.imageElement && !("objectFit" in document.documentElement.style) && this.objectFitImage(this.imageElement));
+  }
+  /**
+   * Apply badge to location icon
+   */
+  updateBadge() {
+    this.iconBadge && this.iconBadgeValue && this.iconURLToRender && this.applyBadgeToIcon();
+  }
+  /**
+   * @description Set image as background image.
+   * @param {HTMLImageElement} image
+   */
+  objectFitImage(e) {
+    e.setAttribute("style", `background: no-repeat center center url("${this.iconURLToRender}"); background-size: cover;`), e.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${e.width}' height='${e.height}'%3E%3C/svg%3E`;
+  }
+  /**
+   * Apply badge to location icon.
+   * Will make the original icon appear the intended size even though the badge exceeds its bounds.
+   */
+  applyBadgeToIcon() {
+    let e;
+    this.iconURLToRender = this.icon ? this.icon : this.location.properties.imageURL;
+    const t = a(this.iconURLToRender, this.iconDisplaySize);
+    this.getImageFromUrl(t).then((i) => {
+      switch (e = i.width / 24, this.iconBadge.toLowerCase()) {
+        case "availability":
+          if (this.iconBadgeValue === "true")
+            return mapsindoors.BadgeRenderer.AvailableBadge.overlay(i);
+          if (this.iconBadgeValue === "false")
+            return mapsindoors.BadgeRenderer.UnavailableBadge.overlay(i);
+          break;
+        case "occupancy":
+          return mapsindoors.BadgeRenderer.TextBadge.overlay(i, {
+            text: this.iconBadgeValue.toString()
+          });
+      }
+    }).then((i) => {
+      if (i) {
+        this.iconURLToRender = i.src;
+        const n = (i.width - 24) / -2;
+        this.iconAttributes = {
+          style: {
+            transform: "translateX(" + n + "px)",
+            width: i.width / e + "px",
+            height: i.height / e + "px"
+          }
+        };
+      }
+    });
+  }
+  /**
+   * Create and return an Image from URL.
+   * @param {string} url
+   * @returns {Image}
+   */
+  async getImageFromUrl(e) {
+    return fetch(e).then((t) => t.blob()).then((t) => URL.createObjectURL(t)).then((t) => new Promise((i) => {
+      const n = new Image();
+      n.width = this.iconDisplaySize, n.height = this.iconDisplaySize, n.onload = () => i(n), n.onerror = () => i(null), n.src = t;
+    }));
+  }
+  /**
+   * @description Render location list-item.
+   * @returns {JSX.Element}
+   */
+  render() {
+    return this.location && o(c, { role: "listitem", onClick: () => this.locationClickedHandler(this.location) }, this.iconURLToRender ? this.renderIcon() : null, o("div", { class: "details" }, o("p", { class: "details-title" }, this.location.properties.name), o("mi-location-info", { ref: (e) => this.infoElement = e })), this.location.properties.geodesicDistance && this.renderDistance());
+  }
+  /**
+   * @description Get JSX template for icon.
+   * @returns {JSX.Element}
+   */
+  renderIcon() {
+    const e = a(this.iconURLToRender, this.iconDisplaySize);
+    return o("div", { class: "img-container" }, o("img", Object.assign({}, this.iconAttributes, { ref: (t) => this.imageElement = t, src: e })));
+  }
+  /**
+   * @description Get JSX template for distance.
+   * @returns {JSX.Element}
+   */
+  renderDistance() {
+    return o("div", { class: "distance" }, o("mi-distance", { meters: this.location.properties.geodesicDistance, unit: this.unit }));
+  }
+  static get watchers() {
+    return {
+      icon: ["iconChanged"],
+      iconBadge: ["iconBadgeChanged"],
+      iconBadgeValue: ["iconBadgeValueChanged"]
+    };
+  }
+};
+h.style = l;
+export {
+  h as mi_list_item_location
+};

package/dist/mi-list-item-location.entry-ee56967a.mjs

@@ -0,0 +1,127 @@
+import { r, c as s, h as o, H as c } from "./reactcomponent-2f9f051f.mjs";
+import { m as d } from "./icon-b8d01d6f-ddfa2c17.mjs";
+import { b as a } from "./utils-ae714467-b07fc3be.mjs";
+import "react";
+import "react-dom";
+const l = 'html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{padding:16px;font-size:1rem;font-weight:500;line-height:1rem;transition:300ms ease;font-family:-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";border-radius:8px;background-color:#f9fafb;display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:16px;border:1px solid #e5e7eb}:host(:hover){background-color:#fcfcfc}.img-container{width:32px;height:32px;display:flex;justify-content:center;align-items:center}img{border-radius:8px;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details{padding-right:16px;flex:1;display:grid;gap:4px}.details-title{margin:0;padding:0}.distance{font-weight:400}mi-location-info{color:#6b7280}', h = class {
+  constructor(e) {
+    r(this, e), this.locationClicked = s(this, "locationClicked", 7), this.listItemDidRender = s(this, "listItemDidRender", 7), this.iconDisplaySize = parseInt(d.icon.size.medium.value), this.location = void 0, this.unit = void 0, this.icon = void 0, this.iconBadge = void 0, this.iconBadgeValue = void 0, this.iconURLToRender = void 0;
+  }
+  iconChanged() {
+    var e;
+    this.iconURLToRender = this.icon ? this.icon : (e = this.location) === null || e === void 0 ? void 0 : e.properties.imageURL, this.updateBadge();
+  }
+  iconBadgeChanged() {
+    this.updateBadge();
+  }
+  iconBadgeValueChanged() {
+    this.updateBadge();
+  }
+  /**
+   * @description Emits the location to event listeners.
+   * @param {*} location - Location object.
+   * @memberof List
+   */
+  locationClickedHandler(e) {
+    this.locationClicked.emit(e);
+  }
+  componentWillLoad() {
+    var e;
+    this.iconURLToRender = this.icon ? this.icon : (e = this.location) === null || e === void 0 ? void 0 : e.properties.imageURL, this.updateBadge();
+  }
+  componentDidRender() {
+    this.location && (this.infoElement.location = this.location, this.listItemDidRender.emit(), this.imageElement && !("objectFit" in document.documentElement.style) && this.objectFitImage(this.imageElement));
+  }
+  /**
+   * Apply badge to location icon
+   */
+  updateBadge() {
+    this.iconBadge && this.iconBadgeValue && this.iconURLToRender && this.applyBadgeToIcon();
+  }
+  /**
+   * @description Set image as background image.
+   * @param {HTMLImageElement} image
+   */
+  objectFitImage(e) {
+    e.setAttribute("style", `background: no-repeat center center url("${this.iconURLToRender}"); background-size: cover;`), e.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${e.width}' height='${e.height}'%3E%3C/svg%3E`;
+  }
+  /**
+   * Apply badge to location icon.
+   * Will make the original icon appear the intended size even though the badge exceeds its bounds.
+   */
+  applyBadgeToIcon() {
+    let e;
+    this.iconURLToRender = this.icon ? this.icon : this.location.properties.imageURL;
+    const t = a(this.iconURLToRender, this.iconDisplaySize);
+    this.getImageFromUrl(t).then((i) => {
+      switch (e = i.width / 24, this.iconBadge.toLowerCase()) {
+        case "availability":
+          if (this.iconBadgeValue === "true")
+            return mapsindoors.BadgeRenderer.AvailableBadge.overlay(i);
+          if (this.iconBadgeValue === "false")
+            return mapsindoors.BadgeRenderer.UnavailableBadge.overlay(i);
+          break;
+        case "occupancy":
+          return mapsindoors.BadgeRenderer.TextBadge.overlay(i, {
+            text: this.iconBadgeValue.toString()
+          });
+      }
+    }).then((i) => {
+      if (i) {
+        this.iconURLToRender = i.src;
+        const n = (i.width - 24) / -2;
+        this.iconAttributes = {
+          style: {
+            transform: "translateX(" + n + "px)",
+            width: i.width / e + "px",
+            height: i.height / e + "px"
+          }
+        };
+      }
+    });
+  }
+  /**
+   * Create and return an Image from URL.
+   * @param {string} url
+   * @returns {Image}
+   */
+  async getImageFromUrl(e) {
+    return fetch(e).then((t) => t.blob()).then((t) => URL.createObjectURL(t)).then((t) => new Promise((i) => {
+      const n = new Image();
+      n.width = this.iconDisplaySize, n.height = this.iconDisplaySize, n.onload = () => i(n), n.onerror = () => i(null), n.src = t;
+    }));
+  }
+  /**
+   * @description Render location list-item.
+   * @returns {JSX.Element}
+   */
+  render() {
+    return this.location && o(c, { role: "listitem", onClick: () => this.locationClickedHandler(this.location) }, this.iconURLToRender ? this.renderIcon() : null, o("div", { class: "details" }, o("p", { class: "details-title" }, this.location.properties.name), o("mi-location-info", { ref: (e) => this.infoElement = e })), this.location.properties.geodesicDistance && this.renderDistance());
+  }
+  /**
+   * @description Get JSX template for icon.
+   * @returns {JSX.Element}
+   */
+  renderIcon() {
+    const e = a(this.iconURLToRender, this.iconDisplaySize);
+    return o("div", { class: "img-container" }, o("img", Object.assign({}, this.iconAttributes, { ref: (t) => this.imageElement = t, src: e })));
+  }
+  /**
+   * @description Get JSX template for distance.
+   * @returns {JSX.Element}
+   */
+  renderDistance() {
+    return o("div", { class: "distance" }, o("mi-distance", { meters: this.location.properties.geodesicDistance, unit: this.unit }));
+  }
+  static get watchers() {
+    return {
+      icon: ["iconChanged"],
+      iconBadge: ["iconBadgeChanged"],
+      iconBadgeValue: ["iconBadgeValueChanged"]
+    };
+  }
+};
+h.style = l;
+export {
+  h as mi_list_item_location
+};

package/dist/mi-list.entry-656130ea.mjs

@@ -0,0 +1,41 @@
+import { r as s, h as e } from "./reactcomponent-2f9f051f.mjs";
+import "react";
+import "react-dom";
+const l = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{display:block;height:100%;width:100%}.container{height:100%;display:flex}.container .scroll-container{width:100%;overflow-y:auto}", n = class {
+  constructor(t) {
+    s(this, t), this.scrollButtonsEnabled = !1, this.scrollLength = 100;
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver(), this.scrollButtonsEnabled && this.setScrollContainerElementRef();
+  }
+  /**
+   * @description Update state of scroll buttons when a "listItemDidRender" event is fired.
+   * @private
+   */
+  updateScrollButtonsState() {
+    this.scrollButtonsEnabled && this.miScrollButtonsElement.scrollContainerElementRef && this.miScrollButtonsElement.updateScrollButtonsState();
+  }
+  /**
+   * @description Set scrollContainerElementRef attribute on miScrollButtonsElement.
+   * @private
+   */
+  setScrollContainerElementRef() {
+    this.miScrollButtonsElement.scrollContainerElementRef = this.scrollContainerElement;
+  }
+  /**
+   * @description Add intersection observer and update scroll buttons state on intersection – workaround to avoid the element not having any dimensions before it's shown.
+   * @private
+   */
+  addIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver((t) => {
+      t[0].intersectionRatio <= 0 || (this.scrollContainerElement.scrollHeight - this.scrollContainerElement.scrollTop === this.scrollContainerElement.clientHeight && this.updateScrollButtonsState(), this.intersectionObserver.disconnect());
+    }), this.intersectionObserver.observe(this.scrollContainerElement);
+  }
+  render() {
+    return e("div", { class: "container" }, e("div", { role: "list", class: "scroll-container", ref: (t) => this.scrollContainerElement = t }, e("slot", null)), this.scrollButtonsEnabled ? e("mi-scroll-buttons", { scrollLength: this.scrollLength, ref: (t) => this.miScrollButtonsElement = t }) : null);
+  }
+};
+n.style = l;
+export {
+  n as mi_list
+};

package/dist/mi-list.entry-c8f1f377.mjs

@@ -0,0 +1,39 @@
+import { r as s, h as e } from "./webcomponent-a10be1e6.mjs";
+const l = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{display:block;height:100%;width:100%}.container{height:100%;display:flex}.container .scroll-container{width:100%;overflow-y:auto}", n = class {
+  constructor(t) {
+    s(this, t), this.scrollButtonsEnabled = !1, this.scrollLength = 100;
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver(), this.scrollButtonsEnabled && this.setScrollContainerElementRef();
+  }
+  /**
+   * @description Update state of scroll buttons when a "listItemDidRender" event is fired.
+   * @private
+   */
+  updateScrollButtonsState() {
+    this.scrollButtonsEnabled && this.miScrollButtonsElement.scrollContainerElementRef && this.miScrollButtonsElement.updateScrollButtonsState();
+  }
+  /**
+   * @description Set scrollContainerElementRef attribute on miScrollButtonsElement.
+   * @private
+   */
+  setScrollContainerElementRef() {
+    this.miScrollButtonsElement.scrollContainerElementRef = this.scrollContainerElement;
+  }
+  /**
+   * @description Add intersection observer and update scroll buttons state on intersection – workaround to avoid the element not having any dimensions before it's shown.
+   * @private
+   */
+  addIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver((t) => {
+      t[0].intersectionRatio <= 0 || (this.scrollContainerElement.scrollHeight - this.scrollContainerElement.scrollTop === this.scrollContainerElement.clientHeight && this.updateScrollButtonsState(), this.intersectionObserver.disconnect());
+    }), this.intersectionObserver.observe(this.scrollContainerElement);
+  }
+  render() {
+    return e("div", { class: "container" }, e("div", { role: "list", class: "scroll-container", ref: (t) => this.scrollContainerElement = t }, e("slot", null)), this.scrollButtonsEnabled ? e("mi-scroll-buttons", { scrollLength: this.scrollLength, ref: (t) => this.miScrollButtonsElement = t }) : null);
+  }
+};
+n.style = l;
+export {
+  n as mi_list
+};