@mapsindoors/map-template 1.93.2 → 1.94.0

package/dist/mi-dropdown.entry.js

@@ -0,0 +1,610 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7e9696f3.js';
+import { S as SortOrder, f as fuzzysort } from './sort-order.enum-64ce8998.js';
+import './_commonjsHelpers-ba3f0406.js';
+
+/**
+ * Performs function composition in LTR (Left To Right) direction.
+ *
+ * @example
+ * const normalizeWhiteSpaces = text => name.replace(/\s+/g, ' ').trim();
+ *
+ * const getInitials = pipe(
+ *   normalizeWhiteSpaces,
+ *   name => name.split(' ').map(name => name.charAt(0)),
+ *   initials => initials.join('').toLocaleUpperCase()
+ * );
+ *
+ * getInitials('Vitor Luiz Cavalcanti');
+ * //=> "VLC"
+ *
+ * @param {Function} fn - An arity N function. Its result is the argument of next one.
+ * @param {...Function[]} fns - Functions of arity 1. Each one's result is next's argument.
+ * @returns {Function}
+ */
+function pipe(fn) {
+    var fns = [].slice.call(arguments, 1);
+    return function () {
+        return fns.reduce(function (x, fn) { return fn(x); }, fn.apply(null, arguments));
+    };
+}
+
+/**
+ * If `String.prototype.normalize` is supported it normalizes diacritics by
+ * replacing them with "clean" character from received text.
+ * @example
+ * normalizeDiacritics('Olá, você aí');
+ * //=> 'Ola, voce ai'
+ * @param {string} text - A `string` value.
+ * @returns {string}
+ */
+var normalizeDiacritics = function (text) {
+    return !!String.prototype.normalize
+        ? text.normalize('NFKD').replace(/[\u0300-\u036F]/g, '')
+        : text;
+};
+
+/**
+ * Resolves a value to an array, if it isn't already an array.
+ * @template T
+ * @param {T | readonly T[]} value
+ * @returns {readonly T[]}
+ */
+var resolveToArray = function (value) {
+    return Array.isArray(value) ? value : [value];
+};
+
+/**
+ * Normalize all white-space characters and remove trailing ones received text.
+ * @example
+ * normalizeWhiteSpaces(' What exactly is it?   ');
+ * //=> "What exactly is it?"
+ *
+ * normalizeWhiteSpaces('Hi,   how is \r\n everything  \t?');
+ * //=> 'Hi, how is everything ?'
+ *
+ * normalizeWhiteSpaces`It is ${temperature}\n  degree\r outside.  `
+ * //=> 'It is 25 degree outside.'
+ * @param {TemplateStringsArray | string} partsOrText
+ * @param {unknown[]} values
+ * @returns {string}
+ */
+function normalizeWhiteSpaces(partsOrText) {
+    var values = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        values[_i - 1] = arguments[_i];
+    }
+    return resolveToArray(partsOrText)
+        .reduce(function (text, part, index) { return text + values[index - 1] + part; })
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+
+/**
+ * Resolve one or multiple texts into a single one.
+ * @param {string | readonly string[]} values - A `string` or an array of `string` values.
+ * @returns {string}
+ */
+var resolveToText = function (values) {
+    return Array.isArray(values) ? values.join(' ') : values;
+};
+/**
+ * Transforms a text to lower case.
+ * @param {string} text - A `string` value.
+ * @returns {string}
+ */
+var transformToLowerCase = function (text) { return text.toLocaleLowerCase(); };
+/**
+ * Resolve received texts (when receives an `Array`) by normalizing its
+ * white-spaces and its diacritics and transforming to lower-case.
+ * @example
+ * normalizeText(' so there\'s  a  Way to NORMALIZE ');
+ * //=> "so there\'s a way to normalize"
+ *
+ * normalizeText(['Olá\r\n', 'como está a   senhorita?']);
+ * //=> "ola como esta a senhorita?"
+ * @param {string | readonly string[]} values - A `string` or an array of `string` values.
+ * @returns {string}
+ */
+var normalizeText = /*#__PURE__*/ pipe(resolveToText, normalizeDiacritics, normalizeWhiteSpaces, transformToLowerCase);
+
+const dropdownCss = ".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.arrow{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;gap:8px}.button__left-icon{height:20px;width:20px}.button svg{margin-left:auto}.button__label{padding-top:12px;padding-bottom:12px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.button__label--from-inner-html{display:grid;grid-auto-flow:column;grid-template-columns:24px 1fr;gap:8px;place-items:center}.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--disabled{opacity:0.72}.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:grid;grid-auto-flow:column;grid-template-columns:24px 1fr;gap:8px;place-items:center}.label__checkbox{margin-right:12px}.label__checkbox--hidden{display:none}";
+
+var KeyCode;
+(function (KeyCode) {
+  KeyCode["ArrowDown"] = "ArrowDown";
+  KeyCode["ArrowUp"] = "ArrowUp";
+  KeyCode["Enter"] = "Enter";
+  KeyCode["Esc"] = "Escape";
+})(KeyCode || (KeyCode = {}));
+const Dropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 3);
+    this.cleared = createEvent(this, "cleared", 7);
+    /**
+     * Sets the disabled state of the select buttons in the filterable version of the component.
+     */
+    this.isFilterSelectionDisabled = false;
+    /**
+     * Flag to control the visibility of the clear button for filterable components.
+     */
+    this.isClearButtonVisible = false;
+    /**
+     * Flag to control the mouseover event on the items. The event is disabled when using the arrow keys to navigate the list.
+     */
+    this.isMouseOverEventDisabled = false;
+    this.currentItemIndex = 0;
+    this.selectedItemIndex = 0;
+    this.highlightedItemClassName = 'list__item--highlighted';
+    this.open = false;
+    this.items = [];
+    this.itemsOrder = undefined;
+    this.label = undefined;
+    this.filterable = false;
+    this.placeholder = 'Type to filter...';
+    this.multiple = false;
+    this.selected = [];
+    this.noResultsMessage = 'No results found';
+    this.iconSrc = undefined;
+    this.iconAlt = undefined;
+    this.dropdownAlignment = 'left';
+    this.currentItems = [];
+    this.disabled = false;
+  }
+  /**
+   * Watcher for items property.
+   */
+  onItemsChanged(items) {
+    if (items.some(item => item.tagName.toLowerCase() !== 'mi-dropdown-item')) {
+      throw new Error('Items contains unknown element(s).');
+    }
+    if (Object.values(SortOrder).includes(this.itemsOrder)) {
+      items = this.getSortedItems(items);
+    }
+    this.currentItems = [...items];
+    this.filter();
+    if (!this.multiple) {
+      const selectedItemIndex = this.currentItems.findIndex(item => item.selected);
+      this.currentItemIndex = selectedItemIndex > -1 ? selectedItemIndex : 0;
+      this.selectedItemIndex = this.currentItemIndex;
+    }
+    this.items.forEach((item, itemIndex) => {
+      item.dataset.index = itemIndex.toString();
+      item.dataset.excludefromall = `${item.excludefromall}`;
+    });
+    this.selectFirstMiDropdownItem();
+  }
+  /**
+   * Watcher for currentItems property.
+   */
+  onCurrentItemsChange() {
+    this.isFilterSelectionDisabled = this.currentItems.length === 0;
+  }
+  /**
+   * Keyboard event listener.
+   * When the Tab key is pressed, the focus is set to the filter input field (If present).
+   *
+   * @param {KeyboardEvent} event
+   * @returns {void}
+   */
+  handleKeyDown(event) {
+    var _a;
+    if (event.key === 'Tab' && this.open) {
+      (_a = this.filterElement) === null || _a === void 0 ? void 0 : _a.focus();
+      event.preventDefault();
+    }
+  }
+  /**
+   * Outside the dropdown listener. It will close the dropdown when a click is outside a dropdown and dropdown list.
+   *
+   * @param {Event} event
+   */
+  checkForClickOutside(event) {
+    if (!this.hostElement.contains(event.target)) {
+      this.open = false;
+    }
+  }
+  /**
+   * Mousemove event handler.
+   * When the mouse is moved the mouseover event handler is enabled.
+   */
+  mouseMoveEventHandler() {
+    this.isMouseOverEventDisabled = false;
+  }
+  /**
+   * Scroll event handler.
+   * The dropdown is closed when the scroll event is trigget outside the dropdown.
+   */
+  scrollEventHandler(event) {
+    const target = event.target;
+    if (!target || !this.hostElement.contains(target)) {
+      this.open = false;
+    }
+  }
+  /**
+   * Resize event handler.
+   * Recalculate the position of the dropdown when the window is resized.
+   */
+  resizeEventHandler() {
+    this.calculateDropDownPosition();
+  }
+  /**
+   * Lifecycle method called when the component is loaded in the DOM.
+   */
+  componentDidLoad() {
+    this.createMiDropdownItemsFromDocument();
+    this.selectFirstMiDropdownItem();
+    this.enableKeyboardNavigationEvents();
+    const filterElementObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting === true) {
+          this.filterElement.focus();
+        }
+      });
+    });
+    if (this.filterElement !== undefined) {
+      filterElementObserver.observe(this.filterElement);
+      this.filterElement.addEventListener('keydown', (event) => {
+        if (event.key === KeyCode.ArrowDown || event.key === KeyCode.ArrowUp) {
+          event.preventDefault();
+        }
+      });
+    }
+  }
+  /**
+   * Lifecycle method called when the component is updated.
+   */
+  componentDidRender() {
+    this.calculateDropDownPosition();
+    if (!this.multiple) {
+      // Makes sure that an item is always highlighted when the content window is open.
+      this.highlightItem(this.currentItemIndex, true);
+    }
+  }
+  /**
+   * Gets all mi-dropdown-item elements for the mi-dropdown items property.
+   */
+  createMiDropdownItemsFromDocument() {
+    const items = this.items && this.items.length > 0 ? this.items : this.hostElement.querySelectorAll('mi-dropdown-item');
+    if (items.length > 0) {
+      this.items = Array.from(items);
+    }
+  }
+  /**
+   * Set the first mi-dropdown-item as the textual content of the button.
+   */
+  selectFirstMiDropdownItem() {
+    var _a;
+    if (!this.multiple) {
+      const selectedIndex = (_a = this.items) === null || _a === void 0 ? void 0 : _a.findIndex((item) => { return item.selected; });
+      this.selected = [this.items[selectedIndex > -1 ? selectedIndex : 0]];
+    }
+  }
+  /**
+   * Enables cycling through the items in the content window using arrow up/down keys.
+   */
+  enableKeyboardNavigationEvents() {
+    this.hostElement.addEventListener('keydown', event => {
+      if (this.open === false && event.key === KeyCode.ArrowDown) {
+        this.isMouseOverEventDisabled = true;
+        this.toggleContentWindow();
+        event.preventDefault();
+        return;
+      }
+      if (this.open === true && !this.multiple) {
+        switch (event.key) {
+          case KeyCode.ArrowDown:
+            this.isMouseOverEventDisabled = true;
+            this.currentItemIndex = (this.currentItemIndex + 1) % this.currentItems.length;
+            this.highlightItem(this.currentItemIndex, true);
+            event.preventDefault();
+            break;
+          case KeyCode.ArrowUp:
+            this.isMouseOverEventDisabled = true;
+            this.currentItemIndex = ((this.currentItemIndex + this.currentItems.length) - 1) % this.currentItems.length;
+            this.highlightItem(this.currentItemIndex, true);
+            event.preventDefault();
+            break;
+          case KeyCode.Enter:
+            if (this.hostElement.shadowRoot.activeElement === this.clearButtonElement) {
+              // When the clear button is focused and Enter is pressed, don't select the
+              // currently highlighted item or close the content window.
+              return;
+            }
+            if (this.currentItems[this.currentItemIndex] !== undefined) {
+              this.onSelect(this.currentItems[this.currentItemIndex]);
+            }
+            event.preventDefault();
+            break;
+        }
+      }
+      // This case must be applied to all types of the dropdown component.
+      if (event.key === KeyCode.Esc) {
+        if (!this.multiple) {
+          this.currentItemIndex = this.selectedItemIndex;
+          this.highlightItem(this.currentItemIndex);
+        }
+        this.toggleContentWindow();
+        this.clearFilter();
+      }
+    });
+  }
+  /**
+   * Updates the currently highlighted item in the markup.
+   *
+   * @param {number} itemIndex
+   */
+  highlightItem(itemIndex, scrollIntoView = false) {
+    var _a, _b;
+    const items = this.hostElement.shadowRoot.querySelectorAll('.list__item');
+    items.forEach(item => {
+      item.classList.remove(this.highlightedItemClassName);
+    });
+    (_a = items[itemIndex]) === null || _a === void 0 ? void 0 : _a.classList.add(this.highlightedItemClassName);
+    if (scrollIntoView) {
+      (_b = items[itemIndex]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+  }
+  /**
+   * Get sorted items.
+   * The sorting order is defined by the itemsOrder attribute.
+   *
+   * @param {HTMLMiDropdownItemElement[]} items
+   * @returns {HTMLMiDropdownItemElement[]}
+   */
+  getSortedItems(items) {
+    if (this.itemsOrder === SortOrder.Asc) {
+      // Ascending order
+      items.sort((a, b) => (a.text || a.innerText)
+        .trimStart()
+        .toLowerCase()
+        .localeCompare((b.text || b.innerText).trimStart().toLowerCase(), undefined, { numeric: true }));
+    }
+    else {
+      // Descending order
+      items.sort((b, a) => (a.text || a.innerText)
+        .trimStart()
+        .toLowerCase()
+        .localeCompare((b.text || b.innerText).trimStart().toLowerCase(), undefined, { numeric: true }));
+    }
+    return items;
+  }
+  /**
+   * Update and emit list of selected items.
+   */
+  onChangedHandler() {
+    this.selected = [...this.items.filter(item => item.selected)];
+    this.change.emit(this.selected);
+  }
+  /**
+   * Toggle visibility of content window.
+   */
+  toggleContentWindow() {
+    this.open = !this.open;
+  }
+  /**
+   * Check all checkboxes.
+   */
+  selectAll() {
+    const items = Array.from(this.currentItems);
+    for (const item of items) {
+      item.selected = (`${item.dataset.excludefromall}` === 'true' || item.disabled) ? false : true;
+    }
+    this.onChangedHandler();
+  }
+  /**
+   * Uncheck all checkboxes.
+   */
+  selectNone() {
+    const items = Array.from(this.currentItems);
+    for (const item of items) {
+      item.selected = false;
+    }
+    this.onChangedHandler();
+  }
+  /**
+   * Select or toggle selection of item.
+   *
+   * @param {HTMLMiDropdownItemElement} item
+   */
+  onSelect(item) {
+    if (!this.multiple) {
+      this.open = false;
+      const items = Array.from(this.items);
+      items.forEach((item) => { item.selected = false; });
+      this.clearFilter();
+    }
+    item.selected = !item.selected;
+    this.currentItemIndex = Number(item.dataset.index);
+    this.selectedItemIndex = this.currentItemIndex;
+    this.onChangedHandler();
+  }
+  /**
+   * Highlights the item that the cursor is hovering in the content window.
+   *
+   * @param {number} filteredItemsIndex
+   */
+  onMouseOver(filteredItemsIndex) {
+    if (!this.isMouseOverEventDisabled && !this.multiple) {
+      this.highlightItem(filteredItemsIndex);
+      this.currentItemIndex = filteredItemsIndex;
+    }
+  }
+  /**
+   * Filter items based on the input query.
+   */
+  filter() {
+    if (this.filterElement) {
+      const inputQuery = this.filterElement.value;
+      // Normalize text by trimming whitespace, converting to lowercase, and removing diacritics.
+      // This ensures consistent matching/comparison of dropdown items.
+      const miDropdownItemTexts = this.items.map(item => (normalizeText(item.text) || normalizeText(item.innerText)));
+      const numberOfItemsDisplayed = this.currentItems.length;
+      if (inputQuery === '') {
+        this.currentItemIndex = this.selectedItemIndex;
+        this.isClearButtonVisible = false;
+        this.currentItems = [...this.items];
+        return;
+      }
+      else {
+        this.isClearButtonVisible = true;
+      }
+      const searchResultsOptions = {
+        limit: 50,
+        allowTypo: false,
+        threshold: -10000
+      };
+      // Normalize text by trimming whitespace, converting to lowercase, and removing diacritics.
+      // This ensures consistent matching/comparison of dropdown items.
+      const fuzzyResults = fuzzysort.go(normalizeText(inputQuery), miDropdownItemTexts, searchResultsOptions);
+      const filteredItems = fuzzyResults.map(result => this.items.find(item => (normalizeText(item.text) || normalizeText(item.innerText)) === normalizeText(result.target)));
+      this.currentItems = filteredItems;
+      if (numberOfItemsDisplayed !== this.currentItems.length) {
+        this.currentItemIndex = 0;
+      }
+    }
+  }
+  /**
+   * Clear filter.
+   */
+  clearFilter() {
+    if (this.filterElement) {
+      this.filterElement.value = '';
+      this.filterElement.focus();
+      this.currentItems = this.items;
+      this.cleared.emit();
+    }
+    this.isClearButtonVisible = false;
+  }
+  /**
+   * Render the dropdown component.
+   *
+   * @returns {JSX.Element}
+   */
+  render() {
+    const filter = this.filterable ? this.renderFiltering() : null;
+    const multiple = this.multiple ? this.renderMultipleOptions() : null;
+    const leftSideIcon = this.iconSrc ? this.renderLeftSideIcon() : null;
+    const listOfItems = (h("ul", { class: "list" }, this.currentItems.map((item, index) => this.renderListItem(item, index, (multiple ? true : false)))));
+    return (h(Host, { class: { 'open': this.open } }, h("button", { part: "button", class: "button", disabled: this.disabled || this.items.length === 0, onClick: () => this.toggleContentWindow() }, leftSideIcon, this.renderButtonLabel(), h("svg", { class: "arrow", part: "icon-down-arrow", width: "12", height: "6", viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, h("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" }))), h("section", { ref: (el) => this.listElement = el, part: "dropdown-container", class: "content", "tab-index": "1" }, filter, multiple, this.currentItems.length === 0 ? this.renderNoResultsTemplate() : listOfItems)));
+  }
+  /**
+   * Helper function to render markup when no items are available to be displayed in the content window.
+   *
+   * @returns {JSX.Element}
+   */
+  renderNoResultsTemplate() {
+    const noResultsTemplate = (h("div", { class: "empty-page" }, h("p", { class: "empty-page__header" }, this.noResultsMessage)));
+    return noResultsTemplate;
+  }
+  /**
+   * Helper function to render the button label.
+   *
+   * @returns {JSX.Element}
+   */
+  renderButtonLabel() {
+    var _a, _b, _c, _d, _e;
+    const label = (_a = this.label) !== null && _a !== void 0 ? _a : (_c = (_b = this.selected) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.text;
+    if (label > '') {
+      return (h("div", { part: "button-label", class: "button__label" }, label));
+    }
+    else if ((_e = (_d = this.selected) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.innerHTML) {
+      return (h("div", { part: "button-label", class: "button__label button__label--from-inner-html", innerHTML: this.selected[0].innerHTML }));
+    }
+    else {
+      return (h("div", { part: "button-label", class: "button__label" }));
+    }
+  }
+  /**
+   * Helper function to render an icon when an image source is provided.
+   *
+   * @returns {JSX.Element}
+   */
+  renderLeftSideIcon() {
+    return (h("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 (h("div", { class: "filter" }, h("input", { type: "text", class: "mi-input filter__input", placeholder: this.placeholder, ref: (el) => this.filterElement = el, onInput: () => { this.filter(); }, tabIndex: this.open ? 0 : -1 }), h("button", { ref: (el) => this.clearButtonElement = el, tabindex: this.isClearButtonVisible ? 0 : -1, type: "button", onClick: () => this.clearFilter(), class: `filter__clear ${this.isClearButtonVisible === false ? 'filter__clear--hidden' : ''}`, "aria-label": "Clear" }, h("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("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 (h("div", { class: "options" }, h("button", { class: "options__item", disabled: this.isFilterSelectionDisabled, onClick: () => this.selectAll() }, "Select all"), h("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(item, index, showCheckBox) {
+    let itemText;
+    const itemTooltipInfo = (item.getAttribute('title') || item.text || item.innerText);
+    if (item.innerText.length > 0) {
+      itemText = h("div", { class: "label__item label__item--from-inner-html", innerHTML: item.innerHTML });
+    }
+    else {
+      itemText = h("div", { class: "label__item", innerHTML: item.text });
+    }
+    return (h("li", { class: { 'list__item': true, 'list__item--disabled': item.disabled }, title: itemTooltipInfo, onMouseOver: () => { this.onMouseOver(index); } }, h("label", { class: "mi-label label", tabindex: "-1" }, h("input", { class: { 'label__checkbox': true, 'label__checkbox--hidden': !showCheckBox, 'mi-input': true }, type: "checkbox", value: index, checked: item.selected, disabled: item.disabled, "data-excludefromall": item.excludefromall, onChange: () => this.onSelect(item) }), itemText)));
+  }
+  /**
+   * 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, clientHeight } = document.documentElement;
+    const hostElementRect = this.hostElement.getBoundingClientRect();
+    const listElementRect = this.listElement.getBoundingClientRect();
+    const availableSpaceBelowComponent = clientHeight - hostElementRect.bottom;
+    const availableSpaceAboveComponent = hostElementRect.top;
+    const MAX_HEIGHT = 580;
+    const MARGIN = 12;
+    if (clientWidth <= listElementRect.width || (hostElementRect.right - listElementRect.width < 0 && listElementRect.right > clientWidth)) {
+      this.listElement.style.right = `${MARGIN}px`;
+      this.listElement.style.left = `${MARGIN}px`;
+      this.listElement.style.minWidth = 'unset';
+    }
+    else if (listElementRect.right > clientWidth || this.dropdownAlignment === 'right') {
+      this.listElement.style.left = 'unset';
+      this.listElement.style.right = `${clientWidth - hostElementRect.right}px`;
+    }
+    else {
+      this.listElement.style.left = `${hostElementRect.left}px`;
+      this.listElement.style.right = 'unset';
+    }
+    if (availableSpaceAboveComponent > availableSpaceBelowComponent) {
+      this.listElement.style.maxHeight = `${Math.min(availableSpaceAboveComponent, MAX_HEIGHT)}px`;
+      this.listElement.style.top = 'unset';
+      this.listElement.style.bottom = `${clientHeight - hostElementRect.top}px`;
+    }
+    else {
+      this.listElement.style.top = `${hostElementRect.bottom}px`;
+      this.listElement.style.bottom = 'unset';
+      this.listElement.style.maxHeight = `${Math.min(availableSpaceBelowComponent - (MARGIN * 2), MAX_HEIGHT)}px`;
+    }
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "items": ["onItemsChanged"],
+    "currentItems": ["onCurrentItemsChange"]
+  }; }
+};
+Dropdown.style = dropdownCss;
+
+export { Dropdown as mi_dropdown };