@itcenteratunihelsinki/huds-lib 0.8.69 → 0.8.71

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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"}

package/dist/types/components/hy-dropdown/hy-dropdown.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from "../../stencil-public-runtime";
 export interface IDropdownItem {
   id: string | number;
   label: string;
@@ -16,15 +17,28 @@ export declare class HyDropdown {
   dropdownId: string;
   dropdownOptions: IDropdownItem[] | string;
   defaultLabel: string;
+  type: string;
   defaultOption: string | number;
   isPanelOpen: boolean;
   isChecked: boolean;
   currentSingle: DefaultValue[];
+  currentMulti: IDropdownItem[];
+  focusedOptionIndex: number;
+  dropdownPanelToggled: EventEmitter;
+  dropdropValueChange: EventEmitter;
+  dropdropMultiValueChange: EventEmitter;
+  dropdownKeyPress: EventEmitter;
   componentWillLoad(): Promise<void>;
   componentWillUpdate(): void;
   watchPropHandler(newValue: string | number, oldValue: string | number): void;
-  handlePanelToggle(): void;
-  handleClick(event: any): void;
-  handleSingleClick(event: any): void;
+  panelListener(e: any): void;
+  private handleMultiClick;
+  private handleSingleClick;
+  handleKeyDown(event: KeyboardEvent): void;
+  private handlePanelToggle;
+  handlePanelClickOutside(e: any): void;
+  private handleOptionSingleClick;
+  private handleMultiOptionClick;
+  private handleOptionHover;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -278,15 +278,7 @@ export namespace Components {
         "dropdownLabel": string;
         "dropdownOptions": IDropdownItem[] | string;
         "single": boolean;
-    }
-    interface HyDropdownPanel {
-        "isHidden": boolean;
-    }
-    interface HyDropdownPanelItem {
-        "dropdownItemId": string | number;
-        "dropdownItemLabel": string;
-        "dropdownItemValue": string | number;
-        "isLast"?: boolean;
+        "type": string;
     }
     interface HyEventItem {
         "dateLong": string;
@@ -932,6 +924,10 @@ export namespace Components {
         "viewsLabel": string;
     }
 }
+export interface HyDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLHyDropdownElement;
+}
 export interface HyMenuLanguageCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLHyMenuLanguageElement;
@@ -1045,18 +1041,6 @@ declare global {
         prototype: HTMLHyDropdownElement;
         new (): HTMLHyDropdownElement;
     };
-    interface HTMLHyDropdownPanelElement extends Components.HyDropdownPanel, HTMLStencilElement {
-    }
-    var HTMLHyDropdownPanelElement: {
-        prototype: HTMLHyDropdownPanelElement;
-        new (): HTMLHyDropdownPanelElement;
-    };
-    interface HTMLHyDropdownPanelItemElement extends Components.HyDropdownPanelItem, HTMLStencilElement {
-    }
-    var HTMLHyDropdownPanelItemElement: {
-        prototype: HTMLHyDropdownPanelItemElement;
-        new (): HTMLHyDropdownPanelItemElement;
-    };
     interface HTMLHyEventItemElement extends Components.HyEventItem, HTMLStencilElement {
     }
     var HTMLHyEventItemElement: {
@@ -1482,8 +1466,6 @@ declare global {
         "hy-cta-button": HTMLHyCtaButtonElement;
         "hy-cta-link": HTMLHyCtaLinkElement;
         "hy-dropdown": HTMLHyDropdownElement;
-        "hy-dropdown-panel": HTMLHyDropdownPanelElement;
-        "hy-dropdown-panel-item": HTMLHyDropdownPanelItemElement;
         "hy-event-item": HTMLHyEventItemElement;
         "hy-events": HTMLHyEventsElement;
         "hy-filter-group": HTMLHyFilterGroupElement;
@@ -1764,16 +1746,12 @@ declare namespace LocalJSX {
         "dropdownId"?: string;
         "dropdownLabel"?: string;
         "dropdownOptions"?: IDropdownItem[] | string;
+        "onDropdownKeyPress"?: (event: HyDropdownCustomEvent<any>) => void;
+        "onDropdownMultiValueChanged"?: (event: HyDropdownCustomEvent<any>) => void;
+        "onDropdownPanelToggled"?: (event: HyDropdownCustomEvent<any>) => void;
+        "onDropdownValueChanged"?: (event: HyDropdownCustomEvent<any>) => void;
         "single"?: boolean;
-    }
-    interface HyDropdownPanel {
-        "isHidden"?: boolean;
-    }
-    interface HyDropdownPanelItem {
-        "dropdownItemId"?: string | number;
-        "dropdownItemLabel"?: string;
-        "dropdownItemValue"?: string | number;
-        "isLast"?: boolean;
+        "type"?: string;
     }
     interface HyEventItem {
         "dateLong"?: string;
@@ -2443,8 +2421,6 @@ declare namespace LocalJSX {
         "hy-cta-button": HyCtaButton;
         "hy-cta-link": HyCtaLink;
         "hy-dropdown": HyDropdown;
-        "hy-dropdown-panel": HyDropdownPanel;
-        "hy-dropdown-panel-item": HyDropdownPanelItem;
         "hy-event-item": HyEventItem;
         "hy-events": HyEvents;
         "hy-filter-group": HyFilterGroup;
@@ -2535,8 +2511,6 @@ declare module "@stencil/core" {
             "hy-cta-button": LocalJSX.HyCtaButton & JSXBase.HTMLAttributes<HTMLHyCtaButtonElement>;
             "hy-cta-link": LocalJSX.HyCtaLink & JSXBase.HTMLAttributes<HTMLHyCtaLinkElement>;
             "hy-dropdown": LocalJSX.HyDropdown & JSXBase.HTMLAttributes<HTMLHyDropdownElement>;
-            "hy-dropdown-panel": LocalJSX.HyDropdownPanel & JSXBase.HTMLAttributes<HTMLHyDropdownPanelElement>;
-            "hy-dropdown-panel-item": LocalJSX.HyDropdownPanelItem & JSXBase.HTMLAttributes<HTMLHyDropdownPanelItemElement>;
             "hy-event-item": LocalJSX.HyEventItem & JSXBase.HTMLAttributes<HTMLHyEventItemElement>;
             "hy-events": LocalJSX.HyEvents & JSXBase.HTMLAttributes<HTMLHyEventsElement>;
             "hy-filter-group": LocalJSX.HyFilterGroup & JSXBase.HTMLAttributes<HTMLHyFilterGroupElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.8.69",
+  "version": "0.8.71",
   "description": "Helsinki University Design System library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -68,5 +68,5 @@
       "pre-commit": "pretty-quick --staged"
     }
   },
-  "gitHead": "6db78439796ed46213531878763b896e9dc7c423"
+  "gitHead": "f9ad9b15fc0ece1b0806cae766d592ac793e9168"
 }

package/components/hy-dropdown-panel-item.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyDropdownPanelItem extends Components.HyDropdownPanelItem, HTMLElement {}
-export const HyDropdownPanelItem: {
-  prototype: HyDropdownPanelItem;
-  new (): HyDropdownPanelItem;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/hy-dropdown-panel-item.js

@@ -1,8 +0,0 @@
-import { H as HyDropdownPanelItem$1, d as defineCustomElement$1 } from './hy-dropdown.panel.item.js';
-
-const HyDropdownPanelItem = HyDropdownPanelItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { HyDropdownPanelItem, defineCustomElement };
-
-//# sourceMappingURL=hy-dropdown-panel-item.js.map

package/components/hy-dropdown-panel-item.js.map

@@ -1 +0,0 @@
-{"file":"hy-dropdown-panel-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/hy-dropdown-panel.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface HyDropdownPanel extends Components.HyDropdownPanel, HTMLElement {}
-export const HyDropdownPanel: {
-  prototype: HyDropdownPanel;
-  new (): HyDropdownPanel;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/hy-dropdown-panel.js

@@ -1,8 +0,0 @@
-import { H as HyDropdownPanel$1, d as defineCustomElement$1 } from './hy-dropdown.panel.js';
-
-const HyDropdownPanel = HyDropdownPanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { HyDropdownPanel, defineCustomElement };
-
-//# sourceMappingURL=hy-dropdown-panel.js.map

package/components/hy-dropdown-panel.js.map

@@ -1 +0,0 @@
-{"file":"hy-dropdown-panel.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/hy-dropdown.panel.item.js

@@ -1,43 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './icon.js';
-
-const HyDropdownPanelItem = /*@__PURE__*/ proxyCustomElement(class HyDropdownPanelItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.isLast = false;
-    this.dropdownItemId = undefined;
-    this.dropdownItemValue = undefined;
-    this.dropdownItemLabel = undefined;
-  }
-  render() {
-    return (h("li", { class: `hy-dropdown__panel-item ${this.isLast ? "is-last" : ""}` }, h("input", { type: "checkbox", class: "hy-dropdown__checkbox", id: `${this.dropdownItemId}`, value: `${this.dropdownItemValue}` }), h("label", { class: "hy-dropdown__label", htmlFor: `${this.dropdownItemId}` }, this.dropdownItemLabel, h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))));
-  }
-}, [0, "hy-dropdown-panel-item", {
-    "isLast": [4, "is-last"],
-    "dropdownItemId": [8, "dropdown-item-id"],
-    "dropdownItemValue": [8, "dropdown-item-value"],
-    "dropdownItemLabel": [1, "dropdown-item-label"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-dropdown-panel-item", "hy-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-dropdown-panel-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyDropdownPanelItem);
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { HyDropdownPanelItem as H, defineCustomElement as d };
-
-//# sourceMappingURL=hy-dropdown.panel.item.js.map

package/components/hy-dropdown.panel.item.js.map

@@ -1 +0,0 @@
-{"file":"hy-dropdown.panel.item.js","mappings":";;;MAMa,mBAAmB;;;;kBACH,KAAK;;;;;EAKhC,MAAM;IACJ,QACE,UAAI,KAAK,EAAE,2BAA2B,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE,IAClE,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,uBAAuB,EAC7B,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAC5B,KAAK,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAClC,EACF,aAAO,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,IAChE,IAAI,CAAC,iBAAiB,EACvB,eAAS,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,iBAAc,MAAM,GAAG,CACxF,CACL,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-dropdown/hy-dropdown.panel.item.tsx"],"sourcesContent":["import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-dropdown-panel-item\",\n  shadow: false,\n})\nexport class HyDropdownPanelItem {\n  @Prop() isLast?: boolean = false;\n  @Prop() dropdownItemId: string | number;\n  @Prop() dropdownItemValue: string | number;\n  @Prop() dropdownItemLabel: string;\n\n  render() {\n    return (\n      <li class={`hy-dropdown__panel-item ${this.isLast ? \"is-last\" : \"\"}`}>\n        <input\n          type=\"checkbox\"\n          class=\"hy-dropdown__checkbox\"\n          id={`${this.dropdownItemId}`}\n          value={`${this.dropdownItemValue}`}\n        />\n        <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n          {this.dropdownItemLabel}\n          <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n        </label>\n      </li>\n    );\n  }\n}\n"],"version":3}

package/components/hy-dropdown.panel.js

@@ -1,31 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const HyDropdownPanel = /*@__PURE__*/ proxyCustomElement(class HyDropdownPanel extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.isHidden = undefined;
-  }
-  render() {
-    return (h("ul", { id: "dropdownPanel", class: `hy-dropdown__panel ${this.isHidden ? "is-hidden" : ""}`, "aria-hidden": `${this.isHidden || false}`, role: "region", "aria-labelledby": "dropdownToggle" }, h("slot", null)));
-  }
-}, [4, "hy-dropdown-panel", {
-    "isHidden": [4, "is-hidden"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-dropdown-panel"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-dropdown-panel":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyDropdownPanel);
-      }
-      break;
-  } });
-}
-
-export { HyDropdownPanel as H, defineCustomElement as d };
-
-//# sourceMappingURL=hy-dropdown.panel.js.map

package/components/hy-dropdown.panel.js.map

@@ -1 +0,0 @@
-{"file":"hy-dropdown.panel.js","mappings":";;MAMa,eAAe;;;;;;EAG1B,MAAM;IACJ,QACE,UACE,EAAE,EAAC,eAAe,EAClB,KAAK,EAAE,sBAAsB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,iBAClD,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE,EACxC,IAAI,EAAC,QAAQ,qBACG,gBAAgB,IAEhC,eAAQ,CACL,EACL;GACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hy-dropdown/hy-dropdown.panel.tsx"],"sourcesContent":["import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-dropdown-panel\",\n  shadow: false,\n})\nexport class HyDropdownPanel {\n  @Prop() isHidden: boolean;\n\n  render() {\n    return (\n      <ul\n        id=\"dropdownPanel\"\n        class={`hy-dropdown__panel ${this.isHidden ? \"is-hidden\" : \"\"}`}\n        aria-hidden={`${this.isHidden || false}`}\n        role=\"region\"\n        aria-labelledby=\"dropdownToggle\"\n      >\n        <slot />\n      </ul>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/hy-dropdown_3.cjs.entry.js

@@ -1,141 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-32830401.js');
-const globalScript = require('./globalScript-9994473d.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__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{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;-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;padding:0 16px;text-align:left;width:100%}@media (min-width: 30rem){.hy-dropdown__label{font-size:1rem;line-height:24px}}.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{height:100%;margin:0;opacity:0;position:absolute;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}.hy-dropdown__checkbox:hover+label{border-color:var(--brand-main-light)}.hy-dropdown__checkbox:focus+label{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0;text-indent:-1px}";
-
-const HyDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.single = false;
-    this.dropdownLabel = null;
-    this.dropdownId = "dropdownToggle";
-    this.dropdownOptions = undefined;
-    this.defaultLabel = "All";
-    this.defaultOption = null;
-    this.isPanelOpen = false;
-    this.isChecked = false;
-    this.currentSingle = [{ id: 0, label: this.defaultLabel, value: 0 }];
-  }
-  async componentWillLoad() {
-    this._dropdownOptions = await globalScript.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 {
-        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;
-      });
-    }
-  }
-  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)) {
-      this.isPanelOpen = false;
-    }
-    event.stopPropagation();
-  }
-  handleSingleClick(event) {
-    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) {
-          this.currentSingle = [{ id: null, label: this.defaultLabel, value: null }];
-          return;
-        }
-        this.currentSingle = this._dropdownOptions.filter((option) => option.id == target.id);
-        return;
-      }
-      if (item.id !== target.id && item.checked) {
-        item.checked = false;
-        return;
-      }
-      return null;
-    });
-    event.stopPropagation();
-  }
-  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 (index.h(index.Host, { class: classAttributes }, this.dropdownLabel && (index.h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), index.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, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (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$1 }))))));
-    }
-    else {
-      return (index.h(index.Host, { class: classAttributes }, index.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, index.h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), index.h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index$1) => (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$1 }))))));
-    }
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "defaultOption": ["watchPropHandler"]
-  }; }
-};
-HyDropdown.style = hyDropdownCss;
-
-const HyDropdownPanel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.isHidden = undefined;
-  }
-  render() {
-    return (index.h("ul", { id: "dropdownPanel", class: `hy-dropdown__panel ${this.isHidden ? "is-hidden" : ""}`, "aria-hidden": `${this.isHidden || false}`, role: "region", "aria-labelledby": "dropdownToggle" }, index.h("slot", null)));
-  }
-};
-
-const HyDropdownPanelItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.isLast = false;
-    this.dropdownItemId = undefined;
-    this.dropdownItemValue = undefined;
-    this.dropdownItemLabel = undefined;
-  }
-  render() {
-    return (index.h("li", { class: `hy-dropdown__panel-item ${this.isLast ? "is-last" : ""}` }, index.h("input", { type: "checkbox", class: "hy-dropdown__checkbox", id: `${this.dropdownItemId}`, value: `${this.dropdownItemValue}` }), index.h("label", { class: "hy-dropdown__label", htmlFor: `${this.dropdownItemId}` }, this.dropdownItemLabel, index.h("hy-icon", { class: "hy-dropdown__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" }))));
-  }
-};
-
-exports.hy_dropdown = HyDropdown;
-exports.hy_dropdown_panel = HyDropdownPanel;
-exports.hy_dropdown_panel_item = HyDropdownPanelItem;
-
-//# sourceMappingURL=hy-dropdown_3.cjs.entry.js.map

package/dist/cjs/hy-dropdown_3.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"hy-dropdown.hy-dropdown-panel.hy-dropdown-panel-item.entry.cjs.js","mappings":"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","names":["jsonParserWorker","h","Host","index"],"sources":["./src/components/hy-dropdown/hy-dropdown.scss?tag=hy-dropdown","./src/components/hy-dropdown/hy-dropdown.tsx","./src/components/hy-dropdown/hy-dropdown.panel.tsx","./src/components/hy-dropdown/hy-dropdown.panel.item.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\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  position: relative;\n\n  &:not(.is-last) {\n    margin-bottom: 6px;\n  }\n}\n\n.hy-dropdown__label {\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  padding: 0 16px;\n  text-align: left;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 24px);\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  height: 100%;\n  margin: 0;\n  opacity: 0;\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n\n  &:checked {\n    & + label {\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\n  &:hover {\n    cursor: pointer;\n\n    & + label {\n      border-color: var(--brand-main-light);\n    }\n  }\n\n  &:focus {\n    & + label {\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, 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","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-dropdown-panel\",\n  shadow: false,\n})\nexport class HyDropdownPanel {\n  @Prop() isHidden: boolean;\n\n  render() {\n    return (\n      <ul\n        id=\"dropdownPanel\"\n        class={`hy-dropdown__panel ${this.isHidden ? \"is-hidden\" : \"\"}`}\n        aria-hidden={`${this.isHidden || false}`}\n        role=\"region\"\n        aria-labelledby=\"dropdownToggle\"\n      >\n        <slot />\n      </ul>\n    );\n  }\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-dropdown-panel-item\",\n  shadow: false,\n})\nexport class HyDropdownPanelItem {\n  @Prop() isLast?: boolean = false;\n  @Prop() dropdownItemId: string | number;\n  @Prop() dropdownItemValue: string | number;\n  @Prop() dropdownItemLabel: string;\n\n  render() {\n    return (\n      <li class={`hy-dropdown__panel-item ${this.isLast ? \"is-last\" : \"\"}`}>\n        <input\n          type=\"checkbox\"\n          class=\"hy-dropdown__checkbox\"\n          id={`${this.dropdownItemId}`}\n          value={`${this.dropdownItemValue}`}\n        />\n        <label class=\"hy-dropdown__label\" htmlFor={`${this.dropdownItemId}`}>\n          {this.dropdownItemLabel}\n          <hy-icon class=\"hy-dropdown__label-icon\" icon={\"hy-icon-done\"} size={14} aria-hidden=\"true\" />\n        </label>\n      </li>\n    );\n  }\n}\n"],"version":3}