@mapsindoors/map-template 1.0.0-rc.1

package/dist/mi-combo-box.entry-69a04955.mjs

@@ -0,0 +1,260 @@
+import { r as c, c as d, h as n, H as p, g as u } from "./webcomponent-a10be1e6.mjs";
+import { S as m, f as g } from "./sort-order.enum-64ce8998-b75ac596.mjs";
+import "./_commonjsHelpers-ba3f0406-b96e6d6a.mjs";
+const f = `.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=tel]{font-size:1rem;padding:8px;border-style:solid;border-width:1px;border-color:#8d98aa;border-radius:4px}.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=range],.mi-input[type=tel]{display:block}.mi-input[type=radio],.mi-input[type=checkbox]{margin:0px;transform:scale(1.2, 1.2)}.mi-input[type=search]{padding-left:32px;background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6267 8.43836C14.6267 11.8561 11.8561 14.6267 8.43836 14.6267C5.02062 14.6267 2.25 11.8561 2.25 8.43836C2.25 5.02062 5.02062 2.25 8.43836 2.25C11.8561 2.25 14.6267 5.02062 14.6267 8.43836Z' stroke='%23aeb9cb' stroke-width='2.5'/%3E%3Crect x='15.0979' y='14.1614' width='7.34678' height='1.32449' rx='0.662244' transform='rotate(45 15.0979 14.1614)' fill='%23aeb9cb' stroke='%23aeb9cb'/%3E%3Crect x='13.7847' y='13.2916' width='1.05276' height='0.697347' transform='rotate(45 13.7847 13.2916)' stroke='%23aeb9cb' stroke-width='0.697346'/%3E%3C/svg%3E%0A") no-repeat scroll 8px center, white}.mi-input:disabled{opacity:0.48;cursor:not-allowed}.mi-label{font-style:normal;display:block;font-size:1rem;font-weight:500;color:#1e2025}.mi-label>*{margin-top:4px}.mi-label>input[type=radio],.mi-label>input[type=checkbox],.mi-label>label.mi-toggle-btn{margin-right:8px}combo-box-item{display:none}:host{display:inline-block;position:relative;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"}:host(.open) .button::after{border-top-color:transparent;border-bottom-color:#1f2937;margin-top:-8px}:host(.open) section{display:flex}:host(.open) svg{transform:rotate(180deg)}.input{position:relative;display:flex;justify-content:flex-start;align-items:center;height:100%;width:100%;font-family:inherit;background:linear-gradient(#f9fafb, #f3f4f6);border-radius:4px;border-width:1px;border-style:solid;border-color:#d1d5db;color:#1c1917;font-size:1rem;font-weight:500;line-height:1rem;padding-right:40px;padding-left:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input__svg{margin-left:auto;position:absolute;top:50%;right:-42px}.input__label{padding-top:12px;padding-bottom:12px;margin-right:8px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.input__label--from-inner-html{display:flex;flex-direction:row;align-items:center;gap:8px}.input:disabled{opacity:0.72;cursor:not-allowed}.content{padding-top:12px;padding-bottom:12px;margin-top:12px;margin-bottom:12px;border-radius:8px;color:#1c1917;font-size:1rem;font-weight:500;background-color:#fcfcfc;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.18), 0px 8px 8px rgba(0, 0, 0, 0.16);min-width:320px;max-width:480px;max-height:580px;display:none;flex-direction:column;position:fixed;z-index:10000}.content .list{padding:0;margin:0;list-style:none;overflow-y:auto}.content .list__item{cursor:pointer}.content .list__item--highlighted{background-color:#f3f4f6}.empty-page{display:flex;align-items:left;flex-direction:column;margin-left:16px;margin-bottom:12px}.empty-page>*{margin:0}.empty-page__header{font-size:1rem;font-weight:400;color:#374151}.label{display:flex;flex-direction:row;align-items:center;padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}.label__item{display:inline-block;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.label__item--from-inner-html{display:flex;flex-direction:row;align-items:center;gap:8px}.label__checkbox{margin-right:12px}.label__checkbox--hidden{display:none}`;
+var l;
+(function(e) {
+  e.ArrowDown = "ArrowDown", e.ArrowUp = "ArrowUp", e.Enter = "Enter", e.Esc = "Escape";
+})(l || (l = {}));
+const x = class {
+  constructor(e) {
+    c(this, e), this.change = d(this, "change", 3), this.isFilterSelectionDisabled = !1, this.isMouseOverEventDisabled = !1, this.currentItemIndex = 0, this.selectedItemIndex = 0, this.highlightedItemClassName = "list__item--highlighted", this.open = !1, this.items = [], this.itemsOrder = void 0, this.filterable = !1, this.selected = [], this.noResultsMessage = "No results found", this.currentItems = [], this.disabled = !1;
+  }
+  onItemsChanged(e) {
+    if (e.some((t) => t.tagName.toLowerCase() !== "combo-box-item"))
+      throw new Error("Items contains unknown element(s).");
+    if (Object.values(m).includes(this.itemsOrder) && (e = this.getSortedItems(e)), this.currentItems = [...e], this.filter(), !this.filterable) {
+      const t = this.currentItems.findIndex((i) => i.selected);
+      this.currentItemIndex = t > -1 ? t : 0, this.selectedItemIndex = this.currentItemIndex;
+    }
+    this.items.forEach((t, i) => {
+      t.dataset.index = i.toString();
+    }), this.selectFirstMiDropdownItem();
+  }
+  onCurrentItemsChange() {
+    this.isFilterSelectionDisabled = this.currentItems.length === 0;
+  }
+  /**
+   * Outside the dropdown listener. It will close the dropdown when a click is outside a dropdown and dropdown list.
+   *
+   * @param {ev} ev
+   */
+  checkForClickOutside(e) {
+    var t;
+    !this.hostElement.contains(e.target) && this.noResultsMessage && (this.clearFilter(), this.filterElement.value = (t = this.selected[0]) === null || t === void 0 ? void 0 : t.text, this.open = !1);
+  }
+  /**
+   * When clicked on input button we change it's type to text and highlight value that is inside.
+   *
+   * @param {Event} event
+   */
+  onClickExists(e) {
+    this.open = !0, e.target.type = "text", this.filterElement.select();
+  }
+  /**
+   * Mousemove event handler.
+   * When the mouse is moved the mouseover event handler is enabled.
+   */
+  mouseMoveEventHandler() {
+    this.isMouseOverEventDisabled = !1;
+  }
+  /**
+   * Scroll event handler.
+   * The dropdown is closed when the scroll event is trigget outside the dropdown.
+   */
+  scrollEventHandler(e) {
+    const t = e.target;
+    (!t || !this.hostElement.contains(t)) && (this.open = !1);
+  }
+  /**
+   * Resize event handler.
+   * Recalculate the position of the dropdown when the window is resized.
+   */
+  resizeEventHandler() {
+    this.calculateDropDownPosition();
+  }
+  /**
+   * Component did load.
+   */
+  componentDidLoad() {
+    this.createMiDropdownItemsFromDocument(), this.selectFirstMiDropdownItem(), this.enableKeyboardNavigationEvents();
+    const e = new IntersectionObserver((t) => {
+      t.forEach((i) => {
+        i.isIntersecting === !0 && this.filterElement.blur();
+      });
+    });
+    this.filterElement !== void 0 && (e.observe(this.filterElement), this.filterElement.addEventListener("keydown", (t) => {
+      (t.key === l.ArrowDown || t.key === l.ArrowUp) && t.preventDefault();
+    }));
+  }
+  /**
+   * Component did rener.
+   */
+  componentDidRender() {
+    this.calculateDropDownPosition(), this.filterable || this.highlightItem(this.currentItemIndex, !0);
+  }
+  /**
+   * Gets all mi-dropdown-item elements for the mi-dropdown items property.
+   */
+  createMiDropdownItemsFromDocument() {
+    const e = this.items && this.items.length > 0 ? this.items : this.hostElement.querySelectorAll("combo-box-item");
+    e.length > 0 && (this.items = Array.from(e));
+  }
+  /**
+   * Set the first mi-dropdown-item as the textual content of the button.
+   */
+  selectFirstMiDropdownItem() {
+    var e;
+    if (!this.filterable) {
+      const t = (e = this.items) === null || e === void 0 ? void 0 : e.findIndex((i) => i.selected);
+      this.selected = [this.items[t > -1 ? t : 0]];
+    }
+  }
+  /**
+   * Enables cycling through the items in the content window using arrow up/down keys.
+   */
+  enableKeyboardNavigationEvents() {
+    this.hostElement.addEventListener("keydown", (e) => {
+      if (this.open === !1 && e.key === l.ArrowDown) {
+        this.isMouseOverEventDisabled = !0, this.toggleContentWindow(), e.preventDefault();
+        return;
+      }
+      if (this.open === !0 && !this.filterable)
+        switch (e.key) {
+          case (l.ArrowDown || l.ArrowUp):
+            this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), e.preventDefault();
+            break;
+          case l.ArrowUp:
+            this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + this.currentItems.length - 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), e.preventDefault();
+            break;
+          case l.Enter:
+            if (this.hostElement.shadowRoot.activeElement === this.clearButtonElement)
+              return;
+            this.currentItems[this.currentItemIndex] !== void 0 && this.onSelect(this.currentItems[this.currentItemIndex]), e.preventDefault();
+            break;
+        }
+      e.key === l.Esc && (this.filterable || (this.currentItemIndex = this.selectedItemIndex, this.highlightItem(this.currentItemIndex)), this.toggleContentWindow(), this.clearFilter());
+    });
+  }
+  /**
+   * Updates the currently highlighted item in the markup.
+   *
+   * @param {number} itemIndex
+   */
+  highlightItem(e, t = !1) {
+    var i, s;
+    const r = this.hostElement.shadowRoot.querySelectorAll(".list__item");
+    r.forEach((a) => {
+      a.classList.remove(this.highlightedItemClassName);
+    }), (i = r[e]) === null || i === void 0 || i.classList.add(this.highlightedItemClassName), t && ((s = r[e]) === null || s === void 0 || s.scrollIntoView({ block: "nearest", inline: "nearest" }));
+  }
+  /**
+   * Get sorted items.
+   * The sorting order is defined by the itemsOrder attribute.
+   *
+   * @param {HTMLMiDropdownItemElement[]} items
+   * @returns {HTMLMiDropdownItemElement[]}
+   */
+  getSortedItems(e) {
+    return this.itemsOrder === m.Asc ? e.sort((t, i) => (t.text || t.innerText).trimStart().toLowerCase().localeCompare((i.text || i.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })) : e.sort((t, i) => (i.text || i.innerText).trimStart().toLowerCase().localeCompare((t.text || t.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })), e;
+  }
+  /**
+   * Update and emit list of selected items.
+   */
+  onChangedHandler() {
+    this.selected = [...this.items.filter((e) => e.selected)], this.change.emit(this.selected);
+  }
+  /**
+   * Toggle visibility of content window.
+   */
+  toggleContentWindow() {
+    this.open = !this.open;
+  }
+  /**
+   * Select or toggle selection of item.
+   *
+   * @param {HTMLMiDropdownItemElement} item
+   */
+  onSelect(e) {
+    this.filterable || (this.open = !1, Array.from(this.items).forEach((i) => {
+      i.selected = !1;
+    }), this.clearFilter()), e.selected = !e.selected, this.currentItemIndex = Number(e.dataset.index), this.selectedItemIndex = this.currentItemIndex, this.onChangedHandler();
+  }
+  /**
+   * Highlights the item that the cursor is hovering in the content window.
+   *
+   * @param {number} filteredItemsIndex
+   */
+  onMouseOver(e) {
+    !this.isMouseOverEventDisabled && !this.filterable && (this.highlightItem(e), this.currentItemIndex = e);
+  }
+  /**
+   * Filter items based on input query.
+   *
+   * @returns {HTMLMiDropdownItemElement[]}
+   */
+  filter() {
+    if (this.filterElement) {
+      const e = this.filterElement.value, t = this.items.map((o) => o.text || o.innerText), i = this.currentItems.length;
+      if (e === "")
+        return this.currentItemIndex = this.selectedItemIndex, this.currentItems = [...this.items];
+      const s = {
+        limit: 50,
+        allowTypo: !1,
+        threshold: -1e4
+      }, a = g.go(e, t, s).map((o) => this.items.find((h) => (h.text || h.innerText) === o.target));
+      this.currentItems = a, i !== this.currentItems.length && (this.currentItemIndex = 0);
+    }
+  }
+  /**
+   * Clear filter.
+   */
+  clearFilter() {
+    var e;
+    this.filterElement && (this.filterElement.value = (e = this.selected[0]) === null || e === void 0 ? void 0 : e.text, this.filterElement.blur(), this.currentItems = this.items);
+  }
+  /**
+   * Render input field - combobox.
+   *
+   * @returns {Host}
+   */
+  render() {
+    var e;
+    const t = n("ul", { class: "list" }, this.currentItems.map((i, s) => this.renderListItem(i, s, this.filterable)));
+    return n(p, { class: { open: this.open } }, n("input", { type: "text", class: "input", onFocus: (i) => this.onClickExists(i), ref: (i) => this.filterElement = i, onInput: () => this.filter(), tabIndex: 0, value: (e = this.selected[0]) === null || e === void 0 ? void 0 : e.text }), n("svg", { role: "button", class: "input__svg", part: "icon-down-arrow", width: "12", height: "6", viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg", onClick: () => this.toggleContentWindow() }, n("path", { d: "M9.37165 9.58706C9.17303 9.80775 8.82697 9.80775 8.62835 9.58706L0.751035 0.834484C0.46145 0.512722 0.689796 7.73699e-08 1.12268 1.25924e-07L16.8773 1.89302e-06C17.3102 1.94157e-06 17.5386 0.512723 17.249 0.834484L9.37165 9.58706Z" })), n("section", { ref: (i) => this.listElement = i, part: "dropdown-container", class: "content" }, this.currentItems.length === 0 ? this.renderNoResultsTemplate() : t));
+  }
+  /**
+   * Helper function to render markup when no items are available to be displayed in the content window.
+   *
+   * @returns {JSX.Element}
+   */
+  renderNoResultsTemplate() {
+    return n("div", { class: "empty-page" }, n("p", { class: "empty-page__header" }, this.noResultsMessage));
+  }
+  /**
+   * Helper function for rendering list item.
+   *
+   * @param {HTMLMiDropdownItemElement} item
+   * @param {number} index
+   * @param {boolean} showCheckBox
+   * @returns {JSX.Element}
+   */
+  renderListItem(e, t, i) {
+    let s;
+    const r = e.getAttribute("title") || e.text || e.innerText;
+    return e.innerText.length > 0 ? s = n("div", { class: "label__item label__item--from-inner-html", innerHTML: e.innerHTML }) : s = n("div", { class: "label__item", innerHTML: e.text }), n("li", { class: "list__item", title: r, onMouseOver: () => {
+      this.onMouseOver(t);
+    } }, n("label", { class: "mi-label label", tabindex: "-1" }, n("input", { class: { label__checkbox: !0, "label__checkbox--hidden": !i, "mi-input": !0 }, type: "checkbox", value: t, checked: e.selected, onChange: () => this.onSelect(e) }), s));
+  }
+  /**
+   * Function for calculating the position of the dropdown list element.
+   */
+  calculateDropDownPosition() {
+    this.listElement.style.bottom = null, this.listElement.style.left = null, this.listElement.style.right = null, this.listElement.style.top = null, this.listElement.style.maxHeight = null, this.listElement.style.minWidth = null;
+    const { clientWidth: e, clientHeight: t } = document.documentElement, i = this.hostElement.getBoundingClientRect(), s = this.listElement.getBoundingClientRect(), r = t - i.bottom, a = i.top, o = 580, h = 12;
+    e <= s.width || i.right - s.width < 0 && s.right > e ? (this.listElement.style.right = `${h}px`, this.listElement.style.left = `${h}px`, this.listElement.style.minWidth = "unset") : s.right > e ? (this.listElement.style.left = "unset", this.listElement.style.right = `${e - i.right}px`) : (this.listElement.style.left = `${i.left}px`, this.listElement.style.right = "unset"), a > r ? (this.listElement.style.maxHeight = `${Math.min(a, o)}px`, this.listElement.style.top = "unset", this.listElement.style.bottom = `${t - i.top}px`) : (this.listElement.style.top = `${i.bottom}px`, this.listElement.style.bottom = "unset", this.listElement.style.maxHeight = `${Math.min(r - h * 2, o)}px`);
+  }
+  get hostElement() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      items: ["onItemsChanged"],
+      currentItems: ["onCurrentItemsChange"]
+    };
+  }
+};
+x.style = f;
+export {
+  x as mi_combo_box
+};

package/dist/mi-data-table.entry-6cae08b0.mjs

@@ -0,0 +1,215 @@
+import { r as s, c as h, h as o, H as c, g } from "./reactcomponent-2f9f051f.mjs";
+import { i as l, a as b } from "./utils-ae714467-b07fc3be.mjs";
+import "react";
+import "react-dom";
+const p = `a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -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";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=tel]{font-size:1rem;padding:8px;border-style:solid;border-width:1px;border-color:#8d98aa;border-radius:4px}.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=range],.mi-input[type=tel]{display:block}.mi-input[type=radio],.mi-input[type=checkbox]{margin:0px;transform:scale(1.2, 1.2)}.mi-input[type=search]{padding-left:32px;background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6267 8.43836C14.6267 11.8561 11.8561 14.6267 8.43836 14.6267C5.02062 14.6267 2.25 11.8561 2.25 8.43836C2.25 5.02062 5.02062 2.25 8.43836 2.25C11.8561 2.25 14.6267 5.02062 14.6267 8.43836Z' stroke='%23aeb9cb' stroke-width='2.5'/%3E%3Crect x='15.0979' y='14.1614' width='7.34678' height='1.32449' rx='0.662244' transform='rotate(45 15.0979 14.1614)' fill='%23aeb9cb' stroke='%23aeb9cb'/%3E%3Crect x='13.7847' y='13.2916' width='1.05276' height='0.697347' transform='rotate(45 13.7847 13.2916)' stroke='%23aeb9cb' stroke-width='0.697346'/%3E%3C/svg%3E%0A") no-repeat scroll 8px center, white}.mi-input:disabled{opacity:0.48;cursor:not-allowed}.mi-select{display:block;padding-top:8px;padding-bottom:8px;padding-left:8px;padding-right:32px;border-radius:4px;border-width:1px;border-style:solid;border-color:#c8d0e0;color:#1e2025;font-size:1rem;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#f5f7fa, #ebeff5)}.mi-select:disabled{opacity:0.48;cursor:not-allowed}.mi-select:not(:disabled):hover{background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-select:not(:disabled):active{background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#dee3ed, #ebeff5)}.mi-toggle{margin:0}.mi-toggle:disabled{cursor:not-allowed}.mi-toggle+.mi-label{margin-left:8px}@supports (appearance: none) or (-moz-appearance: none) or (-webkit-appearance: none){.mi-toggle{padding:2px;box-sizing:border-box;appearance:none;-moz-appearance:none;-webkit-appearance:none;width:48px;height:24px;border-radius:9999px;background-color:#8d98aa;transition:background-color 300ms ease}.mi-toggle:disabled{opacity:0.48}.mi-toggle:checked{background-color:#2a844e}.mi-toggle::after{content:"";display:inline-block;width:20px;height:20px;transform:translateX(0px);border-radius:50%;background-color:#fcfcfc;box-shadow:0 1px 1px rgba(0, 0, 0, 0.125), 0 2px 2px rgba(0, 0, 0, 0.125);transition:300ms ease}.mi-toggle:checked::after{transform:translateX(24px)}}.width-none{width:0}.width-xxx-small{width:2px}.width-xx-small{width:4px}.width-x-small{width:8px}.width-small{width:12px}.width-medium{width:16px}.width-large{width:24px}.width-x-large{width:32px}.width-xx-large{width:40px}.width-xxx-large{width:48px}.width-xxxx-large{width:64px}.min-width-none{min-width:0}.min-width-xxx-small{min-width:2px}.min-width-xx-small{min-width:4px}.min-width-x-small{min-width:8px}.min-width-small{min-width:12px}.min-width-medium{min-width:16px}.min-width-large{min-width:24px}.min-width-x-large{min-width:32px}.min-width-xx-large{min-width:40px}.min-width-xxx-large{min-width:48px}.min-width-xxxx-large{min-width:64px}.max-width-none{max-width:0}.max-width-xxx-small{max-width:2px}.max-width-xx-small{max-width:4px}.max-width-x-small{max-width:8px}.max-width-small{max-width:12px}.max-width-medium{max-width:16px}.max-width-large{max-width:24px}.max-width-x-large{max-width:32px}.max-width-xx-large{max-width:40px}.max-width-xxx-large{max-width:48px}.max-width-xxxx-large{max-width:64px}.height-none{height:0}.height-xxx-small{height:2px}.height-xx-small{height:4px}.height-x-small{height:8px}.height-small{height:12px}.height-medium{height:16px}.height-large{height:24px}.height-x-large{height:32px}.height-xx-large{height:40px}.height-xxx-large{height:48px}.height-xxxx-large{height:64px}.min-height-none{min-height:0}.min-height-xxx-small{min-height:2px}.min-height-xx-small{min-height:4px}.min-height-x-small{min-height:8px}.min-height-small{min-height:12px}.min-height-medium{min-height:16px}.min-height-large{min-height:24px}.min-height-x-large{min-height:32px}.min-height-xx-large{min-height:40px}.min-height-xxx-large{min-height:48px}.min-height-xxxx-large{min-height:64px}.max-height-none{max-height:0}.max-height-xxx-small{max-height:2px}.max-height-xx-small{max-height:4px}.max-height-x-small{max-height:8px}.max-height-small{max-height:12px}.max-height-medium{max-height:16px}.max-height-large{max-height:24px}.max-height-x-large{max-height:32px}.max-height-xx-large{max-height:40px}.max-height-xxx-large{max-height:48px}.max-height-xxxx-large{max-height:64px}.debug *{outline:1px solid gold}.flex{display:flex;flex:1}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.display-block{display:block}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-none{display:none}.text-decoration-none{text-decoration:none}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}.margin-auto{margin-left:auto;margin-right:auto}*{box-sizing:border-box}.table{width:100%;border-collapse:collapse;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";background-color:#ffffff;border-style:solid;border-width:1px;border-color:#d1d5db;border-top:none}.table__header-cell{position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:48px;font-weight:500;font-size:1rem;line-height:1.25rem;color:#ffffff;background-color:#374151;padding-top:16px;padding-bottom:16px;padding-left:8px;padding-right:8px}.table__header-cell::before,.table__header-cell::after{content:"";display:block;position:absolute;right:16px;top:50%;border:7px solid transparent}.table__header-cell::before{border-bottom-color:#6b7280;margin-top:-15px}.table__header-cell::after{border-top-color:#6b7280;margin-top:3px}.table__header-cell.desc::after{border-top-color:#f9fafb}.table__header-cell.asc::before{border-bottom-color:#f9fafb}.table__header-cell--no-sort::before,.table__header-cell--no-sort::after{border:none}.table__header-cell:not(.table__header-cell--no-sort){padding-right:46px;cursor:pointer}.table__header-cell--fit-content{white-space:nowrap;width:1px}.table__header-cell--align-left{text-align:left}.table__header-cell--align-center{text-align:center}.table__header-cell--align-right{text-align:right}.table__header-cell--sticky{position:sticky;top:0;z-index:1}.table__row:nth-child(even):hover{background-color:#f3f4f6}.table__row:nth-child(odd){background-color:#f9fafb}.table__row:nth-child(odd):hover{background-color:#f3f4f6}.table__data{font-size:1rem;padding-left:8px;padding-right:8px;height:56px;border-right:1px solid #d1d5db}.table__data:last-child{border-right:none}.table__data--fit-content{white-space:nowrap;width:1px}.table__data--align-left{text-align:left}.table__data--align-center{text-align:center}.table__data--align-right{text-align:right}.table__data--monospace-font{font-family:Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace}.empty-page{display:flex;align-items:center;flex-direction:column;margin-top:72px;height:345px}.empty-page>*{margin:0}.empty-page__header{font-size:2.25rem}.empty-page__subheader{margin-top:32px;font-size:1.5rem}`, m = class {
+  constructor(e) {
+    s(this, e), this.selectionChanged = h(this, "selectionChanged", 7), this.columns = [], this.numberOfSelectedRows = void 0, this.rows = [], this.maxRows = void 0, this.selectable = !1, this.selected = /* @__PURE__ */ new Set(), this.emptyPageHeader = "No results found", this.emptyPageSubheader = void 0, this.isHeaderSticky = !0, this.tableRows = [], this.sortByColumn = null;
+  }
+  onSelectionChangedHandler() {
+    this.selectionChanged.emit(this.selected);
+  }
+  /**
+   * When the rows is set from outside of the components the table sorting is reset and the rows are assigned to the internal tabelRows property.
+   */
+  onRowsChangedHandler() {
+    this.tableRows = Array.from(this.rows), this.setHeaderCheckboxState();
+  }
+  connectedCallback() {
+    const e = this.el.querySelectorAll("mi-column");
+    this.columns = Array.from(e).map((t) => {
+      const i = {
+        alignContent: t.alignContent,
+        monospace: t.monospace,
+        label: l(t.label) ? t.binding : t.label,
+        binding: t.binding || null,
+        sortable: t.sortable,
+        fitContent: !!t.fitContent,
+        /* All HTML comments are removed from the template to avoid the issues with the table not displaying any data in IE11  */
+        template: t.innerHTML.replace(/<!--[\s\S]*?-->/g, ""),
+        columnElement: t,
+        width: t.width
+      };
+      return t.sort && !this.sortByColumn && (this.sortByColumn = { column: i, sortOrder: t.sort === "asc" ? "asc" : "desc" }), i;
+    });
+  }
+  /**
+   * Column header click handler.
+   * If the column is sortable the sort order is reversed.
+   *
+   * @private
+   * @param {MouseEvent} event
+   * @param {any} column
+   */
+  columnHeaderClickHandler(e, t) {
+    var i, a;
+    if (!l(t.sortable)) {
+      let n = "asc";
+      t === ((i = this.sortByColumn) === null || i === void 0 ? void 0 : i.column) && (n = ((a = this.sortByColumn) === null || a === void 0 ? void 0 : a.sortOrder) === "asc" ? "desc" : "asc"), this.sortByColumn = { column: t, sortOrder: n };
+    }
+  }
+  /**
+   * Sorts table rows.
+   *
+   * @private
+   * @return {Array<any>}
+   */
+  sortTableRows() {
+    var e, t, i;
+    if (this.tableRows.length > 0 && this.sortByColumn) {
+      let a;
+      const n = (e = this.sortByColumn) === null || e === void 0 ? void 0 : e.column, r = (t = this.sortByColumn) === null || t === void 0 ? void 0 : t.sortOrder;
+      if (n && r)
+        return ((i = n.sortable) === null || i === void 0 ? void 0 : i.toLowerCase()) === "date" ? a = r === "desc" ? w(n.binding) : f(n.binding) : a = r === "desc" ? u(n.binding) : x(n.binding), [...this.tableRows.sort(a)];
+    }
+    return this.tableRows;
+  }
+  /**
+   * Replace template variables (eg. "{id}") with the corresponding value from the data.
+   *
+   * @private
+   * @param {string} template
+   * @param {object} data
+   * @returns {string}
+   */
+  replaceVars(e, t) {
+    return e.replace(/\{(.*?)\}/g, (i, a) => a.split(".").reduce((r, d) => r ? r[d] : null, t));
+  }
+  /**
+   * Remove boolean HTML attributes (eg. checked) that will have a false value based on data. This is necessary since
+   * the very presence of the attribute will give it a truthy value.
+   *
+   * @private
+   * @param {string} template
+   * @param {array} data
+   * @returns {string}
+   */
+  removeFalseBooleanAttributes(e, t) {
+    return e.replace(/ (checked|disabled|hidden|selected)="\{(.*?)\}"/, (i, a, n) => t[n] === !1 ? "" : a);
+  }
+  /**
+   * React to clicks on table rows and emits the internal cellContentClicked event to
+   * the column component if clicked on content within a cell.
+   *
+   * @private
+   * @param {MouseEvent} event
+   * @param {any} tableRow
+   */
+  tableRowClicked(e, t) {
+    var i;
+    const a = e.target, n = a.closest("td").cellIndex, r = this.selectable ? n - 1 : n;
+    if (a.tagName.toLowerCase() !== "td" && this.columns[r]) {
+      const d = { detail: t };
+      (i = this.columns[r]) === null || i === void 0 || i.columnElement.dispatchEvent(new CustomEvent("cellContentClicked", d));
+    }
+  }
+  async componentWillLoad() {
+    this.rows.length > 0 && (this.tableRows = Array.from(this.rows));
+  }
+  render() {
+    return o(c, null, o("table", { class: "table" }, o("thead", null, o("tr", null, this.renderSelectHeader(), this.columns.map((e) => {
+      var t;
+      const i = e.fitContent ? "" : e.width || "auto", a = ((t = this.sortByColumn) === null || t === void 0 ? void 0 : t.column) === e ? this.sortByColumn.sortOrder : null;
+      return o("th", { "data-binding": e.binding, style: { width: i, "max-width": i, "min-width": i }, onClick: (n) => this.columnHeaderClickHandler(n, e), class: `table__header-cell ${this.isHeaderSticky ? "table__header-cell--sticky" : ""} ${l(e.sortable) ? "table__header-cell--no-sort" : ""} ${l(a) ? "" : a} ${e.fitContent ? "table__header-cell--fit-content" : ""}` }, e.label);
+    }))), o("tbody", null, this.renderTableContent())), this.tableRows.length === 0 ? this.renderEmptyPage() : null);
+  }
+  /**
+   * If the table is selectable then renderSelectHeader will render the th element with the checkbox to check or uncheck all items in the table.
+   *
+   * @private
+   * @returns {JSX.Element}
+   */
+  renderSelectHeader() {
+    if (this.selectable)
+      return o("th", { class: `table__header-cell ${this.isHeaderSticky ? "table__header-cell--sticky" : ""} table__header-cell--fit-content table__header-cell--no-sort table__header-cell--align-center` }, o("input", { type: "checkbox", class: "mi-input", ref: (e) => this.selectAllCheckbox = e, onChange: () => this.selectHeaderOnChangeHandler() }));
+  }
+  /**
+   * If the table is selectable then this method will render the td for each row in the item to select or unselect the row.
+   *
+   * @private
+   * @param {object} row
+   */
+  renderSelectRow(e) {
+    if (this.selectable)
+      return o("td", { class: "table__data table__data--align-center" }, o("input", { class: "mi-input", type: "checkbox", checked: this.selected.has(e), onChange: (t) => this.selectOnChangeHandler(t, e) }));
+  }
+  /**
+   * Helper method to render the tables content.
+   *
+   * @private
+   * @return {[JSX.Element]}
+   */
+  renderTableContent() {
+    let e = this.sortTableRows();
+    return e = b(this.maxRows) && this.maxRows > 0 ? e.slice(0, this.maxRows) : e, e.map((t) => this.renderTableRow(t));
+  }
+  /**
+   * Helper method to render a table row.
+   *
+   * @private
+   * @param {*} tableRow
+   * @return {JSX.Element}
+   */
+  renderTableRow(e) {
+    const t = [];
+    for (const i of this.columns) {
+      let a = i.template;
+      a > "" ? (a = this.removeFalseBooleanAttributes(a, e), a = this.replaceVars(a, e), t.push(a)) : t.push(e[i.binding]);
+    }
+    return o("tr", { class: "table__row", onClick: (i) => this.tableRowClicked(i, e) }, this.renderSelectRow(e), t.map((i, a) => o("td", { class: `table__data ${this.columns[a].fitContent ? "table__data--fit-content" : ""} table__data--align-${this.columns[a].alignContent || "left"} ${this.columns[a].monospace ? "table__data--monospace-font" : ""}`, innerHTML: i })));
+  }
+  /**
+   * Renders en empty page with error message when no table rows are available.
+   *
+   * @private
+   * @returns {JSX.Element}
+   */
+  renderEmptyPage() {
+    return o("div", { class: "empty-page" }, o("p", { class: "empty-page__header" }, this.emptyPageHeader), o("p", { class: "empty-page__subheader" }, this.emptyPageSubheader));
+  }
+  /**
+   * The event handler for the onchange event for the checkboxes in the selectable column.
+   *
+   * @private
+   * @param {EventData} event
+   * @param {object} row
+   */
+  selectOnChangeHandler(e, t) {
+    e.target.checked ? this.selected.add(t) : this.selected.delete(t), this.setHeaderCheckboxState(), this.numberOfSelectedRows = this.selected.size, e.stopPropagation();
+  }
+  /**
+   * Set the state of the checkbox in the table header.
+   * The state can be either checked, unchecked or indeterminate.
+   */
+  setHeaderCheckboxState() {
+    this.selectAllCheckbox && this.selectable && (this.selectAllCheckbox.checked = this.selected.size === this.rows.length, this.selectAllCheckbox.indeterminate = this.selected.size > 0 && this.selected.size < this.rows.length);
+  }
+  /**
+   * The event handler for the onchange event for the checkbox in the selectable column header.
+   *
+   * @private
+   * @param {EventData} event
+   */
+  selectHeaderOnChangeHandler() {
+    this.selected.size > 0 && this.selected.size <= this.rows.length ? (this.selected.clear(), this.selectAllCheckbox.checked = !1) : (this.rows.forEach((e) => this.selected.add(e)), this.selectAllCheckbox.checked = !0), this.numberOfSelectedRows = this.selected.size;
+  }
+  get el() {
+    return g(this);
+  }
+  static get watchers() {
+    return {
+      numberOfSelectedRows: ["onSelectionChangedHandler"],
+      rows: ["onRowsChangedHandler"]
+    };
+  }
+}, x = (e) => (t, i) => `${t[e] || ""}`.localeCompare(`${i[e] || ""}`.trimStart().toLowerCase(), void 0, { numeric: !0 }), u = (e) => (t, i) => `${i[e] || ""}`.localeCompare(`${t[e] || ""}`.trimStart().toLowerCase(), void 0, { numeric: !0 }), f = (e) => (t, i) => {
+  const a = Date.parse(t[e]), n = Date.parse(i[e]);
+  return a > n ? 1 : a < n ? -1 : 0;
+}, w = (e) => (t, i) => {
+  const a = Date.parse(i[e]), n = Date.parse(t[e]);
+  return a > n ? 1 : a < n ? -1 : 0;
+};
+m.style = p;
+export {
+  m as mi_data_table
+};