@mapsindoors/map-template 1.93.2 → 1.94.0

package/dist/mi-list-item-location.entry.js

@@ -0,0 +1,171 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-7e9696f3.js';
+import { m as midtIcon } from './icon-b8d01d6f.js';
+import { b as appendMapsIndoorsImageQueryParameters } from './utils-ae714467.js';
+
+const listItemLocationCss = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{padding:1rem;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:1rem;border:1px solid #e5e7eb}:host(:hover),:host(.hovered){background-color:var(--tailwind-colors-gray-200);border:1px solid #d1d5db}.img-container{width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;flex-shrink:0}img{border-radius:8px;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details{padding-right:1rem;flex:1;min-width:0;display:grid;gap:0.25rem}.details-title{margin:0;padding:0}.distance{font-weight:400}mi-location-info{color:#6b7280}";
+
+const ListItemLocation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.locationClicked = createEvent(this, "locationClicked", 7);
+    this.listItemDidRender = createEvent(this, "listItemDidRender", 7);
+    this.iconDisplaySize = parseInt(midtIcon.icon.size.medium.value);
+    this.location = undefined;
+    this.showExternalId = true;
+    this.unit = undefined;
+    this.icon = undefined;
+    this.level = 'Level';
+    this.iconBadge = undefined;
+    this.iconBadgeValue = undefined;
+    this.iconURLToRender = undefined;
+  }
+  iconChanged() {
+    var _a;
+    this.iconURLToRender = this.icon ? this.icon : (_a = this.location) === null || _a === void 0 ? void 0 : _a.properties.imageURL;
+    this.updateBadge();
+  }
+  iconBadgeChanged() {
+    this.updateBadge();
+  }
+  iconBadgeValueChanged() {
+    this.updateBadge();
+  }
+  /**
+   * @description Emits the location to event listeners.
+   * @param {*} location - Location object.
+   * @memberof List
+   */
+  locationClickedHandler(location) {
+    this.locationClicked.emit(location);
+  }
+  /**
+   * Called once just after the component is first connected to the DOM.
+   */
+  componentWillLoad() {
+    var _a;
+    this.iconURLToRender = this.icon ? this.icon : (_a = this.location) === null || _a === void 0 ? void 0 : _a.properties.imageURL;
+    this.updateBadge();
+  }
+  /**
+   * Called after every render().
+   */
+  componentDidRender() {
+    if (!this.location) {
+      return;
+    }
+    this.infoElement.location = this.location;
+    this.listItemDidRender.emit();
+    // IE fallback for 'object-fit' css property
+    if (this.imageElement && 'objectFit' in document.documentElement.style === false) {
+      this.objectFitImage(this.imageElement);
+    }
+  }
+  /**
+   * Apply badge to location icon.
+   */
+  updateBadge() {
+    if (this.iconBadge && this.iconBadgeValue && this.iconURLToRender) {
+      this.applyBadgeToIcon();
+    }
+  }
+  /**
+   * @description Set image as background image.
+   * @param {HTMLImageElement} image
+   */
+  objectFitImage(image) {
+    image.setAttribute('style', `background: no-repeat center center url("${this.iconURLToRender}"); background-size: cover;`);
+    image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.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 originalIconScale;
+    this.iconURLToRender = this.icon ? this.icon : this.location.properties.imageURL;
+    const iconURL = appendMapsIndoorsImageQueryParameters(this.iconURLToRender, this.iconDisplaySize);
+    this.getImageFromUrl(iconURL).then(image => {
+      originalIconScale = image.width / 24;
+      switch (this.iconBadge.toLowerCase()) {
+        case 'availability':
+          if (this.iconBadgeValue === 'true') {
+            return mapsindoors.BadgeRenderer.AvailableBadge.overlay(image);
+          }
+          else if (this.iconBadgeValue === 'false') {
+            return mapsindoors.BadgeRenderer.UnavailableBadge.overlay(image);
+          }
+          break;
+        case 'occupancy':
+          return mapsindoors.BadgeRenderer.TextBadge.overlay(image, {
+            text: this.iconBadgeValue.toString()
+          });
+      }
+    }).then(badgedImage => {
+      if (badgedImage) {
+        this.iconURLToRender = badgedImage.src;
+        // Badged image must be moved so the original image aligns with other.
+        const translateIcon = (badgedImage.width - 24) / -2;
+        this.iconAttributes = {
+          style: {
+            transform: 'translateX(' + translateIcon + 'px)',
+            width: badgedImage.width / originalIconScale + 'px',
+            height: badgedImage.height / originalIconScale + 'px'
+          }
+        };
+      }
+    });
+  }
+  /**
+   * Create and return an Image from URL.
+   *
+   * @param {string} url
+   * @returns {Image}
+   */
+  async getImageFromUrl(url) {
+    return fetch(url)
+      .then(res => res.blob())
+      .then(blob => URL.createObjectURL(blob))
+      .then(objUrl => {
+      return new Promise((resolve) => {
+        const image = new Image();
+        image.width = this.iconDisplaySize;
+        image.height = this.iconDisplaySize;
+        image.onload = () => resolve(image);
+        image.onerror = () => resolve(null);
+        image.src = objUrl;
+      });
+    });
+  }
+  /**
+   * Render location list-item.
+   *
+   * @description Render location list-item.
+   * @returns {JSX.Element}
+   */
+  render() {
+    return this.location && (h(Host, { role: "listitem", onClick: () => this.locationClickedHandler(this.location) }, this.iconURLToRender ? this.renderIcon() : null, h("div", { class: "details" }, h("p", { class: "details-title" }, this.location.properties.name), h("mi-location-info", { level: this.level, ref: (el) => this.infoElement = el, showExternalId: this.showExternalId })), this.location.properties.geodesicDistance && this.renderDistance()));
+  }
+  /**
+   * @description Get JSX template for icon.
+   * @returns {JSX.Element}
+   */
+  renderIcon() {
+    const iconURL = appendMapsIndoorsImageQueryParameters(this.iconURLToRender, this.iconDisplaySize);
+    return (h("div", { class: "img-container" }, h("img", Object.assign({}, this.iconAttributes, { ref: (el) => this.imageElement = el, src: iconURL }))));
+  }
+  /**
+   * @description Get JSX template for distance.
+   * @returns {JSX.Element}
+   */
+  renderDistance() {
+    return (h("div", { class: "distance" }, h("mi-distance", { meters: this.location.properties.geodesicDistance, unit: this.unit })));
+  }
+  static get watchers() { return {
+    "icon": ["iconChanged"],
+    "iconBadge": ["iconBadgeChanged"],
+    "iconBadgeValue": ["iconBadgeValueChanged"]
+  }; }
+};
+ListItemLocation.style = listItemLocationCss;
+
+export { ListItemLocation as mi_list_item_location };

package/dist/mi-list.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, h } from './index-7e9696f3.js';
+
+const listCss = "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}";
+
+const List = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.scrollButtonsEnabled = false;
+    this.scrollLength = 100;
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+    if (this.scrollButtonsEnabled) {
+      this.setScrollContainerElementRef();
+    }
+  }
+  /**
+   * @description Update state of scroll buttons when a "listItemDidRender" event is fired.
+   * @private
+   */
+  updateScrollButtonsState() {
+    if (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((entries) => {
+      if (entries[0].intersectionRatio <= 0) {
+        return;
+      }
+      // Disable scroll buttons if container element doesn't have scroll
+      if (this.scrollContainerElement.scrollHeight - this.scrollContainerElement.scrollTop === this.scrollContainerElement.clientHeight) {
+        this.updateScrollButtonsState();
+      }
+      this.intersectionObserver.disconnect();
+    });
+    this.intersectionObserver.observe(this.scrollContainerElement);
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { role: "list", class: "scroll-container", ref: (el) => this.scrollContainerElement = el }, h("slot", null)), this.scrollButtonsEnabled ? h("mi-scroll-buttons", { scrollLength: this.scrollLength, ref: (el) => this.miScrollButtonsElement = el }) : null));
+  }
+};
+List.style = listCss;
+
+export { List as mi_list };