@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/dist/collection/components/hy-dropdown/hy-dropdown.js

@@ -1,453 +1,453 @@
 import { Host, h } from "@stencil/core";
 import { jsonParserWorker } from "../../global/globalScript";
 export class HyDropdown {
-  constructor() {
-    this.single = false;
-    this.dropdownLabel = null;
-    this.dropdownId = "dropdownToggle";
-    this.dropdownOptions = undefined;
-    this.defaultLabel = "All";
-    this.type = null;
-    this.defaultOption = null;
-    this.isPanelOpen = false;
-    this.isChecked = false;
-    this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
-    this.currentMulti = undefined;
-    this.focusedOptionIndex = 0;
-  }
-  async componentWillLoad() {
-    this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
-  }
-  componentWillUpdate() {
-    const items = this.el.querySelectorAll(".hy-dropdown__checkbox");
-    if (items) {
-      if ([...items].some((item) => item.checked == true)) {
-        this.isChecked = true;
-      }
-      else {
+    constructor() {
+        this.single = false;
+        this.dropdownLabel = null;
+        this.dropdownId = "dropdownToggle";
+        this.dropdownOptions = undefined;
+        this.defaultLabel = "All";
+        this.type = null;
+        this.defaultOption = null;
+        this.isPanelOpen = false;
         this.isChecked = false;
-      }
+        this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
+        this.currentMulti = undefined;
+        this.focusedOptionIndex = 0;
     }
-  }
-  watchPropHandler(newValue, oldValue) {
-    if (!this.single)
-      return;
-    if (newValue !== oldValue) {
-      const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
-      Array.from(dropdownPanelCheckboxElements).filter((item) => {
-        if (item.id == newValue) {
-          item.checked = true;
-          this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue);
-          return;
-        }
-        return null;
-      });
+    async componentWillLoad() {
+        this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
     }
-  }
-  panelListener(e) {
-    if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {
-      this.isPanelOpen = false;
+    componentWillUpdate() {
+        const items = this.el.querySelectorAll(".hy-dropdown__checkbox");
+        if (items) {
+            if ([...items].some((item) => item.checked == true)) {
+                this.isChecked = true;
+            }
+            else {
+                this.isChecked = false;
+            }
+        }
     }
-  }
-  handleMultiClick(event, option) {
-    event.stopPropagation();
-    const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
-    Array.from(dropdownPanelCheckboxElements).filter((i) => {
-      const item = i.closest("li");
-      if (item.dataset.id == option.id && !item.hasAttribute("aria-selected")) {
-        item.setAttribute("aria-selected", "true");
-        this.currentMulti =
-          this.currentMulti && this.currentMulti.length > 0 ? [...this.currentMulti, option] : [option];
-        return;
-      }
-      if (item.dataset.id === option.id && item.hasAttribute("aria-selected")) {
-        item.removeAttribute("aria-selected");
-        if (this.currentMulti.length > 0) {
-          const index = this.currentMulti.indexOf(option);
-          this.currentMulti = this.currentMulti.splice(index, 1);
+    watchPropHandler(newValue, oldValue) {
+        if (!this.single)
+            return;
+        if (newValue !== oldValue) {
+            const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
+            Array.from(dropdownPanelCheckboxElements).filter((item) => {
+                if (item.id == newValue) {
+                    item.checked = true;
+                    this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue);
+                    return;
+                }
+                return null;
+            });
         }
-        return;
-      }
-      return null;
-    });
-  }
-  handleSingleClick(event, option) {
-    if (!this.single || !this.isPanelOpen)
-      return;
-    const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
-    event.stopPropagation();
-    Array.from(dropdownPanelCheckboxElements).filter((i) => {
-      const item = i.closest("li");
-      if (item.dataset.id == option.id) {
-        if (item.hasAttribute("aria-selected")) {
-          item.removeAttribute("aria-selected");
-          this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
-          return;
+    }
+    panelListener(e) {
+        if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {
+            this.isPanelOpen = false;
         }
-        item.setAttribute("aria-selected", "true");
-        this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id);
-        return;
-      }
-      if (item.dataset.id !== option.id && item.hasAttribute("aria-selected")) {
-        item.removeAttribute("aria-selected");
-        return;
-      }
-      return null;
-    });
-  }
-  handleKeyDown(event) {
-    event.stopPropagation();
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
-        if (!this.isPanelOpen) {
-          this.handlePanelToggle(event);
-          return;
+    }
+    handleMultiClick(event, option) {
+        event.stopPropagation();
+        const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
+        Array.from(dropdownPanelCheckboxElements).filter((i) => {
+            const item = i.closest("li");
+            if (item.dataset.id == option.id && !item.hasAttribute("aria-selected")) {
+                item.setAttribute("aria-selected", "true");
+                this.currentMulti =
+                    this.currentMulti && this.currentMulti.length > 0 ? [...this.currentMulti, option] : [option];
+                return;
+            }
+            if (item.dataset.id === option.id && item.hasAttribute("aria-selected")) {
+                item.removeAttribute("aria-selected");
+                if (this.currentMulti.length > 0) {
+                    const index = this.currentMulti.indexOf(option);
+                    this.currentMulti = this.currentMulti.splice(index, 1);
+                }
+                return;
+            }
+            return null;
+        });
+    }
+    handleSingleClick(event, option) {
+        if (!this.single || !this.isPanelOpen)
+            return;
+        const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
+        event.stopPropagation();
+        Array.from(dropdownPanelCheckboxElements).filter((i) => {
+            const item = i.closest("li");
+            if (item.dataset.id == option.id) {
+                if (item.hasAttribute("aria-selected")) {
+                    item.removeAttribute("aria-selected");
+                    this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
+                    return;
+                }
+                item.setAttribute("aria-selected", "true");
+                this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id);
+                return;
+            }
+            if (item.dataset.id !== option.id && item.hasAttribute("aria-selected")) {
+                item.removeAttribute("aria-selected");
+                return;
+            }
+            return null;
+        });
+    }
+    handleKeyDown(event) {
+        event.stopPropagation();
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                if (!this.isPanelOpen) {
+                    this.handlePanelToggle(event);
+                    return;
+                }
+                this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this._dropdownOptions.length;
+                break;
+            case "ArrowUp":
+                this.focusedOptionIndex =
+                    (this.focusedOptionIndex - 1 + this._dropdownOptions.length) % this._dropdownOptions.length;
+                event.preventDefault();
+                break;
+            case "Enter":
+            case " ":
+                if (!this.isPanelOpen) {
+                    event.preventDefault();
+                    this.handlePanelToggle(event);
+                    return;
+                }
+                if (this.single) {
+                    this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+                }
+                else {
+                    this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+                }
+                const emitDetails = {
+                    id: this.dropdownId,
+                    type: this.type,
+                    data: this._dropdownOptions[this.focusedOptionIndex],
+                };
+                this.dropdownKeyPress.emit(emitDetails);
+                event.preventDefault();
+                break;
+            case "Escape":
+            case "Tab":
+                this.isPanelOpen = false;
+                break;
+            default:
+                break;
         }
-        this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this._dropdownOptions.length;
-        break;
-      case "ArrowUp":
-        this.focusedOptionIndex =
-          (this.focusedOptionIndex - 1 + this._dropdownOptions.length) % this._dropdownOptions.length;
-        event.preventDefault();
-        break;
-      case "Enter":
-      case " ":
-        if (!this.isPanelOpen) {
-          event.preventDefault();
-          this.handlePanelToggle(event);
-          return;
+    }
+    handlePanelToggle(e) {
+        e.stopPropagation();
+        this.isPanelOpen = !this.isPanelOpen;
+        const emitDetails = {
+            dropdownId: this.dropdownId,
+            panelOpen: this.isPanelOpen,
+        };
+        this.dropdownPanelToggled.emit(emitDetails);
+    }
+    handlePanelClickOutside(e) {
+        e.stopPropagation();
+        const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
+        const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
+        const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__panel-item");
+        const dropdownPanelCheckboxes = this.el.querySelectorAll(".hy-dropdown__checkbox");
+        const dropdownToggleButtonIconElement = this.el.querySelectorAll(".hy-dropdown__icon");
+        const { target } = e;
+        const allowedElements = [
+            this.el,
+            dropdownToggleButtonElement,
+            dropdownPanelElement,
+            ...dropdownPanelCheckboxes,
+            dropdownToggleButtonIconElement,
+            ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
+        ];
+        if (this.isPanelOpen && !allowedElements.includes(target)) {
+            this.isPanelOpen = false;
         }
+    }
+    handleOptionSingleClick(event, option) {
+        event.stopPropagation();
+        this.handleSingleClick(event, option);
+        const emitDetails = {
+            id: this.dropdownId,
+            type: this.type,
+            data: option,
+        };
+        this.dropdropValueChange.emit(emitDetails);
+    }
+    handleMultiOptionClick(event, option) {
+        event.stopPropagation();
+        this.handleMultiClick(event, option);
+        const emitDetails = {
+            id: this.dropdownId,
+            type: this.type,
+            data: this.currentMulti,
+        };
+        this.dropdropMultiValueChange.emit(emitDetails);
+    }
+    handleOptionHover(index) {
+        this.focusedOptionIndex = index;
+    }
+    render() {
+        const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
+        const classAttributes = ["hy-dropdown", this.single ? "hy-dropdown--single" : ""].join(" ");
         if (this.single) {
-          this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+            return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("div", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", "aria-haspopup": "listbox", role: "combobox", onClick: (event) => this.handlePanelToggle(event), onKeyDown: (event) => this.handleKeyDown(event), "aria-label": this.dropdownLabel, "data-current-id": currentId, "data-current-value": currentValue, "data-value": currentId, tabIndex: 0 }, h("input", { "aria-hidden": "true", class: "hy-dropdown__hidden-input", type: "hidden", value: currentId }), currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("ul", { "checkbox-checked": this.isChecked ? "true" : "false", id: "dropdownPanel", class: `hy-dropdown__panel ${!this.isPanelOpen ? "is-hidden" : ""}`, "aria-expanded": `${!this.isPanelOpen || false}`, role: "listbox", "aria-labelledby": "dropdownToggle" }, this._dropdownOptions.map(({ id, label, value }, index, items) => (h("li", { key: id, "data-id": `${id}`, role: "option", class: `hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? "is-last" : ""}
+                  ${this.focusedOptionIndex === index ? "hy-dropdown__panel-item--focused" : ""}`, onClick: (event) => this.handleOptionSingleClick(event, items[index]), onMouseEnter: () => this.handleOptionHover(index) }, h("span", { "data-id": `${id}`, class: "hy-dropdown__checkbox", "data-value": `${value}` }, label, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))))))));
         }
         else {
-          this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+            return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", "aria-haspopup": "listbox", role: "combobox", onClick: (event) => this.handlePanelToggle(event), "aria-label": this.dropdownLabel, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("ul", { "checkbox-checked": this.isChecked ? "true" : "false", id: "dropdownPanel", class: `hy-dropdown__panel ${!this.isPanelOpen ? "is-hidden" : ""}`, "aria-expanded": `${!this.isPanelOpen || false}`, role: "listbox", "aria-labelledby": "dropdownToggle" }, this._dropdownOptions.map(({ id, label, value }, index, items) => (h("li", { key: id, "data-id": `${id}`, role: "option", class: `hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? "is-last" : ""}
+                  ${this.focusedOptionIndex === index ? "hy-dropdown__panel-item--focused" : ""}`, onClick: (event) => this.handleMultiOptionClick(event, items[index]), onMouseEnter: () => this.handleOptionHover(index) }, h("span", { "data-id": `${id}`, class: "hy-dropdown__checkbox", "data-value": `${value}` }, label, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))))))));
         }
-        const emitDetails = {
-          id: this.dropdownId,
-          type: this.type,
-          data: this._dropdownOptions[this.focusedOptionIndex],
+    }
+    static get is() { return "hy-dropdown"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["hy-dropdown.scss"]
         };
-        this.dropdownKeyPress.emit(emitDetails);
-        event.preventDefault();
-        break;
-      case "Escape":
-      case "Tab":
-        this.isPanelOpen = false;
-        break;
-      default:
-        break;
     }
-  }
-  handlePanelToggle(e) {
-    e.stopPropagation();
-    this.isPanelOpen = !this.isPanelOpen;
-    const emitDetails = {
-      dropdownId: this.dropdownId,
-      panelOpen: this.isPanelOpen,
-    };
-    this.dropdownPanelToggled.emit(emitDetails);
-  }
-  handlePanelClickOutside(e) {
-    e.stopPropagation();
-    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
-    const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
-    const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__panel-item");
-    const dropdownPanelCheckboxes = this.el.querySelectorAll(".hy-dropdown__checkbox");
-    const dropdownToggleButtonIconElement = this.el.querySelectorAll(".hy-dropdown__icon");
-    const { target } = e;
-    const allowedElements = [
-      this.el,
-      dropdownToggleButtonElement,
-      dropdownPanelElement,
-      ...dropdownPanelCheckboxes,
-      dropdownToggleButtonIconElement,
-      ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
-    ];
-    if (this.isPanelOpen && !allowedElements.includes(target)) {
-      this.isPanelOpen = false;
+    static get styleUrls() {
+        return {
+            "$": ["hy-dropdown.css"]
+        };
     }
-  }
-  handleOptionSingleClick(event, option) {
-    event.stopPropagation();
-    this.handleSingleClick(event, option);
-    const emitDetails = {
-      id: this.dropdownId,
-      type: this.type,
-      data: option,
-    };
-    this.dropdropValueChange.emit(emitDetails);
-  }
-  handleMultiOptionClick(event, option) {
-    event.stopPropagation();
-    this.handleMultiClick(event, option);
-    const emitDetails = {
-      id: this.dropdownId,
-      type: this.type,
-      data: this.currentMulti,
-    };
-    this.dropdropMultiValueChange.emit(emitDetails);
-  }
-  handleOptionHover(index) {
-    this.focusedOptionIndex = index;
-  }
-  render() {
-    const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
-    const classAttributes = ["hy-dropdown", this.single ? "hy-dropdown--single" : ""].join(" ");
-    if (this.single) {
-      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("div", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", "aria-haspopup": "listbox", role: "combobox", onClick: (event) => this.handlePanelToggle(event), onKeyDown: (event) => this.handleKeyDown(event), "aria-label": this.dropdownLabel, "data-current-id": currentId, "data-current-value": currentValue, "data-value": currentId, tabIndex: 0 }, h("input", { "aria-hidden": "true", class: "hy-dropdown__hidden-input", type: "hidden", value: currentId }), currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("ul", { "checkbox-checked": this.isChecked ? "true" : "false", id: "dropdownPanel", class: `hy-dropdown__panel ${!this.isPanelOpen ? "is-hidden" : ""}`, "aria-expanded": `${!this.isPanelOpen || false}`, role: "listbox", "aria-labelledby": "dropdownToggle" }, this._dropdownOptions.map(({ id, label, value }, index, items) => (h("li", { key: id, "data-id": `${id}`, role: "option", class: `hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? "is-last" : ""}
-                  ${this.focusedOptionIndex === index ? "hy-dropdown__panel-item--focused" : ""}`, onClick: (event) => this.handleOptionSingleClick(event, items[index]), onMouseEnter: () => this.handleOptionHover(index) }, h("span", { "data-id": `${id}`, class: "hy-dropdown__checkbox", "data-value": `${value}` }, label, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))))))));
+    static get properties() {
+        return {
+            "single": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "single",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dropdownLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dropdown-label",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "dropdownId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dropdown-id",
+                "reflect": false,
+                "defaultValue": "\"dropdownToggle\""
+            },
+            "dropdownOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDropdownItem[] | string",
+                    "resolved": "IDropdownItem[] | string",
+                    "references": {
+                        "IDropdownItem": {
+                            "location": "local",
+                            "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-dropdown/hy-dropdown.tsx",
+                            "id": "src/components/hy-dropdown/hy-dropdown.tsx::IDropdownItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dropdown-options",
+                "reflect": false
+            },
+            "defaultLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-label",
+                "reflect": false,
+                "defaultValue": "\"All\""
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "defaultOption": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-option",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
     }
-    else {
-      return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", "aria-haspopup": "listbox", role: "combobox", onClick: (event) => this.handlePanelToggle(event), "aria-label": this.dropdownLabel, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("ul", { "checkbox-checked": this.isChecked ? "true" : "false", id: "dropdownPanel", class: `hy-dropdown__panel ${!this.isPanelOpen ? "is-hidden" : ""}`, "aria-expanded": `${!this.isPanelOpen || false}`, role: "listbox", "aria-labelledby": "dropdownToggle" }, this._dropdownOptions.map(({ id, label, value }, index, items) => (h("li", { key: id, "data-id": `${id}`, role: "option", class: `hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? "is-last" : ""}
-                  ${this.focusedOptionIndex === index ? "hy-dropdown__panel-item--focused" : ""}`, onClick: (event) => this.handleMultiOptionClick(event, items[index]), onMouseEnter: () => this.handleOptionHover(index) }, h("span", { "data-id": `${id}`, class: "hy-dropdown__checkbox", "data-value": `${value}` }, label, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))))))));
+    static get states() {
+        return {
+            "isPanelOpen": {},
+            "isChecked": {},
+            "currentSingle": {},
+            "currentMulti": {},
+            "focusedOptionIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropdownPanelToggled",
+                "name": "dropdownPanelToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dropdropValueChange",
+                "name": "dropdownValueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dropdropMultiValueChange",
+                "name": "dropdownMultiValueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dropdownKeyPress",
+                "name": "dropdownKeyPress",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "defaultOption",
+                "methodName": "watchPropHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "dropdownPanelToggled",
+                "method": "panelListener",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handlePanelClickOutside",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
     }
-  }
-  static get is() { return "hy-dropdown"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["hy-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["hy-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "single": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "single",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "dropdownLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dropdown-label",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "dropdownId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dropdown-id",
-        "reflect": false,
-        "defaultValue": "\"dropdownToggle\""
-      },
-      "dropdownOptions": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IDropdownItem[] | string",
-          "resolved": "IDropdownItem[] | string",
-          "references": {
-            "IDropdownItem": {
-              "location": "local",
-              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-dropdown/hy-dropdown.tsx"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "dropdown-options",
-        "reflect": false
-      },
-      "defaultLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "default-label",
-        "reflect": false,
-        "defaultValue": "\"All\""
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "defaultOption": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "default-option",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isPanelOpen": {},
-      "isChecked": {},
-      "currentSingle": {},
-      "currentMulti": {},
-      "focusedOptionIndex": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dropdownPanelToggled",
-        "name": "dropdownPanelToggled",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "dropdropValueChange",
-        "name": "dropdownValueChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "dropdropMultiValueChange",
-        "name": "dropdownMultiValueChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "dropdownKeyPress",
-        "name": "dropdownKeyPress",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "defaultOption",
-        "methodName": "watchPropHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "dropdownPanelToggled",
-        "method": "panelListener",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "handlePanelClickOutside",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }
-//# sourceMappingURL=hy-dropdown.js.map