@mapsindoors/map-template 1.95.0 → 1.95.2

package/dist/mi-combo-box.entry.js

@@ -1,416 +1,449 @@
-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';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BZQHyS7V.js';
+import { S as SortOrder, f as fuzzysort } from './sort-order.enum-jsLAbYWg.js';
+import './_commonjsHelpers-B85MJLTf.js';
 
-const comboBoxCss = ".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}";
+const comboBoxCss = () => `.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 KeyCode;
 (function (KeyCode) {
-  KeyCode["ArrowDown"] = "ArrowDown";
-  KeyCode["ArrowUp"] = "ArrowUp";
-  KeyCode["Enter"] = "Enter";
-  KeyCode["Esc"] = "Escape";
+    KeyCode["ArrowDown"] = "ArrowDown";
+    KeyCode["ArrowUp"] = "ArrowUp";
+    KeyCode["Enter"] = "Enter";
+    KeyCode["Esc"] = "Escape";
 })(KeyCode || (KeyCode = {}));
 const ComboBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.change = createEvent(this, "change", 3);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change", 3);
+        /**
+         * Gets or sets the state of the dropdown.
+         * If the attribute is set to true then the dropdown will be expanded.
+         *
+         * @type {boolean}
+         */
+        this.open = false;
+        /**
+         * Gets or sets the list items.
+         *
+         * @type {Array<HTMLMiDropdownItemElement>}
+         * @returns {void}
+         */
+        this.items = [];
+        /**
+         * This attribute indicates that the items can be filtered using the input field present at the top.
+         * If it is not specified, the input field will not be visible, and filtering is not possible.
+         *
+         * @type {boolean}
+         */
+        this.filterable = false;
+        /**
+         * Gets the selected items.
+         *
+         * @type {Array<HTMLMiDropdownItemElement>}
+         */
+        this.selected = [];
+        /**
+         * Guiding message when presented with a content window that has no rows.
+         * Default language is English.
+         */
+        this.noResultsMessage = 'No results found';
+        this.currentItems = [];
+        /**
+         * Sets the disabled state for the dropdown.
+         */
+        this.disabled = false;
+        /**
+         * Sets the disabled state of the select buttons in the filterable version of the component.
+         */
+        this.isFilterSelectionDisabled = 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';
+    }
+    onItemsChanged(items) {
+        if (items.some(item => item.tagName.toLowerCase() !== 'combo-box-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.filterable) {
+            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();
+        });
+        this.selectFirstMiDropdownItem();
+    }
+    onCurrentItemsChange() {
+        this.isFilterSelectionDisabled = this.currentItems.length === 0;
+    }
     /**
-     * Sets the disabled state of the select buttons in the filterable version of the component.
+     * Outside the dropdown listener. It will close the dropdown when a click is outside a dropdown and dropdown list.
+     *
+     * @param {ev} ev
      */
-    this.isFilterSelectionDisabled = false;
+    checkForClickOutside(ev) {
+        var _a;
+        if (!this.hostElement.contains(ev.target) && this.noResultsMessage) {
+            this.clearFilter();
+            this.filterElement.value = (_a = this.selected[0]) === null || _a === void 0 ? void 0 : _a.text;
+            this.open = false;
+        }
+    }
     /**
-     * Flag to control the mouseover event on the items. The event is disabled when using the arrow keys to navigate the list.
+     * When clicked on input button we change it's type to text and highlight value that is inside.
+     *
+     * @param {Event} event
      */
-    this.isMouseOverEventDisabled = false;
-    this.currentItemIndex = 0;
-    this.selectedItemIndex = 0;
-    this.highlightedItemClassName = 'list__item--highlighted';
-    this.open = false;
-    this.items = [];
-    this.itemsOrder = undefined;
-    this.filterable = false;
-    this.selected = [];
-    this.noResultsMessage = 'No results found';
-    this.currentItems = [];
-    this.disabled = false;
-  }
-  onItemsChanged(items) {
-    if (items.some(item => item.tagName.toLowerCase() !== 'combo-box-item')) {
-      throw new Error('Items contains unknown element(s).');
-    }
-    if (Object.values(SortOrder).includes(this.itemsOrder)) {
-      items = this.getSortedItems(items);
+    onClickExists(event) {
+        this.open = true;
+        event.target.type = 'text';
+        this.filterElement.select();
     }
-    this.currentItems = [...items];
-    this.filter();
-    if (!this.filterable) {
-      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();
-    });
-    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(ev) {
-    var _a;
-    if (!this.hostElement.contains(ev.target) && this.noResultsMessage) {
-      this.clearFilter();
-      this.filterElement.value = (_a = this.selected[0]) === null || _a === void 0 ? void 0 : _a.text;
-      this.open = false;
-    }
-  }
-  /**
-   * When clicked on input button we change it's type to text and highlight value that is inside.
-   *
-   * @param {Event} event
-   */
-  onClickExists(event) {
-    this.open = true;
-    event.target.type = 'text';
-    this.filterElement.select();
-  }
-  /**
-   * 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;
+    /**
+     * Mousemove event handler.
+     * When the mouse is moved the mouseover event handler is enabled.
+     */
+    mouseMoveEventHandler() {
+        this.isMouseOverEventDisabled = false;
     }
-  }
-  /**
-   * 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 filterElementObserver = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting === true) {
-          this.filterElement.blur();
-        }
-      });
-    });
-    if (this.filterElement !== undefined) {
-      filterElementObserver.observe(this.filterElement);
-      this.filterElement.addEventListener('keydown', (event) => {
-        if (event.key === KeyCode.ArrowDown || event.key === KeyCode.ArrowUp) {
-          event.preventDefault();
+    /**
+     * 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;
         }
-      });
-    }
-  }
-  /**
-   * Component did rener.
-   */
-  componentDidRender() {
-    this.calculateDropDownPosition();
-    if (!this.filterable) {
-      // 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('combo-box-item');
-    if (items.length > 0) {
-      this.items = Array.from(items);
+    /**
+     * Resize event handler.
+     * Recalculate the position of the dropdown when the window is resized.
+     */
+    resizeEventHandler() {
+        this.calculateDropDownPosition();
     }
-  }
-  /**
-   * Set the first mi-dropdown-item as the textual content of the button.
-   */
-  selectFirstMiDropdownItem() {
-    var _a;
-    if (!this.filterable) {
-      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]];
+    /**
+     * Component did load.
+     */
+    componentDidLoad() {
+        this.createMiDropdownItemsFromDocument();
+        this.selectFirstMiDropdownItem();
+        this.enableKeyboardNavigationEvents();
+        const filterElementObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting === true) {
+                    this.filterElement.blur();
+                }
+            });
+        });
+        if (this.filterElement !== undefined) {
+            filterElementObserver.observe(this.filterElement);
+            this.filterElement.addEventListener('keydown', (event) => {
+                if (event.key === KeyCode.ArrowDown || event.key === KeyCode.ArrowUp) {
+                    event.preventDefault();
+                }
+            });
+        }
     }
-  }
-  /**
-   * 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.filterable) {
-        switch (event.key) {
-          case KeyCode.ArrowDown || KeyCode.ArrowUp:
-            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;
+    /**
+     * Component did rener.
+     */
+    componentDidRender() {
+        this.calculateDropDownPosition();
+        if (!this.filterable) {
+            // Makes sure that an item is always highlighted when the content window is open.
             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) {
+    }
+    /**
+     * 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('combo-box-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.filterable) {
-          this.currentItemIndex = this.selectedItemIndex;
-          this.highlightItem(this.currentItemIndex);
+            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]];
         }
-        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 }));
+    /**
+     * 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.filterable) {
+                switch (event.key) {
+                    case KeyCode.ArrowDown || KeyCode.ArrowUp:
+                        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.filterable) {
+                    this.currentItemIndex = this.selectedItemIndex;
+                    this.highlightItem(this.currentItemIndex);
+                }
+                this.toggleContentWindow();
+                this.clearFilter();
+            }
+        });
     }
-    else {
-      // Descending order
-      items.sort((b, a) => (a.text || a.innerText)
-        .trimStart()
-        .toLowerCase()
-        .localeCompare((b.text || b.innerText).trimStart().toLowerCase(), undefined, { numeric: true }));
+    /**
+     * 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' });
+        }
     }
-    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;
-  }
-  /**
-   * Select or toggle selection of item.
-   *
-   * @param {HTMLMiDropdownItemElement} item
-   */
-  onSelect(item) {
-    if (!this.filterable) {
-      this.open = false;
-      const items = Array.from(this.items);
-      items.forEach((item) => {
-        item.selected = false;
-      });
-      this.clearFilter();
+    /**
+     * 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;
     }
-    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.filterable) {
-      this.highlightItem(filteredItemsIndex);
-      this.currentItemIndex = filteredItemsIndex;
+    /**
+     * Update and emit list of selected items.
+     */
+    onChangedHandler() {
+        this.selected = [...this.items.filter(item => item.selected)];
+        this.change.emit(this.selected);
     }
-  }
-  /**
-   * Filter items based on input query.
-   *
-   * @returns {HTMLMiDropdownItemElement[]}
-   */
-  filter() {
-    if (this.filterElement) {
-      const inputQuery = this.filterElement.value;
-      const miDropdownItemTexts = this.items.map(item => (item.text || item.innerText));
-      const numberOfItemsDisplayed = this.currentItems.length;
-      if (inputQuery === '') {
-        this.currentItemIndex = this.selectedItemIndex;
-        return this.currentItems = [...this.items];
-      }
-      const searchResultsOptions = {
-        limit: 50,
-        allowTypo: false,
-        threshold: -10000
-      };
-      const fuzzyResults = fuzzysort.go(inputQuery, miDropdownItemTexts, searchResultsOptions);
-      const filteredItems = fuzzyResults.map(result => this.items.find(item => (item.text || item.innerText) === result.target));
-      this.currentItems = filteredItems;
-      if (numberOfItemsDisplayed !== this.currentItems.length) {
-        this.currentItemIndex = 0;
-      }
+    /**
+     * Toggle visibility of content window.
+     */
+    toggleContentWindow() {
+        this.open = !this.open;
     }
-  }
-  /**
-   * Clear filter.
-   */
-  clearFilter() {
-    var _a;
-    if (this.filterElement) {
-      this.filterElement.value = (_a = this.selected[0]) === null || _a === void 0 ? void 0 : _a.text;
-      this.filterElement.blur();
-      this.currentItems = this.items;
+    /**
+     * Select or toggle selection of item.
+     *
+     * @param {HTMLMiDropdownItemElement} item
+     */
+    onSelect(item) {
+        if (!this.filterable) {
+            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();
     }
-  }
-  /**
-   * Render input field - combobox.
-   *
-   * @returns {Host}
-   */
-  render() {
-    var _a;
-    const listOfItems = (h("ul", { class: "list" }, this.currentItems.map((item, index) => this.renderListItem(item, index, this.filterable))));
-    return (h(Host, { class: { 'open': this.open } }, h("input", { type: "text", class: "input", onFocus: (event) => this.onClickExists(event), ref: (el) => this.filterElement = el, onInput: () => this.filter(), tabIndex: 0, value: (_a = this.selected[0]) === null || _a === void 0 ? void 0 : _a.text }), h("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() }, 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" }, 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 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 });
+    /**
+     * Highlights the item that the cursor is hovering in the content window.
+     *
+     * @param {number} filteredItemsIndex
+     */
+    onMouseOver(filteredItemsIndex) {
+        if (!this.isMouseOverEventDisabled && !this.filterable) {
+            this.highlightItem(filteredItemsIndex);
+            this.currentItemIndex = filteredItemsIndex;
+        }
     }
-    else {
-      itemText = h("div", { class: "label__item", innerHTML: item.text });
+    /**
+     * Filter items based on input query.
+     *
+     * @returns {HTMLMiDropdownItemElement[]}
+     */
+    filter() {
+        if (this.filterElement) {
+            const inputQuery = this.filterElement.value;
+            const miDropdownItemTexts = this.items.map(item => (item.text || item.innerText));
+            const numberOfItemsDisplayed = this.currentItems.length;
+            if (inputQuery === '') {
+                this.currentItemIndex = this.selectedItemIndex;
+                return this.currentItems = [...this.items];
+            }
+            const searchResultsOptions = {
+                limit: 50,
+                allowTypo: false,
+                threshold: -1e4
+            };
+            const fuzzyResults = fuzzysort.go(inputQuery, miDropdownItemTexts, searchResultsOptions);
+            const filteredItems = fuzzyResults.map(result => this.items.find(item => (item.text || item.innerText) === result.target));
+            this.currentItems = filteredItems;
+            if (numberOfItemsDisplayed !== this.currentItems.length) {
+                this.currentItemIndex = 0;
+            }
+        }
     }
-    return (h("li", { class: "list__item", 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, 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';
+    /**
+     * Clear filter.
+     */
+    clearFilter() {
+        var _a;
+        if (this.filterElement) {
+            this.filterElement.value = (_a = this.selected[0]) === null || _a === void 0 ? void 0 : _a.text;
+            this.filterElement.blur();
+            this.currentItems = this.items;
+        }
     }
-    else if (listElementRect.right > clientWidth) {
-      this.listElement.style.left = 'unset';
-      this.listElement.style.right = `${clientWidth - hostElementRect.right}px`;
+    /**
+     * Render input field - combobox.
+     *
+     * @returns {Host}
+     */
+    render() {
+        var _a;
+        const listOfItems = (h("ul", { key: 'f6b41bb0354bf67724906748853706dc88d82d44', class: "list" }, this.currentItems.map((item, index) => this.renderListItem(item, index, this.filterable))));
+        return (h(Host, { key: '67bdf9b1ef80cd02e9c5e5c222cc57b4403d944f', class: { 'open': this.open } }, h("input", { key: '7696e84b9761fffdea045bc058b461bdde2558a6', type: "text", class: "input", onFocus: (event) => this.onClickExists(event), ref: (el) => this.filterElement = el, onInput: () => this.filter(), tabIndex: 0, value: (_a = this.selected[0]) === null || _a === void 0 ? void 0 : _a.text }), h("svg", { key: '520bb60108aa631de484f64d24e84f471e14387a', 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() }, h("path", { key: '70aae628fde18fac4bddf606b72111384ab66196', 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", { key: '3d79acbb1daaa7a03f3af83106d2c186bdeda585', ref: (el) => this.listElement = el, part: "dropdown-container", class: "content" }, this.currentItems.length === 0 ? this.renderNoResultsTemplate() : listOfItems)));
     }
-    else {
-      this.listElement.style.left = `${hostElementRect.left}px`;
-      this.listElement.style.right = 'unset';
+    /**
+     * 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;
     }
-    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`;
+    /**
+     * 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", 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, onChange: () => this.onSelect(item) }), itemText)));
     }
-    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`;
+    /**
+     * 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.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"]
-  }; }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "items": [{
+                "onItemsChanged": 0
+            }],
+        "currentItems": [{
+                "onCurrentItemsChange": 0
+            }]
+    }; }
 };
-ComboBox.style = comboBoxCss;
+ComboBox.style = comboBoxCss();
 
 export { ComboBox as mi_combo_box };