@nanoporetech-digital/components 7.4.4 → 7.5.0

package/dist/nano-components/nano-datalist_3.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{g as t,r as e,c as i,w as s,h as n,a as o}from"./index-815d3f98.js";import{g as a}from"./active-element-a2502948.js";import{d as r}from"./throttle-df960210.js";import{g as l}from"./dom-3db2202b.js";import{g as h}from"./slot-1cd90e53.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";const d=c;function p(t){let e;if(t.id){e=document.querySelector(`label[for='${t.id}']`)}if(!e){e=t.closest("label")}return e}let f=0;const u=class{isNanoInput=false;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId=`nano-datalist-${f++}`;isFiltered=false;shouldFocus=false;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t;if(this.connectedInput?.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=true;optionIds=[];constructor(t){e(this,t);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.inputChange=r(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=false;openWatcher(){s((()=>{this.nanoDropdown.open=this.open;if(this.connectedInput)this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=false;disabled=false;async watchInputChange(){let t;if(t=this.host.closest("nano-input")){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(typeof this.input==="object"){this.connectedInput=this.input}}manageSlotChangeListener(){if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if(this.options?.length){if(this.mo){this.mo.disconnect();this.mo=undefined}const t=this.host.querySelectorAll("nano-option");s((()=>{if(t?.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,e)=>{if(t.value||t.label){const i=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:e,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+e,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(i);return i}}));if(this.connectedInput?.value.length&&this.type!=="select"){this.inputChange()}else{this.actvOptEles=[...this.allOptEles]}}))}}watchTypeChange(){if(!this.connectedInput)return;let t={closeOnSelect:false};let e="both";let i=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":e="list";i=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig={...this.dropDownConfig,...t};this.connectedInput.setAttribute("aria-autocomplete",e);this.connectedInput.readOnly=i}manageInputEvents(t,e){if(e){const t=e.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}this.removeEventListeners(e);this.inputLabel=null;s((()=>{e.removeAttribute("role");e.removeAttribute("aria-expanded");e.removeAttribute("aria-controls");e.removeAttribute("aria-owns");e.removeAttribute("aria-haspopup");e.removeAttribute("aria-autocomplete");e.removeAttribute("autocomplete")}))}if(t){const e=t.closest("nano-input");if(e){e.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=t?.labels?.item(0)||p(t);s((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const e=this.connectedInput?.value||"";const i=[];s((()=>{this.allOptEles.forEach(((s,n)=>{if(this.actvOptEles.includes(s)){t++;s.setAttribute("aria-posinset",t+"");s.setAttribute("aria-setsize",this.actvOptEles.length+"");s.hidden=false;this.isSelected(s,e)}else{s.removeAttribute("aria-posinset");s.removeAttribute("aria-setsize");s.hidden=true;s.selected=false}s.id=this.listId+"-option-"+n;i.push(s.id)}));this.optionIds=i}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,e){if(e===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let e;if(this.selected.includes(t.value)){this.selected=this.selected.filter((e=>e!==t.value));e=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];e=this.nanoSelect.emit(t)}if(!e.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const e=new window.Event("change");this.connectedInput?.dispatchEvent(e)}}optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const e=this.allOptEles.find((e=>e.value.trim().length>0&&!e.disabled&&(t(e.textContent)||t(e.value)||t(e.label)||t(e.filterMeta))));if(e)this.changeInputValue(e)}removeEventListeners(t){const e=t.closest("nano-input");if(e){e.removeEventListener("nanoChange",this.inputChange)}t.removeEventListener("change",this.inputChange);t.removeEventListener("click",this.inputClick);t.removeEventListener("keydown",this.inputKeydown);t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll("nano-option"));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(this.connectedInput?.value.length&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};handleHide=()=>{this.open=false;const t=a();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const e=t.trim().toLowerCase();let i=false;const s=[];const n=t=>t.toLowerCase().indexOf(e)>-1;this.allOptEles.forEach((e=>{if((t===e.value||t===e.label)&&this.type!=="selctMulti"){e.selected=true;i=true}else this.isSelected(e,t)}));this.allOptEles.forEach((t=>{if(!e.length||i){s.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){s.push(t)}}));this.isFiltered=e.length&&!i;this.actvOptEles=s}inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};inputKeydown=t=>{const e=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(e.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-zA0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}if(this.open&&["ArrowDown","ArrowUp"," "].includes(t.key)){this.listBox.setFocus();return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"," "].includes(t.key)){t.preventDefault();this.shouldFocus=true}};optionKeyDown=t=>{const e=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(e.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const i=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||i.includes(t.key))){this.connectedInput.focus()}};connectedCallback(){this.watchInputChange()}componentDidLoad(){this.manageSlotChangeListener();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}if(this.connectedInput)this.removeEventListeners(this.connectedInput)}render(){return n(o,{key:"baa2ba26fd0d78f987e5f9dd6953e09aa445259a",role:this.actvOptEles.length?"listbox":undefined,"aria-owns":this.optionIds.length?this.optionIds.join(" "):undefined,"aria-label":this.optionIds.length?"Select options from the list below":undefined},n("nano-dropdown",{key:"d1679a058476205c3c7672e0d41e68646afbdfaf",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},n("nano-menu",{key:"b64364cea95b2cd1680a9ec9a27fcc52bd643e13",hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t},n("slot",{key:"16a8987423c784206b10078325b90292070ed3d0",name:"list-top"}),n("slot",{key:"f57e74fde32ebdeb227573fca2f3dae6c5d7f84e"}),n("slot",{key:"a98a93cda21af11e514f20a6f9d3a25dd64e7bd5",name:"internal-opts"}),n("slot",{key:"3ff21663e943aaf3ae4f6d1b736e8e3f0d46bd8c",name:"list-bottom"})),n("nano-menu",{key:"193f3323658860527e61ebb743d680b275dc63a7",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},n("slot",{key:"269aa07968992f8fef54ba24032caeac975b0e4a",name:"no-result"})),!!this.actvOptEles&&n("div",{key:"9b99e9f62e245858e85b6decc7e00e88551f48f1",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};u.style=d;const b=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";const g=b;const m=class{constructor(t){e(this,t);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=false;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return t(this)}get hasFocus(){return this._hasFocus}_hasFocus=false;type="menu";label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){if(this.menu?.focus)this.menu.focus({preventScroll:true})}async removeFocus(){if(this.menu?.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;const e=this.el.querySelectorAll("nano-nav-item.secondary-open");if(e.length){const i=e[e.length-1];t=Array.from(i.querySelectorAll("nano-nav-item, nano-option"))}else{t=l(this.el,"nano-nav-item, nano-option","slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=a();return this.getItems.find((e=>e.getAttribute("tabindex")==="0"||e===t||e.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,e=true){const i=this.getItems;const s=!t?i.find((t=>t.selected))||i[0]:t;i.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===s?"0":"-1")));if(!e)return;if(s){if(s.setFocus)s.setFocus();else s.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const e=t;let i;if(e.key){if(e.key!=="Tab")return;i=a()&&a().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));if(!i){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};handleClick=t=>{const e=t.target;const i=e.closest("nano-nav-item");if(i&&!i.disabled){this.nanoSelect.emit(i)}};handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const e=this.getItems;const i=this.activeItem;let s=e.indexOf(i);if(e.length){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"||t.key==="PageUp"){s=0}else if(t.key==="End"||t.key==="PageDown"){s=e.length-1}if(s<0)s=e.length-1;if(s>e.length-1)s=0;this.setActiveFocusItem(e[s]);if(e[s])e[s].scrollIntoView({block:"nearest"});return}break}}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const e=this.getItems;for(const t of e){const e=t.shadowRoot.querySelector("slot:not([name])");const i=h(e).toLowerCase().trim();if(i.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};handleMouseOver=t=>{const e=t.target;const i=e.closest("nano-nav-item")||e.closest("nano-option");if(i&&!this.ignoreMouseEvents){this.setActiveFocusItem(i)}};componentDidLoad(){{l(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return n(o,{key:"14c788bd695d9a8e93cc8117800d21f125eb3bd4",role:this.type==="menu"?"menu":"group"},n("div",{key:"a1a3158e0a9a032cbc2c65bd55594243deaeee92",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},n("slot",{key:"272f1ee23857d126cf5a846d6eb74c8b9800514b"})))}};m.style=g;const v=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const y=v;let w=0;const x=class{optId=`nano-option-${w++}`;get host(){return t(this)}hasFocus=false;constructor(t){e(this,t);this.nanoSelect=i(this,"nanoSelect",7);this.handleClick=r(this.handleClick.bind(this),5)}value="";valueChanged(){if((!this.value||!this.value.length)&&!this.label)this.value=this.labelContent}label="";labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}selected=false;disabled=false;filterMeta="";nanoSelect;handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return l(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return n(o,{key:"81da275412fb18c7e96d947c6e4612d8b4a4bfb1",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},n("div",{key:"65ec11bca28136d886a1ee24c93b0d14b2d3b296",onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},n("div",{key:"5ca7ea12d12e17177a71c441b5600c2e5d1b4cbc",part:"check-icon",class:"option__check"},n("slot",{key:"d33caab711a7b07a6d833c5f4fcca8aa1381bcd0",name:"check-icon"},n("nano-icon",{key:"65255f90b5df1858af89529b6d2df7b5a9264112",name:"light/check","aria-hidden":"true"}))),n("div",{key:"952469135adf3b50d7a9c647edd861aee0b08c9b",part:"start",class:"option__start"},n("slot",{key:"e3b2ab153d5b45de84381e1804d93de64a0bbded",name:"start"})),n("div",{key:"178a8920687128fb0fa78bf5ce7f3f551cced273",part:"label",class:"option__label"},n("slot",{key:"707a98e2da2413cd77bae52ccebb0004974ecb5e"},this.label||this.value)),n("div",{key:"66a69defe2beb8f3bd8f68ab94019520fbd9ab21",part:"end",class:"option__end"},n("slot",{key:"126ebcccc9ed46d2aea3aa6d37672570a8cae5a2",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};x.style=y;export{u as nano_datalist,m as nano_menu,x as nano_option};
+import{g as t,r as e,c as i,w as s,h as n,a as o}from"./index-3118109b.js";import{g as a}from"./active-element-a2502948.js";import{d as r}from"./throttle-df960210.js";import{g as l}from"./dom-d7f9f24c.js";import{g as h}from"./slot-1cd90e53.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";const d=c;function p(t){let e;if(t.id){e=document.querySelector(`label[for='${t.id}']`)}if(!e){e=t.closest("label")}return e}let f=0;const b=class{isNanoInput=false;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId=`nano-datalist-${f++}`;isFiltered=false;shouldFocus=false;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t;if(this.connectedInput?.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=true;optionIds=[];constructor(t){e(this,t);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.inputChange=r(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=false;openWatcher(){s((()=>{this.nanoDropdown.open=this.open;if(this.connectedInput)this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=false;disabled=false;async watchInputChange(){let t;if(t=this.host.closest("nano-input")){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(typeof this.input==="object"){this.connectedInput=this.input}}handleOptionsChange(){if(!this.host)return;l(this.host,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")));if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if(this.options?.length){if(this.mo){this.mo.disconnect();this.mo=undefined}const t=this.host.querySelectorAll("nano-option");s((()=>{if(t?.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,e)=>{if(t.value||t.label){const i=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:e,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+e,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(i);return i}}));if(this.connectedInput?.value.length&&this.type!=="select"){this.inputChange()}else{this.actvOptEles=[...this.allOptEles]}}))}}watchTypeChange(){if(!this.connectedInput)return;let t={closeOnSelect:false};let e="both";let i=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":e="list";i=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig={...this.dropDownConfig,...t};this.connectedInput.setAttribute("aria-autocomplete",e);this.connectedInput.readOnly=i}manageInputEvents(t,e){if(e){const t=e.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}this.removeEventListeners(e);this.inputLabel=null;s((()=>{e.removeAttribute("role");e.removeAttribute("aria-expanded");e.removeAttribute("aria-controls");e.removeAttribute("aria-owns");e.removeAttribute("aria-haspopup");e.removeAttribute("aria-autocomplete");e.removeAttribute("autocomplete")}))}if(t){const e=t.closest("nano-input");if(e){e.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=t?.labels?.item(0)||p(t);s((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const e=this.connectedInput?.value||"";const i=[];s((()=>{this.allOptEles.forEach(((s,n)=>{if(this.actvOptEles.includes(s)){t++;s.setAttribute("aria-posinset",t+"");s.setAttribute("aria-setsize",this.actvOptEles.length+"");s.hidden=false;this.isSelected(s,e)}else{s.removeAttribute("aria-posinset");s.removeAttribute("aria-setsize");s.hidden=true;s.selected=false}s.id=this.listId+"-option-"+n;i.push(s.id)}));this.optionIds=i}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,e){if(e===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let e;if(this.selected.includes(t.value)){this.selected=this.selected.filter((e=>e!==t.value));e=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];e=this.nanoSelect.emit(t)}if(!e.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const e=new window.Event("change");this.connectedInput?.dispatchEvent(e)}}optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const e=this.allOptEles.find((e=>e.value.trim().length>0&&!e.disabled&&(t(e.textContent)||t(e.value)||t(e.label)||t(e.filterMeta))));if(e)this.changeInputValue(e)}removeEventListeners(t){const e=t.closest("nano-input");if(e){e.removeEventListener("nanoChange",this.inputChange)}t.removeEventListener("change",this.inputChange);t.removeEventListener("click",this.inputClick);t.removeEventListener("keydown",this.inputKeydown);t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll("nano-option"));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(this.connectedInput?.value.length&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};handleHide=()=>{this.open=false;const t=a();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const e=t.trim().toLowerCase();let i=false;const s=[];const n=t=>t.toLowerCase().indexOf(e)>-1;this.allOptEles.forEach((e=>{if((t===e.value||t===e.label)&&this.type!=="selctMulti"){e.selected=true;i=true}else this.isSelected(e,t)}));this.allOptEles.forEach((t=>{if(!e.length||i){s.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){s.push(t)}}));this.isFiltered=e.length&&!i;this.actvOptEles=s}inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};inputKeydown=t=>{const e=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(e.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-zA0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}if(this.open&&["ArrowDown","ArrowUp"].includes(t.key)){this.listBox.setFocus();return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};optionKeyDown=t=>{const e=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(e.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const i=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||i.includes(t.key))){this.connectedInput.focus()}};connectedCallback(){this.watchInputChange()}componentDidLoad(){this.handleOptionsChange();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}if(this.connectedInput)this.removeEventListeners(this.connectedInput)}render(){return n(o,{key:"468c4a8057baabdb5429ff7200b127d168cafbc2",role:this.actvOptEles.length?"listbox":undefined,"aria-owns":this.optionIds.length?this.optionIds.join(" "):undefined,"aria-label":this.optionIds.length?"Select options from the list below":undefined},n("nano-dropdown",{key:"16736f4c8ca46fc4bd8cc76374f0b9adf5f8f1d3",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},n("nano-menu",{key:"d136b8dcabbcf5f122643bea5b8fb42d0a8fa973",hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t},n("slot",{key:"fe02ef6eb30a64537e70e98091070e4e39470e37",name:"list-top"}),n("slot",{key:"bf39b92e5ab2832b657fe4613c9e53c2cf9c98b9"}),n("slot",{key:"b452641ee00db203fe7c4f34ca9f124eb4dbd600",name:"internal-opts"}),n("slot",{key:"276ef711161276042262bff741111130462c97cc",name:"list-bottom"})),n("nano-menu",{key:"998a3e84c5987663bb85a25a94fbdfed54d6deb9",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},n("slot",{key:"9151e7b9b8935bbfc8bf26924cd0c0fe8e0ffcf5",name:"no-result"})),!!this.actvOptEles&&n("div",{key:"c9a63414caf5f60ee0f277f8c483b68ad93cf28c",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};b.style=d;const u=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";const g=u;const m=class{constructor(t){e(this,t);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=false;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return t(this)}get hasFocus(){return this._hasFocus}_hasFocus=false;type="menu";label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){if(this.menu?.focus)this.menu.focus({preventScroll:true})}async removeFocus(){if(this.menu?.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;const e=this.el.querySelectorAll("nano-nav-item.secondary-open");if(e.length){const i=e[e.length-1];t=Array.from(i.querySelectorAll("nano-nav-item, nano-option"))}else{t=l(this.el,"nano-nav-item, nano-option","slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=a();return this.getItems.find((e=>e.getAttribute("tabindex")==="0"||e===t||e.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,e=true){const i=this.getItems;const s=!t?i.find((t=>t.selected))||i[0]:t;i.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===s?"0":"-1")));if(!e)return;if(s){if(s.setFocus)s.setFocus();else s.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const e=t;let i;if(e.key){if(e.key!=="Tab")return;i=a()&&a().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));if(!i){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};handleClick=t=>{const e=t.target;const i=e.closest("nano-nav-item");if(i&&!i.disabled){this.nanoSelect.emit(i)}};handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const e=this.getItems;const i=this.activeItem;let s=e.indexOf(i);if(e.length){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"||t.key==="PageUp"){s=0}else if(t.key==="End"||t.key==="PageDown"){s=e.length-1}if(s<0)s=e.length-1;if(s>e.length-1)s=0;this.setActiveFocusItem(e[s]);if(e[s])e[s].scrollIntoView({block:"nearest"});return}break}}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const e=this.getItems;for(const t of e){const e=t.shadowRoot.querySelector("slot:not([name])");const i=h(e).toLowerCase().trim();if(i.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};handleMouseOver=t=>{const e=t.target;const i=e.closest("nano-nav-item")||e.closest("nano-option");if(i&&!this.ignoreMouseEvents){this.setActiveFocusItem(i)}};componentDidLoad(){{l(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return n(o,{key:"14c788bd695d9a8e93cc8117800d21f125eb3bd4",role:this.type==="menu"?"menu":"group"},n("div",{key:"a1a3158e0a9a032cbc2c65bd55594243deaeee92",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},n("slot",{key:"272f1ee23857d126cf5a846d6eb74c8b9800514b"})))}};m.style=g;const v=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const y=v;let w=0;const x=class{optId=`nano-option-${w++}`;get host(){return t(this)}hasFocus=false;constructor(t){e(this,t);this.nanoSelect=i(this,"nanoSelect",7);this.handleClick=r(this.handleClick.bind(this),5)}value="";valueChanged(){if((!this.value||!this.value.length)&&!this.label)this.value=this.labelContent}label="";labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}selected=false;disabled=false;filterMeta="";nanoSelect;handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return l(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return n(o,{key:"81da275412fb18c7e96d947c6e4612d8b4a4bfb1",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},n("div",{key:"65ec11bca28136d886a1ee24c93b0d14b2d3b296",onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},n("div",{key:"5ca7ea12d12e17177a71c441b5600c2e5d1b4cbc",part:"check-icon",class:"option__check"},n("slot",{key:"d33caab711a7b07a6d833c5f4fcca8aa1381bcd0",name:"check-icon"},n("nano-icon",{key:"65255f90b5df1858af89529b6d2df7b5a9264112",name:"light/check","aria-hidden":"true"}))),n("div",{key:"952469135adf3b50d7a9c647edd861aee0b08c9b",part:"start",class:"option__start"},n("slot",{key:"e3b2ab153d5b45de84381e1804d93de64a0bbded",name:"start"})),n("div",{key:"178a8920687128fb0fa78bf5ce7f3f551cced273",part:"label",class:"option__label"},n("slot",{key:"707a98e2da2413cd77bae52ccebb0004974ecb5e"},this.label||this.value)),n("div",{key:"66a69defe2beb8f3bd8f68ab94019520fbd9ab21",part:"end",class:"option__end"},n("slot",{key:"126ebcccc9ed46d2aea3aa6d37672570a8cae5a2",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};x.style=y;export{b as nano_datalist,m as nano_menu,x as nano_option};
 //# sourceMappingURL=nano-datalist_3.entry.js.map

package/dist/nano-components/nano-datalist_3.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["datalistCss","NanoDatalistStyle0","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","isNanoInput","typeToSelect","typeToSelectTimeout","nanoDropdown","listBox","mo","listId","isFiltered","shouldFocus","allOptEles","this","_allOptEles","opts","connectedInput","value","forEach","opt","selected","includes","changeInputValue","actvOptEles","inputLabel","hasNoResult","shouldOpen","canOpen","optionIds","constructor","hostRef","inputChange","debounce","bind","dropDownConfig","_dropDownConfig","ddc","skidding","options","input","type","activeOptions","open","openWatcher","writeTask","setAttribute","toString","disableFilter","disabled","watchInputChange","nanoInput","host","getInputElement","manageSlotChangeListener","length","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","previousOptions","querySelectorAll","internalOpt","remove","flatMap","option","i","label","Object","assign","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","removeEventListeners","removeAttribute","addEventListener","inputClick","inputKeydown","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","manageCanOpen","manageDropdownDisplay","fireActiveOptsEvent","nanoOptionsUpdated","emit","nanoSelect","nanoDeselect","dropwdownOpen","exactMatch","find","nanoSelected","filter","defaultPrevented","event","window","Event","dispatchEvent","optSelected","e","stopPropagation","detail","requestAnimationFrame","setOptStartsWith","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","handleShow","async","setFocus","showActiveElement","handleHide","activeElement","getActiveElement","tagName","select","valStr","activeEles","indexOf","ignoreKeys","key","test","clearTimeout","setTimeout","preventDefault","optionKeyDown","focus","deleteKeys","connectedCallback","componentDidLoad","componentDidRender","console","warn","disconnectedCallback","render","h","Host","role","join","ref","el","dialogTitle","class","dlist__dropdown","onNanoAfterShow","onNanoAfterHide","dlist__menu","tabIndex","onNanoSelect","onKeyDown","name","menuCss","NanoMenuStyle0","Menu","ignoreMouseEvents","ignoreMouseTimeout","menu","hasFocus","_hasFocus","nanoFocus","nanoBlur","preventScroll","removeFocus","blur","selectedItem","scrollIntoView","block","resetActiveItem","getItems","map","items","opened","ctx","getDirectChildren","activeItem","getAttribute","classList","contains","setActiveFocusItem","handleBlur","kev","found","composedPath","handleFocus","handleClick","target","handleKeyDown","click","index","shadowRoot","getTextContent","handleMouseOver","onClick","onMouseOver","onFocus","part","optionCss","NanoOptionStyle0","Option","optId","valueChanged","labelContent","labelChanged","componentWillLoad","onMouseDown"],"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to #{map.get(tokens.$colors, palegrey)};\n  */\n\n  --padding-top: #{tokens.$spacing-small};\n  --padding-bottom: #{tokens.$spacing-small};\n  --padding-start: #{tokens.$spacing-xlarge};\n  --padding-end: #{tokens.$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{map.get(tokens.$colors, palegrey)};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include mx.visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  writeTask,\n  Build,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { debounce } from '../../utils/throttle';\nimport type { NanoMenuCustomEvent } from '../../components';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../option/option-interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {\n    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control `readonly`.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      if (this.connectedInput)\n        this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest('nano-input'))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (typeof this.input === 'object') {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  manageSlotChangeListener() {\n    if (!this.host) return;\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      const previousOptions = this.host.querySelectorAll('nano-option');\n\n      // add imperative `options`\n      writeTask(() => {\n        // clear all previous\n        if (previousOptions?.length)\n          previousOptions.forEach((internalOpt) => internalOpt.remove());\n\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(document.createElement('nano-option'), {\n              label: option.label,\n              value: option.value,\n              ariaPosinset: i,\n              ariaSetsize: this.options.length,\n              selected: option.selected,\n              id: this.listId + '-option-' + i,\n              textContent: option.label ? option.label : option.value,\n              slot: 'internal-opts',\n            });\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else {\n          this.actvOptEles = [...this.allOptEles];\n        }\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  watchTypeChange() {\n    if (!this.connectedInput) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'input':\n        dwConfig = { closeOnSelect: true };\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        dwConfig = { closeOnSelect: true, placement: 'center' };\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (oldInput) {\n      const nanoInput = oldInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      this.removeEventListeners(oldInput);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (newInput) {\n      const nanoInput = newInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n    this.openWatcher();\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: NanoMenuCustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    requestAnimationFrame(() => this.inputChange());\n\n    if (this.type !== 'selctMulti') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private removeEventListeners(\n    oldInput: HTMLInputElement | HTMLTextAreaElement\n  ) {\n    const nanoInput = oldInput.closest('nano-input');\n    if (nanoInput) {\n      nanoInput.removeEventListener('nanoChange', this.inputChange);\n    }\n    oldInput.removeEventListener('change', this.inputChange);\n    oldInput.removeEventListener('click', this.inputClick);\n    oldInput.removeEventListener('keydown', this.inputKeydown);\n    oldInput.removeEventListener('input', this.inputChange);\n  }\n\n  private processSlottedContent() {\n    requestAnimationFrame(() => {\n      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    } else if (this.type === 'select') this.listBox.showActiveElement();\n  };\n\n  private handleHide = () => {\n    this.open = false;\n    const activeElement = getActiveElement();\n    if (activeElement.closest(this.host.tagName.toLowerCase())) {\n      this.connectedInput.select();\n    }\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-zA0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    if (this.open && ['ArrowDown', 'ArrowUp', ' '].includes(e.key)) {\n      this.listBox.setFocus();\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp', ' '].includes(e.key)) {\n      e.preventDefault();\n      this.shouldFocus = true;\n    }\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.manageSlotChangeListener();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  disconnectedCallback(): void {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n    if (this.connectedInput) this.removeEventListeners(this.connectedInput);\n  }\n\n  render() {\n    return (\n      <Host\n        role={this.actvOptEles.length ? 'listbox' : undefined}\n        aria-owns={this.optionIds.length ? this.optionIds.join(' ') : undefined}\n        aria-label={\n          this.optionIds.length\n            ? 'Select options from the list below'\n            : undefined\n        }\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={this.handleHide}\n          role=\"group\"\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            <slot />\n            <slot name=\"internal-opts\" />\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{tokens.$spacing-medium};\n  --padding-end: #{tokens.$spacing-medium};\n  --padding-top: #{tokens.$spacing-small};\n  --padding-bottom: #{tokens.$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get(tokens.$colors, blue--faded)};\n  --bg-color-focus: #{map.get(tokens.$colors, blue--faded)};\n  --bg-color-selected: #{map.get(tokens.$colors, blue--faded)};\n  --color-hover: #{map.get(tokens.$colors, blue)};\n  --color-selected: #{map.get(tokens.$colors, blue)};\n  --color-focus: #{map.get(tokens.$colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-inline-size: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { getDirectChildren } from '../../utils/dom';\nimport { getTextContent } from '../../utils/slot';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(this.el, 'nano-nav-item, nano-option', 'slot');\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      if ((activeItem as NNI).setFocus) (activeItem as NNI).setFocus();\n      else activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End': {\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n      }\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot: HTMLSlotElement =\n          item.shadowRoot.querySelector('slot:not([name])');\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      getDirectChildren(\n        this.el,\n        ':not(nano-nav-item):not(nano-option):not([role])',\n        true\n      ).forEach((el) => el.setAttribute('role', 'none'));\n    }\n  }\n\n  render() {\n    return (\n      <Host role={this.type === 'menu' ? 'menu' : 'group'}>\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n          role=\"group\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-bottom: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-start: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-end: Defaults to #{tokens.$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{tokens.$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{tokens.$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get(tokens.$colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{tokens.$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{tokens.nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{tokens.$input-text-color});\n  --color-selected: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{tokens.nano-color(primary, contrast)});\n  --color-disabled: #{map.get(tokens.$colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  inline-size: 100%;\n  background: var(--bg);\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      margin-inline-end: 0.5em;\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      margin-inline-start: 0.5em;\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    inset-inline-start: 0.6em;\n    inset-block-start: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from './option-interface';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if ((!this.value || !this.value.length) && !this.label)\n      this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["datalistCss","NanoDatalistStyle0","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","isNanoInput","typeToSelect","typeToSelectTimeout","nanoDropdown","listBox","mo","listId","isFiltered","shouldFocus","allOptEles","this","_allOptEles","opts","connectedInput","value","forEach","opt","selected","includes","changeInputValue","actvOptEles","inputLabel","hasNoResult","shouldOpen","canOpen","optionIds","constructor","hostRef","inputChange","debounce","bind","dropDownConfig","_dropDownConfig","ddc","skidding","options","input","type","activeOptions","open","openWatcher","writeTask","setAttribute","toString","disableFilter","disabled","watchInputChange","nanoInput","host","getInputElement","handleOptionsChange","getDirectChildren","el","length","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","previousOptions","querySelectorAll","internalOpt","remove","flatMap","option","i","label","Object","assign","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","removeEventListeners","removeAttribute","addEventListener","inputClick","inputKeydown","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","manageCanOpen","manageDropdownDisplay","fireActiveOptsEvent","nanoOptionsUpdated","emit","nanoSelect","nanoDeselect","dropwdownOpen","exactMatch","find","nanoSelected","filter","defaultPrevented","event","window","Event","dispatchEvent","optSelected","e","stopPropagation","detail","requestAnimationFrame","setOptStartsWith","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","handleShow","async","setFocus","showActiveElement","handleHide","activeElement","getActiveElement","tagName","select","valStr","activeEles","indexOf","ignoreKeys","key","test","clearTimeout","setTimeout","preventDefault","optionKeyDown","focus","deleteKeys","connectedCallback","componentDidLoad","componentDidRender","console","warn","disconnectedCallback","render","h","Host","role","join","ref","dialogTitle","class","dlist__dropdown","onNanoAfterShow","onNanoAfterHide","dlist__menu","tabIndex","onNanoSelect","onKeyDown","name","menuCss","NanoMenuStyle0","Menu","ignoreMouseEvents","ignoreMouseTimeout","menu","hasFocus","_hasFocus","nanoFocus","nanoBlur","preventScroll","removeFocus","blur","selectedItem","scrollIntoView","block","resetActiveItem","getItems","map","items","opened","ctx","activeItem","getAttribute","classList","contains","setActiveFocusItem","handleBlur","kev","found","composedPath","handleFocus","handleClick","target","handleKeyDown","click","index","shadowRoot","getTextContent","handleMouseOver","onClick","onMouseOver","onFocus","part","optionCss","NanoOptionStyle0","Option","optId","valueChanged","labelContent","labelChanged","componentWillLoad","onMouseDown"],"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{tokens.$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to #{map.get(tokens.$colors, palegrey)};\n  */\n\n  --padding-top: #{tokens.$spacing-small};\n  --padding-bottom: #{tokens.$spacing-small};\n  --padding-start: #{tokens.$spacing-xlarge};\n  --padding-end: #{tokens.$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{map.get(tokens.$colors, palegrey)};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include mx.visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  writeTask,\n  Build,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { debounce } from '../../utils/throttle';\nimport { getDirectChildren } from '../../utils/dom';\nimport type { NanoMenuCustomEvent } from '../../components';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../option/option-interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {\n    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control `readonly`.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      if (this.connectedInput)\n        this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest('nano-input'))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (typeof this.input === 'object') {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    if (!this.host) return;\n\n    getDirectChildren(\n      this.host,\n      ':not(nano-nav-item):not(nano-option):not([role])',\n      true\n    ).forEach((el) => el.setAttribute('role', 'none'));\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      const previousOptions = this.host.querySelectorAll('nano-option');\n\n      // add imperative `options`\n      writeTask(() => {\n        // clear all previous\n        if (previousOptions?.length)\n          previousOptions.forEach((internalOpt) => internalOpt.remove());\n\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(document.createElement('nano-option'), {\n              label: option.label,\n              value: option.value,\n              ariaPosinset: i,\n              ariaSetsize: this.options.length,\n              selected: option.selected,\n              id: this.listId + '-option-' + i,\n              textContent: option.label ? option.label : option.value,\n              slot: 'internal-opts',\n            });\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else {\n          this.actvOptEles = [...this.allOptEles];\n        }\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  watchTypeChange() {\n    if (!this.connectedInput) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'input':\n        dwConfig = { closeOnSelect: true };\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        dwConfig = { closeOnSelect: true, placement: 'center' };\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (oldInput) {\n      const nanoInput = oldInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      this.removeEventListeners(oldInput);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (newInput) {\n      const nanoInput = newInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n    this.openWatcher();\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: NanoMenuCustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    requestAnimationFrame(() => this.inputChange());\n\n    if (this.type !== 'selctMulti') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private removeEventListeners(\n    oldInput: HTMLInputElement | HTMLTextAreaElement\n  ) {\n    const nanoInput = oldInput.closest('nano-input');\n    if (nanoInput) {\n      nanoInput.removeEventListener('nanoChange', this.inputChange);\n    }\n    oldInput.removeEventListener('change', this.inputChange);\n    oldInput.removeEventListener('click', this.inputClick);\n    oldInput.removeEventListener('keydown', this.inputKeydown);\n    oldInput.removeEventListener('input', this.inputChange);\n  }\n\n  private processSlottedContent() {\n    requestAnimationFrame(() => {\n      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    } else if (this.type === 'select') this.listBox.showActiveElement();\n  };\n\n  private handleHide = () => {\n    this.open = false;\n    const activeElement = getActiveElement();\n    if (activeElement.closest(this.host.tagName.toLowerCase())) {\n      this.connectedInput.select();\n    }\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-zA0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    if (this.open && ['ArrowDown', 'ArrowUp'].includes(e.key)) {\n      this.listBox.setFocus();\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp'].includes(e.key)) {\n      e.preventDefault();\n      this.shouldFocus = true;\n    }\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.handleOptionsChange();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  disconnectedCallback(): void {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n    if (this.connectedInput) this.removeEventListeners(this.connectedInput);\n  }\n\n  render() {\n    return (\n      <Host\n        role={this.actvOptEles.length ? 'listbox' : undefined}\n        aria-owns={this.optionIds.length ? this.optionIds.join(' ') : undefined}\n        aria-label={\n          this.optionIds.length\n            ? 'Select options from the list below'\n            : undefined\n        }\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={this.handleHide}\n          role=\"group\"\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            <slot />\n            <slot name=\"internal-opts\" />\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get(tokens.$colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get(tokens.$colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{tokens.$spacing-medium};\n  --padding-end: #{tokens.$spacing-medium};\n  --padding-top: #{tokens.$spacing-small};\n  --padding-bottom: #{tokens.$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get(tokens.$colors, blue--faded)};\n  --bg-color-focus: #{map.get(tokens.$colors, blue--faded)};\n  --bg-color-selected: #{map.get(tokens.$colors, blue--faded)};\n  --color-hover: #{map.get(tokens.$colors, blue)};\n  --color-selected: #{map.get(tokens.$colors, blue)};\n  --color-focus: #{map.get(tokens.$colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-inline-size: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport { getDirectChildren } from '../../utils/dom';\nimport { getTextContent } from '../../utils/slot';\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(this.el, 'nano-nav-item, nano-option', 'slot');\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      if ((activeItem as NNI).setFocus) (activeItem as NNI).setFocus();\n      else activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End': {\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n      }\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot: HTMLSlotElement =\n          item.shadowRoot.querySelector('slot:not([name])');\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      getDirectChildren(\n        this.el,\n        ':not(nano-nav-item):not(nano-option):not([role])',\n        true\n      ).forEach((el) => el.setAttribute('role', 'none'));\n    }\n  }\n\n  render() {\n    return (\n      <Host role={this.type === 'menu' ? 'menu' : 'group'}>\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n          role=\"group\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --padding-top: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-bottom: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-start: Defaults to #{tokens.$spacing-small};\n   * @prop --padding-end: Defaults to #{tokens.$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{tokens.$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{tokens.$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get(tokens.$colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{tokens.$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{tokens.nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{tokens.$input-text-color});\n  --color-selected: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{tokens.nano-color(primary, contrast)});\n  --color-disabled: #{map.get(tokens.$colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  inline-size: 100%;\n  background: var(--bg);\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-top) var(--padding-bottom);\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      margin-inline-end: 0.5em;\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      margin-inline-start: 0.5em;\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    inset-inline-start: 0.6em;\n    inset-block-start: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { getDirectChildren } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\nimport type { OptionInterface } from './option-interface';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if ((!this.value || !this.value.length) && !this.label)\n      this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-date-input.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,c as t,g as i,h as n,a}from"./index-815d3f98.js";import{p as s,a as o,c as d}from"./date-utils-1e39c114.js";import{c as r}from"./theme-d553c17a.js";const l=".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (width >= 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (width >= 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const c=l;const h={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};let f=0;const p=class{constructor(i){e(this,i);this.nanoChange=t(this,"nanoChange",7);this.nanoValidate=t(this,"nanoValidate",7)}pickerEle;trigger;pickerCloseBtn;dropdown;input;pickerOpenSource;directInput=false;dateOrderIndeces={d:0,m:1,y:3};inputId=`nano-input-${f++}`;locale=window.navigator.languages||window.navigator.language||undefined;get host(){return i(this)}pattern;inputValue;get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.input)return"";return this.input.validityMessage}helperText=true;helperTextFormat={year:"numeric",month:"long",day:"numeric"};floatLabel=false;name=this.inputId;readonly=false;size;form;firstDayOfWeek;localization;disabled=false;color;autofocus=false;clearInput=false;label;placeholder;value="";handleValueChange(){if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);setTimeout((()=>{this.nanoChange.emit({value:this.value,date:s(this.value)})}),20);this.directInput=false}validateOn="submitThenDirty";showInlineError=true;dateOrder="dmy";handleDateOrderChange(){this.setDatePattern()}required=false;min;max;hideLabel=false;testDateValidity(){const e=s(this.value);let t,i,n="";if(this.value&&e){if(this.min&&(t=s(this.min))&&e<t){n="Date below the minimum: "+t.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.max&&(i=s(this.max))&&e>i){n="Date above the maximum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.isDateDisabled(e)){n="Date selected is disabled."}}requestAnimationFrame((async t=>{if(!this.input)return;const i=await this.input.getInputElement();if(this.value.length&&!e)n="Please enter a valid date";i.setCustomValidity(n);if(this.input.validateOn==="dirty"){this.input.showError(n)}}))}picker=true;initialPickerDate;pickerOpen=false;handlePickerOpenChange(){this.dropdown.open=this.pickerOpen}closeAfterPicked=true;get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(e){this._dropDownConfig={...this._dropDownConfig,...e}}_dropDownConfig={};get dateValue(){return s(this.value)}isDateDisabled=()=>false;nanoChange;nanoValidate;async reportValidity(e){const t=await this.input.reportValidity(e);if(t.isValid&&e)this.testDateValidity();return await this.input.reportValidity(e)}async setFocus(){if(this.input)this.input.setFocus()}async getInputElement(){return await this.input.getInputElement()}async showError(e){if(!this.input)return;this.input.showError(e)}onInputChange=e=>{e.stopPropagation();this.setValue(e.target.value)};onInputValidate=e=>{e.stopPropagation();this._invalid=!e.detail.isValid;this.nanoValidate.emit({isValid:e.detail.isValid,errorMessage:e.detail.errorMessage,originalEvent:e.detail.originalEvent})};onInputKey=()=>{this.directInput=true};onDatePicked=e=>{this.directInput=false;this.value=e.detail.value;if(this.closeAfterPicked)this.pickerOpen=false};onDropdownHide=()=>{setTimeout((e=>this.pickerOpen=false),200);setTimeout((e=>this.trigger.focus()),50)};onDropdownShow=()=>{setTimeout((e=>{this.pickerEle.setFocus(false,this.pickerOpenSource==="key");this.pickerOpenSource=null}),200)};onTriggerClick=()=>{if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="mouse"}};onTriggerKey=e=>{if([" ","Enter"].includes(e.key)){if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="key"}}};onCloseClick=()=>{if(this.pickerOpen)this.pickerOpen=false};onCloseKeyDown=e=>{if(e.key==="Tab"&&e.shiftKey){this.pickerEle.setFocus(true);e.preventDefault()}if(e.key===" "||e.key==="Enter"){if(this.pickerOpen)this.pickerOpen=false}};setDatePattern(){const e=[];const t=[];Array.from(this.dateOrder).map(((i,n)=>{e.push(h[i]);this.dateOrderIndeces[i]=n;t.push(i==="y"?"yyyy":i+i)}));this.pattern=e.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=t.join(" ")}formatIsoDate(e){const t=[];Array.from("ymd").map((e=>t.push(h[e])));const i=e.match(new RegExp(t.join("\\W+")));if(!i)return"";const n=[];n[this.dateOrderIndeces.d]=i[3];n[this.dateOrderIndeces.m]=i[2];n[this.dateOrderIndeces.y]=i[1];return n.join(" ")}setValue(e){const t=e.match(new RegExp(this.pattern));if(!t){this.value=e;return}let i=d(t[this.dateOrderIndeces.y+1],t[this.dateOrderIndeces.m+1],t[this.dateOrderIndeces.d+1]);if(!i){i=new Date(e);if(!i){this.value=e;return}}const n=o(i);this.value=n;return n}connectedCallback(){this.setDatePattern();this.handleValueChange()}componentDidLoad(){if(!this.pickerCloseBtn||!this.picker)return;this.pickerEle.firstFocusEle=this.pickerCloseBtn;this.dropdown.tetherTo=this.trigger;setTimeout((e=>this.handlePickerOpenChange()),300)}render(){this.locale=navigator.languages||navigator.language||undefined;this.dropDownConfig.placement=this.dropDownConfig.placement||"bottom-end";if(this.host.ownerDocument.dir==="rtl"){this.dropDownConfig.placement.replace("start","end")}if(this.trigger)this.dropDownConfig.tetherTo=this.trigger;const e=s(this.value);const t=!!this.host.querySelector('[slot="helper"]');return n(a,{key:"75a51cffff8bd7694357a735f9dd012868ea99cb",class:{...r(this.color)}},n("div",{key:"186f62ace85c595a010183f2e1ebb8236258c667",class:"date-field"},n("nano-input",{key:"289843147a7e45a6f247387de8015bb947cc07c8",class:"date-field__input",slot:"trigger",required:this.required||undefined,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:this.placeholder!=="false"?this.placeholder:undefined,pattern:this.pattern,label:this.label,disabled:this.disabled||undefined,color:this.color||undefined,autofocus:this.autofocus||undefined,clearInput:this.clearInput||undefined,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||undefined,size:this.size||undefined,readonly:this.readonly,value:this.inputValue,ref:e=>this.input=e,floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric",part:"input"},n("slot",{key:"8bc0c704702a80c275d1a5b76cb42a6d7b8b2df0",name:"start",slot:"start"}),n("slot",{key:"fdc9fda3ff3baefbb5d02effaee0c6c148945f62",name:"label",slot:"label"}),n("slot",{key:"c02edaebfdfc5d4aba3ec1e1051616916a8eac58",name:"end",slot:"end"}),this.picker&&[n("button",{key:"06f3ea71fa51bc7def435751e99e34d8fe6fd517",slot:"end",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:e=>this.trigger=e,disabled:this.disabled||this.readonly},n("nano-icon",{key:"855855dd2b470034f1f0649d551f6bde24495759",name:"light/calendar-days"})),n("nano-dropdown",{key:"295c4970f7682deab9d29655698855a058d9f792",slot:"end",onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:e=>this.dropdown=e,...this.dropDownConfig,part:"dropdown"},n("div",{key:"bbcb9f11652e7a387ceb3e9cbbc0503db7f68a2b"},n("div",{key:"7972c2723037f1d71463bc6460e430a0a6d3247e",class:"date-field__close-bar"},n("button",{key:"a7483ee7bd298e71140ce940c362d92ebbf2a0be",class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:e=>this.pickerCloseBtn=e},n("nano-icon",{key:"d5a24fc0a906030b9fc3681d3c3f82b430a34155",name:"light/xmark"}),n("span",{key:"b872af1691426cd4bc72d97ac6416943c9997595",class:"vhidden"},"Close window"))),n("nano-date-picker",{key:"478ab7f225b248cffe02a7028ab86f18fbcc6305",isDateDisabled:this.isDateDisabled,onNanoDatePicked:this.onDatePicked,min:this.min||undefined,max:this.max||undefined,"is-modal":true,ref:e=>this.pickerEle=e,localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||undefined,part:"date-picker"})))],(t||this.helperText||this.showInlineError)&&n("span",{key:"af00a354a03feda335927e3b5c09d7f8125ed28b",slot:"helper"},n("span",{key:"48c263e25633114dba5ef95acc0c0edf1cb0cc26",class:{vhidden:!!this.value.length}},n("slot",{key:"9668c0d42e23be2919f65a49d7c449500b10fa71",name:"helper"})),this.helperText&&!!e&&n("span",{key:"9dc90666e9dfe1dbd9a0281d50a1d1034c150b1c"},e.toLocaleDateString(this.locale,this.helperTextFormat)))),n("input",{key:"1759bbbfe0949d18ef576aa2c79aa4e4d7b8777e",type:"hidden",value:this.value,name:this.name})))}static get watchers(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}}};p.style=c;export{p as nano_date_input};
+import{r as e,c as t,g as i,h as n,a}from"./index-3118109b.js";import{p as s,a as o,c as d}from"./date-utils-1e39c114.js";import{c as r}from"./theme-d553c17a.js";const l=".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (width >= 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (width >= 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const c=l;const h={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};let f=0;const p=class{constructor(i){e(this,i);this.nanoChange=t(this,"nanoChange",7);this.nanoValidate=t(this,"nanoValidate",7)}pickerEle;trigger;pickerCloseBtn;dropdown;input;pickerOpenSource;directInput=false;dateOrderIndeces={d:0,m:1,y:3};inputId=`nano-input-${f++}`;locale=window.navigator.languages||window.navigator.language||undefined;get host(){return i(this)}pattern;inputValue;get invalid(){return this._invalid}_invalid=false;get validityMessage(){if(!this.input)return"";return this.input.validityMessage}helperText=true;helperTextFormat={year:"numeric",month:"long",day:"numeric"};floatLabel=false;name=this.inputId;readonly=false;size;form;firstDayOfWeek;localization;disabled=false;color;autofocus=false;clearInput=false;label;placeholder;value="";handleValueChange(){if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);setTimeout((()=>{this.nanoChange.emit({value:this.value,date:s(this.value)})}),20);this.directInput=false}validateOn="submitThenDirty";showInlineError=true;dateOrder="dmy";handleDateOrderChange(){this.setDatePattern()}required=false;min;max;hideLabel=false;testDateValidity(){const e=s(this.value);let t,i,n="";if(this.value&&e){if(this.min&&(t=s(this.min))&&e<t){n="Date below the minimum: "+t.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.max&&(i=s(this.max))&&e>i){n="Date above the maximum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}if(this.isDateDisabled(e)){n="Date selected is disabled."}}requestAnimationFrame((async t=>{if(!this.input)return;const i=await this.input.getInputElement();if(this.value.length&&!e)n="Please enter a valid date";i.setCustomValidity(n);if(this.input.validateOn==="dirty"){this.input.showError(n)}}))}picker=true;initialPickerDate;pickerOpen=false;handlePickerOpenChange(){this.dropdown.open=this.pickerOpen}closeAfterPicked=true;get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(e){this._dropDownConfig={...this._dropDownConfig,...e}}_dropDownConfig={};get dateValue(){return s(this.value)}isDateDisabled=()=>false;nanoChange;nanoValidate;async reportValidity(e){const t=await this.input.reportValidity(e);if(t.isValid&&e)this.testDateValidity();return await this.input.reportValidity(e)}async setFocus(){if(this.input)this.input.setFocus()}async getInputElement(){return await this.input.getInputElement()}async showError(e){if(!this.input)return;this.input.showError(e)}onInputChange=e=>{e.stopPropagation();this.setValue(e.target.value)};onInputValidate=e=>{e.stopPropagation();this._invalid=!e.detail.isValid;this.nanoValidate.emit({isValid:e.detail.isValid,errorMessage:e.detail.errorMessage,originalEvent:e.detail.originalEvent})};onInputKey=()=>{this.directInput=true};onDatePicked=e=>{this.directInput=false;this.value=e.detail.value;if(this.closeAfterPicked)this.pickerOpen=false};onDropdownHide=()=>{setTimeout((e=>this.pickerOpen=false),200);setTimeout((e=>this.trigger.focus()),50)};onDropdownShow=()=>{setTimeout((e=>{this.pickerEle.setFocus(false,this.pickerOpenSource==="key");this.pickerOpenSource=null}),200)};onTriggerClick=()=>{if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="mouse"}};onTriggerKey=e=>{if([" ","Enter"].includes(e.key)){if(!this.pickerOpen){this.pickerOpen=true;this.pickerOpenSource="key"}}};onCloseClick=()=>{if(this.pickerOpen)this.pickerOpen=false};onCloseKeyDown=e=>{if(e.key==="Tab"&&e.shiftKey){this.pickerEle.setFocus(true);e.preventDefault()}if(e.key===" "||e.key==="Enter"){if(this.pickerOpen)this.pickerOpen=false}};setDatePattern(){const e=[];const t=[];Array.from(this.dateOrder).map(((i,n)=>{e.push(h[i]);this.dateOrderIndeces[i]=n;t.push(i==="y"?"yyyy":i+i)}));this.pattern=e.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=t.join(" ")}formatIsoDate(e){const t=[];Array.from("ymd").map((e=>t.push(h[e])));const i=e.match(new RegExp(t.join("\\W+")));if(!i)return"";const n=[];n[this.dateOrderIndeces.d]=i[3];n[this.dateOrderIndeces.m]=i[2];n[this.dateOrderIndeces.y]=i[1];return n.join(" ")}setValue(e){const t=e.match(new RegExp(this.pattern));if(!t){this.value=e;return}let i=d(t[this.dateOrderIndeces.y+1],t[this.dateOrderIndeces.m+1],t[this.dateOrderIndeces.d+1]);if(!i){i=new Date(e);if(!i){this.value=e;return}}const n=o(i);this.value=n;return n}connectedCallback(){this.setDatePattern();this.handleValueChange()}componentDidLoad(){if(!this.pickerCloseBtn||!this.picker)return;this.pickerEle.firstFocusEle=this.pickerCloseBtn;this.dropdown.tetherTo=this.trigger;setTimeout((e=>this.handlePickerOpenChange()),300)}render(){this.locale=navigator.languages||navigator.language||undefined;this.dropDownConfig.placement=this.dropDownConfig.placement||"bottom-end";if(this.host.ownerDocument.dir==="rtl"){this.dropDownConfig.placement.replace("start","end")}if(this.trigger)this.dropDownConfig.tetherTo=this.trigger;const e=s(this.value);const t=!!this.host.querySelector('[slot="helper"]');return n(a,{key:"75a51cffff8bd7694357a735f9dd012868ea99cb",class:{...r(this.color)}},n("div",{key:"186f62ace85c595a010183f2e1ebb8236258c667",class:"date-field"},n("nano-input",{key:"289843147a7e45a6f247387de8015bb947cc07c8",class:"date-field__input",slot:"trigger",required:this.required||undefined,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:this.placeholder!=="false"?this.placeholder:undefined,pattern:this.pattern,label:this.label,disabled:this.disabled||undefined,color:this.color||undefined,autofocus:this.autofocus||undefined,clearInput:this.clearInput||undefined,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||undefined,size:this.size||undefined,readonly:this.readonly,value:this.inputValue,ref:e=>this.input=e,floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric",part:"input"},n("slot",{key:"8bc0c704702a80c275d1a5b76cb42a6d7b8b2df0",name:"start",slot:"start"}),n("slot",{key:"fdc9fda3ff3baefbb5d02effaee0c6c148945f62",name:"label",slot:"label"}),n("slot",{key:"c02edaebfdfc5d4aba3ec1e1051616916a8eac58",name:"end",slot:"end"}),this.picker&&[n("button",{key:"06f3ea71fa51bc7def435751e99e34d8fe6fd517",slot:"end",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:e=>this.trigger=e,disabled:this.disabled||this.readonly},n("nano-icon",{key:"855855dd2b470034f1f0649d551f6bde24495759",name:"light/calendar-days"})),n("nano-dropdown",{key:"295c4970f7682deab9d29655698855a058d9f792",slot:"end",onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:e=>this.dropdown=e,...this.dropDownConfig,part:"dropdown"},n("div",{key:"bbcb9f11652e7a387ceb3e9cbbc0503db7f68a2b"},n("div",{key:"7972c2723037f1d71463bc6460e430a0a6d3247e",class:"date-field__close-bar"},n("button",{key:"a7483ee7bd298e71140ce940c362d92ebbf2a0be",class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:e=>this.pickerCloseBtn=e},n("nano-icon",{key:"d5a24fc0a906030b9fc3681d3c3f82b430a34155",name:"light/xmark"}),n("span",{key:"b872af1691426cd4bc72d97ac6416943c9997595",class:"vhidden"},"Close window"))),n("nano-date-picker",{key:"478ab7f225b248cffe02a7028ab86f18fbcc6305",isDateDisabled:this.isDateDisabled,onNanoDatePicked:this.onDatePicked,min:this.min||undefined,max:this.max||undefined,"is-modal":true,ref:e=>this.pickerEle=e,localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||undefined,part:"date-picker"})))],(t||this.helperText||this.showInlineError)&&n("span",{key:"af00a354a03feda335927e3b5c09d7f8125ed28b",slot:"helper"},n("span",{key:"48c263e25633114dba5ef95acc0c0edf1cb0cc26",class:{vhidden:!!this.value.length}},n("slot",{key:"9668c0d42e23be2919f65a49d7c449500b10fa71",name:"helper"})),this.helperText&&!!e&&n("span",{key:"9dc90666e9dfe1dbd9a0281d50a1d1034c150b1c"},e.toLocaleDateString(this.locale,this.helperTextFormat)))),n("input",{key:"1759bbbfe0949d18ef576aa2c79aa4e4d7b8777e",type:"hidden",value:this.value,name:this.name})))}static get watchers(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}}};p.style=c;export{p as nano_date_input};
 //# sourceMappingURL=nano-date-input.entry.js.map

package/dist/nano-components/nano-date-picker.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{h as e,r as t,c as a,g as s,a as i}from"./index-815d3f98.js";import{i as o,g as n,b as d,D as c,p as l,d as r,s as h,e as u,f as b,h as f,j as _,k as p,l as y,a as v}from"./date-utils-1e39c114.js";import{f as g}from"./focus-visible-e5f02c46.js";import{c as m}from"./theme-d553c17a.js";const k={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};const x=k;const D=({focusedDay:t,today:a,day:s,onDaySelect:i,onKeyboardNavigation:n,focusedDayRef:d,inRange:c,disabled:l,isSelected:r})=>{const h=o(s,a);const u=o(s,t);const b=s.getMonth()!==t.getMonth()||l;const f=!c;function _(e){i(e,s)}return e("button",{class:{"duet-date__day":true,"is-outside":f,"is-disabled":b,"is-today":h},tabIndex:u?0:-1,onClick:_,onKeyDown:n,disabled:f,type:"button","aria-pressed":r?"true":"false",ref:e=>{if(u&&e&&d){d(e)}}},e("span",{"aria-hidden":"true"},s.getDate()),e("span",{class:"duet-date__vhidden"},s.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function w(e,t){const a=[];for(let s=0;s<e.length;s+=t){a.push(e.slice(s,s+t))}return a}function z(e,t,a){return e.map(((s,i)=>{const o=(i+t)%e.length;return a(e[o])}))}const S=({selectedDate:t,focusedDate:a,labelledById:s,localization:i,firstDayOfWeek:c,min:l,max:r,onDateSelect:h,onKeyboardNavigation:u,focusedDayRef:b,onMouseDown:f,onFocusIn:_,isDateDisabled:p})=>{const y=new Date;const v=n(a,c);return e("table",{class:"duet-date__table",role:"grid","aria-labelledby":s,onFocusin:_,onMouseDown:f},e("thead",null,e("tr",null,z(i.dayNames,c,(t=>e("th",{class:"duet-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"duet-date__vhidden"},t)))))),e("tbody",null,w(v,7).map((s=>e("tr",{class:"duet-date__row"},s.map((s=>e("td",{class:"duet-date__cell",role:"gridcell","aria-selected":o(s,t)?"true":undefined},e(D,{day:s,today:y,focusedDay:a,inRange:d(s,l,r),onDaySelect:h,onKeyboardNavigation:u,focusedDayRef:b,disabled:p(s),isSelected:o(s,t)})))))))))};const M=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';const F=M;function N(e,t){const a=[];for(let s=e;s<=t;s++){a.push(s)}return a}let T=0;const C=class{constructor(e){t(this,e);this.nanoDatePicked=a(this,"nanoDatePicked",7)}dateId=`nano-datepicker-${T++}`;monthSelectId=this.dateId+"-"+"month";yearSelectId=this.dateId+"-"+"year";dialogLabelId=this.dateId+"-"+"dialog";firstFocusableElement;monthSelectNode;yearSelectNode;focusedDayNode;focusTimeoutId;initialTouchX=null;initialTouchY=null;get host(){return s(this)}activeFocus=false;focusedDay=new Date;selectedDate="";min="";max="";firstDayOfWeek=c.Monday;localization=x;color;isDateDisabled=()=>false;isModal=false;firstFocusEle;nanoDatePicked;async setFocus(e=false,t=false){this.setFocusedDay(l(this.selectedDate)||new Date);if(e){setTimeout((e=>this.focusedDayNode.focus()),20);return}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((()=>{if(t)g.force(this.monthSelectNode);this.monthSelectNode.focus()}),20)}handleSelectedDateChange(){this.setFocus(true)}enableActiveFocus=()=>{this.activeFocus=true};disableActiveFocus=()=>{this.activeFocus=false};addDays(e){this.setFocusedDay(r(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=b(f(this.focusedDay),e);const a=_(t);const s=b(this.focusedDay,e);this.setFocusedDay(p(s,t,a))}setYear(e){const t=y(f(this.focusedDay),e);const a=_(t);const s=y(this.focusedDay,e);this.setFocusedDay(p(s,t,a))}setFocusedDay(e){this.focusedDay=p(e,l(this.min),l(this.max))}handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};handleTouchMove=e=>{e.preventDefault()};handleTouchEnd=e=>{const t=e.changedTouches[0];const a=t.pageX-this.initialTouchX;const s=t.pageY-this.initialTouchY;const i=70;const o=Math.abs(a)>=i&&Math.abs(s)<=i;if(o){this.addMonths(a<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};handleKeyboardNavigation=e=>{if(e.key==="Tab"&&!e.shiftKey&&this.isModal){e.preventDefault();const t=this.firstFocusEle||this.firstFocusableElement;t.focus();return}let t=true;switch(e.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case"PageDown":if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:t=false}if(t){e.preventDefault();this.enableActiveFocus()}};handleDaySelect=(e,t)=>{const a=!this.isDateDisabled(t);const s=d(t,l(this.min),l(this.max));if(!s||!a){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t)}else{this.setFocusedDay(t)}};handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))};handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))};setValue(e){this.selectedDate=v(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})}processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus){setTimeout((()=>e.focus()),0)}};connectedCallback(){if(this.yearSelectNode)g.observe(this.yearSelectNode);if(this.monthSelectNode)g.observe(this.monthSelectNode)}componentWillLoad(){this.handleSelectedDateChange()}componentDidLoad(){this.connectedCallback()}disconnectedCallback(){g.unobserve(this.yearSelectNode);g.unobserve(this.monthSelectNode)}render(){const t=l(this.selectedDate);const a=(t||this.focusedDay).getFullYear();const s=this.focusedDay.getMonth();const o=this.focusedDay.getFullYear();const n=l(this.min);const c=l(this.max);const r=n!=null&&n.getMonth()===s&&n.getFullYear()===o;const h=c!=null&&c.getMonth()===s&&c.getFullYear()===o;let u=a-10;let b=a+10;if(n)u=n.getFullYear();if(c)b=c.getFullYear();return e(i,{key:"ce15b442e826c9b4857e6edb38f60ef3afe61a92",class:{...m(this.color)}},e("div",{key:"fc05eab7b0885719f65c38d6f75575f69e76386c",class:"duet-date"},e("div",{key:"6caac24cff8adc3b2099f92b3cba63cfb08a279c",class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{key:"16ac7a9237e872b16fcf6a119f7d9d33cceb6db4",class:"duet-date__dialog-content"},e("div",{key:"2dc8671bf3bfd1142afc07dee3a3c1938c5fb2ef",class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{key:"0ab06f5c903d2d2a1b89591ae619e86e698af904",class:"duet-date__header",onFocusin:this.disableActiveFocus},e("div",{key:"23f53dc59c17789d0536329dd89e01dd05e33a5c"},e("h2",{key:"59ff3f0f4a004c232f47741fc47d3ced11b1ed0e",id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[s]," ",this.focusedDay.getFullYear()),e("label",{key:"8bd9d43f70b162b0e0c18fb2c80aef74fd0538b3",htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),e("div",{key:"050f1b788e135a5d039b9ef8bb9f3c7c3fb26ef1",class:"duet-date__select"},e("select",{key:"4917c18110da5dfa9732c93b92bc21d52d31d8b9",id:this.monthSelectId,class:"duet-date__select--month",ref:e=>this.firstFocusableElement=this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((t,a)=>e("option",{key:t,value:a,selected:a===s,disabled:!d(new Date(o,a,1),n?f(n):null,c?_(c):null)},t)))),e("div",{key:"0d4ae83734c601e1b7e7aab05dc338e2143d006e",class:"duet-date__select-label","aria-hidden":"true"},e("span",{key:"8b63a0b43277f4ae8a47296c7900532a470038f2"},this.localization.monthNamesShort[s]),e("nano-icon",{key:"03a87211ceeb5ed341f30d1ca4280e45c523f23e",name:"light/chevron-down"}))),e("label",{key:"6e3558a5eca3ff22cd34386835026b60e84a5f62",htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),e("div",{key:"7b26df791b9b0d8569bb46dae82ae8dff565f007",class:"duet-date__select"},e("select",{key:"0fe15c9f98f95e3002fbd3e20a08c08493dfb8fc",id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:e=>this.yearSelectNode=e},N(u,b).map((t=>e("option",{key:t,selected:t===o},t)))),e("div",{key:"18c4d1461db645b541d713859b804cf572543b10",class:"duet-date__select-label","aria-hidden":"true"},e("span",{key:"a1ab8275aa3f042ae63b7e3deb156a4ca4164bf0"},this.focusedDay.getFullYear()),e("nano-icon",{key:"cbf1cbd255287c03c1488b03a354846bf5d21f51",name:"light/chevron-down"})))),e("div",{key:"6a5220e5cd0f8c38f613e4211463e2adafb81d57",class:"duet-date__nav"},e("button",{key:"59f20fa24939df05a746fab1e0f122656a8f22a3",class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:r,type:"button"},e("nano-icon",{key:"0dc03af75cc61f12d15c2b33cc176f1d7c9f7428",name:"light/chevron-left"}),e("span",{key:"041f653c9c9c6ddda1bfbf9ca713f1fb978ab387",class:"duet-date__vhidden"},this.localization.prevMonthLabel)),e("button",{key:"0e5e15bf3648612c8df0d25c8d2eb8a66c2acba1",class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},e("nano-icon",{key:"b7be1f142a318fbca29bbaa99f8926f5a4af789f",name:"light/chevron-right"}),e("span",{key:"f96c71e9a92ee19c90ac6c244220c0ae1e0769e3",class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),e("div",{key:"82c4e92386f93a765db8504d374529c06e321898"},e(S,{key:"6cebbdb7ac3024bac0c01fd75098b23eb3ee1696",selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:n,max:c,isDateDisabled:this.isDateDisabled}))))))}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};C.style=F;export{C as nano_date_picker};
+import{h as e,r as t,c as a,g as s,a as i}from"./index-3118109b.js";import{i as o,g as n,b as d,D as c,p as l,d as r,s as h,e as u,f as b,h as f,j as _,k as p,l as y,a as v}from"./date-utils-1e39c114.js";import{f as g}from"./focus-visible-e5f02c46.js";import{c as m}from"./theme-d553c17a.js";const k={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};const x=k;const D=({focusedDay:t,today:a,day:s,onDaySelect:i,onKeyboardNavigation:n,focusedDayRef:d,inRange:c,disabled:l,isSelected:r})=>{const h=o(s,a);const u=o(s,t);const b=s.getMonth()!==t.getMonth()||l;const f=!c;function _(e){i(e,s)}return e("button",{class:{"duet-date__day":true,"is-outside":f,"is-disabled":b,"is-today":h},tabIndex:u?0:-1,onClick:_,onKeyDown:n,disabled:f,type:"button","aria-pressed":r?"true":"false",ref:e=>{if(u&&e&&d){d(e)}}},e("span",{"aria-hidden":"true"},s.getDate()),e("span",{class:"duet-date__vhidden"},s.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function w(e,t){const a=[];for(let s=0;s<e.length;s+=t){a.push(e.slice(s,s+t))}return a}function z(e,t,a){return e.map(((s,i)=>{const o=(i+t)%e.length;return a(e[o])}))}const S=({selectedDate:t,focusedDate:a,labelledById:s,localization:i,firstDayOfWeek:c,min:l,max:r,onDateSelect:h,onKeyboardNavigation:u,focusedDayRef:b,onMouseDown:f,onFocusIn:_,isDateDisabled:p})=>{const y=new Date;const v=n(a,c);return e("table",{class:"duet-date__table",role:"grid","aria-labelledby":s,onFocusin:_,onMouseDown:f},e("thead",null,e("tr",null,z(i.dayNames,c,(t=>e("th",{class:"duet-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"duet-date__vhidden"},t)))))),e("tbody",null,w(v,7).map((s=>e("tr",{class:"duet-date__row"},s.map((s=>e("td",{class:"duet-date__cell",role:"gridcell","aria-selected":o(s,t)?"true":undefined},e(D,{day:s,today:y,focusedDay:a,inRange:d(s,l,r),onDaySelect:h,onKeyboardNavigation:u,focusedDayRef:b,disabled:p(s),isSelected:o(s,t)})))))))))};const M=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';const F=M;function N(e,t){const a=[];for(let s=e;s<=t;s++){a.push(s)}return a}let T=0;const C=class{constructor(e){t(this,e);this.nanoDatePicked=a(this,"nanoDatePicked",7)}dateId=`nano-datepicker-${T++}`;monthSelectId=this.dateId+"-"+"month";yearSelectId=this.dateId+"-"+"year";dialogLabelId=this.dateId+"-"+"dialog";firstFocusableElement;monthSelectNode;yearSelectNode;focusedDayNode;focusTimeoutId;initialTouchX=null;initialTouchY=null;get host(){return s(this)}activeFocus=false;focusedDay=new Date;selectedDate="";min="";max="";firstDayOfWeek=c.Monday;localization=x;color;isDateDisabled=()=>false;isModal=false;firstFocusEle;nanoDatePicked;async setFocus(e=false,t=false){this.setFocusedDay(l(this.selectedDate)||new Date);if(e){setTimeout((e=>this.focusedDayNode.focus()),20);return}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((()=>{if(t)g.force(this.monthSelectNode);this.monthSelectNode.focus()}),20)}handleSelectedDateChange(){this.setFocus(true)}enableActiveFocus=()=>{this.activeFocus=true};disableActiveFocus=()=>{this.activeFocus=false};addDays(e){this.setFocusedDay(r(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=b(f(this.focusedDay),e);const a=_(t);const s=b(this.focusedDay,e);this.setFocusedDay(p(s,t,a))}setYear(e){const t=y(f(this.focusedDay),e);const a=_(t);const s=y(this.focusedDay,e);this.setFocusedDay(p(s,t,a))}setFocusedDay(e){this.focusedDay=p(e,l(this.min),l(this.max))}handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};handleTouchMove=e=>{e.preventDefault()};handleTouchEnd=e=>{const t=e.changedTouches[0];const a=t.pageX-this.initialTouchX;const s=t.pageY-this.initialTouchY;const i=70;const o=Math.abs(a)>=i&&Math.abs(s)<=i;if(o){this.addMonths(a<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};handleKeyboardNavigation=e=>{if(e.key==="Tab"&&!e.shiftKey&&this.isModal){e.preventDefault();const t=this.firstFocusEle||this.firstFocusableElement;t.focus();return}let t=true;switch(e.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case"PageDown":if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:t=false}if(t){e.preventDefault();this.enableActiveFocus()}};handleDaySelect=(e,t)=>{const a=!this.isDateDisabled(t);const s=d(t,l(this.min),l(this.max));if(!s||!a){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t)}else{this.setFocusedDay(t)}};handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))};handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))};setValue(e){this.selectedDate=v(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})}processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus){setTimeout((()=>e.focus()),0)}};connectedCallback(){if(this.yearSelectNode)g.observe(this.yearSelectNode);if(this.monthSelectNode)g.observe(this.monthSelectNode)}componentWillLoad(){this.handleSelectedDateChange()}componentDidLoad(){this.connectedCallback()}disconnectedCallback(){g.unobserve(this.yearSelectNode);g.unobserve(this.monthSelectNode)}render(){const t=l(this.selectedDate);const a=(t||this.focusedDay).getFullYear();const s=this.focusedDay.getMonth();const o=this.focusedDay.getFullYear();const n=l(this.min);const c=l(this.max);const r=n!=null&&n.getMonth()===s&&n.getFullYear()===o;const h=c!=null&&c.getMonth()===s&&c.getFullYear()===o;let u=a-10;let b=a+10;if(n)u=n.getFullYear();if(c)b=c.getFullYear();return e(i,{key:"ce15b442e826c9b4857e6edb38f60ef3afe61a92",class:{...m(this.color)}},e("div",{key:"fc05eab7b0885719f65c38d6f75575f69e76386c",class:"duet-date"},e("div",{key:"6caac24cff8adc3b2099f92b3cba63cfb08a279c",class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{key:"16ac7a9237e872b16fcf6a119f7d9d33cceb6db4",class:"duet-date__dialog-content"},e("div",{key:"2dc8671bf3bfd1142afc07dee3a3c1938c5fb2ef",class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{key:"0ab06f5c903d2d2a1b89591ae619e86e698af904",class:"duet-date__header",onFocusin:this.disableActiveFocus},e("div",{key:"23f53dc59c17789d0536329dd89e01dd05e33a5c"},e("h2",{key:"59ff3f0f4a004c232f47741fc47d3ced11b1ed0e",id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[s]," ",this.focusedDay.getFullYear()),e("label",{key:"8bd9d43f70b162b0e0c18fb2c80aef74fd0538b3",htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),e("div",{key:"050f1b788e135a5d039b9ef8bb9f3c7c3fb26ef1",class:"duet-date__select"},e("select",{key:"4917c18110da5dfa9732c93b92bc21d52d31d8b9",id:this.monthSelectId,class:"duet-date__select--month",ref:e=>this.firstFocusableElement=this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((t,a)=>e("option",{key:t,value:a,selected:a===s,disabled:!d(new Date(o,a,1),n?f(n):null,c?_(c):null)},t)))),e("div",{key:"0d4ae83734c601e1b7e7aab05dc338e2143d006e",class:"duet-date__select-label","aria-hidden":"true"},e("span",{key:"8b63a0b43277f4ae8a47296c7900532a470038f2"},this.localization.monthNamesShort[s]),e("nano-icon",{key:"03a87211ceeb5ed341f30d1ca4280e45c523f23e",name:"light/chevron-down"}))),e("label",{key:"6e3558a5eca3ff22cd34386835026b60e84a5f62",htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),e("div",{key:"7b26df791b9b0d8569bb46dae82ae8dff565f007",class:"duet-date__select"},e("select",{key:"0fe15c9f98f95e3002fbd3e20a08c08493dfb8fc",id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:e=>this.yearSelectNode=e},N(u,b).map((t=>e("option",{key:t,selected:t===o},t)))),e("div",{key:"18c4d1461db645b541d713859b804cf572543b10",class:"duet-date__select-label","aria-hidden":"true"},e("span",{key:"a1ab8275aa3f042ae63b7e3deb156a4ca4164bf0"},this.focusedDay.getFullYear()),e("nano-icon",{key:"cbf1cbd255287c03c1488b03a354846bf5d21f51",name:"light/chevron-down"})))),e("div",{key:"6a5220e5cd0f8c38f613e4211463e2adafb81d57",class:"duet-date__nav"},e("button",{key:"59f20fa24939df05a746fab1e0f122656a8f22a3",class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:r,type:"button"},e("nano-icon",{key:"0dc03af75cc61f12d15c2b33cc176f1d7c9f7428",name:"light/chevron-left"}),e("span",{key:"041f653c9c9c6ddda1bfbf9ca713f1fb978ab387",class:"duet-date__vhidden"},this.localization.prevMonthLabel)),e("button",{key:"0e5e15bf3648612c8df0d25c8d2eb8a66c2acba1",class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},e("nano-icon",{key:"b7be1f142a318fbca29bbaa99f8926f5a4af789f",name:"light/chevron-right"}),e("span",{key:"f96c71e9a92ee19c90ac6c244220c0ae1e0769e3",class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),e("div",{key:"82c4e92386f93a765db8504d374529c06e321898"},e(S,{key:"6cebbdb7ac3024bac0c01fd75098b23eb3ee1696",selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:n,max:c,isDateDisabled:this.isDateDisabled}))))))}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};C.style=F;export{C as nano_date_picker};
 //# sourceMappingURL=nano-date-picker.entry.js.map