@mapsindoors/map-template 1.0.0-rc.1

package/dist/mi-dropdown.entry-43258637.mjs

@@ -0,0 +1,296 @@
+import { r as c, c as m, h as s, H as p, g as u } from "./webcomponent-a10be1e6.mjs";
+import { S as d, f } from "./sort-order.enum-64ce8998-b75ac596.mjs";
+import "./_commonjsHelpers-ba3f0406-b96e6d6a.mjs";
+const g = `.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}mi-dropdown-item{display:none}:host{display:inline-block;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;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)}.button{display:flex;justify-content:flex-start;align-items:center;height:100%;width:100%;font-family:inherit;background:linear-gradient(#f9fafb, #f3f4f6);padding:0;padding-left:16px;padding-right:16px;border-radius:4px;border-width:1px;border-style:solid;border-color:#d1d5db;color:#1c1917;font-size:1rem;font-weight:500;line-height:1rem}.button__left-icon{height:20px;width:20px;margin-right:8px}.button svg{margin-left:auto}.button__label{padding-top:12px;padding-bottom:12px;margin-right:8px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.button__label--from-inner-html{display:flex;flex-direction:row;align-items:center;gap:8px}.button: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 .filter{margin-bottom:16px;padding-left:8px;padding-right:8px;display:flex;position:relative}.content .filter__input{width:100%}.content .filter__clear{width:20px;height:20px;padding:0;border-width:0;display:flex;align-items:center;justify-content:center;position:absolute;right:14px;top:50%;transform:translateY(-50%);background-color:#1f2937;border-radius:50%}.content .filter__clear:focus{outline:0}.content .filter__clear--hidden{opacity:0;pointer-events:none}.content .filter__clear svg{fill:#fcfcfc;width:10px;height:10px}.content .options{margin-bottom:16px;padding-left:16px;padding-right:16px}.content .options__item{padding:0;color:#3b82f6;font-size:0.75rem;font-weight:500;font-family:inherit;background-color:transparent;border:transparent}.content .options__item:hover{text-decoration:underline}.content .options__item:first-child{margin-right:16px}.content .options__item:disabled{color:rgba(48, 113, 217, 0.72);cursor:not-allowed;text-decoration:none}.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 r;
+(function(t) {
+  t.ArrowDown = "ArrowDown", t.ArrowUp = "ArrowUp", t.Enter = "Enter", t.Esc = "Escape";
+})(r || (r = {}));
+const b = class {
+  constructor(t) {
+    c(this, t), this.change = m(this, "change", 3), this.isFilterSelectionDisabled = !1, this.isClearButtonVisible = !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.label = void 0, this.filterable = !1, this.multiple = !1, this.selected = [], this.noResultsMessage = "No results found", this.iconSrc = void 0, this.iconAlt = void 0, this.currentItems = [], this.disabled = !1;
+  }
+  onItemsChanged(t) {
+    if (t.some((e) => e.tagName.toLowerCase() !== "mi-dropdown-item"))
+      throw new Error("Items contains unknown element(s).");
+    if (Object.values(d).includes(this.itemsOrder) && (t = this.getSortedItems(t)), this.currentItems = [...t], this.filter(), !this.multiple) {
+      const e = this.currentItems.findIndex((i) => i.selected);
+      this.currentItemIndex = e > -1 ? e : 0, this.selectedItemIndex = this.currentItemIndex;
+    }
+    this.items.forEach((e, i) => {
+      e.dataset.index = i.toString();
+    }), this.selectFirstMiDropdownItem();
+  }
+  onCurrentItemsChange() {
+    this.isFilterSelectionDisabled = this.currentItems.length === 0;
+  }
+  /**
+   * Focusout event handler.
+   * If the dropdown loses focus it is closed.
+   */
+  focusOutEventHandler(t) {
+    const e = t.relatedTarget;
+    (!e || !this.hostElement.contains(e)) && (this.open = !1);
+  }
+  /**
+  * Outside the dropdown listener. It will close the dropdown when a click is outside a dropdown and dropdown list.
+  *
+  * @param ev
+  */
+  checkForClickOutside(t) {
+    this.hostElement.contains(t.target) || (this.open = !1);
+  }
+  /**
+   * 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(t) {
+    const e = t.target;
+    (!e || !this.hostElement.contains(e)) && (this.open = !1);
+  }
+  /**
+   * Resize event handler.
+   * Recalculate the position of the dropdown when the window is resized.
+   */
+  resizeEventHandler() {
+    this.calculateDropDownPosition();
+  }
+  componentDidLoad() {
+    this.createMiDropdownItemsFromDocument(), this.selectFirstMiDropdownItem(), this.enableKeyboardNavigationEvents();
+    const t = new IntersectionObserver((e, i) => {
+      e.forEach((n) => {
+        n.isIntersecting === !0 && this.filterElement.focus();
+      });
+    });
+    this.filterElement !== void 0 && (t.observe(this.filterElement), this.filterElement.addEventListener("keydown", (e) => {
+      (e.key === r.ArrowDown || e.key === r.ArrowUp) && e.preventDefault();
+    }));
+  }
+  componentDidRender() {
+    this.calculateDropDownPosition(), this.multiple || this.highlightItem(this.currentItemIndex, !0);
+  }
+  /**
+   * Gets all mi-dropdown-item elements for the mi-dropdown items property.
+   */
+  createMiDropdownItemsFromDocument() {
+    const t = this.items && this.items.length > 0 ? this.items : this.hostElement.querySelectorAll("mi-dropdown-item");
+    t.length > 0 && (this.items = Array.from(t));
+  }
+  /**
+   * Set the first mi-dropdown-item as the textual content of the button.
+   */
+  selectFirstMiDropdownItem() {
+    var t;
+    if (!this.multiple) {
+      const e = (t = this.items) === null || t === void 0 ? void 0 : t.findIndex((i) => i.selected);
+      this.selected = [this.items[e > -1 ? e : 0]];
+    }
+  }
+  /**
+   * Enables cycling through the items in the content window using arrow up/down keys.
+   */
+  enableKeyboardNavigationEvents() {
+    this.hostElement.addEventListener("keydown", (t) => {
+      if (this.open === !1 && t.key === r.ArrowDown) {
+        this.isMouseOverEventDisabled = !0, this.toggleContentWindow(), t.preventDefault();
+        return;
+      }
+      if (this.open === !0 && !this.multiple)
+        switch (t.key) {
+          case r.ArrowDown:
+            this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), t.preventDefault();
+            break;
+          case r.ArrowUp:
+            this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + this.currentItems.length - 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), t.preventDefault();
+            break;
+          case r.Enter:
+            if (this.hostElement.shadowRoot.activeElement === this.clearButtonElement)
+              return;
+            this.currentItems[this.currentItemIndex] !== void 0 && this.onSelect(this.currentItems[this.currentItemIndex]), t.preventDefault();
+            break;
+        }
+      t.key === r.Esc && (this.multiple || (this.currentItemIndex = this.selectedItemIndex, this.highlightItem(this.currentItemIndex)), this.toggleContentWindow(), this.clearFilter());
+    });
+  }
+  /**
+   * Updates the currently highlighted item in the markup.
+   * @param itemIndex
+   */
+  highlightItem(t, e = !1) {
+    var i, n;
+    const l = this.hostElement.shadowRoot.querySelectorAll(".list__item");
+    l.forEach((o) => {
+      o.classList.remove(this.highlightedItemClassName);
+    }), (i = l[t]) === null || i === void 0 || i.classList.add(this.highlightedItemClassName), e && ((n = l[t]) === null || n === void 0 || n.scrollIntoView({ block: "nearest", inline: "nearest" }));
+  }
+  /**
+   * Get sorted items.
+   * The sorting order is defined by the itemsOrder attribute.
+   *
+   * @param {HTMLMiDropdownItemElement[]} items
+   * @returns {HTMLMiDropdownItemElement[]}
+   */
+  getSortedItems(t) {
+    return this.itemsOrder === d.Asc ? t.sort((e, i) => (e.text || e.innerText).trimStart().toLowerCase().localeCompare((i.text || i.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })) : t.sort((e, i) => (i.text || i.innerText).trimStart().toLowerCase().localeCompare((e.text || e.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })), t;
+  }
+  /**
+   * Update and emit list of selected items.
+   */
+  onChangedHandler() {
+    this.selected = [...this.items.filter((t) => t.selected)], this.change.emit(this.selected);
+  }
+  /**
+   * Toggle visibility of content window.
+   */
+  toggleContentWindow() {
+    this.open = !this.open;
+  }
+  /**
+   * Check all checkboxes.
+   */
+  selectAll() {
+    const t = Array.from(this.currentItems);
+    for (const e of t)
+      e.selected = !0;
+    this.onChangedHandler();
+  }
+  /**
+   * Uncheck all checkboxes.
+   */
+  selectNone() {
+    const t = Array.from(this.currentItems);
+    for (const e of t)
+      e.selected = !1;
+    this.onChangedHandler();
+  }
+  /**
+   * Select or toggle selection of item.
+   *
+   * @param {HTMLMiDropdownItemElement} item
+   */
+  onSelect(t) {
+    this.multiple || (this.open = !1, Array.from(this.items).forEach((i) => {
+      i.selected = !1;
+    }), this.clearFilter()), t.selected = !t.selected, this.currentItemIndex = Number(t.dataset.index), this.selectedItemIndex = this.currentItemIndex, this.onChangedHandler();
+  }
+  /**
+   * Highlights the item that the cursor is hovering in the content window.
+   * @param filteredItemsIndex
+   */
+  onMouseOver(t) {
+    !this.isMouseOverEventDisabled && !this.multiple && (this.highlightItem(t), this.currentItemIndex = t);
+  }
+  /**
+   * Filter items based on input query.
+   *
+   * @returns {HTMLMiDropdownItemElement[]}
+   */
+  filter() {
+    if (this.filterElement) {
+      const t = this.filterElement.value, e = this.items.map((a) => a.text || a.innerText), i = this.currentItems.length;
+      if (t === "")
+        return this.currentItemIndex = this.selectedItemIndex, this.isClearButtonVisible = !1, this.currentItems = [...this.items];
+      this.isClearButtonVisible = !0;
+      const n = {
+        limit: 50,
+        allowTypo: !1,
+        threshold: -1e4
+      }, o = f.go(t, e, n).map((a) => this.items.find((h) => (h.text || h.innerText) === a.target));
+      this.currentItems = o, i !== this.currentItems.length && (this.currentItemIndex = 0);
+    }
+  }
+  /**
+   * Clear filter.
+   */
+  clearFilter() {
+    this.filterElement && (this.filterElement.value = "", this.filterElement.focus(), this.currentItems = this.items), this.isClearButtonVisible = !1;
+  }
+  render() {
+    const t = this.filterable ? this.renderFiltering() : null, e = this.multiple ? this.renderMultipleOptions() : null, i = this.iconSrc ? this.renderLeftSideIcon() : null, n = s("ul", { class: "list" }, this.currentItems.map((l, o) => this.renderListItem(l, o, !!e)));
+    return s(p, { class: { open: this.open } }, s("button", { part: "button", class: "button", disabled: this.disabled || this.items.length === 0, onClick: () => this.toggleContentWindow() }, i, this.renderButtonLabel(), s("svg", { part: "icon-down-arrow", width: "12", height: "6", viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, s("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" }))), s("section", { ref: (l) => this.listElement = l, part: "dropdown-container", class: "content" }, t, e, this.currentItems.length === 0 ? this.renderNoResultsTemplate() : n));
+  }
+  /**
+   * Helper function to render markup when no items are available to be displayed in the content window.
+   *
+   * @returns {JSX.Element}
+   */
+  renderNoResultsTemplate() {
+    return s("div", { class: "empty-page" }, s("p", { class: "empty-page__header" }, this.noResultsMessage));
+  }
+  /**
+   * Helper function to render the button label.
+   * @returns {JSX.Element}
+   */
+  renderButtonLabel() {
+    var t, e, i, n;
+    return this.multiple ? s("div", { part: "button-label", class: "button__label" }, this.label) : !((e = (t = this.selected) === null || t === void 0 ? void 0 : t[0]) === null || e === void 0) && e.text ? s("div", { part: "button-label", class: "button__label" }, this.selected[0].text) : !((n = (i = this.selected) === null || i === void 0 ? void 0 : i[0]) === null || n === void 0) && n.innerHTML ? s("div", { part: "button-label", class: "button__label button__label--from-inner-html", innerHTML: this.selected[0].innerHTML }) : s("div", { part: "button-label", class: "button__label" });
+  }
+  /**
+   * Helper function to render an icon when an image source is provided.
+   * @returns {JSX.Element}
+   */
+  renderLeftSideIcon() {
+    return s("img", { part: "button-icon", class: "button__left-icon", src: this.iconSrc, alt: this.iconAlt ? this.iconAlt : "" });
+  }
+  /**
+   * Helper function for rendering the filtering UI.
+   *
+   * @returns {JSX.Element}
+   */
+  renderFiltering() {
+    return s("div", { class: "filter" }, s("input", { type: "text", class: "mi-input filter__input", placeholder: "Type to filter", ref: (t) => this.filterElement = t, onInput: () => {
+      this.filter();
+    }, tabIndex: this.open ? 0 : -1 }), s("button", { ref: (t) => this.clearButtonElement = t, tabindex: this.isClearButtonVisible ? 0 : -1, type: "button", onClick: () => this.clearFilter(), class: `filter__clear ${this.isClearButtonVisible === !1 ? "filter__clear--hidden" : ""}`, "aria-label": "Clear" }, s("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, s("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" }))));
+  }
+  /**
+   * Helper function for rendering the multi select options.
+   *
+   * @returns {JSX.Element}
+   */
+  renderMultipleOptions() {
+    return s("div", { class: "options" }, s("button", { class: "options__item", disabled: this.isFilterSelectionDisabled, onClick: () => this.selectAll() }, "Select all"), s("button", { class: "options__item", disabled: this.isFilterSelectionDisabled, onClick: () => this.selectNone() }, "Select none"));
+  }
+  /**
+   * Helper function for rendering list item.
+   *
+   * @param {HTMLMiDropdownItemElement} item
+   * @param {number} index
+   * @param {boolean} showCheckBox
+   * @returns {JSX.Element}
+   */
+  renderListItem(t, e, i) {
+    let n;
+    const l = t.getAttribute("title") || t.text || t.innerText;
+    return t.innerText.length > 0 ? n = s("div", { class: "label__item label__item--from-inner-html", innerHTML: t.innerHTML }) : n = s("div", { class: "label__item", innerHTML: t.text }), s("li", { class: "list__item", title: l, onMouseOver: () => {
+      this.onMouseOver(e);
+    } }, s("label", { class: "mi-label label", tabindex: "-1" }, s("input", { class: { label__checkbox: !0, "label__checkbox--hidden": !i, "mi-input": !0 }, type: "checkbox", value: e, checked: t.selected, onChange: () => this.onSelect(t) }), n));
+  }
+  /**
+   * 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: t, clientHeight: e } = document.documentElement, i = this.hostElement.getBoundingClientRect(), n = this.listElement.getBoundingClientRect(), l = e - i.bottom, o = i.top, a = 580, h = 12;
+    t <= n.width || i.right - n.width < 0 && n.right > t ? (this.listElement.style.right = `${h}px`, this.listElement.style.left = `${h}px`, this.listElement.style.minWidth = "unset") : n.right > t ? (this.listElement.style.left = "unset", this.listElement.style.right = `${t - i.right}px`) : (this.listElement.style.left = `${i.left}px`, this.listElement.style.right = "unset"), o > l ? (this.listElement.style.maxHeight = `${Math.min(o, a)}px`, this.listElement.style.top = "unset", this.listElement.style.bottom = `${e - i.top}px`) : (this.listElement.style.top = `${i.bottom}px`, this.listElement.style.bottom = "unset", this.listElement.style.maxHeight = `${Math.min(l - h * 2, a)}px`);
+  }
+  get hostElement() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      items: ["onItemsChanged"],
+      currentItems: ["onCurrentItemsChange"]
+    };
+  }
+};
+b.style = g;
+export {
+  b as mi_dropdown
+};

package/dist/mi-dropdown.entry-e1325610.mjs

@@ -0,0 +1,298 @@
+import { r as c, c as m, h as s, H as p, g as u } from "./reactcomponent-2f9f051f.mjs";
+import { S as d, f } from "./sort-order.enum-64ce8998-b75ac596.mjs";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-ba3f0406-b96e6d6a.mjs";
+const g = `.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}mi-dropdown-item{display:none}:host{display:inline-block;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;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)}.button{display:flex;justify-content:flex-start;align-items:center;height:100%;width:100%;font-family:inherit;background:linear-gradient(#f9fafb, #f3f4f6);padding:0;padding-left:16px;padding-right:16px;border-radius:4px;border-width:1px;border-style:solid;border-color:#d1d5db;color:#1c1917;font-size:1rem;font-weight:500;line-height:1rem}.button__left-icon{height:20px;width:20px;margin-right:8px}.button svg{margin-left:auto}.button__label{padding-top:12px;padding-bottom:12px;margin-right:8px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.button__label--from-inner-html{display:flex;flex-direction:row;align-items:center;gap:8px}.button: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 .filter{margin-bottom:16px;padding-left:8px;padding-right:8px;display:flex;position:relative}.content .filter__input{width:100%}.content .filter__clear{width:20px;height:20px;padding:0;border-width:0;display:flex;align-items:center;justify-content:center;position:absolute;right:14px;top:50%;transform:translateY(-50%);background-color:#1f2937;border-radius:50%}.content .filter__clear:focus{outline:0}.content .filter__clear--hidden{opacity:0;pointer-events:none}.content .filter__clear svg{fill:#fcfcfc;width:10px;height:10px}.content .options{margin-bottom:16px;padding-left:16px;padding-right:16px}.content .options__item{padding:0;color:#3b82f6;font-size:0.75rem;font-weight:500;font-family:inherit;background-color:transparent;border:transparent}.content .options__item:hover{text-decoration:underline}.content .options__item:first-child{margin-right:16px}.content .options__item:disabled{color:rgba(48, 113, 217, 0.72);cursor:not-allowed;text-decoration:none}.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 r;
+(function(t) {
+  t.ArrowDown = "ArrowDown", t.ArrowUp = "ArrowUp", t.Enter = "Enter", t.Esc = "Escape";
+})(r || (r = {}));
+const b = class {
+  constructor(t) {
+    c(this, t), this.change = m(this, "change", 3), this.isFilterSelectionDisabled = !1, this.isClearButtonVisible = !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.label = void 0, this.filterable = !1, this.multiple = !1, this.selected = [], this.noResultsMessage = "No results found", this.iconSrc = void 0, this.iconAlt = void 0, this.currentItems = [], this.disabled = !1;
+  }
+  onItemsChanged(t) {
+    if (t.some((e) => e.tagName.toLowerCase() !== "mi-dropdown-item"))
+      throw new Error("Items contains unknown element(s).");
+    if (Object.values(d).includes(this.itemsOrder) && (t = this.getSortedItems(t)), this.currentItems = [...t], this.filter(), !this.multiple) {
+      const e = this.currentItems.findIndex((i) => i.selected);
+      this.currentItemIndex = e > -1 ? e : 0, this.selectedItemIndex = this.currentItemIndex;
+    }
+    this.items.forEach((e, i) => {
+      e.dataset.index = i.toString();
+    }), this.selectFirstMiDropdownItem();
+  }
+  onCurrentItemsChange() {
+    this.isFilterSelectionDisabled = this.currentItems.length === 0;
+  }
+  /**
+   * Focusout event handler.
+   * If the dropdown loses focus it is closed.
+   */
+  focusOutEventHandler(t) {
+    const e = t.relatedTarget;
+    (!e || !this.hostElement.contains(e)) && (this.open = !1);
+  }
+  /**
+  * Outside the dropdown listener. It will close the dropdown when a click is outside a dropdown and dropdown list.
+  *
+  * @param ev
+  */
+  checkForClickOutside(t) {
+    this.hostElement.contains(t.target) || (this.open = !1);
+  }
+  /**
+   * 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(t) {
+    const e = t.target;
+    (!e || !this.hostElement.contains(e)) && (this.open = !1);
+  }
+  /**
+   * Resize event handler.
+   * Recalculate the position of the dropdown when the window is resized.
+   */
+  resizeEventHandler() {
+    this.calculateDropDownPosition();
+  }
+  componentDidLoad() {
+    this.createMiDropdownItemsFromDocument(), this.selectFirstMiDropdownItem(), this.enableKeyboardNavigationEvents();
+    const t = new IntersectionObserver((e, i) => {
+      e.forEach((n) => {
+        n.isIntersecting === !0 && this.filterElement.focus();
+      });
+    });
+    this.filterElement !== void 0 && (t.observe(this.filterElement), this.filterElement.addEventListener("keydown", (e) => {
+      (e.key === r.ArrowDown || e.key === r.ArrowUp) && e.preventDefault();
+    }));
+  }
+  componentDidRender() {
+    this.calculateDropDownPosition(), this.multiple || this.highlightItem(this.currentItemIndex, !0);
+  }
+  /**
+   * Gets all mi-dropdown-item elements for the mi-dropdown items property.
+   */
+  createMiDropdownItemsFromDocument() {
+    const t = this.items && this.items.length > 0 ? this.items : this.hostElement.querySelectorAll("mi-dropdown-item");
+    t.length > 0 && (this.items = Array.from(t));
+  }
+  /**
+   * Set the first mi-dropdown-item as the textual content of the button.
+   */
+  selectFirstMiDropdownItem() {
+    var t;
+    if (!this.multiple) {
+      const e = (t = this.items) === null || t === void 0 ? void 0 : t.findIndex((i) => i.selected);
+      this.selected = [this.items[e > -1 ? e : 0]];
+    }
+  }
+  /**
+   * Enables cycling through the items in the content window using arrow up/down keys.
+   */
+  enableKeyboardNavigationEvents() {
+    this.hostElement.addEventListener("keydown", (t) => {
+      if (this.open === !1 && t.key === r.ArrowDown) {
+        this.isMouseOverEventDisabled = !0, this.toggleContentWindow(), t.preventDefault();
+        return;
+      }
+      if (this.open === !0 && !this.multiple)
+        switch (t.key) {
+          case r.ArrowDown:
+            this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), t.preventDefault();
+            break;
+          case r.ArrowUp:
+            this.isMouseOverEventDisabled = !0, this.currentItemIndex = (this.currentItemIndex + this.currentItems.length - 1) % this.currentItems.length, this.highlightItem(this.currentItemIndex, !0), t.preventDefault();
+            break;
+          case r.Enter:
+            if (this.hostElement.shadowRoot.activeElement === this.clearButtonElement)
+              return;
+            this.currentItems[this.currentItemIndex] !== void 0 && this.onSelect(this.currentItems[this.currentItemIndex]), t.preventDefault();
+            break;
+        }
+      t.key === r.Esc && (this.multiple || (this.currentItemIndex = this.selectedItemIndex, this.highlightItem(this.currentItemIndex)), this.toggleContentWindow(), this.clearFilter());
+    });
+  }
+  /**
+   * Updates the currently highlighted item in the markup.
+   * @param itemIndex
+   */
+  highlightItem(t, e = !1) {
+    var i, n;
+    const l = this.hostElement.shadowRoot.querySelectorAll(".list__item");
+    l.forEach((o) => {
+      o.classList.remove(this.highlightedItemClassName);
+    }), (i = l[t]) === null || i === void 0 || i.classList.add(this.highlightedItemClassName), e && ((n = l[t]) === null || n === void 0 || n.scrollIntoView({ block: "nearest", inline: "nearest" }));
+  }
+  /**
+   * Get sorted items.
+   * The sorting order is defined by the itemsOrder attribute.
+   *
+   * @param {HTMLMiDropdownItemElement[]} items
+   * @returns {HTMLMiDropdownItemElement[]}
+   */
+  getSortedItems(t) {
+    return this.itemsOrder === d.Asc ? t.sort((e, i) => (e.text || e.innerText).trimStart().toLowerCase().localeCompare((i.text || i.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })) : t.sort((e, i) => (i.text || i.innerText).trimStart().toLowerCase().localeCompare((e.text || e.innerText).trimStart().toLowerCase(), void 0, { numeric: !0 })), t;
+  }
+  /**
+   * Update and emit list of selected items.
+   */
+  onChangedHandler() {
+    this.selected = [...this.items.filter((t) => t.selected)], this.change.emit(this.selected);
+  }
+  /**
+   * Toggle visibility of content window.
+   */
+  toggleContentWindow() {
+    this.open = !this.open;
+  }
+  /**
+   * Check all checkboxes.
+   */
+  selectAll() {
+    const t = Array.from(this.currentItems);
+    for (const e of t)
+      e.selected = !0;
+    this.onChangedHandler();
+  }
+  /**
+   * Uncheck all checkboxes.
+   */
+  selectNone() {
+    const t = Array.from(this.currentItems);
+    for (const e of t)
+      e.selected = !1;
+    this.onChangedHandler();
+  }
+  /**
+   * Select or toggle selection of item.
+   *
+   * @param {HTMLMiDropdownItemElement} item
+   */
+  onSelect(t) {
+    this.multiple || (this.open = !1, Array.from(this.items).forEach((i) => {
+      i.selected = !1;
+    }), this.clearFilter()), t.selected = !t.selected, this.currentItemIndex = Number(t.dataset.index), this.selectedItemIndex = this.currentItemIndex, this.onChangedHandler();
+  }
+  /**
+   * Highlights the item that the cursor is hovering in the content window.
+   * @param filteredItemsIndex
+   */
+  onMouseOver(t) {
+    !this.isMouseOverEventDisabled && !this.multiple && (this.highlightItem(t), this.currentItemIndex = t);
+  }
+  /**
+   * Filter items based on input query.
+   *
+   * @returns {HTMLMiDropdownItemElement[]}
+   */
+  filter() {
+    if (this.filterElement) {
+      const t = this.filterElement.value, e = this.items.map((a) => a.text || a.innerText), i = this.currentItems.length;
+      if (t === "")
+        return this.currentItemIndex = this.selectedItemIndex, this.isClearButtonVisible = !1, this.currentItems = [...this.items];
+      this.isClearButtonVisible = !0;
+      const n = {
+        limit: 50,
+        allowTypo: !1,
+        threshold: -1e4
+      }, o = f.go(t, e, n).map((a) => this.items.find((h) => (h.text || h.innerText) === a.target));
+      this.currentItems = o, i !== this.currentItems.length && (this.currentItemIndex = 0);
+    }
+  }
+  /**
+   * Clear filter.
+   */
+  clearFilter() {
+    this.filterElement && (this.filterElement.value = "", this.filterElement.focus(), this.currentItems = this.items), this.isClearButtonVisible = !1;
+  }
+  render() {
+    const t = this.filterable ? this.renderFiltering() : null, e = this.multiple ? this.renderMultipleOptions() : null, i = this.iconSrc ? this.renderLeftSideIcon() : null, n = s("ul", { class: "list" }, this.currentItems.map((l, o) => this.renderListItem(l, o, !!e)));
+    return s(p, { class: { open: this.open } }, s("button", { part: "button", class: "button", disabled: this.disabled || this.items.length === 0, onClick: () => this.toggleContentWindow() }, i, this.renderButtonLabel(), s("svg", { part: "icon-down-arrow", width: "12", height: "6", viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, s("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" }))), s("section", { ref: (l) => this.listElement = l, part: "dropdown-container", class: "content" }, t, e, this.currentItems.length === 0 ? this.renderNoResultsTemplate() : n));
+  }
+  /**
+   * Helper function to render markup when no items are available to be displayed in the content window.
+   *
+   * @returns {JSX.Element}
+   */
+  renderNoResultsTemplate() {
+    return s("div", { class: "empty-page" }, s("p", { class: "empty-page__header" }, this.noResultsMessage));
+  }
+  /**
+   * Helper function to render the button label.
+   * @returns {JSX.Element}
+   */
+  renderButtonLabel() {
+    var t, e, i, n;
+    return this.multiple ? s("div", { part: "button-label", class: "button__label" }, this.label) : !((e = (t = this.selected) === null || t === void 0 ? void 0 : t[0]) === null || e === void 0) && e.text ? s("div", { part: "button-label", class: "button__label" }, this.selected[0].text) : !((n = (i = this.selected) === null || i === void 0 ? void 0 : i[0]) === null || n === void 0) && n.innerHTML ? s("div", { part: "button-label", class: "button__label button__label--from-inner-html", innerHTML: this.selected[0].innerHTML }) : s("div", { part: "button-label", class: "button__label" });
+  }
+  /**
+   * Helper function to render an icon when an image source is provided.
+   * @returns {JSX.Element}
+   */
+  renderLeftSideIcon() {
+    return s("img", { part: "button-icon", class: "button__left-icon", src: this.iconSrc, alt: this.iconAlt ? this.iconAlt : "" });
+  }
+  /**
+   * Helper function for rendering the filtering UI.
+   *
+   * @returns {JSX.Element}
+   */
+  renderFiltering() {
+    return s("div", { class: "filter" }, s("input", { type: "text", class: "mi-input filter__input", placeholder: "Type to filter", ref: (t) => this.filterElement = t, onInput: () => {
+      this.filter();
+    }, tabIndex: this.open ? 0 : -1 }), s("button", { ref: (t) => this.clearButtonElement = t, tabindex: this.isClearButtonVisible ? 0 : -1, type: "button", onClick: () => this.clearFilter(), class: `filter__clear ${this.isClearButtonVisible === !1 ? "filter__clear--hidden" : ""}`, "aria-label": "Clear" }, s("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, s("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" }))));
+  }
+  /**
+   * Helper function for rendering the multi select options.
+   *
+   * @returns {JSX.Element}
+   */
+  renderMultipleOptions() {
+    return s("div", { class: "options" }, s("button", { class: "options__item", disabled: this.isFilterSelectionDisabled, onClick: () => this.selectAll() }, "Select all"), s("button", { class: "options__item", disabled: this.isFilterSelectionDisabled, onClick: () => this.selectNone() }, "Select none"));
+  }
+  /**
+   * Helper function for rendering list item.
+   *
+   * @param {HTMLMiDropdownItemElement} item
+   * @param {number} index
+   * @param {boolean} showCheckBox
+   * @returns {JSX.Element}
+   */
+  renderListItem(t, e, i) {
+    let n;
+    const l = t.getAttribute("title") || t.text || t.innerText;
+    return t.innerText.length > 0 ? n = s("div", { class: "label__item label__item--from-inner-html", innerHTML: t.innerHTML }) : n = s("div", { class: "label__item", innerHTML: t.text }), s("li", { class: "list__item", title: l, onMouseOver: () => {
+      this.onMouseOver(e);
+    } }, s("label", { class: "mi-label label", tabindex: "-1" }, s("input", { class: { label__checkbox: !0, "label__checkbox--hidden": !i, "mi-input": !0 }, type: "checkbox", value: e, checked: t.selected, onChange: () => this.onSelect(t) }), n));
+  }
+  /**
+   * 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: t, clientHeight: e } = document.documentElement, i = this.hostElement.getBoundingClientRect(), n = this.listElement.getBoundingClientRect(), l = e - i.bottom, o = i.top, a = 580, h = 12;
+    t <= n.width || i.right - n.width < 0 && n.right > t ? (this.listElement.style.right = `${h}px`, this.listElement.style.left = `${h}px`, this.listElement.style.minWidth = "unset") : n.right > t ? (this.listElement.style.left = "unset", this.listElement.style.right = `${t - i.right}px`) : (this.listElement.style.left = `${i.left}px`, this.listElement.style.right = "unset"), o > l ? (this.listElement.style.maxHeight = `${Math.min(o, a)}px`, this.listElement.style.top = "unset", this.listElement.style.bottom = `${e - i.top}px`) : (this.listElement.style.top = `${i.bottom}px`, this.listElement.style.bottom = "unset", this.listElement.style.maxHeight = `${Math.min(l - h * 2, a)}px`);
+  }
+  get hostElement() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      items: ["onItemsChanged"],
+      currentItems: ["onCurrentItemsChange"]
+    };
+  }
+};
+b.style = g;
+export {
+  b as mi_dropdown
+};