@itcenteratunihelsinki/huds-lib 0.8.72 → 0.8.74

package/components/hy-dropdown.js

@@ -1,258 +1,259 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './index3.js';
 import { j as jsonParserWorker } from './globalScript.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const hyDropdownCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-dropdown{display:inline-block;min-width:100%;position:relative}@media (min-width: 30rem){.hy-dropdown{min-width:48.3%}}@media (min-width: 75.0625rem){.hy-dropdown{min-width:23.03%}}.hy-dropdown label.hy-dropdown__button-label{font-size:1rem;line-height:20px;font-weight:700;display:block;font-family:var(--main-font-family);letter-spacing:-0.32px;margin-bottom:8px}.hy-dropdown--single .hy-dropdown__panel{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:330px;min-width:100%}.hy-dropdown .hy-dropdown__hidden-input{display:none;height:0;font-size:0}.hy-dropdown__toggle{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;height:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;padding:0 0 0 16px;text-align:left;max-width:280px;width:100%}@media (min-width: 30rem){.hy-dropdown__toggle{font-size:1rem;line-height:24px;min-height:44px}}@media (min-width: 75.0625rem){.hy-dropdown__toggle{min-height:48px}}.hy-dropdown__toggle:hover{border-color:var(--brand-main-light);cursor:pointer}.hy-dropdown__toggle:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__toggle svg{pointer-events:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon{background-color:var(--brand-main-light);-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-dropdown__toggle.is-open .hy-dropdown__icon::before{display:none}.hy-dropdown__toggle.is-open .hy-dropdown__icon svg{fill:var(--grayscale-white)}.hy-dropdown__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0 0 16px;position:relative;width:40px}.hy-dropdown__icon::before{border-left:0.5px solid var(--grayscale-medium-dark);content:\"\";display:inline-block;height:65%;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 30rem){.hy-dropdown__icon{height:44px;width:44px}}@media (min-width: 75.0625rem){.hy-dropdown__icon{height:48px;width:48px}}.hy-dropdown__icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-dropdown__icon svg{height:16px;width:16px}}.hy-dropdown__panel{background-color:var(--grayscale-white);-webkit-box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);box-shadow:0 10px 20px 0 rgba(0, 49, 70, 0.2);list-style:none;margin:0;padding:6px;position:absolute;width:100%;z-index:11}.hy-dropdown__panel.is-hidden{display:none;visibility:hidden}.hy-dropdown__panel-item{font-size:0.875rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:0;border:1px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;min-height:40px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;letter-spacing:normal;position:relative;padding:0;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__panel-item{font-size:1rem;line-height:24px}}.hy-dropdown__panel-item:not(.is-last){margin-bottom:6px}.hy-dropdown__panel-item[aria-selected=true] .hy-dropdown__checkbox{border-color:var(--grayscale-black);border-style:solid inset solid solid;border-width:2px;color:var(--grayscale-black);outline:0;text-indent:-1px}.hy-dropdown__panel-item[aria-selected=true] .hy-dropdown__checkbox .hy-dropdown__label-icon{display:-webkit-inline-box !important;display:-ms-inline-flexbox !important;display:inline-flex !important;visibility:visible}.hy-dropdown__panel-item--focused{cursor:pointer;border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}.hy-dropdown__label-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none !important;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;visibility:hidden;width:40px}.hy-dropdown__checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:40px;height:100%;margin:0;padding:0 16px;width:100%;z-index:10}.hy-dropdown__checkbox:hover{cursor:pointer;border-color:var(--brand-main-active)}.hy-dropdown__checkbox:focus-within{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}";
+const HyDropdownStyle0 = hyDropdownCss;
 
-const HyDropdown$1 = /*@__PURE__*/ proxyCustomElement(class HyDropdown extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.dropdownPanelToggled = createEvent(this, "dropdownPanelToggled", 7);
-    this.dropdropValueChange = createEvent(this, "dropdownValueChanged", 7);
-    this.dropdropMultiValueChange = createEvent(this, "dropdownMultiValueChanged", 7);
-    this.dropdownKeyPress = createEvent(this, "dropdownKeyPress", 7);
-    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 {
+const HyDropdown$1 = /*@__PURE__*/ proxyCustomElement(class HyDropdown extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.dropdownPanelToggled = createEvent(this, "dropdownPanelToggled", 7);
+        this.dropdropValueChange = createEvent(this, "dropdownValueChanged", 7);
+        this.dropdropMultiValueChange = createEvent(this, "dropdownMultiValueChanged", 7);
+        this.dropdownKeyPress = createEvent(this, "dropdownKeyPress", 7);
+        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;
-      }
-    }
-  }
-  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;
-      });
+        this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
+        this.currentMulti = undefined;
+        this.focusedOptionIndex = 0;
     }
-  }
-  panelListener(e) {
-    if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {
-      this.isPanelOpen = false;
+    async componentWillLoad() {
+        this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
     }
-  }
-  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);
+    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;
+            }
         }
-        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;
+    }
+    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;
+            });
         }
-        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;
+    }
+    panelListener(e) {
+        if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {
+            this.isPanelOpen = false;
         }
-        if (this.single) {
-          this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+    }
+    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;
         }
-        else {
-          this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);
+    }
+    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: this._dropdownOptions[this.focusedOptionIndex],
+            id: this.dropdownId,
+            type: this.type,
+            data: option,
         };
-        this.dropdownKeyPress.emit(emitDetails);
-        event.preventDefault();
-        break;
-      case "Escape":
-      case "Tab":
-        this.isPanelOpen = false;
-        break;
+        this.dropdropValueChange.emit(emitDetails);
     }
-  }
-  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;
+    handleMultiOptionClick(event, option) {
+        event.stopPropagation();
+        this.handleMultiClick(event, option);
+        const emitDetails = {
+            id: this.dropdownId,
+            type: this.type,
+            data: this.currentMulti,
+        };
+        this.dropdropMultiValueChange.emit(emitDetails);
     }
-  }
-  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" }))))))));
+    handleOptionHover(index) {
+        this.focusedOptionIndex = index;
     }
-    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" : ""}
+    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" }))))))));
+        }
+        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" }))))))));
+        }
     }
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "defaultOption": ["watchPropHandler"]
-  }; }
-  static get style() { return hyDropdownCss; }
+    get el() { return this; }
+    static get watchers() { return {
+        "defaultOption": ["watchPropHandler"]
+    }; }
+    static get style() { return HyDropdownStyle0; }
 }, [0, "hy-dropdown", {
-    "single": [4],
-    "dropdownLabel": [1, "dropdown-label"],
-    "dropdownId": [1, "dropdown-id"],
-    "dropdownOptions": [1, "dropdown-options"],
-    "defaultLabel": [1, "default-label"],
-    "type": [1],
-    "defaultOption": [1032, "default-option"],
-    "isPanelOpen": [32],
-    "isChecked": [32],
-    "currentSingle": [32],
-    "currentMulti": [32],
-    "focusedOptionIndex": [32]
-  }, [[8, "dropdownPanelToggled", "panelListener"], [0, "keydown", "handleKeyDown"], [8, "click", "handlePanelClickOutside"]]]);
+        "single": [4],
+        "dropdownLabel": [1, "dropdown-label"],
+        "dropdownId": [1, "dropdown-id"],
+        "dropdownOptions": [1, "dropdown-options"],
+        "defaultLabel": [1, "default-label"],
+        "type": [1],
+        "defaultOption": [1032, "default-option"],
+        "isPanelOpen": [32],
+        "isChecked": [32],
+        "currentSingle": [32],
+        "currentMulti": [32],
+        "focusedOptionIndex": [32]
+    }, [[8, "dropdownPanelToggled", "panelListener"], [0, "keydown", "handleKeyDown"], [8, "click", "handlePanelClickOutside"]], {
+        "defaultOption": ["watchPropHandler"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-dropdown", "hy-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-dropdown":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyDropdown$1);
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-dropdown", "hy-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyDropdown$1);
+            }
+            break;
+        case "hy-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const HyDropdown = HyDropdown$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyDropdown, defineCustomElement };
-
-//# sourceMappingURL=hy-dropdown.js.map

package/components/hy-event-item.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface HyEventItem extends Components.HyEventItem, HTMLElement {}
 export const HyEventItem: {
-  prototype: HyEventItem;
-  new (): HyEventItem;
+    prototype: HyEventItem;
+    new (): HyEventItem;
 };
 /**
  * Used to define this component and all nested components recursively.