@mapsindoors/map-template 1.0.0-rc.2 → 1.0.0

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

@@ -1,38 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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-b642f1fb.mjs

@@ -1,125 +0,0 @@
-import { r, c as s, h as o, H as c } from "./webcomponent-ac588828.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

@@ -1,127 +0,0 @@
-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-c8f1f377.mjs

@@ -1,39 +0,0 @@
-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
-};

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

@@ -1,41 +0,0 @@
-import { r as s, h as e } from "./reactcomponent-aa96e777.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
-};