@itcenteratunihelsinki/huds-lib 0.8.68 → 0.8.70

package/dist/huds-lib/hy-dropdown.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as e,h as t,H as o,g as n}from"./index-f84f2a7d.js";import{j as a}from"./globalScript-5a4b7abf.js";const d=':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 r=class{constructor(t){i(this,t);this.dropdownPanelToggled=e(this,"dropdownPanelToggled",7);this.dropdropValueChange=e(this,"dropdownValueChanged",7);this.dropdropMultiValueChange=e(this,"dropdownMultiValueChanged",7);this.dropdownKeyPress=e(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 a(this.dropdownOptions)}componentWillUpdate(){const i=this.el.querySelectorAll(".hy-dropdown__checkbox");if(i){if([...i].some((i=>i.checked==true))){this.isChecked=true}else{this.isChecked=false}}}watchPropHandler(i,e){if(!this.single)return;if(i!==e){const e=this.el.getElementsByClassName("hy-dropdown__checkbox");Array.from(e).filter((e=>{if(e.id==i){e.checked=true;this.currentSingle=this._dropdownOptions.filter((e=>e.id==i));return}return null}))}}panelListener(i){if(this.isPanelOpen&&i.detail.dropdownId!==this.dropdownId){this.isPanelOpen=false}}handleMultiClick(i,e){i.stopPropagation();const t=this.el.getElementsByClassName("hy-dropdown__checkbox");Array.from(t).filter((i=>{const t=i.closest("li");if(t.dataset.id==e.id&&!t.hasAttribute("aria-selected")){t.setAttribute("aria-selected","true");this.currentMulti=this.currentMulti&&this.currentMulti.length>0?[...this.currentMulti,e]:[e];return}if(t.dataset.id===e.id&&t.hasAttribute("aria-selected")){t.removeAttribute("aria-selected");if(this.currentMulti.length>0){const i=this.currentMulti.indexOf(e);this.currentMulti=this.currentMulti.splice(i,1)}return}return null}))}handleSingleClick(i,e){if(!this.single||!this.isPanelOpen)return;const t=this.el.getElementsByClassName("hy-dropdown__checkbox");i.stopPropagation();Array.from(t).filter((i=>{const t=i.closest("li");if(t.dataset.id==e.id){if(t.hasAttribute("aria-selected")){t.removeAttribute("aria-selected");this.currentSingle=[{id:null,label:this.defaultLabel,value:null}];return}t.setAttribute("aria-selected","true");this.currentSingle=this._dropdownOptions.filter((i=>i.id==e.id));return}if(t.dataset.id!==e.id&&t.hasAttribute("aria-selected")){t.removeAttribute("aria-selected");return}return null}))}handleKeyDown(i){i.stopPropagation();switch(i.key){case"ArrowDown":i.preventDefault();if(!this.isPanelOpen){this.handlePanelToggle(i);return}this.focusedOptionIndex=(this.focusedOptionIndex+1)%this._dropdownOptions.length;break;case"ArrowUp":this.focusedOptionIndex=(this.focusedOptionIndex-1+this._dropdownOptions.length)%this._dropdownOptions.length;i.preventDefault();break;case"Enter":case" ":if(!this.isPanelOpen){i.preventDefault();this.handlePanelToggle(i);return}if(this.single){this.handleOptionSingleClick(i,this._dropdownOptions[this.focusedOptionIndex])}else{this.handleMultiOptionClick(i,this._dropdownOptions[this.focusedOptionIndex])}const e={id:this.dropdownId,type:this.type,data:this._dropdownOptions[this.focusedOptionIndex]};this.dropdownKeyPress.emit(e);i.preventDefault();break;case"Escape":case"Tab":this.isPanelOpen=false;break}}handlePanelToggle(i){i.stopPropagation();this.isPanelOpen=!this.isPanelOpen;const e={dropdownId:this.dropdownId,panelOpen:this.isPanelOpen};this.dropdownPanelToggled.emit(e)}handlePanelClickOutside(i){i.stopPropagation();const e=this.el.querySelector(`#${this.dropdownId}`);const t=this.el.querySelector(".hy-dropdown__panel");const o=this.el.querySelectorAll(".hy-dropdown__panel-item");const n=this.el.querySelectorAll(".hy-dropdown__checkbox");const a=this.el.querySelectorAll(".hy-dropdown__icon");const{target:d}=i;const r=[this.el,e,t,...n,a,...o];if(this.isPanelOpen&&!r.includes(d)){this.isPanelOpen=false}}handleOptionSingleClick(i,e){i.stopPropagation();this.handleSingleClick(i,e);const t={id:this.dropdownId,type:this.type,data:e};this.dropdropValueChange.emit(t)}handleMultiOptionClick(i,e){i.stopPropagation();this.handleMultiClick(i,e);const t={id:this.dropdownId,type:this.type,data:this.currentMulti};this.dropdropMultiValueChange.emit(t)}handleOptionHover(i){this.focusedOptionIndex=i}render(){const{label:i,id:e,value:n}=this.currentSingle[0];const a=["hy-dropdown",this.single?"hy-dropdown--single":""].join(" ");if(this.single){return t(o,{class:a},this.dropdownLabel&&t("label",{class:"hy-dropdown__button-label",htmlFor:this.dropdownId},this.dropdownLabel),t("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:i=>this.handlePanelToggle(i),onKeyDown:i=>this.handleKeyDown(i),"aria-label":this.dropdownLabel,"data-current-id":e,"data-current-value":n,"data-value":e,tabIndex:0},t("input",{"aria-hidden":"true",class:"hy-dropdown__hidden-input",type:"hidden",value:e}),i,t("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),t("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:i,label:e,value:o},n,a)=>t("li",{key:i,"data-id":`${i}`,role:"option",class:`hy-dropdown__panel-item ${this._dropdownOptions.length-1===n?"is-last":""}\n                  ${this.focusedOptionIndex===n?"hy-dropdown__panel-item--focused":""}`,onClick:i=>this.handleOptionSingleClick(i,a[n]),onMouseEnter:()=>this.handleOptionHover(n)},t("span",{"data-id":`${i}`,class:"hy-dropdown__checkbox","data-value":`${o}`},e,t("hy-icon",{class:"hy-dropdown__label-icon",icon:"hy-icon-done",size:14,"aria-hidden":"true"})))))))}else{return t(o,{class:a},t("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:i=>this.handlePanelToggle(i),"aria-label":this.dropdownLabel,type:"button"},this.dropdownLabel&&this.dropdownLabel,t("hy-icon",{class:"hy-dropdown__icon",icon:"hy-icon-caret-down",size:14,"aria-hidden":"true"})),t("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:i,label:e,value:o},n,a)=>t("li",{key:i,"data-id":`${i}`,role:"option",class:`hy-dropdown__panel-item ${this._dropdownOptions.length-1===n?"is-last":""}\n                  ${this.focusedOptionIndex===n?"hy-dropdown__panel-item--focused":""}`,onClick:i=>this.handleMultiOptionClick(i,a[n]),onMouseEnter:()=>this.handleOptionHover(n)},t("span",{"data-id":`${i}`,class:"hy-dropdown__checkbox","data-value":`${o}`},e,t("hy-icon",{class:"hy-dropdown__label-icon",icon:"hy-icon-done",size:14,"aria-hidden":"true"})))))))}}get el(){return n(this)}static get watchers(){return{defaultOption:["watchPropHandler"]}}};r.style=d;export{r as hy_dropdown};
+//# sourceMappingURL=hy-dropdown.entry.js.map

package/dist/huds-lib/hy-dropdown.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hyDropdownCss","HyDropdown","id","label","this","defaultLabel","value","async","_dropdownOptions","jsonParserWorker","dropdownOptions","componentWillUpdate","items","el","querySelectorAll","some","item","checked","isChecked","watchPropHandler","newValue","oldValue","single","dropdownPanelCheckboxElements","getElementsByClassName","Array","from","filter","currentSingle","option","panelListener","e","isPanelOpen","detail","dropdownId","handleMultiClick","event","stopPropagation","i","closest","dataset","hasAttribute","setAttribute","currentMulti","length","removeAttribute","index","indexOf","splice","handleSingleClick","o","handleKeyDown","key","preventDefault","handlePanelToggle","focusedOptionIndex","handleOptionSingleClick","handleMultiOptionClick","emitDetails","type","data","dropdownKeyPress","emit","panelOpen","dropdownPanelToggled","handlePanelClickOutside","dropdownToggleButtonElement","querySelector","dropdownPanelElement","dropdownPanelCheckboxes","dropdownToggleButtonIconElement","target","allowedElements","includes","dropdropValueChange","dropdropMultiValueChange","handleOptionHover","render","currentLabel","currentId","currentValue","classAttributes","join","h","Host","class","dropdownLabel","htmlFor","role","onClick","onKeyDown","tabIndex","icon","size","map","onMouseEnter"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx"],"sourcesContent":[".hy-dropdown {\n  display: inline-block;\n  min-width: 100%;\n  position: relative;\n\n  @include breakpoint($narrow) {\n    min-width: 48.3%;\n  }\n\n  @include breakpoint($extrawide) {\n    min-width: 23.03%;\n  }\n\n  label.hy-dropdown__button-label {\n    @include font-size(16px, 20px);\n    @include font-weight($bold);\n\n    display: block;\n    font-family: var(--main-font-family);\n    letter-spacing: -0.32px;\n    margin-bottom: 8px;\n  }\n\n  &--single {\n    .hy-dropdown__panel {\n      width: max-content;\n      max-width: 330px;\n      min-width: 100%;\n    }\n  }\n\n  .hy-dropdown__hidden-input {\n    display: none;\n    height: 0;\n    font-size: 0;\n  }\n}\n\n.hy-dropdown__toggle {\n  @include font-size(14px, 24px);\n  align-items: center;\n  background-color: var(--grayscale-white);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  min-height: 40px;\n  height: auto;\n  justify-content: space-between;\n  letter-spacing: normal;\n  padding: 0 0 0 16px;\n  text-align: left;\n  max-width: 280px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n    min-height: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    min-height: 48px;\n  }\n\n  &:hover {\n    border-color: var(--brand-main-light);\n    cursor: pointer;\n  }\n\n  &:focus {\n    border-color: var(--brand-main-light);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n  }\n\n  svg {\n    pointer-events: none;\n  }\n\n  &.is-open {\n    .hy-dropdown__icon {\n      background-color: var(--brand-main-light);\n      transform: rotate(180deg);\n\n      &::before {\n        display: none;\n      }\n\n      svg {\n        fill: var(--grayscale-white);\n      }\n    }\n  }\n}\n\n.hy-dropdown__icon {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  margin: 0 0 0 16px;\n  position: relative;\n  width: 40px;\n\n  &::before {\n    //border-left: 1px dashed var(--grayscale-medium-dark);\n    //Line weight 0,5 px; Line color #979797\n    border-left: 0.5px solid var(--grayscale-medium-dark);\n    content: \"\";\n    display: inline-block;\n    height: 65%;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  @include breakpoint($narrow) {\n    height: 44px;\n    width: 44px;\n  }\n\n  @include breakpoint($extrawide) {\n    height: 48px;\n    width: 48px;\n  }\n\n  svg {\n    fill: var(--link-blue);\n\n    @include breakpoint($narrow) {\n      height: 16px;\n      width: 16px;\n    }\n  }\n}\n\n.hy-dropdown__panel {\n  background-color: var(--grayscale-white);\n  box-shadow: 0 10px 20px 0 rgba(0, 49, 70, 0.2);\n  list-style: none;\n  margin: 0;\n  padding: 6px;\n  position: absolute;\n  width: 100%;\n  z-index: 11;\n\n  &.is-hidden {\n    display: none;\n    visibility: hidden;\n  }\n}\n\n.hy-dropdown__panel-item {\n  @include font-size(14px, 24px);\n  align-items: center;\n  background-color: var(--grayscale-white);\n  border-radius: 0;\n  border: 1px solid var(--grayscale-medium-dark);\n  color: var(--link-blue);\n  display: inline-flex;\n  font-family: var(--main-font-family);\n  font-weight: $semibold;\n  min-height: 40px;\n  justify-content: space-between;\n  letter-spacing: normal;\n  position: relative;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\n  }\n\n  &:not(.is-last) {\n    margin-bottom: 6px;\n  }\n\n  &[aria-selected=\"true\"] .hy-dropdown__checkbox {\n    border-color: var(--grayscale-black);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    color: var(--grayscale-black);\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n\n    .hy-dropdown__label-icon {\n      display: inline-flex !important;\n      visibility: visible;\n    }\n  }\n\n  &--focused {\n    cursor: pointer;\n    border-color: var(--brand-main-light);\n    border-style: solid inset solid solid;\n    border-width: 2px;\n    outline: 0;\n    text-indent: -1px; // Text stays in place.\n  }\n}\n\n.hy-dropdown__label-icon {\n  align-items: center;\n  display: none !important;\n  flex-shrink: 0;\n  height: 40px;\n  justify-content: center;\n  position: relative;\n  visibility: hidden;\n  width: 40px;\n}\n\n.hy-dropdown__checkbox {\n  display: flex;\n  align-items: center;\n  min-height: 40px;\n  height: 100%;\n  margin: 0;\n  padding: 0 16px;\n  width: 100%;\n  z-index: 10;\n\n  &:hover {\n    cursor: pointer;\n    border-color: var(--brand-main-active);\n  }\n\n  &:focus-within {\n    & {\n      border-color: var(--brand-main-light);\n      border-style: solid inset solid solid;\n      border-width: 2px;\n      outline: 0;\n      text-indent: -1px; // Text stays in place.\n    }\n  }\n}\n","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"],"mappings":"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"}