npm - @itcenteratunihelsinki/huds-lib - Versions diffs - 0.8.69 → 0.8.71 - Mend

@itcenteratunihelsinki/huds-lib 0.8.69 → 0.8.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/collection/components/hy-dropdown/hy-dropdown.css CHANGED Viewed

@@ -93,6 +93,12 @@
   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;
@@ -238,14 +244,6 @@
 }
 .hy-dropdown__panel-item {
-  position: relative;
-}
-.hy-dropdown__panel-item:not(.is-last) {
-  margin-bottom: 6px;
-}
-.hy-dropdown__label {
   font-size: 0.875rem;
   line-height: 24px;
   -webkit-box-align: center;
@@ -265,18 +263,48 @@
   -ms-flex-pack: justify;
   justify-content: space-between;
   letter-spacing: normal;
-  padding: 0 16px;
+  position: relative;
+  padding: 0;
   text-align: left;
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .hy-dropdown__label {
+  .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;
@@ -294,39 +322,26 @@
 }
 .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;
-  opacity: 0;
-  position: absolute;
+  padding: 0 16px;
   width: 100%;
   z-index: 10;
 }
-.hy-dropdown__checkbox:checked + label {
-  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__checkbox:checked + label .hy-dropdown__label-icon {
-  display: -webkit-inline-box !important;
-  display: -ms-inline-flexbox !important;
-  display: inline-flex !important;
-  visibility: visible;
-}
 .hy-dropdown__checkbox:hover {
   cursor: pointer;
+  border-color: var(--brand-main-active);
 }
-.hy-dropdown__checkbox:hover + label {
-  border-color: var(--brand-main-light);
-}
-.hy-dropdown__checkbox:focus + label {
+.hy-dropdown__checkbox:focus-within {
   border-color: var(--brand-main-light);
   border-style: solid inset solid solid;
   border-width: 2px;

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

@@ -7,10 +7,13 @@ export class HyDropdown {
     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);
@@ -41,59 +44,164 @@ export class HyDropdown {
       });
     }
   }
-  handlePanelToggle() {
-    this.isPanelOpen = !this.isPanelOpen;
-  }
-  handleClick(event) {
-    const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
-    const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
-    const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__checkbox");
-    const dropdownToggleButtonIconElement = this.el.querySelector(".hy-dropdown__icon");
-    const { target } = event;
-    const allowedElements = [
-      dropdownToggleButtonElement,
-      dropdownPanelElement,
-      dropdownToggleButtonIconElement,
-      ...dropdownPanelCheckboxElements, // Spread ("copy") items to allowedElement array.
-    ];
-    if (this.isPanelOpen && !allowedElements.includes(target)) {
+  panelListener(e) {
+    if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {
       this.isPanelOpen = 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);
+        }
+        return;
+      }
+      return null;
+    });
   }
-  handleSingleClick(event) {
+  handleSingleClick(event, option) {
     if (!this.single || !this.isPanelOpen)
       return;
     const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
-    const allowedElements = [...dropdownPanelCheckboxElements];
-    const { target } = event;
-    if (!allowedElements.includes(target))
-      return;
-    Array.from(dropdownPanelCheckboxElements).filter((item) => {
-      if (item.id == target.id) {
-        if (!item.checked) {
+    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;
         }
-        this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id);
+        item.setAttribute("aria-selected", "true");
+        this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id);
         return;
       }
-      if (item.id !== target.id && item.checked) {
-        item.checked = false;
+      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;
+    }
+  }
+  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) {
-      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": this.dropdownLabel, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
+      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", onClick: () => this.handlePanelToggle(), "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("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
+      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 is() { return "hy-dropdown"; }
@@ -203,6 +311,24 @@ export class HyDropdown {
         "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,
@@ -227,9 +353,74 @@ export class HyDropdown {
     return {
       "isPanelOpen": {},
       "isChecked": {},
-      "currentSingle": {}
+      "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 [{
@@ -239,16 +430,22 @@ export class HyDropdown {
   }
   static get listeners() {
     return [{
-        "name": "click",
-        "method": "handleClick",
+        "name": "dropdownPanelToggled",
+        "method": "panelListener",
         "target": "window",
         "capture": false,
         "passive": false
       }, {
-        "name": "click",
-        "method": "handleSingleClick",
+        "name": "keydown",
+        "method": "handleKeyDown",
         "target": undefined,
-        "capture": true,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handlePanelClickOutside",
+        "target": "window",
+        "capture": false,
         "passive": false
       }];
   }

package/dist/collection/components/hy-dropdown/hy-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hy-dropdown.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, h, State, Listen, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n id: string \| number;\n label: string;\n value: string \| number;\n}\n\nexport interface DefaultValue {\n id: string \| number;\n label: string;\n value: string \| number;\n}\n\n@Component({\n tag: \"hy-dropdown\",\n styleUrl: \"hy-dropdown.scss\",\n shadow: false,\n})\nexport class HyDropdown {\n private _dropdownOptions: IDropdownItem[];\n @Element() el: HTMLElement;\n @Prop() single: boolean = false;\n @Prop() dropdownLabel: string = null;\n @Prop() dropdownId: string = \"dropdownToggle\";\n @Prop() dropdownOptions: IDropdownItem[] \| string;\n @Prop() defaultLabel: string = \"All\";\n @Prop({mutable: true}) defaultOption: string \| number = null;\n @State() isPanelOpen: boolean = false;\n @State() isChecked: boolean = false;\n @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n\n async componentWillLoad() {\n this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n }\n\n componentWillUpdate() {\n const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n if (items) {\n if ([...items].some((item) => item.checked == true)) {\n this.isChecked = true;\n } else {\n this.isChecked = false;\n }\n }\n }\n\n @Watch(\"defaultOption\")\n watchPropHandler(newValue: string \| number, oldValue: string \| number) {\n if (!this.single) return;\n\n if (newValue !== oldValue) {\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == newValue) {\n item.checked = true;\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n return;\n }\n return null;\n });\n }\n }\n\n handlePanelToggle() {\n this.isPanelOpen = !this.isPanelOpen;\n }\n\n @Listen(\"click\", {target: \"window\"})\n handleClick(event) {\n const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n const dropdownToggleButtonIconElement = this.el.querySelector(\".hy-dropdown__icon\") as HTMLElement;\n\n const {target} = event;\n\n const allowedElements = [\n dropdownToggleButtonElement,\n dropdownPanelElement,\n dropdownToggleButtonIconElement,\n ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n ];\n\n if (this.isPanelOpen && !allowedElements.includes(target)) {\n this.isPanelOpen = false;\n }\n event.stopPropagation();\n }\n\n @Listen(\"click\", {capture: true})\n handleSingleClick(event) {\n if (!this.single \|\| !this.isPanelOpen) return;\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n const allowedElements = [...dropdownPanelCheckboxElements];\n const {target} = event;\n if (!allowedElements.includes(target)) return;\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == target.id) {\n if (!item.checked) {\n this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n return;\n }\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id) as any;\n return;\n }\n if (item.id !== target.id && item.checked) {\n item.checked = false;\n return;\n }\n return null;\n });\n\n event.stopPropagation();\n }\n\n render() {\n const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n\n if (this.single) {\n return (\n <Host class={classAttributes}>\n {this.dropdownLabel && (\n <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n {this.dropdownLabel}\n </label>\n )}\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen \|\| false}`}\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\n data-current-id={currentId}\n data-current-value={currentValue}\n value={currentId}\n type=\"button\"\n >\n {currentLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n } else {\n return (\n <Host class={classAttributes}>\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen \|\| false}`}\n aria-controls=\"dropdownPanel\"\n onClick={() => this.handlePanelToggle()}\n aria-label={this.dropdownLabel}\n type=\"button\"\n >\n {this.dropdownLabel && this.dropdownLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <hy-dropdown-panel checkbox-checked={this.isChecked ? \"true\" : \"false\"} is-hidden={!this.isPanelOpen}>\n {this._dropdownOptions.map(({id, label, value}, index) => (\n <hy-dropdown-panel-item\n dropdown-item-id={id}\n dropdown-item-label={label}\n dropdown-item-value={value}\n is-last={this._dropdownOptions.length - 1 === index}\n />\n ))}\n </hy-dropdown-panel>\n </Host>\n );\n }\n }\n}\n"]}
1	+ {"version":3,"file":"hy-dropdown.js","sourceRoot":"","sources":["../../../src/components/hy-dropdown/hy-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Host, Listen, Event, EventEmitter, h, State, Prop, Watch} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\nexport interface IDropdownItem {\n id: string \| number;\n label: string;\n value: string \| number;\n}\n\nexport interface DefaultValue {\n id: string \| number;\n label: string;\n value: string \| number;\n}\n\n@Component({\n tag: \"hy-dropdown\",\n styleUrl: \"hy-dropdown.scss\",\n shadow: false,\n})\nexport class HyDropdown {\n private _dropdownOptions: IDropdownItem[];\n @Element() el: HTMLElement;\n @Prop() single: boolean = false;\n @Prop() dropdownLabel: string = null;\n @Prop() dropdownId: string = \"dropdownToggle\";\n @Prop() dropdownOptions: IDropdownItem[] \| string;\n @Prop() defaultLabel: string = \"All\";\n @Prop() type: string = null;\n @Prop({mutable: true}) defaultOption: string \| number = null;\n @State() isPanelOpen: boolean = false;\n @State() isChecked: boolean = false;\n @State() currentSingle: DefaultValue[] = [{id: 0, label: this.defaultLabel, value: 0}];\n @State() currentMulti: IDropdownItem[];\n\n @State() focusedOptionIndex: number = 0;\n\n @Event({\n eventName: `dropdownPanelToggled`,\n composed: true,\n bubbles: true,\n })\n dropdownPanelToggled: EventEmitter;\n\n @Event({\n eventName: `dropdownValueChanged`,\n composed: true,\n })\n dropdropValueChange: EventEmitter;\n\n @Event({\n eventName: `dropdownMultiValueChanged`,\n composed: true,\n })\n dropdropMultiValueChange: EventEmitter;\n\n @Event({\n eventName: `dropdownKeyPress`,\n composed: true,\n })\n dropdownKeyPress: EventEmitter;\n\n async componentWillLoad() {\n this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);\n }\n\n componentWillUpdate() {\n const items = this.el.querySelectorAll(\".hy-dropdown__checkbox\") as any;\n if (items) {\n if ([...items].some((item) => item.checked == true)) {\n this.isChecked = true;\n } else {\n this.isChecked = false;\n }\n }\n }\n\n @Watch(\"defaultOption\")\n watchPropHandler(newValue: string \| number, oldValue: string \| number) {\n if (!this.single) return;\n\n if (newValue !== oldValue) {\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n\n Array.from(dropdownPanelCheckboxElements).filter((item) => {\n if (item.id == newValue) {\n item.checked = true;\n this.currentSingle = this._dropdownOptions.filter((option) => option.id == newValue) as any;\n return;\n }\n return null;\n });\n }\n }\n\n @Listen(\"dropdownPanelToggled\", {target: \"window\"})\n panelListener(e) {\n if (this.isPanelOpen && e.detail.dropdownId !== this.dropdownId) {\n this.isPanelOpen = false;\n }\n }\n\n private handleMultiClick(event, option) {\n event.stopPropagation();\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n Array.from(dropdownPanelCheckboxElements).filter((i) => {\n const item = i.closest(\"li\");\n if (item.dataset.id == option.id && !item.hasAttribute(\"aria-selected\")) {\n item.setAttribute(\"aria-selected\", \"true\");\n this.currentMulti =\n this.currentMulti && this.currentMulti.length > 0 ? [...this.currentMulti, option] : [option];\n return;\n }\n if (item.dataset.id === option.id && item.hasAttribute(\"aria-selected\")) {\n item.removeAttribute(\"aria-selected\");\n if (this.currentMulti.length > 0) {\n const index = this.currentMulti.indexOf(option);\n this.currentMulti = this.currentMulti.splice(index, 1);\n }\n return;\n }\n return null;\n });\n }\n\n private handleSingleClick(event, option) {\n if (!this.single \|\| !this.isPanelOpen) return;\n const dropdownPanelCheckboxElements = this.el.getElementsByClassName(\"hy-dropdown__checkbox\") as HTMLCollectionOf<\n HTMLInputElement\n >;\n event.stopPropagation();\n\n Array.from(dropdownPanelCheckboxElements).filter((i) => {\n const item = i.closest(\"li\");\n if (item.dataset.id == option.id) {\n if (item.hasAttribute(\"aria-selected\")) {\n item.removeAttribute(\"aria-selected\");\n this.currentSingle = [{id: null, label: this.defaultLabel, value: null}];\n return;\n }\n item.setAttribute(\"aria-selected\", \"true\");\n this.currentSingle = this._dropdownOptions.filter((o) => o.id == option.id) as any;\n return;\n }\n if (item.dataset.id !== option.id && item.hasAttribute(\"aria-selected\")) {\n item.removeAttribute(\"aria-selected\");\n return;\n }\n return null;\n });\n }\n\n @Listen(\"keydown\", {capture: false})\n handleKeyDown(event: KeyboardEvent) {\n event.stopPropagation();\n switch (event.key) {\n case \"ArrowDown\":\n event.preventDefault();\n if (!this.isPanelOpen) {\n this.handlePanelToggle(event);\n return;\n }\n this.focusedOptionIndex = (this.focusedOptionIndex + 1) % this._dropdownOptions.length;\n break;\n case \"ArrowUp\":\n this.focusedOptionIndex =\n (this.focusedOptionIndex - 1 + this._dropdownOptions.length) % this._dropdownOptions.length;\n event.preventDefault();\n break;\n case \"Enter\":\n case \" \":\n if (!this.isPanelOpen) {\n event.preventDefault();\n this.handlePanelToggle(event);\n return;\n }\n if (this.single) {\n this.handleOptionSingleClick(event, this._dropdownOptions[this.focusedOptionIndex]);\n } else {\n this.handleMultiOptionClick(event, this._dropdownOptions[this.focusedOptionIndex]);\n }\n const emitDetails = {\n id: this.dropdownId,\n type: this.type,\n data: this._dropdownOptions[this.focusedOptionIndex],\n };\n this.dropdownKeyPress.emit(emitDetails);\n event.preventDefault();\n break;\n case \"Escape\":\n case \"Tab\":\n this.isPanelOpen = false;\n break;\n default:\n break;\n }\n }\n\n private handlePanelToggle(e) {\n e.stopPropagation();\n this.isPanelOpen = !this.isPanelOpen;\n\n const emitDetails = {\n dropdownId: this.dropdownId,\n panelOpen: this.isPanelOpen,\n };\n this.dropdownPanelToggled.emit(emitDetails);\n }\n\n @Listen(\"click\", {target: \"window\"})\n handlePanelClickOutside(e) {\n e.stopPropagation();\n const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`) as HTMLButtonElement;\n const dropdownPanelElement = this.el.querySelector(\".hy-dropdown__panel\") as HTMLElement;\n const dropdownPanelCheckboxElements = this.el.querySelectorAll(\".hy-dropdown__panel-item\");\n const dropdownPanelCheckboxes = this.el.querySelectorAll(\".hy-dropdown__checkbox\");\n const dropdownToggleButtonIconElement = this.el.querySelectorAll(\".hy-dropdown__icon\");\n\n const {target} = e;\n\n const allowedElements = [\n this.el,\n dropdownToggleButtonElement,\n dropdownPanelElement,\n ...dropdownPanelCheckboxes,\n dropdownToggleButtonIconElement,\n ...dropdownPanelCheckboxElements, // Spread (\"copy\") items to allowedElement array.\n ];\n\n if (this.isPanelOpen && !allowedElements.includes(target)) {\n this.isPanelOpen = false;\n }\n }\n\n private handleOptionSingleClick(event, option) {\n event.stopPropagation();\n this.handleSingleClick(event, option);\n const emitDetails = {\n id: this.dropdownId,\n type: this.type,\n data: option,\n };\n this.dropdropValueChange.emit(emitDetails);\n }\n\n private handleMultiOptionClick(event, option) {\n event.stopPropagation();\n this.handleMultiClick(event, option);\n const emitDetails = {\n id: this.dropdownId,\n type: this.type,\n data: this.currentMulti,\n };\n this.dropdropMultiValueChange.emit(emitDetails);\n }\n\n private handleOptionHover(index) {\n this.focusedOptionIndex = index;\n }\n\n render() {\n const {label: currentLabel, id: currentId, value: currentValue} = this.currentSingle[0];\n const classAttributes = [\"hy-dropdown\", this.single ? \"hy-dropdown--single\" : \"\"].join(\" \");\n if (this.single) {\n return (\n <Host class={classAttributes}>\n {this.dropdownLabel && (\n <label class=\"hy-dropdown__button-label\" htmlFor={this.dropdownId}>\n {this.dropdownLabel}\n </label>\n )}\n <div\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen \|\| false}`}\n aria-controls=\"dropdownPanel\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n onClick={(event) => this.handlePanelToggle(event)}\n onKeyDown={(event) => this.handleKeyDown(event)}\n aria-label={this.dropdownLabel}\n data-current-id={currentId}\n data-current-value={currentValue}\n data-value={currentId}\n tabIndex={0}\n >\n <input aria-hidden=\"true\" class=\"hy-dropdown__hidden-input\" type=\"hidden\" value={currentId}></input>\n {currentLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </div>\n <ul\n checkbox-checked={this.isChecked ? \"true\" : \"false\"}\n id=\"dropdownPanel\"\n class={`hy-dropdown__panel ${!this.isPanelOpen ? \"is-hidden\" : \"\"}`}\n aria-expanded={`${!this.isPanelOpen \|\| false}`}\n role=\"listbox\"\n aria-labelledby=\"dropdownToggle\"\n >\n {this._dropdownOptions.map(({id, label, value}, index, items) => (\n <li\n key={id}\n data-id={`${id}`}\n role=\"option\"\n class={`hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? \"is-last\" : \"\"}\n ${this.focusedOptionIndex === index ? \"hy-dropdown__panel-item--focused\" : \"\"}`}\n onClick={(event) => this.handleOptionSingleClick(event, items[index])}\n onMouseEnter={() => this.handleOptionHover(index)}\n >\n <span data-id={`${id}`} class=\"hy-dropdown__checkbox\" data-value={`${value}`}>\n {label}\n <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </span>\n </li>\n ))}\n </ul>\n </Host>\n );\n } else {\n return (\n <Host class={classAttributes}>\n <button\n id={this.dropdownId}\n class={`hy-dropdown__toggle ${this.isPanelOpen ? \"is-open\" : \"\"}`}\n aria-expanded={`${this.isPanelOpen \|\| false}`}\n aria-controls=\"dropdownPanel\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n onClick={(event) => this.handlePanelToggle(event)}\n aria-label={this.dropdownLabel}\n type=\"button\"\n >\n {this.dropdownLabel && this.dropdownLabel}\n <hy-icon class=\"hy-dropdown__icon\" icon={\"hy-icon-caret-down\"} size={14} aria-hidden=\"true\" />\n </button>\n <ul\n checkbox-checked={this.isChecked ? \"true\" : \"false\"}\n id=\"dropdownPanel\"\n class={`hy-dropdown__panel ${!this.isPanelOpen ? \"is-hidden\" : \"\"}`}\n aria-expanded={`${!this.isPanelOpen \|\| false}`}\n role=\"listbox\"\n aria-labelledby=\"dropdownToggle\"\n >\n {this._dropdownOptions.map(({id, label, value}, index, items) => (\n <li\n key={id}\n data-id={`${id}`}\n role=\"option\"\n class={`hy-dropdown__panel-item ${this._dropdownOptions.length - 1 === index ? \"is-last\" : \"\"}\n ${this.focusedOptionIndex === index ? \"hy-dropdown__panel-item--focused\" : \"\"}`}\n onClick={(event) => this.handleMultiOptionClick(event, items[index])}\n onMouseEnter={() => this.handleOptionHover(index)}\n >\n <span data-id={`${id}`} class=\"hy-dropdown__checkbox\" data-value={`${value}`}>\n {label}\n <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n </span>\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n }\n}\n"]}